Add form design for generic Git import

Author: MarkRobbo

NOTICE.md

@@ -76,6 +76,12 @@ For more information regarding the authorized uses of these items please [contac
 
 -----------
 
+# Git logo
+img/gitlogo.png
+Git Logo by Jason Long is licensed under the [Creative Commons Attribution 3.0 Unported License](https://creativecommons.org/licenses/by/3.0/)
+
+-----------
+
 # European Union flag
 img/Flag_of_Europe.svg
 Public Domain

src/main/resources/static/css/main-20170616.css

@@ -86,6 +86,12 @@ body {
     padding-left: 45px;
 }
 
+#repoURL {
+    background: url("/img/gitlogo.png") no-repeat scroll 4px 1px;
+    background-size: 30px 30px;
+    padding-left: 45px;
+}
+
 #githubLogo {
     margin-right: 5px;
 }

src/main/resources/static/img/gitlogo.png

@@ -45,6 +45,8 @@ <h1>Common Workflow Language Viewer</h1>
                         <p>Want to generate visualisations in build scripts or from another automated process? Find out about <a href="/apidocs" alt="API Documentation">our API</a></p>
                     </div>
 
+                    <hr/>
+
                     <h2>Workflow from Github URL</h2>
                     <p>Provide a Github link to the workflow here</p>
                     <form id="add" action="#" th:action="@{/workflows}" th:object="${workflowForm}" method="POST">
@@ -65,12 +67,41 @@ <h2>Workflow from Github URL</h2>
                             or <a href="/workflows">explore the collection</a>
                         </div>
                         <div class="input-group">
-                            <input type="text" class="form-control" placeholder="Github URL" id="githubURL" name="githubURL" th:field="*{githubURL}" th:value="${formURL}" />
+                            <label for="githubURL" class="sr-only">Github URL</label>
+                            <input type="text" class="form-control" placeholder="Github URL" id="githubURL" name="githubURL" th:field="*{githubURL}" th:value="${formURL}" required="true" />
                             <span class="input-group-btn">
                                 <button class="btn btn-primary" type="submit">Parse Workflow</button>
                             </span>
                         </div>
                     </form>
+
+                    <hr/>
+
+                    <h2>Workflow from Git Details</h2>
+                    <p>Provide the repository URL, path and branch details for the workflow here</p>
+                    <form id="git" action="#" th:action="@{/workflows}" th:object="${workflowForm}" method="POST">
+                        <div class="alert alert-danger" th:if="${errors} != null and ${errors.hasErrors()}">
+                            <div th:each="error : ${errors.getAllErrors()}">
+                                <strong>Error:</strong> <span th:text="${error.getDefaultMessage()}">Error message here</span>
+                            </div>
+                        </div>
+                        <div class="alert alert-danger" th:if="${#fields.hasErrors('githubURL')}">
+                            <strong>Error:</strong> <span th:errors="*{githubURL}">Error message here</span>
+                        </div>
+                        <label for="repoURL">Repository URL</label>
+                        <input type="text" class="form-control" placeholder="Repository URL (HTTPS)" id="repoURL" name="repoURL" th:field="*{githubURL}" th:value="${formURL}" required="true" />
+                        <div class="row" style="margin-top:10px;margin-bottom:10px;">
+                            <div class="col-md-6">
+                                <label for="branch">Branch Name/Commit ID</label>
+                                <input type="text" class="form-control" placeholder="Branch Name or Commit ID" name="branch" required="true" />
+                            </div>
+                            <div class="col-md-6">
+                                <label for="path">Path to Workflow</label>
+                                <input type="text" class="form-control" placeholder="/path/to/workflow.cwl" name="path" required="true" />
+                            </div>
+                        </div>
+                        <button class="btn btn-primary pull-right" type="submit">Parse Workflow</button>
+                    </form>
                 </div>
             </div>
         </div>