Skip to content

N
nexpie-grafana-theme
Commit cb6c6c81 by Patrick O'Carroll
Options

change admin password after first login

parent 21ecaae6
Showing with 183 additions and 58 deletions
public/app/core/controllers/login_ctrl.ts
...@@ -11,10 +11,15 @@ export class LoginCtrl { ...@@ -11,10 +11,15 @@ export class LoginCtrl {
password: '', password: '',
}; };
$scope.command = {};
$scope.result = '';
contextSrv.sidemenu = false; contextSrv.sidemenu = false;
$scope.oauth = config.oauth; $scope.oauth = config.oauth;
$scope.oauthEnabled = _.keys(config.oauth).length > 0; $scope.oauthEnabled = _.keys(config.oauth).length > 0;
$scope.ldapEnabled = config.ldapEnabled;
$scope.authProxyEnabled = config.authProxyEnabled;
$scope.disableLoginForm = config.disableLoginForm; $scope.disableLoginForm = config.disableLoginForm;
$scope.disableUserSignUp = config.disableUserSignUp; $scope.disableUserSignUp = config.disableUserSignUp;
...@@ -39,6 +44,43 @@ export class LoginCtrl { ...@@ -39,6 +44,43 @@ export class LoginCtrl {
} }
}; };
$scope.changeView = function() {
let loginView = document.querySelector('#login-view');
let changePasswordView = document.querySelector('#change-password-view');
loginView.className += ' add';
setTimeout(() => {
loginView.className += ' hidden';
}, 250);
setTimeout(() => {
changePasswordView.classList.remove('hidden');
}, 251);
setTimeout(() => {
changePasswordView.classList.remove('remove');
}, 301);
setTimeout(() => {
document.getElementById('newPassword').focus();
}, 400);
};
$scope.changePassword = function() {
$scope.command.oldPassword = 'admin';
if ($scope.command.newPassword !== $scope.command.confirmNew) {
$scope.appEvent('alert-warning', ['New passwords do not match', '']);
return;
}
backendSrv.put('/api/user/password', $scope.command).then(function() {
$scope.toGrafana();
});
};
$scope.skip = function() {
$scope.toGrafana();
};
$scope.loginModeChanged = function(newValue) { $scope.loginModeChanged = function(newValue) {
$scope.submitBtnText = newValue ? 'Log in' : 'Sign up'; $scope.submitBtnText = newValue ? 'Log in' : 'Sign up';
}; };
...@@ -65,18 +107,28 @@ export class LoginCtrl { ...@@ -65,18 +107,28 @@ export class LoginCtrl {
} }
backendSrv.post('/login', $scope.formModel).then(function(result) { backendSrv.post('/login', $scope.formModel).then(function(result) {
var params = $location.search(); $scope.result = result;
if (params.redirect && params.redirect[0] === '/') { if ($scope.formModel.password !== 'admin' || $scope.ldapEnabled || $scope.authProxyEnabled) {
window.location.href = config.appSubUrl + params.redirect; $scope.toGrafana();
} else if (result.redirectUrl) { return;
window.location.href = result.redirectUrl;
} else {
window.location.href = config.appSubUrl + '/';
} }
$scope.changeView();
}); });
}; };
$scope.toGrafana = function() {
var params = $location.search();
if (params.redirect && params.redirect[0] === '/') {
window.location.href = config.appSubUrl + params.redirect;
} else if ($scope.result.redirectUrl) {
window.location.href = $scope.result.redirectUrl;
} else {
window.location.href = config.appSubUrl + '/';
}
};
$scope.init(); $scope.init();
} }
} }
......
public/app/partials/login.html
...@@ -4,70 +4,101 @@ ...@@ -4,70 +4,101 @@
<img class="logo-icon" src="public/img/grafana_icon.svg" alt="Grafana" /> <img class="logo-icon" src="public/img/grafana_icon.svg" alt="Grafana" />
<i class="icon-gf icon-gf-grafana_wordmark"></i> <i class="icon-gf icon-gf-grafana_wordmark"></i>
</div> </div>
<div class="login-inner-box"> <div class="login-outer-box">
<form name="loginForm" class="login-form-group gf-form-group" ng-hide="disableLoginForm"> <div class="login-inner-box" id="login-view">
<div class="login-form"> <form name="loginForm" class="login-form-group gf-form-group" ng-hide="disableLoginForm">
<input type="text" name="username" class="gf-form-input login-form-input" required ng-model='formModel.user' placeholder={{loginHint}} <div class="login-form">
autofocus> <input type="text" name="username" class="gf-form-input login-form-input" required ng-model='formModel.user' placeholder={{loginHint}}
</div> autofocus>
<div class="login-form"> </div>
<input type="password" name="password" class="gf-form-input login-form-input" required ng-model="formModel.password" id="inputPassword" <div class="login-form">
placeholder="password"> <input type="password" name="password" class="gf-form-input login-form-input" required ng-model="formModel.password" id="inputPassword"
</div> placeholder="password">
<div class="login-button-group"> </div>
<button type="submit" class="btn btn-large p-x-2" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}"> <div class="login-button-group">
Log In <button type="submit" class="btn btn-large p-x-2" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
</button> Log In
</button>
<div class="small login-button-forgot-password"> <div class="small login-button-forgot-password">
<a href="user/password/send-reset-email"> <a href="user/password/send-reset-email">
Forgot your password? Forgot your password?
</a> </a>
</div>
</div> </div>
</div> </form>
</form> <div class="text-center login-divider" ng-show="oauthEnabled">
<div class="text-center login-divider" ng-show="oauthEnabled"> <div>
<div> <div class="login-divider-line">
<div class="login-divider-line"> </div>
</div>
<div>
<span class="login-divider-text">
<span ng-hide="disableLoginForm">or</span>
</span>
</div>
<div>
<div class="login-divider-line">
</div>
</div> </div>
</div> </div>
<div> <div class="clearfix"></div>
<span class="login-divider-text"> <div class="login-oauth text-center" ng-show="oauthEnabled">
<span ng-hide="disableLoginForm">or</span> <a class="btn btn-medium btn-service btn-service--google login-btn" href="login/google" target="_self" ng-if="oauth.google">
</span> <i class="btn-service-icon fa fa-google"></i>
Sign in with Google
</a>
<a class="btn btn-medium btn-service btn-service--github login-btn" href="login/github" target="_self" ng-if="oauth.github">
<i class="btn-service-icon fa fa-github"></i>
Sign in with GitHub
</a>
<a class="btn btn-medium btn-inverse btn-service btn-service--grafanacom login-btn" href="login/grafana_com" target="_self"
ng-if="oauth.grafana_com">
<i class="btn-service-icon"></i>
Sign in with Grafana.com
</a>
<a class="btn btn-medium btn-inverse btn-service btn-service--oauth login-btn" href="login/generic_oauth" target="_self"
ng-if="oauth.generic_oauth">
<i class="btn-service-icon fa fa-sign-in"></i>
Sign in with {{oauth.generic_oauth.name}}
</a>
</div> </div>
<div> <div class="login-signup-box" ng-show="!disableUserSignUp">
<div class="login-divider-line"> <div class="login-signup-title p-r-1">
New to Grafana?
</div> </div>
<a href="signup" class="btn btn-medium btn-signup btn-p-x-2">
Sign Up
</a>
</div> </div>
</div> </div>
<div class="clearfix"></div> <div class="login-inner-box remove hidden" id="change-password-view">
<div class="login-oauth text-center" ng-show="oauthEnabled"> <div class="text-left login-change-password-info">
<a class="btn btn-medium btn-service btn-service--google login-btn" href="login/google" target="_self" ng-if="oauth.google"> <h5>Change Password</h5>
<i class="btn-service-icon fa fa-google"></i> Before you can get started with awesome dashboards we need you to make your account more secure by changing your password.
Sign in with Google <br />You can change your password again later.
</a>
<a class="btn btn-medium btn-service btn-service--github login-btn" href="login/github" target="_self" ng-if="oauth.github">
<i class="btn-service-icon fa fa-github"></i>
Sign in with GitHub
</a>
<a class="btn btn-medium btn-inverse btn-service btn-service--grafanacom login-btn" href="login/grafana_com" target="_self" ng-if="oauth.grafana_com">
<i class="btn-service-icon"></i>
Sign in with Grafana.com
</a>
<a class="btn btn-medium btn-inverse btn-service btn-service--oauth login-btn" href="login/generic_oauth" target="_self" ng-if="oauth.generic_oauth">
<i class="btn-service-icon fa fa-sign-in"></i>
Sign in with {{oauth.generic_oauth.name}}
</a>
</div>
<div class="login-signup-box" ng-show="!disableUserSignUp">
<div class="login-signup-title p-r-1">
New to Grafana?
</div> </div>
<a href="signup" class="btn btn-medium btn-signup btn-p-x-2"> <form class="login-form-group gf-form-group">
Sign Up <div class="login-form">
</a> <input type="password" id="newPassword" name="newPassword" class="gf-form-input login-form-input" required ng-model='command.newPassword'
placeholder="New password">
</div>
<div class="login-form">
<input type="password" name="confirmNew" class="gf-form-input login-form-input" required ng-model="command.confirmNew" placeholder="Confirm new password">
</div>
<div class="login-button-group login-button-group--right text-right">
<a class="btn btn-link" ng-click="skip();">
Skip
<info-popover mode="no-padding">
If you skip you will be promted to change password next time you login.
</info-popover>
</a>
<button type="submit" class="btn btn-large p-x-2" ng-click="changePassword();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-success': loginForm.$valid}">
Save
</button>
</div>
</form>
</div> </div>
<div class="clearfix"></div>
</div> </div>
<div class="clearfix"></div>
</div> </div>
</div> </div>
public/sass/components/_gf-form.scss
...@@ -384,6 +384,10 @@ $input-border: 1px solid $input-border-color; ...@@ -384,6 +384,10 @@ $input-border: 1px solid $input-border-color;
&--header { &--header {
margin-bottom: $gf-form-margin; margin-bottom: $gf-form-margin;
} }
&--no-padding {
padding-left: 0;
}
} }
select.gf-form-input ~ .gf-form-help-icon { select.gf-form-input ~ .gf-form-help-icon {
......
public/sass/pages/_login.scss
...@@ -59,6 +59,14 @@ select:-webkit-autofill:focus { ...@@ -59,6 +59,14 @@ select:-webkit-autofill:focus {
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
margin-top: 0.5rem; margin-top: 0.5rem;
&--right {
justify-content: flex-end;
& .btn {
margin-left: 1rem;
}
}
} }
.login-button-forgot-password { .login-button-forgot-password {
...@@ -75,7 +83,9 @@ select:-webkit-autofill:focus { ...@@ -75,7 +83,9 @@ select:-webkit-autofill:focus {
align-items: stretch; align-items: stretch;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
justify-content: center;
z-index: 1; z-index: 1;
height: 320px;
} }
.login-branding { .login-branding {
...@@ -100,6 +110,11 @@ select:-webkit-autofill:focus { ...@@ -100,6 +110,11 @@ select:-webkit-autofill:focus {
} }
} }
.login-outer-box {
display: flex;
overflow-y: hidden;
}
.login-inner-box { .login-inner-box {
text-align: center; text-align: center;
padding: 2rem 4rem; padding: 2rem 4rem;
...@@ -109,6 +124,22 @@ select:-webkit-autofill:focus { ...@@ -109,6 +124,22 @@ select:-webkit-autofill:focus {
justify-content: center; justify-content: center;
flex-grow: 1; flex-grow: 1;
max-width: 415px; max-width: 415px;
transform: tranlate(0px, 0px);
transition: 0.25s ease;
&.add {
transform: translate(0px, -320px);
&.hidden {
display: none;
}
}
&.remove {
transform: translate(0px, 320px);
&.hidden {
display: none;
}
}
} }
.login-tab-header { .login-tab-header {
...@@ -117,6 +148,13 @@ select:-webkit-autofill:focus { ...@@ -117,6 +148,13 @@ select:-webkit-autofill:focus {
margin-bottom: 3rem; margin-bottom: 3rem;
} }
.login-change-password-info {
padding-bottom: 1.5rem;
& h5 {
text-align: left;
}
}
.btn-signup { .btn-signup {
color: $white; color: $white;
border: 1px solid $login-border; border: 1px solid $login-border;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment