diff --git a/src/app/controllers/loginCtrl.js b/src/app/controllers/loginCtrl.js index 752e1e26cb4..3f109709167 100644 --- a/src/app/controllers/loginCtrl.js +++ b/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 = { - user: '', - password: '' - }; - $scope.newUser = {}; + $scope.formModel = { + user: '', + email: '', + password: '', + }; $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; + } + 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.init = function() { - if ($routeParams.logout) { - $scope.logout(); - } + $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 + '/'; }); }; diff --git a/src/app/directives/tip.js b/src/app/directives/tip.js index 895015cb671..a0aac161bb2 100644 --- a/src/app/directives/tip.js +++ b/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) { diff --git a/src/app/partials/login.html b/src/app/partials/login.html index 68e80ef6139..4c70be392af 100644 --- a/src/app/partials/login.html +++ b/src/app/partials/login.html @@ -23,7 +23,7 @@ User
  • - +
  • @@ -34,11 +34,11 @@ Password
  • - +
  • - +
    @@ -58,16 +58,21 @@ Password
  • - +
  • +
    + {{strengthText}} +
    +
    -
    diff --git a/src/css/less/p_pro.less b/src/css/less/p_pro.less index e79105cf5bd..b3d65e9acc5 100644 --- a/src/css/less/p_pro.less +++ b/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;