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>

1 files changed, 8 insertions, 6 deletions

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;
               }
             }
           });