IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Login validation

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-01-22 11:51:44 +01:00
parent 1a11b400b0
commit c82e2d74bf
4 changed files with 84 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/app/controllers/loginCtrl.js
View File

@ -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 + '/';
});
};

15
src/app/directives/tip.js
View File

@ -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) {

19
src/app/partials/login.html
View File

@ -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>

19
src/css/less/p_pro.less
View File

@ -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;