mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Merge remote-tracking branch 'origin/9879-login' into develop-login2
This commit is contained in:
Torkel Ödegaard
commit
aa4f1fa971
@ -2,9 +2,11 @@ import { react2AngularDirective } from 'app/core/utils/react2angular';
|
|||||||
import { PasswordStrength } from './components/PasswordStrength';
|
import { PasswordStrength } from './components/PasswordStrength';
|
||||||
import PageHeader from './components/PageHeader/PageHeader';
|
import PageHeader from './components/PageHeader/PageHeader';
|
||||||
import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
|
import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
|
||||||
|
// import { Login } from './components/Login/Login';
|
||||||
|
|
||||||
export function registerAngularDirectives() {
|
export function registerAngularDirectives() {
|
||||||
react2AngularDirective('passwordStrength', PasswordStrength, ['password']);
|
react2AngularDirective('passwordStrength', PasswordStrength, ['password']);
|
||||||
react2AngularDirective('pageHeader', PageHeader, ['model', 'noTabs']);
|
react2AngularDirective('pageHeader', PageHeader, ['model', 'noTabs']);
|
||||||
react2AngularDirective('emptyListCta', EmptyListCTA, ['model']);
|
react2AngularDirective('emptyListCta', EmptyListCTA, ['model']);
|
||||||
|
// react2AngularDirective('login', Login, []);
|
||||||
}
|
}
|
||||||
|
|||||||
1228
public/app/core/components/Login/Login.tsx
Normal file
1228
public/app/core/components/Login/Login.tsx
Normal file
File diff suppressed because it is too large
Load Diff
@ -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>
|
||||||
|
|||||||
@ -11,15 +11,20 @@ export class PasswordStrength extends React.Component<IProps, any> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { password } = this.props;
|
||||||
let strengthText = "strength: strong like a bull.";
|
let strengthText = "strength: strong like a bull.";
|
||||||
let strengthClass = "password-strength-good";
|
let strengthClass = "password-strength-good";
|
||||||
|
|
||||||
if (this.props.password.length <= 8) {
|
if (!password) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password.length <= 8) {
|
||||||
strengthText = "strength: you can do better.";
|
strengthText = "strength: you can do better.";
|
||||||
strengthClass = "password-strength-ok";
|
strengthClass = "password-strength-ok";
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.props.password.length < 4) {
|
if (password.length < 4) {
|
||||||
strengthText = "strength: weak sauce.";
|
strengthText = "strength: weak sauce.";
|
||||||
strengthClass = "password-strength-bad";
|
strengthClass = "password-strength-bad";
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -3,9 +3,9 @@
|
|||||||
<div class="signup-page-background">
|
<div class="signup-page-background">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="login-box">
|
<div class="login-content">
|
||||||
|
|
||||||
<div class="login-box-logo">
|
<div class="login-branding">
|
||||||
<img src="img/logo_transparent_200x75.png">
|
<img src="img/logo_transparent_200x75.png">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -1,85 +1,73 @@
|
|||||||
<div class="login-container container">
|
<div class="login container">
|
||||||
|
<div class="login-content">
|
||||||
<div class="login-box">
|
<div class="login-branding">
|
||||||
|
<img class="logo-icon" src="public/img/grafana_icon.svg" alt="Grafana" />
|
||||||
<div class="login-box-logo">
|
<i class="icon-gf icon-gf-grafana_wordmark"></i>
|
||||||
<img class="logo-icon" src="public/img/grafana_icon.svg"></img><br>
|
</div>
|
||||||
<i class="icon-gf icon-gf-grafana_wordmark"></i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login-inner-box">
|
<div class="login-inner-box">
|
||||||
<div class="login-tab-header">
|
<form name="loginForm" class="login-form-group gf-form-group" ng-hide="disableLoginForm">
|
||||||
<button class="btn-login-tab" ng-click="loginMode = true;" ng-class="{active: loginMode}">
|
<div class="login-form">
|
||||||
Log in
|
<input type="text" name="username" class="gf-form-input login-form-input" required ng-model='formModel.user' placeholder={{loginHint}}
|
||||||
</button>
|
autofocus>
|
||||||
<button class="btn-login-tab" ng-click="loginMode = false;" ng-class="{active: !loginMode}" ng-show="!disableUserSignUp">
|
</div>
|
||||||
Sign up
|
<div class="login-form">
|
||||||
</button>
|
<input type="password" name="password" class="gf-form-input login-form-input" required ng-model="formModel.password" id="inputPassword"
|
||||||
</div>
|
placeholder="password">
|
||||||
|
</div>
|
||||||
<form name="loginForm" class="login-form gf-form-group" ng-hide="disableLoginForm">
|
<div class="login-button-group">
|
||||||
<div class="gf-form" ng-if="loginMode">
|
<button type="submit" class="btn btn-large p-x-2" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
|
||||||
<span class="gf-form-label width-7">User</span>
|
Log In
|
||||||
<input type="text" name="username" class="gf-form-input max-width-14" required ng-model='formModel.user' placeholder={{loginHint}} autofocus>
|
</button>
|
||||||
</div>
|
<div class="small login-button-forgot-password">
|
||||||
<div class="gf-form" ng-if="loginMode">
|
<a href="user/password/send-reset-email">
|
||||||
<span class="gf-form-label width-7">Password</span>
|
Forgot your password?
|
||||||
<input type="password" name="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password">
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="gf-form" ng-if="!loginMode">
|
</form>
|
||||||
<span class="gf-form-label width-7">Email</span>
|
<div class="text-center login-divider" ng-show="oauthEnabled">
|
||||||
<input type="email" class="gf-form-input max-width-14" required ng-model='formModel.email' placeholder="email">
|
<div>
|
||||||
</div>
|
<div class="login-divider-line">
|
||||||
|
</div>
|
||||||
<div class="gf-form-button-row">
|
</div>
|
||||||
<button type="submit" class="btn btn-large p-x-3" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
|
<div>
|
||||||
{{submitBtnText}}
|
<span class="login-divider-text">
|
||||||
</button>
|
<span ng-hide="disableLoginForm">or</span>
|
||||||
</div>
|
</span>
|
||||||
</form>
|
</div>
|
||||||
|
<div>
|
||||||
<div ng-if="loginMode">
|
<div class="login-divider-line">
|
||||||
<div class="text-center login-divider" ng-show="oauthEnabled">
|
</div>
|
||||||
<div class="login-divider-line">
|
</div>
|
||||||
<span class="login-divider-text">
|
</div>
|
||||||
<span ng-hide="disableLoginForm">Or</span> Login With
|
<div class="clearfix"></div>
|
||||||
</span>
|
<div class="login-oauth text-center" ng-show="oauthEnabled">
|
||||||
</div>
|
<a class="btn btn-medium btn-service btn-service--google login-btn" href="login/google" target="_self" ng-if="oauth.google">
|
||||||
</div>
|
<i class="btn-service-icon fa fa-google"></i>
|
||||||
|
Sign in with Google
|
||||||
<div class="clearfix"></div>
|
</a>
|
||||||
|
<a class="btn btn-medium btn-service btn-service--github login-btn" href="login/github" target="_self" ng-if="oauth.github">
|
||||||
<div class="login-oauth text-center" ng-show="oauthEnabled">
|
<i class="btn-service-icon fa fa-github"></i>
|
||||||
<a class="btn btn-large btn-google" href="login/google" target="_self" ng-if="oauth.google">
|
Sign in with GitHub
|
||||||
<i class="fa fa-google"></i>
|
</a>
|
||||||
Google
|
<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">
|
||||||
</a>
|
<i class="btn-service-icon"></i>
|
||||||
<a class="btn btn-large btn-github" href="login/github" target="_self" ng-if="oauth.github">
|
Sign in with Grafana.com
|
||||||
<i class="fa fa-github"></i>
|
</a>
|
||||||
GitHub
|
<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">
|
||||||
</a>
|
<i class="btn-service-icon fa fa-sign-in"></i>
|
||||||
<a class="btn btn-large btn-grafana-com" href="login/grafana_com" target="_self" ng-if="oauth.grafana_com">
|
Sign in with {{oauth.generic_oauth.name}}
|
||||||
<img src="public/img/grafana_com_auth_icon.svg"></img>
|
</a>
|
||||||
<span>Grafana.com</span>
|
</div>
|
||||||
</a>
|
<div class="login-signup-box">
|
||||||
<a class="btn btn-large btn-generic-oauth" href="login/generic_oauth" target="_self" ng-if="oauth.generic_oauth">
|
<div class="login-signup-title p-r-1">
|
||||||
<i class="fa fa-gear"></i>
|
New to Grafana?
|
||||||
{{oauth.generic_oauth.name}}
|
</div>
|
||||||
</a>
|
<a href="/signup" class="btn btn-medium btn-signup btn-p-x-2">
|
||||||
</div>
|
Sign Up
|
||||||
</div>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
|
</div>
|
||||||
<div class="text-center password-recovery" ng-hide="disableLoginForm">
|
|
||||||
<div class="text-center">
|
|
||||||
<a href="user/password/send-reset-email">
|
|
||||||
Forgot your password?
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,71 +1,31 @@
|
|||||||
<div class="login-container container">
|
<page-header model="navModel"></page-header>
|
||||||
|
|
||||||
<div class="login-box">
|
<div class="page-container page-body">
|
||||||
|
<div class="signup">
|
||||||
<div class="login-box-logo">
|
<h3 class="p-b-1">Reset password</h3>
|
||||||
<img class="logo-icon" src="public/img/grafana_icon.svg"></img><br>
|
<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>
|
||||||
<div class="login-tab-header">
|
<div class="gf-form-button-row">
|
||||||
<button class="btn-login-tab" class="active">
|
<button type="submit" class="btn btn-success" ng-click="sendResetEmail();" ng-disabled="!sendResetForm.$valid">
|
||||||
Reset password
|
Reset Password
|
||||||
</button>
|
</button>
|
||||||
|
<a href="/login" class="btn btn-inverse">
|
||||||
|
Back
|
||||||
|
</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</form>
|
||||||
<form name="sendResetForm" class="login-form gf-form-group" ng-show="mode === 'send'">
|
<div ng-if="mode === 'email-sent'">
|
||||||
<div class="gf-form">
|
An email with a reset link as been sent to the email address. <br>
|
||||||
<span class="gf-form-label width-7">User</span>
|
You should receive it shortly.
|
||||||
<input type="text" name="username" class="gf-form-input max-width-14" required ng-model='formModel.userOrEmail' placeholder="email or username">
|
<div class="p-t-1">
|
||||||
</div>
|
<a href="/login" class="btn btn-success p-t-1">
|
||||||
|
Login
|
||||||
<div class="gf-form-button-row">
|
</a>
|
||||||
<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>
|
||||||
|
</div>
|
||||||
<br />
|
</div>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -3,10 +3,10 @@
|
|||||||
<div class="signup-page-background">
|
<div class="signup-page-background">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="login-box">
|
<div class="login-content">
|
||||||
|
|
||||||
<div class="login-box-logo">
|
<div class="login-branding">
|
||||||
<img class="logo-icon" src="public/img/grafana_icon.svg"></img><br>
|
<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>
|
||||||
|
|
||||||
|
|||||||
@ -1,73 +1,49 @@
|
|||||||
<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="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="login-box">
|
<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="login-box-logo">
|
<div class="gf-form">
|
||||||
<img class="logo-icon" src="public/img/grafana_icon.svg"></img><br>
|
<span class="gf-form-label width-9">Your name</span>
|
||||||
<i class="icon-gf icon-gf-grafana_wordmark"></i>
|
<input type="text" name="name" class="gf-form-input max-width-14" ng-model="formModel.name" placeholder="(optional)">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="gf-form">
|
||||||
<div class="invite-box">
|
<span class="gf-form-label width-9">Email</span>
|
||||||
<h3>
|
<input type="text" class="gf-form-input max-width-14" required ng-model="formModel.username" placeholder="Email" autocomplete="off">
|
||||||
You're almost there.
|
</div>
|
||||||
</h3>
|
<div class="gf-form">
|
||||||
|
<span class="gf-form-label width-9">Password</span>
|
||||||
<div class="modal-tagline">
|
<input type="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off">
|
||||||
We just need a couple of more bits of<br> information to finish creating your account.
|
</div>
|
||||||
</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>
|
|
||||||
|
|
||||||
|
<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>
|
||||||
4620
public/img/heatmap_bg_test.svg
Normal file
4620
public/img/heatmap_bg_test.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 266 KiB |
@ -224,6 +224,8 @@ $btn-padding-y-xl: 11px !default;
|
|||||||
|
|
||||||
$btn-border-radius: 2px;
|
$btn-border-radius: 2px;
|
||||||
|
|
||||||
|
$btn-semi-transparent: rgba(0,0,0,0.2) !default;
|
||||||
|
|
||||||
// sidemenu
|
// sidemenu
|
||||||
$side-menu-width: 60px;
|
$side-menu-width: 60px;
|
||||||
|
|
||||||
@ -235,3 +237,25 @@ $panel-padding: 0px 10px 5px 10px;
|
|||||||
// tabs
|
// tabs
|
||||||
$tabs-padding: 10px 15px 9px;
|
$tabs-padding: 10px 15px 9px;
|
||||||
|
|
||||||
|
$external-services: (
|
||||||
|
github: (
|
||||||
|
bgColor: #464646,
|
||||||
|
borderColor: #393939,
|
||||||
|
icon: ''
|
||||||
|
),
|
||||||
|
google: (
|
||||||
|
bgColor: #e84d3c,
|
||||||
|
borderColor: #b83e31,
|
||||||
|
icon: ''
|
||||||
|
),
|
||||||
|
grafanacom: (
|
||||||
|
bgColor: inherit,
|
||||||
|
borderColor: #393939,
|
||||||
|
icon: ''
|
||||||
|
),
|
||||||
|
oauth: (
|
||||||
|
bgColor: inherit,
|
||||||
|
borderColor: #393939,
|
||||||
|
icon: ''
|
||||||
|
)
|
||||||
|
) !default;
|
||||||
|
|||||||
@ -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 @@
|
|||||||
.gicon-alert {
|
.gicon-alert {
|
||||||
background-image: url('../img/icons_dark_theme/icon_alert.svg');
|
background-image: url('../img/icons_dark_theme/icon_alert.svg');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -92,6 +92,7 @@
|
|||||||
.btn-warning {
|
.btn-warning {
|
||||||
@include buttonBackground($btn-warning-bg, $btn-warning-bg-hl);
|
@include buttonBackground($btn-warning-bg, $btn-warning-bg-hl);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Danger and error appear as red
|
// Danger and error appear as red
|
||||||
.btn-danger {
|
.btn-danger {
|
||||||
@include buttonBackground($btn-danger-bg, $btn-danger-bg-hl);
|
@include buttonBackground($btn-danger-bg, $btn-danger-bg-hl);
|
||||||
@ -142,4 +143,57 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Extra padding
|
||||||
|
.btn-p-x-2 {
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// External services
|
||||||
|
// Usage:
|
||||||
|
// <div class="btn btn-service btn-service--facebook">Button text</div>
|
||||||
|
|
||||||
|
$btn-service-icon-width: 35px;
|
||||||
|
.btn-service {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $service, $data in $external-services {
|
||||||
|
$serviceBgColor: map-get($data, bgColor);
|
||||||
|
$serviceBorderColor: map-get($data, borderColor);
|
||||||
|
|
||||||
|
.btn-service--#{$service} {
|
||||||
|
background-color: $serviceBgColor;
|
||||||
|
border: 1px solid $serviceBorderColor;
|
||||||
|
|
||||||
|
.btn-service-icon {
|
||||||
|
font-size: 24px; // Override
|
||||||
|
border-right: 1px solid $serviceBorderColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-service-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
padding-left: .5rem;
|
||||||
|
padding-right: .5rem;
|
||||||
|
width: $btn-service-icon-width;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: relative;
|
||||||
|
top: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-service--grafanacom {
|
||||||
|
.btn-service-icon {
|
||||||
|
background-image: url(/public/img/grafana_mask_icon_white.svg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 50%;
|
||||||
|
background-size: 60%;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,42 +1,111 @@
|
|||||||
.login-container {
|
$login-border: #8daac5;
|
||||||
background-position: left;
|
|
||||||
background-size: 60%;
|
.login {
|
||||||
|
background-position: center;
|
||||||
|
min-height: 85vh;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-top: -26px; /* BAD HACK - experiement to see how it looks */
|
background-color: $black;
|
||||||
padding-top: $spacer * 5; /* BAD HACK - experiement to see how it looks */
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-image: url(../img/heatmap_bg_test.svg);
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:-webkit-autofill,
|
||||||
|
input:-webkit-autofill:hover,
|
||||||
|
input:-webkit-autofill:focus,
|
||||||
|
input:-webkit-autofill,
|
||||||
|
textarea:-webkit-autofill,
|
||||||
|
textarea:-webkit-autofill:hover,
|
||||||
|
textarea:-webkit-autofill:focus,
|
||||||
|
select:-webkit-autofill,
|
||||||
|
select:-webkit-autofill:hover,
|
||||||
|
select:-webkit-autofill:focus {
|
||||||
|
-webkit-box-shadow: 0 0 0px 1000px $black inset;
|
||||||
|
-webkit-text-fill-color: $gray-7 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-form {
|
.login-form {
|
||||||
display: inline-block;
|
margin-bottom: 1rem;
|
||||||
max-width: 24rem;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-box {
|
.login-form-input {
|
||||||
max-width: 700px;
|
border: 1px solid $login-border;
|
||||||
margin: 0 auto; /* was $spacer * 2 auto 0 auto; */
|
border-radius: 4px;
|
||||||
}
|
opacity: .6;
|
||||||
|
|
||||||
.login-box-logo {
|
&:focus {
|
||||||
text-align: center;
|
border: 1px solid $login-border;
|
||||||
margin-bottom: $spacer * 2;
|
|
||||||
img {
|
|
||||||
width: 6rem;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content:space-between;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: .5rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button-forgot-password {
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-text {
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-content {
|
||||||
|
max-width: 700px;
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-branding {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-grow: 0;
|
||||||
|
|
||||||
|
.logo-icon {
|
||||||
|
width: 70px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
.icon-gf-grafana_wordmark {
|
.icon-gf-grafana_wordmark {
|
||||||
color: $link-color;
|
color: $link-color;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -4.5rem;
|
font-size: 2rem;
|
||||||
font-size: 2.5rem;
|
text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
|
||||||
text-shadow: 3px 3px 5px black;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-inner-box {
|
.login-inner-box {
|
||||||
background: $panel-bg;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-bottom: 3rem;
|
padding: 2rem 4rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
max-width: 415px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-tab-header {
|
.login-tab-header {
|
||||||
@ -45,6 +114,12 @@
|
|||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-signup {
|
||||||
|
color: $white;
|
||||||
|
border: 1px solid $login-border;
|
||||||
|
background-color: $btn-semi-transparent;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-login-tab {
|
.btn-login-tab {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
@ -98,30 +173,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.login-oauth {
|
.login-oauth {
|
||||||
|
width: 100%;
|
||||||
.btn {
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-google {
|
|
||||||
background: #dd4b39;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-github {
|
|
||||||
background: #555;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-grafana-com {
|
|
||||||
@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
|
|
||||||
box-shadow: $card-shadow;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 19px;
|
|
||||||
vertical-align: sub;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.password-recovery {
|
.password-recovery {
|
||||||
@ -134,13 +186,15 @@
|
|||||||
|
|
||||||
.login-divider {
|
.login-divider {
|
||||||
float: left;
|
float: left;
|
||||||
width: 50%;
|
width: 100%;
|
||||||
margin: 5px 25% 25px 25%;
|
margin: 0 25% 1rem 25%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
.login-divider-line {
|
.login-divider-line {
|
||||||
width: 100%;
|
width: 110px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
border-bottom: 1px solid $gray-1;
|
border-bottom: 1px solid $login-border;
|
||||||
|
|
||||||
.login-divider-text {
|
.login-divider-text {
|
||||||
background-color: $panel-bg;
|
background-color: $panel-bg;
|
||||||
@ -150,6 +204,25 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.login-signup-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 1rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-signup-title {
|
||||||
|
justify-self: flex-start;
|
||||||
|
flex: 1;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-btn {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.signup-page-background {
|
.signup-page-background {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -190,14 +263,171 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media-breakpoint-up(md) {
|
@include media-breakpoint-up(sm) {
|
||||||
.login-box-logo {
|
.login-content {
|
||||||
img {
|
flex-direction: row;
|
||||||
width: 125px;
|
}
|
||||||
}
|
|
||||||
.icon-gf-grafana_wordmark {
|
.login-branding {
|
||||||
top: -5px;
|
width: 35%;
|
||||||
font-size: 3rem;
|
padding: 4rem 2rem;
|
||||||
|
border-right: 1px solid $login-border;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-inner-box {
|
||||||
|
width: 65%;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-branding {
|
||||||
|
.logo-icon {
|
||||||
|
width: 80px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
.login-branding {
|
||||||
|
width: 45%;
|
||||||
|
padding: 2rem 4rem;
|
||||||
|
|
||||||
|
.logo-icon {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-gf-grafana_wordmark {
|
||||||
|
font-size: 3.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-inner-box {
|
||||||
|
width: 55%;
|
||||||
|
padding: 1rem 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button-group {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button-forgot-password {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
.login {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form-input {
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
login-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
perspective: 1000px;
|
||||||
|
|
||||||
|
.login-bg {
|
||||||
|
width: 4%;
|
||||||
|
height: 10px;
|
||||||
|
// background: hotpink;
|
||||||
|
// border:1px solid #0F1926;
|
||||||
|
float: left;
|
||||||
|
transition: 1s ease-in-out;
|
||||||
|
z-index: 1;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
|
||||||
|
&.login-bg-flip {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
&:before, &:after {
|
||||||
|
backface-visibility: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 100%;
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
z-index: 2;
|
||||||
|
transform: rotateY(0deg);
|
||||||
|
background-color: #215392;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
background-color: rgb(25, 50, 80);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3n+0) {
|
||||||
|
&:before {
|
||||||
|
background-color: #0f253c;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
&:nth-child(3n+1) {
|
||||||
|
&:before {
|
||||||
|
background-color: #102438;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3n+2) {
|
||||||
|
&:before {
|
||||||
|
background-color: #19314e;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3n+3) {
|
||||||
|
&:before {
|
||||||
|
background-color: #215392;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// &:nth-child(3n+5) {
|
||||||
|
// &:before {
|
||||||
|
// background-color: hotpink;
|
||||||
|
// }
|
||||||
|
// &:after {
|
||||||
|
// background-color: blue;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
login-bg-fx {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 100%;
|
||||||
|
background-image: -webkit-radial-gradient(center center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba(18, 22, 29, 1) 100%);
|
||||||
|
z-index:2;
|
||||||
|
}
|
||||||
|
|||||||
@ -15,3 +15,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.signup__password-strength {
|
||||||
|
position: absolute;
|
||||||
|
margin-left: 9rem;
|
||||||
|
width: 194px;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user