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> {
}
render() {
const { model } = this.props;
if (!model) {
return null;
}
return (
<div className="page-header-canvas">
<div className="page-container">
<div className="page-header">
{this.renderHeaderTitle(this.props.model.main)}
{this.props.model.main.children && <Navigation main={this.props.model.main} />}
{this.renderHeaderTitle(model.main)}
{model.main.children && <Navigation main={model.main} />}
</div>
</div>
</div>
......
public/app/core/controllers/reset_password_ctrl.ts
......@@ -14,6 +14,17 @@ export class ResetPasswordCtrl {
$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() {
if (!$scope.sendResetForm.$valid) {
return;
......
public/app/core/controllers/signup_ctrl.ts
......@@ -26,6 +26,17 @@ export class SignUpCtrl {
$scope.verifyEmailEnabled = 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 => {
$scope.verifyEmailEnabled = options.verifyEmailEnabled;
$scope.autoAssignOrg = options.autoAssignOrg;
......
public/app/partials/reset_password.html
<div class="login-container container">
<div class="login-content">
<div class="login-branding">
<img class="logo-icon" src="public/img/grafana_icon.svg" alt="Grafana" />
<i class="icon-gf icon-gf-grafana_wordmark"></i>
</div>
<div class="login-inner-box">
<div class="login-tab-header">
<button class="btn-login-tab" class="active">
Reset password
</button>
<page-header model="navModel"></page-header>
<div class="page-container page-body">
<div class="signup">
<h3 class="p-b-1">Reset password</h3>
<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">
<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>
<br />
<br />
<form name="resetForm" class="login-form gf-form-group" ng-show="mode === 'reset'">
<div class="gf-form">
<span class="gf-form-label width-10">New Password</span>
<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;">
</div>
<div class="gf-form">
<span class="gf-form-label width-10">Confirm Password</span>
<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>
</form>
<div 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 class="p-t-1">
<a href="/login" class="btn btn-success p-t-1">
Login
</a>
</div>
</div>
</div>
</div>
public/app/partials/signup_step2.html
<div class="container">
<div class="signup-page-background">
</div>
<div class="login-content">
<div class="login-branding">
<img class="logo-icon" src="public/img/grafana_icon.svg" alt="Grafana" />
<i class="icon-gf icon-gf-grafana_wordmark"></i>
</div>
<div class="invite-box">
<h3>
You're almost there.
</h3>
<div class="modal-tagline">
We just need a couple of more bits of<br> information to finish creating your account.
</div>
<div style="display: inline-block; margin-top: 25px; width: 300px">
<div class="editor-option">
<label class="small">Your email:</label>
<span class="large">{{formModel.email}}</span>
</div>
</div>
<br>
<br>
<form name="signUpForm" class="login-form gf-form-group">
<div class="gf-form" ng-if="verifyEmailEnabled">
<span class="gf-form-label width-9">
Email code<tip>Email verification code (sent to your email)</tip>
</span>
<input type="text" class="gf-form-input max-width-14" ng-model="formModel.code" required></input>
</div>
<div class="gf-form" ng-if="!autoAssignOrg">
<span class="gf-form-label width-9">Org. name</span>
<input type="text" name="orgName" class="gf-form-input max-width-14" ng-model='formModel.orgName' placeholder="Name your organization">
</div>
<div class="gf-form">
<span class="gf-form-label width-9">Your name</span>
<input type="text" name="name" class="gf-form-input max-width-14" ng-model='formModel.name' placeholder="(optional)">
</div>
<div class="gf-form">
<span class="gf-form-label width-9">Username</span>
<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>
<page-header model="navModel"></page-header>
<div class="page-container page-body">
<div class="signup">
<h3 class="p-b-1">You're almost there.</h3>
<div class="p-b-1">
We just need a couple of more bits of<br> information to finish creating your account.
</div>
<form name="signUpForm" class="login-form gf-form-group">
<div class="gf-form" ng-if="verifyEmailEnabled">
<span class="gf-form-label width-9">
Email code<tip>Email verification code (sent to your email)</tip>
</span>
<input type="text" class="gf-form-input max-width-14" ng-model="formModel.code" required></input>
</div>
<div class="gf-form" ng-if="!autoAssignOrg">
<span class="gf-form-label width-9">Org. name</span>
<input type="text" name="orgName" class="gf-form-input max-width-14" ng-model="formModel.orgName" placeholder="Name your organization">
</div>
<div class="gf-form">
<span class="gf-form-label width-9">Your name</span>
<input type="text" name="name" class="gf-form-input max-width-14" ng-model="formModel.name" placeholder="(optional)">
</div>
<div class="gf-form">
<span class="gf-form-label width-9">Email</span>
<input type="text" class="gf-form-input max-width-14" required ng-model="formModel.username" placeholder="Email" 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 class="signup__password-strength">
<password-strength password="formModel.password"></password-strength>
</div>
<div class="gf-form-button-row p-t-3">
<button type="submit" class="btn btn-success" ng-click="ctrl.submit();" ng-disabled="!signUpForm.$valid">
Sign Up
</button>
<a href="/login" class="btn btn-inverse">
Back
</a>
</div>
</form>
</div>
</div>
\ No newline at end of file
public/sass/base/_icons.scss
......@@ -63,6 +63,10 @@
background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg');
}
.gicon-branding {
background-image: url('../img/grafana_icon.svg');
}
.sidemenu {
.gicon-dashboard {
background-image: url('../img/icons_dark_theme/icon_dashboard.svg');
......@@ -70,6 +74,4 @@
.gicon-alert {
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 @@
}
}
.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