Login validation

src/app/controllers/loginCtrl.js

@@ -8,15 +8,27 @@ function (angular, config) {
   var module = angular.module('grafana.controllers');
 
   module.controller('LoginCtrl', function($scope, backendSrv, $location, $routeParams, alertSrv) {
-    $scope.loginModel = {
+
+    $scope.formModel = {
       user: '',
-      password: ''
+      email: '',
+      password: '',
     };
 
-    $scope.newUser = {};
-
     $scope.grafana.sidemenu = false;
     $scope.loginMode = true;
+    $scope.submitBtnClass = 'btn-inverse';
+    $scope.submitBtnText = 'Log in';
+    $scope.strengthClass = '';
+
+    $scope.init = function() {
+      if ($routeParams.logout) {
+        $scope.logout();
+      }
+
+      $scope.$watch("loginMode", $scope.loginModeChanged);
+      $scope.passwordChanged();
+    };
 
     // build info view model
     $scope.buildInfo = {
@@ -33,26 +45,29 @@ function (angular, config) {
       }
     };
 
-    $scope.getSubmitBtnClass = function() {
-      if ($scope.loginForm.$valid) {
-        return "btn-primary";
-      } else {
-        return "btn-inverse";
-      }
+    $scope.loginModeChanged = function(newValue) {
+      $scope.submitBtnText = newValue ? 'Log in' : 'Sign up';
     };
 
-    $scope.getSubmitBtnText = function() {
-      if ($scope.loginMode) {
-        return "Log in";
-      } else {
-        return "Sign up";
+    $scope.passwordChanged = function(newValue) {
+      if (!newValue) {
+        $scope.strengthText = "";
+        $scope.strengthClass = "hidden";
+        return;
       }
-    };
-
-    $scope.init = function() {
-      if ($routeParams.logout) {
-        $scope.logout();
+      if (newValue.length < 4) {
+        $scope.strengthText = "strength: weak sauce.";
+        $scope.strengthClass = "password-strength-bad";
+        return;
       }
+      if (newValue.length <= 6) {
+        $scope.strengthText = "strength: you can do better.";
+        $scope.strengthClass = "password-strength-ok";
+        return;
+      }
+
+      $scope.strengthText = "strength: strong like a bull.";
+      $scope.strengthClass = "password-strength-good";
     };
 
     $scope.signUp = function() {
@@ -60,7 +75,7 @@ function (angular, config) {
         return;
       }
 
-      backendSrv.put('/api/user/signup', $scope.newUser).then(function() {
+      backendSrv.put('/api/user/signup', $scope.formModel).then(function() {
         window.location.href = config.appSubUrl + '/';
       });
     };
@@ -80,7 +95,7 @@ function (angular, config) {
         return;
       }
 
-      backendSrv.post('/login', $scope.loginModel).then(function() {
+      backendSrv.post('/login', $scope.formModel).then(function() {
         window.location.href = config.appSubUrl + '/';
       });
     };

src/app/directives/tip.js

@@ -18,6 +18,21 @@ function (angular, kbn) {
       };
     });
 
+  angular
+    .module('grafana.directives')
+    .directive('watchChange', function() {
+      return {
+        scope: { onchange: '&watchChange' },
+        link: function(scope, element) {
+          element.on('input', function() {
+            scope.$apply(function () {
+              scope.onchange({ inputValue: element.val() });
+            });
+          });
+        }
+      };
+    });
+
   angular
     .module('grafana.directives')
     .directive('editorOptBool', function($compile) {

src/app/partials/login.html

@@ -23,7 +23,7 @@
 							<strong>User</strong>
             </li>
             <li>
-              <input type="text" class="tight-form-input last" ng-model='loginModel.user' placeholder="email or username" style="width: 246px">
+              <input type="text" class="tight-form-input last" ng-model='formModel.user' placeholder="email or username" style="width: 246px">
             </li>
           </ul>
           <div class="clearfix"></div>
@@ -34,11 +34,11 @@
 							<strong>Password</strong>
             </li>
             <li>
-							<input type="password" class="tight-form-input last" required ng-model="loginModel.password" id="inputPassword" style="width: 246px" placeholder="password">
+							<input type="password" class="tight-form-input last" required ng-model="formModel.password" id="inputPassword" style="width: 246px" placeholder="password">
             </li>
           </ul>
           <div class="clearfix"></div>
-        </div>
+				</div>
 
 				<div class="tight-form" ng-if="!loginMode">
           <ul class="tight-form-list">
@@ -46,7 +46,7 @@
 							<strong>Email</strong>
             </li>
             <li>
-              <input type="email" class="tight-form-input last" required ng-model='newUser.email' placeholder="email" style="width: 246px">
+              <input type="email" class="tight-form-input last" required ng-model='formModel.email' placeholder="email" style="width: 246px">
             </li>
           </ul>
           <div class="clearfix"></div>
@@ -58,16 +58,21 @@
 							<strong>Password</strong>
             </li>
             <li>
-							<input type="password" class="tight-form-input last" required ng-model='newUser.password' placeholder="password" style="width: 246px">
+							<input type="password" class="tight-form-input last" watch-change="passwordChanged(inputValue)" ng-minlength="4" required ng-model='formModel.password' placeholder="password" style="width: 246px">
             </li>
           </ul>
           <div class="clearfix"></div>
         </div>
 
+				<div class="password-strength small" ng-if="!loginMode" ng-class="strengthClass">
+					<em>{{strengthText}}</em>
+				</div>
+
 
 				<div class="login-submit-button-row">
-					<button type="submit" class="btn" ng-class="getSubmitBtnClass()" ng-click="submit();">
-						{{getSubmitBtnText()}}
+					<button type="submit" class="btn" ng-click="submit();"
+						      ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
+						{{submitBtnText}}
 					</button>
 				</div>
 			</form>

src/css/less/p_pro.less

@@ -135,6 +135,25 @@
   color: @textColor;
 }
 
+.password-strength {
+  display: block;
+  width: 50px;
+  overflow: visible;
+  white-space: nowrap;
+  padding-top: 3px;
+  margin-left: 97px;
+  color: darken(@textColor, 20%);
+  border-top: 3px solid @red;
+  &.password-strength-ok {
+    width: 170px;
+    border-top: 3px solid lighten(@yellow, 10%);
+  }
+  &.password-strength-good {
+    width: 254px;
+    border-top: 3px solid lighten(@green, 10%);
+  }
+}
+
 .login-submit-button-row {
   text-align: center;
   margin-top: 40px;