Form validation on login page

Using ngMessages, adds form validation to login page. Also creates a
directive, hasError, to be used to validate form field by passing
in a boolean. This is a proposed pattern to be used moving forward,
as form validation is added to additional pages.

Validation error messages are shown on $touched and on submit.
Unreachable Server and Invalid username and password error messages
remain until input is no longer $pristine after form submission.

In addition, this removes unneeded and unused css styling

Resolves openbmc/phosphor-webui#47

Change-Id: I7a067af67ac74d4cf2977d10f66445720ecae9eb
Signed-off-by: beccabroek <beccabroek@gmail.com>

3 files changed, 33 insertions, 22 deletions

diff --git a/app/login/controllers/login-controller.html b/app/login/controllers/login-controller.html
index b8fdf09..b89c2c4 100644
--- a/app/login/controllers/login-controller.html
+++ b/app/login/controllers/login-controller.html
@@ -4,20 +4,34 @@
       <img src="../../assets/images/logo.svg" class="login__logo" alt="OpenBMC logo"/>
       <h1 class="login__desc">OpenBMC</h1>
     </div>
-    <div class="columns large-6 disabled">
-      <form id="login__form" action="">
-        <label >BMC Host or BMC IP Address</label>
-        <input type="text" ng-model="host" required  ng-class="{'error': error && description != 'Invalid username or password'}" autofocus ng-keydown="tryLogin(host, username, password, $event)" ng-disabled="dataService.loading">
-
-        <label for="username">Username</label>
-        <input type="text" id="username" name="username" required ng-model="username" ng-class="{'error': description == 'Invalid username or password'}" ng-keydown="tryLogin(host, username, password, $event)" ng-disabled="dataService.loading" autocomplete="off">
+    <div class="columns large-6">
+      <form id="login__form" name="login__form" action="" ng-class="{'submitted' : submitted}">
+        <fieldset ng-disabled="dataService.loading">
+          <div class="alert alert-danger" role="alert" ng-if="invalidCredentials">
+            <b>Invalid username or password.</b>
+            <br>Please try again.
+          </div>
+          <label for="host">BMC Host or BMC IP Address</label>
+          <input type="text" id="host" name="host" class="validate-input" ng-model="host" has-error="serverUnreachable && login__form.host.$pristine" required  autofocus ng-keydown="tryLogin(host, username, password, $event)">
+          <div ng-messages="login__form.host.$error" class="form-error" ng-class="{'visible' : login__form.host.$touched || submitted}">
+            <p ng-message="required">Field is required</p>
+            <p ng-message="hasError">Server unreachable</p>
+          </div>
 
-        <label for="password">Password</label>
-        <input type="password" id="password" name="password" required ng-class="{'error': description == 'Invalid username or password'}" ng-model="password" ng-keydown="tryLogin(host, username, password, $event)" ng-disabled="dataService.loading" autocomplete="off">
+          <label for="username">Username</label>
+          <input type="text" id="username" name="username" has-error="invalidCredentials && login__form.$pristine" required ng-model="username" ng-keydown="tryLogin(host, username, password, $event)" autocomplete="off">
+          <div ng-messages="login__form.username.$error" class="form-error" ng-class="{'visible' : login__form.username.$touched || submitted}">
+            <p ng-message="required">Field is required</p>
+          </div>
 
-        <input id="login__submit" class="btn-primary submit" type="button" value="Log in" role="button" ng-click="login(host, username, password)" ng-class="{error: error}" ng-disabled="dataService.loading">
+          <label for="password">Password</label>
+          <input type="password" id="password" name="password" has-error="invalidCredentials && login__form.$pristine" required  ng-model="password" ng-keydown="tryLogin(host, username, password, $event)" autocomplete="off">
+          <div ng-messages="login__form.password.$error" class="form-error" ng-class="{'visible': login__form.password.$touched || submitted}">
+            <p ng-message="required">Field is required</p>
+          </div>
 
-        <p class="login__error-msg error-msg" role="alert" ng-if="error">{{description}}</p>
+          <input id="login__submit" class="btn-primary submit" type="button" value="Log in" role="button" ng-click="login(host, username, password); submitted = true; login__form.$setPristine()" ng-class="{error: error}" ng-disabled="dataService.loading">
+        </fieldset>
       </form>
     </div>
   </div>
diff --git a/app/login/controllers/login-controller.js b/app/login/controllers/login-controller.js
index e31a67e..518ede8 100644
--- a/app/login/controllers/login-controller.js
+++ b/app/login/controllers/login-controller.js
@@ -17,6 +17,8 @@ window.angular && (function(angular) {
     '$location',
     function($scope, $window, dataService, userModel, $location) {
       $scope.dataService = dataService;
+      $scope.serverUnreachable = false;
+      $scope.invalidCredentials = false;
       $scope.host = $scope.dataService.host.replace(/^https?\:\/\//ig, '');
 
       $scope.tryLogin = function(host, username, password, event) {
@@ -27,9 +29,8 @@ window.angular && (function(angular) {
         }
       };
       $scope.login = function(host, username, password) {
-        $scope.error = false;
-        $scope.description = 'Error logging in';
-
+        $scope.serverUnreachable = false;
+        $scope.invalidCredentials = false;
         if (!username || username == '' || !password || password == '' ||
             !host || host == '') {
           return false;
@@ -45,9 +46,10 @@ window.angular && (function(angular) {
                 $window.location.href = next;
               }
             } else {
-              $scope.error = true;
-              if (description) {
-                $scope.description = description;
+              if (description === 'Invalid username or password') {
+                $scope.invalidCredentials = true;
+              } else {
+                $scope.serverUnreachable = true;
               }
             }
           });
diff --git a/app/login/styles/index.scss b/app/login/styles/index.scss
index 0bc424b..07d45bf 100644
--- a/app/login/styles/index.scss
+++ b/app/login/styles/index.scss
@@ -99,8 +99,3 @@
   }
 }
 
-.login__error-msg {
-  @include mediaQuery(medium) {
-    max-width: 100%;
-  }
-}