IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-16 18:34:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

new design for login

Browse Source
This commit is contained in:
Patrick O'Carroll 2017-11-17 16:42:56 +01:00
parent 84b277d5c0
commit 5356605e1a
3 changed files with 175 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
public/app/partials/login.html
View File

@ -1,85 +1,83 @@
<div class="login-container container">
<div class="login-box">
<div class="login-box">
<div class="login-box-logo">
<img class="logo-icon" src="public/img/grafana_icon.svg"></img><br>
<i class="icon-gf icon-gf-grafana_wordmark"></i>
</div>
<div class="login-box-logo">
<img class="logo-icon" src="public/img/grafana_icon.svg"></img>
<br>
<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" ng-click="loginMode = true;" ng-class="{active: loginMode}">
Log in
</button>
<button class="btn-login-tab" ng-click="loginMode = false;" ng-class="{active: !loginMode}" ng-show="!disableUserSignUp">
Sign up
</button>
</div>
<form name="loginForm" class="login-form gf-form-group" ng-hide="disableLoginForm">
<div class="gf-form" ng-if="loginMode">
<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.user' placeholder={{loginHint}} autofocus>
</div>
<div class="gf-form" ng-if="loginMode">
<span class="gf-form-label width-7">Password</span>
<input type="password" name="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password">
</div>
<form name="loginForm" class="login-form-group gf-form-group" ng-hide="disableLoginForm">
<div class="login-form">
<input type="text" name="username" class="gf-form-input login-form-input" required ng-model='formModel.user' placeholder={{loginHint}}
autofocus>
</div>
<div class="gf-form" ng-if="!loginMode">
<span class="gf-form-label width-7">Email</span>
<input type="email" class="gf-form-input max-width-14" required ng-model='formModel.email' placeholder="email">
</div>
<div class="login-form">
<input type="password" name="password" class="gf-form-input login-form-input" required ng-model="formModel.password" id="inputPassword"
placeholder="password">
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-large p-x-3" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
{{submitBtnText}}
</button>
</div>
</form>
<div class="login-button-group">
<button type="submit" class="btn btn-medium p-x-2" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
Login
</button>
<div class="small" style="display:flex; align-items:center">
<a href="user/password/send-reset-email">
Forgot your password?
</a>
</div>
</div>
<div ng-if="loginMode">
<div class="text-center login-divider" ng-show="oauthEnabled">
<div class="login-divider-line">
<span class="login-divider-text">
<span ng-hide="disableLoginForm">Or</span> Login With
</span>
</div>
</div>
</form>
<div class="clearfix"></div>
<div class="text-center login-divider" ng-show="oauthEnabled">
<div>
<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 class="login-oauth text-center" ng-show="oauthEnabled">
<a class="btn btn-large btn-google" href="login/google" target="_self" ng-if="oauth.google">
<i class="fa fa-google"></i>
Google
</a>
<a class="btn btn-large btn-github" href="login/github" target="_self" ng-if="oauth.github">
<i class="fa fa-github"></i>
GitHub
</a>
<a class="btn btn-large btn-grafana-com" href="login/grafana_com" target="_self" ng-if="oauth.grafana_com">
<img src="public/img/grafana_com_auth_icon.svg"></img>
<span>Grafana.com</span>
</a>
<a class="btn btn-large btn-generic-oauth" href="login/generic_oauth" target="_self" ng-if="oauth.generic_oauth">
<i class="fa fa-gear"></i>
{{oauth.generic_oauth.name}}
</a>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="clearfix"></div>
<div class="login-oauth text-center" ng-show="oauthEnabled" style="width:100%">
<a class="btn btn-medium btn-google login-btn" href="login/google" target="_self" ng-if="oauth.google">
Sign in with Google
</a>
<a class="btn btn-medium btn-github login-btn" href="login/github" target="_self" ng-if="oauth.github">
Sign in with GitHub
</a>
<a class="btn btn-medium btn-grafana-com login-btn" href="login/grafana_com" target="_self" ng-if="oauth.grafana_com">
Sign in with Grafana.com
</a>
<a class="btn btn-medium btn-generic-oauth login-btn" href="login/generic_oauth" target="_self" ng-if="oauth.generic_oauth">
Sign in with {{oauth.generic_oauth.name}}
</a>
</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 class="login-signup-box">
<div style="padding-right:1rem">
New user?
</div>
<a class="btn btn-medium" style="color:#fafafa; border: 1px solid #fafafa">
Sign up
</a>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>

