Skip to content

N
nexpie-grafana-theme
Commit 3c650156 by Torkel Ödegaard
Options

ux: refactoring login page change

parent aa4f1fa9
Showing with 46 additions and 49 deletions
public/app/core/components/Login/Login.tsx
import React, { Component } from 'react';
import React, { Component } from 'react';
const elementsInWidth = 22;
const elementRows = 50;
......@@ -55,7 +55,7 @@ export class Login extends Component {
<login-bg>
<login-bg-fx />
<BgElements flipIndex={this.state.flipIndex} />
</login-bglogin-box>
</login-bg>
);
}
}
......
public/app/core/controllers/invited_ctrl.ts
......@@ -8,6 +8,17 @@ export class InvitedCtrl {
contextSrv.sidemenu = false;
$scope.formModel = {};
$scope.navModel = {
main: {
icon: 'gicon gicon-branding',
subTitle: 'Register your Grafana account',
breadcrumbs: [
{ title: 'Login', url: '/login' },
{ title: 'Invite' },
]
}
};
$scope.init = function() {
backendSrv.get('/api/user/invite/' + $routeParams.code).then(function(invite) {
$scope.formModel.name = invite.name;
......
public/app/core/controllers/reset_password_ctrl.ts
......@@ -19,7 +19,7 @@ export class ResetPasswordCtrl {
icon: 'gicon gicon-branding',
subTitle: 'Reset your Grafana password',
breadcrumbs: [
{ title: 'Login', uri: '/login' },
{ title: 'Login', url: '/login' },
{ title: 'Reset Password' },
]
}
......
public/app/core/controllers/signup_ctrl.ts
......@@ -31,7 +31,7 @@ export class SignUpCtrl {
icon: 'gicon gicon-branding',
subTitle: 'Register your Grafana account',
breadcrumbs: [
{ title: 'Login', uri: '/login' },
{ title: 'Login', url: '/login' },
{ title: 'Sign Up' },
]
}
......
public/app/partials/signup_invited.html
<div class="login-container container">
<page-header model="navModel"></page-header>
<div class="signup-page-background">
</div>
<div class="page-container page-body">
<h3 class="page-sub-heading">Hello {{greeting}}.</h3>
<div class="login-content">
<div class="modal-tagline p-b-2">
<em>{{invitedBy}}</em> has invited you to join Grafana and the organization <span class="highlight-word">{{contextSrv.user.orgName}}</span></br>Please complete the following to accept your invitation and continue:
</div>
<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>
<form name="inviteForm" class="login-form gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-7">Email</span>
<input type="email" name="email" class="gf-form-input max-width-21" required ng-model='formModel.email' placeholder="Email">
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Name</span>
<input type="text" name="name" class="gf-form-input max-width-21" ng-model='formModel.name' placeholder="Name (optional)">
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Username</span>
<input type="text" name="username" class="gf-form-input max-width-21" required ng-model='formModel.username' placeholder="Username">
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Password</span>
<input type="password" name="password" class="gf-form-input max-width-21" required ng-model="formModel.password" id="inputPassword" placeholder="password">
</div>
<div class="invite-box">
<h3>
Hello {{greeting}}.
</h3>
<div class="modal-tagline p-b-2">
<em>{{invitedBy}}</em> has invited you to join Grafana and the organization <span class="highlight-word">{{contextSrv.user.orgName}}</span></br>Please complete the following to accept your invitation and continue:
</div>
<form name="inviteForm" class="login-form gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-7">Email</span>
<input type="email" name="email" class="gf-form-input max-width-21" required ng-model='formModel.email' placeholder="Email">
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Name</span>
<input type="text" name="name" class="gf-form-input max-width-21" ng-model='formModel.name' placeholder="Name (optional)">
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Username</span>
<input type="text" name="username" class="gf-form-input max-width-21" required ng-model='formModel.username' placeholder="Username">
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Password</span>
<input type="password" name="password" class="gf-form-input max-width-21" required ng-model="formModel.password" id="inputPassword" placeholder="password">
</div>
<div style="margin-left: 7.5rem; width: 254px;">
<password-strength password="formModel.password"></password-strength>
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-inverse" ng-click="submit();" ng-class="{'btn-inverse': !inviteForm.$valid, 'btn-primary': inviteForm.$valid}">
Continue
</button>
</div>
</form>
<div style="margin-left: 7.5rem; width: 254px;">
<password-strength password="formModel.password"></password-strength>
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="submit();" ng-disable="!inviteForm.$valid">
Sign Up
</button>
</div>
</div>
</form>
</div>
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