Add GUI validations for node and repo editors (fixes #153)

gui/index.html

@@ -131,7 +131,7 @@
         <div class="panel panel-default">
           <div class="panel-heading"><h3 class="panel-title">Repositories</h3></div>
           <div class="panel-body">
-            <ul class="list-unstyled" ng-repeat="repo in repos">
+            <ul class="list-unstyled" ng-repeat="repo in repoList()">
               <li>
                 <span class="text-monospace">{{repo.Directory}}</span>
                 <span ng-if="model[repo.ID].invalid" class="label label-danger">{{model[repo.ID].invalid}}</span>
@@ -358,12 +358,15 @@
           <h4 ng-show="editingExisting" class="modal-title">Edit Node</h4>
         </div>
         <div class="modal-body">
-          <form role="form">
-            <div class="form-group">
+          <form role="form" name="nodeEditor">
+            <div class="form-group" ng-class="{'has-error': nodeEditor.nodeID.$invalid && nodeEditor.nodeID.$dirty}">
               <label for="nodeID">Node ID</label>
-              <input ng-if="!editingExisting" id="nodeID" class="form-control" type="text" ng-model="currentNode.NodeID"></input>
+              <input ng-if="!editingExisting" name="nodeID" id="nodeID" class="form-control" type="text" ng-model="currentNode.NodeID" required></input>
               <div ng-if="editingExisting" class="well well-sm">{{currentNode.NodeID | chunkID}}</div>
-              <p class="help-block">The node ID can be found in the "Add Node" dialog on the other node. Spaces are ignored.</p>
+              <p class="help-block">
+                <span ng-if="nodeEditor.nodeID.$valid || nodeEditor.nodeID.$pristine">The node ID to enter here can be found in the "Add Node" dialog on the other node. Spaces are ignored.</span>
+                <span ng-if="nodeEditor.nodeID.$error.required && nodeEditor.nodeID.$dirty">The node ID cannot be blank.</span>
+              </p>
             </div>
             <div class="form-group">
               <label for="name">Name</label>
@@ -382,7 +385,7 @@
           </div>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-primary" ng-click="saveNode()">Save</button>
+          <button type="button" class="btn btn-primary" ng-click="saveNode()" ng-disabled="nodeEditor.$invalid">Save</button>
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           <button ng-if="editingExisting && !editingSelf" type="button" class="btn btn-danger pull-left" ng-click="deleteNode()">Delete</button>
         </div>
@@ -401,16 +404,23 @@
           <h4 ng-show="editingExisting" class="modal-title">Edit Repository</h4>
         </div>
         <div class="modal-body">
-          <form role="form">
-            <div class="form-group">
+          <form role="form" name="repoEditor">
+            <div class="form-group" ng-class="{'has-error': repoEditor.repoID.$invalid && repoEditor.repoID.$dirty}">
               <label for="repoID">Repository ID</label>
-              <input placeholder="documents" ng-disabled="editingExisting" id="repoID" class="form-control" type="text" ng-model="currentRepo.ID"></input>
-              <p class="help-block">Short, unique identifier for the repository. Must be the same on all cluster nodes.</p>
+              <input name="repoID" placeholder="documents" ng-disabled="editingExisting" id="repoID" class="form-control" type="text" ng-model="currentRepo.ID" required unique-repo></input>
+              <p class="help-block">
+              <span ng-if="repoEditor.repoID.$valid || repoEditor.repoID.$pristine">Short identifier for the repository. Must be the same on all cluster nodes.</span>
+              <span ng-if="repoEditor.repoID.$error.uniqueRepo">The repository ID must be unique.</span>
+              <span ng-if="repoEditor.repoID.$error.required && repoEditor.repoID.$dirty">The repository ID cannot be blank.</span>
+              </p>
             </div>
-            <div class="form-group">
+            <div class="form-group" ng-class="{'has-error': repoEditor.repoPath.$invalid && repoEditor.repoPath.$dirty}">
               <label for="repoPath">Repository Path</label>
-              <input placeholder="~/Documents" id="repoPath" class="form-control" type="text" ng-model="currentRepo.Directory"></input>
-              <p class="help-block">Path to the repository on the local computer. Will be created if it does not exist.</p>
+              <input name="repoPath" placeholder="~/Documents" id="repoPath" class="form-control" type="text" ng-model="currentRepo.Directory" required></input>
+              <p class="help-block">
+              <span ng-if="repoEditor.repoPath.$valid || repoEditor.repoPath.$pristine">Path to the repository on the local computer. Will be created if it does not exist.</span>
+              <span ng-if="repoEditor.repoPath.$error.required && repoEditor.repoPath.$dirty">The repository path cannot be blank.</span>
+              </p>
             </div>
             <div class="form-group">
               <div class="checkbox">
@@ -435,7 +445,7 @@
           </div>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-primary" ng-click="saveRepo()">Save</button>
+          <button type="button" class="btn btn-primary" ng-click="saveRepo()" ng-disabled="repoEditor.$invalid">Save</button>
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           <button ng-if="editingExisting" type="button" class="btn btn-danger pull-left" ng-click="deleteRepo()">Delete</button>
         </div>