124
public/sass/pages/_login.scss
View File

@ -1,42 +1,92 @@
.login-container {
background-position: left;
background-size: 60%;
min-height: 100%;
background-repeat: no-repeat;
min-width: 100%;
margin-left: 0;
margin-top: -26px; /* BAD HACK - experiement to see how it looks */
padding-top: $spacer * 5; /* BAD HACK - experiement to see how it looks */
background-color: #000;
display: flex;
align-items: center;
justify-content: center;
}
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: #fafafa !important;
}
.login-form-group {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
}
.login-form {
display: inline-block;
max-width: 24rem;
margin-bottom: .5rem;
width: 100%;
}
.login-form-input {
border: 1px solid #fafafa !important;
border-radius: 4px !important;
}
.login-button-group {
display:flex;
align-items: center;
justify-content:space-between;
width: 100%;
margin-top: 1rem
}
.login-text {
font-size: $font-size-sm;
}
.login-box {
max-width: 700px;
margin: 0 auto; /* was $spacer * 2 auto 0 auto; */
display: flex;
align-items: stretch;
flex-direction: row;
}
.login-box-logo {
text-align: center;
margin-bottom: $spacer * 2;
width: 45%;
padding: 4rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-right: 1px solid #fafafa;
img {
width: 6rem;
width: 12rem;
}
.icon-gf-grafana_wordmark {
color: $link-color;
position: relative;
top: -4.5rem;
font-size: 2.5rem;
font-size: 4rem;
text-shadow: 3px 3px 5px black;
}
}
.login-inner-box {
background: $panel-bg;
text-align: center;
padding-bottom: 3rem;
padding: 2rem 4rem;
display: flex;
flex-direction: column;
width: 55%;
align-items: center;
justify-content: center;
}
.login-tab-header {
@ -134,13 +184,15 @@
.login-divider {
float: left;
width: 50%;
width: 100%;
margin: 5px 25% 25px 25%;
display: flex;
justify-content: space-between;
.login-divider-line {
width: 100%;
width: 110px;
height: 10px;
border-bottom: 1px solid $gray-1;
border-bottom: 1px solid #fafafa;
.login-divider-text {
background-color: $panel-bg;
@ -150,6 +202,18 @@
}
}
.login-signup-box {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
margin-top: 2rem
}
.login-btn {
width: 100%; margin: 0 0 1rem;
}
.signup-page-background {
position: fixed;
top: 0;
@ -190,14 +254,38 @@
}
}
@include media-breakpoint-up(md) {
@include media-breakpoint-down(md) {
.login-box-logo {
img {
width: 125px;
}
.icon-gf-grafana_wordmark {
top: -5px;
font-size: 3rem;
font-size: 2rem;
}
}
}
@include media-breakpoint-down(xs) {
.login-box {
flex-direction: column;
}
.login-box-logo {
border: none;
width: 100%;
padding: 0;
}
.login-inner-box {
width: 100%;
}
.login-box-logo {
img {
width: 5rem;
}
.icon-gf-grafana_wordmark {
top: -5px;
font-size: 2rem;
}
}
}

4
public/views/index.template.html
View File

@ -35,9 +35,7 @@
</div>
</div>
<div class="main-view">
<div ng-view></div>
<div class="main-view" ng-view>
<!-- <footer class="footer"> -->
<!-- <div class="row text&#45;center"> -->
<!-- <ul> -->