Skip to content

N
nexpie-grafana-theme
Commit 0be97893 by Johannes Schill
Options

ux: Move "Sign up" and "Reset password" to its own pages - and remove all inline styling (#9879)

parent 6a2b1e52
Showing with 119 additions and 145 deletions
public/app/core/components/PageHeader/PageHeader.tsx
...@@ -113,12 +113,18 @@ export default class PageHeader extends React.Component<IProps, any> { ...@@ -113,12 +113,18 @@ export default class PageHeader extends React.Component<IProps, any> {
} }
render() { render() {
const { model } = this.props;
if (!model) {
return null;
}
return ( return (
<div className="page-header-canvas"> <div className="page-header-canvas">
<div className="page-container"> <div className="page-container">
<div className="page-header"> <div className="page-header">
{this.renderHeaderTitle(this.props.model.main)} {this.renderHeaderTitle(model.main)}
{this.props.model.main.children && <Navigation main={this.props.model.main} />} {model.main.children && <Navigation main={model.main} />}
</div> </div>
</div> </div>
</div> </div>
......
public/app/core/controllers/reset_password_ctrl.ts
...@@ -14,6 +14,17 @@ export class ResetPasswordCtrl { ...@@ -14,6 +14,17 @@ export class ResetPasswordCtrl {
$scope.formModel.code = params.code; $scope.formModel.code = params.code;
} }
$scope.navModel = {
main: {
icon: 'gicon gicon-branding',
subTitle: 'Reset your Grafana password',
breadcrumbs: [
{ title: 'Login', uri: '/login' },
{ title: 'Reset Password' },
]
}
};
$scope.sendResetEmail = function() { $scope.sendResetEmail = function() {
if (!$scope.sendResetForm.$valid) { if (!$scope.sendResetForm.$valid) {
return; return;
......
public/app/core/controllers/signup_ctrl.ts
...@@ -26,6 +26,17 @@ export class SignUpCtrl { ...@@ -26,6 +26,17 @@ export class SignUpCtrl {
$scope.verifyEmailEnabled = false; $scope.verifyEmailEnabled = false;
$scope.autoAssignOrg = false; $scope.autoAssignOrg = false;
$scope.navModel = {
main: {
icon: 'gicon gicon-branding',
subTitle: 'Register your Grafana account',
breadcrumbs: [
{ title: 'Login', uri: '/login' },
{ title: 'Sign Up' },
]
}
};
backendSrv.get('/api/user/signup/options').then(options => { backendSrv.get('/api/user/signup/options').then(options => {
$scope.verifyEmailEnabled = options.verifyEmailEnabled; $scope.verifyEmailEnabled = options.verifyEmailEnabled;
$scope.autoAssignOrg = options.autoAssignOrg; $scope.autoAssignOrg = options.autoAssignOrg;
......
public/app/partials/reset_password.html
<div class="login-container container"> <page-header model="navModel"></page-header>
<div class="login-content"> <div class="page-container page-body">
<div class="signup">
<div class="login-branding"> <h3 class="p-b-1">Reset password</h3>
<img class="logo-icon" src="public/img/grafana_icon.svg" alt="Grafana" /> <form name="sendResetForm" class="login-form gf-form-group" ng-show="mode === 'send'">
<i class="icon-gf icon-gf-grafana_wordmark"></i> <div class="gf-form">
</div> <span class="gf-form-label width-7">User</span>
<input type="text" name="username" class="gf-form-input max-width-14" required ng-model='formModel.userOrEmail' placeholder="email or username">
<div class="login-inner-box">
<div class="login-tab-header">
<button class="btn-login-tab" class="active">
Reset password
</button>
</div> </div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="sendResetEmail();" ng-disabled="!sendResetForm.$valid">
Reset Password
</button>
<a href="/login" class="btn btn-inverse">
Back
</a>
<form name="sendResetForm" class="login-form gf-form-group" ng-show="mode === 'send'">
<div class="gf-form">
<span class="gf-form-label width-7">User</span>
<input type="text" name="username" class="gf-form-input max-width-14" required ng-model='formModel.userOrEmail' placeholder="email or username">
</div>
<div class="gf-form-button-row">
<br />
<br />
<button type="submit" class="btn btn-large" ng-click="sendResetEmail();" ng-class="{'btn-inverse': !sendResetForm.$valid, 'btn-primary': sendResetForm.$valid}">
Reset Password
</button>
</div>
</form>
<div style="text-align: center; padding: 20px;" ng-if="mode === 'email-sent'">
An email with a reset link as been sent to the email address. <br>
You should receive it shortly.
</div> </div>
</form>
<br /> <div ng-if="mode === 'email-sent'">
<br /> An email with a reset link as been sent to the email address. <br>
You should receive it shortly.
<form name="resetForm" class="login-form gf-form-group" ng-show="mode === 'reset'"> <div class="p-t-1">
<div class="gf-form"> <a href="/login" class="btn btn-success p-t-1">
<span class="gf-form-label width-10">New Password</span> Login
<input type="password" name="NewPassword" class="gf-form-input max-width-14" required ng-minlength="4" ng-model='formModel.newPassword' placeholder="password" watch-change="formModel.newPassword = inputValue;"> </a>
</div> </div>
<div class="gf-form"> </div>
<span class="gf-form-label width-10">Confirm Password</span> </div>
<input type="password" name="ConfirmPassword" class="gf-form-input max-width-14" required ng-minlength="4" ng-model='formModel.confirmPassword' placeholder="confirm password">
</div>
<div style="margin-left: 141px; width: 207px;">
<password-strength password="formModel.newPassword"></password-strength>
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn" ng-click="submitReset();" ng-class="{'btn-inverse': !resetForm.$valid, 'btn-primary': resetForm.$valid}">
Reset Password
</button>
</div>
</form>
<div style="margin-top: 20px">
<div class="text-center">
<a href="login">Back to login</a>
</div>
</div>
</div>
</div>
</div> </div>
public/app/partials/signup_step2.html
<div class="container"> <page-header model="navModel"></page-header>
<div class="signup-page-background"> <div class="page-container page-body">
</div> <div class="signup">
<h3 class="p-b-1">You're almost there.</h3>
<div class="login-content"> <div class="p-b-1">
We just need a couple of more bits of<br> information to finish creating your account.
<div class="login-branding"> </div>
<img class="logo-icon" src="public/img/grafana_icon.svg" alt="Grafana" /> <form name="signUpForm" class="login-form gf-form-group">
<i class="icon-gf icon-gf-grafana_wordmark"></i> <div class="gf-form" ng-if="verifyEmailEnabled">
</div> <span class="gf-form-label width-9">
Email code<tip>Email verification code (sent to your email)</tip>
<div class="invite-box"> </span>
<h3> <input type="text" class="gf-form-input max-width-14" ng-model="formModel.code" required></input>
You're almost there. </div>
</h3>
<div class="gf-form" ng-if="!autoAssignOrg">
<div class="modal-tagline"> <span class="gf-form-label width-9">Org. name</span>
We just need a couple of more bits of<br> information to finish creating your account. <input type="text" name="orgName" class="gf-form-input max-width-14" ng-model="formModel.orgName" placeholder="Name your organization">
</div> </div>
<div style="display: inline-block; margin-top: 25px; width: 300px"> <div class="gf-form">
<div class="editor-option"> <span class="gf-form-label width-9">Your name</span>
<label class="small">Your email:</label> <input type="text" name="name" class="gf-form-input max-width-14" ng-model="formModel.name" placeholder="(optional)">
<span class="large">{{formModel.email}}</span> </div>
</div> <div class="gf-form">
</div> <span class="gf-form-label width-9">Email</span>
<br> <input type="text" class="gf-form-input max-width-14" required ng-model="formModel.username" placeholder="Email" autocomplete="off">
<br> </div>
<div class="gf-form">
<form name="signUpForm" class="login-form gf-form-group"> <span class="gf-form-label width-9">Password</span>
<input type="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off">
<div class="gf-form" ng-if="verifyEmailEnabled"> </div>
<span class="gf-form-label width-9">
Email code<tip>Email verification code (sent to your email)</tip> <div class="signup__password-strength">
</span> <password-strength password="formModel.password"></password-strength>
<input type="text" class="gf-form-input max-width-14" ng-model="formModel.code" required></input> </div>
</div>
<div class="gf-form-button-row p-t-3">
<div class="gf-form" ng-if="!autoAssignOrg"> <button type="submit" class="btn btn-success" ng-click="ctrl.submit();" ng-disabled="!signUpForm.$valid">
<span class="gf-form-label width-9">Org. name</span> Sign Up
<input type="text" name="orgName" class="gf-form-input max-width-14" ng-model='formModel.orgName' placeholder="Name your organization"> </button>
</div> <a href="/login" class="btn btn-inverse">
Back
<div class="gf-form"> </a>
<span class="gf-form-label width-9">Your name</span> </div>
<input type="text" name="name" class="gf-form-input max-width-14" ng-model='formModel.name' placeholder="(optional)"> </form>
</div> </div>
<div class="gf-form"> </div>
<span class="gf-form-label width-9">Username</span> \ No newline at end of file
<input type="text" class="gf-form-input max-width-14" required ng-model='formModel.username' placeholder="Username" autocomplete="off">
</div>
<div class="gf-form">
<span class="gf-form-label width-9">Password</span>
<input type="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off">
</div>
<div style="margin-left: 9rem; width: 194px;">
<password-strength password="formModel.password"></password-strength>
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn" ng-click="ctrl.submit();" ng-class="{'btn-inverse': !signUpForm.$valid, 'btn-primary': signUpForm.$valid}">
Continue
</button>
</div>
</form>
</div>
</div>
</div>
public/sass/base/_icons.scss
...@@ -63,6 +63,10 @@ ...@@ -63,6 +63,10 @@
background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg'); background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg');
} }
.gicon-branding {
background-image: url('../img/grafana_icon.svg');
}
.sidemenu { .sidemenu {
.gicon-dashboard { .gicon-dashboard {
background-image: url('../img/icons_dark_theme/icon_dashboard.svg'); background-image: url('../img/icons_dark_theme/icon_dashboard.svg');
...@@ -70,6 +74,4 @@ ...@@ -70,6 +74,4 @@
.gicon-alert { .gicon-alert {
background-image: url('../img/icons_dark_theme/icon_alert.svg'); background-image: url('../img/icons_dark_theme/icon_alert.svg');
} }
} }
\ No newline at end of file
public/sass/pages/_signup.scss
...@@ -15,3 +15,8 @@ ...@@ -15,3 +15,8 @@
} }
} }
.signup__password-strength {
position: absolute;
margin-left: 9rem;
width: 194px;
}
\ No newline at end of file
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