Skip to content

N
nexpie-grafana-theme
Commit cae975cb by Torkel Ödegaard
Options

ux(): fixed login, signup, signup step2 and invite views

parent 2f232600
Showing with 161 additions and 187 deletions
public/app/features/org/partials/orgUsers.html
......@@ -77,6 +77,7 @@
</table>
</tab>
</tabset>
</div>
</div>
public/app/partials/login.html
......@@ -17,47 +17,23 @@
</button>
</div>
<form name="loginForm" class="login-form" style="margin-top: 25px;">
<div class="tight-form-container">
<div class="tight-form" ng-if="loginMode">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 78px">
<strong>User</strong>
</li>
<li>
<input type="text" name="username" class="tight-form-input last" required ng-model='formModel.user' placeholder={{loginHint}} style="width: 253px">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-if="loginMode">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 78px">
<strong>Password</strong>
</li>
<li>
<input type="password" name="password" class="tight-form-input last" required ng-model="formModel.password" id="inputPassword" style="width: 253px" placeholder="password">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-if="!loginMode">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 79px">
<strong>Email</strong>
</li>
<li>
<input type="email" class="tight-form-input last" required ng-model='formModel.email' placeholder="email" style="width: 253px">
</li>
</ul>
<div class="clearfix"></div>
</div>
<form name="loginForm" class="login-form gf-form-group">
<div class="gf-form" ng-if="loginMode">
<span class="gf-form-label gf-size-sm">User</span>
<input type="text" name="username" class="gf-form-input gf-size-max-xl" required ng-model='formModel.user' placeholder={{loginHint}}>
</div>
<div class="gf-form" ng-if="loginMode">
<span class="gf-form-label gf-size-sm">Password</span>
<input type="password" name="password" class="gf-form-input gf-size-max-xl" required ng-model="formModel.password" id="inputPassword" placeholder="password">
</div>
<div class="gf-form" ng-if="!loginMode">
<span class="gf-form-label gf-size-sm">Email</span>
<input type="email" class="gf-form-input gf-size-max-xl" required ng-model='formModel.email' placeholder="email">
</div>
<div class="login-submit-button-row">
<button type="submit" class="btn" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
<div class="gf-form-button-row">
<button type="submit" class="btn btn-large" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
{{submitBtnText}}
</button>
</div>
......@@ -65,9 +41,9 @@
<div class="text-center login-divider" ng-if="oauthEnabled">
<div class="login-divider-line">
<span class="login-divider-text">
Or login with
</span>
<span class="login-divider-text">
Or login with
</span>
</div>
</div>
......@@ -95,15 +71,14 @@
</div>
</div>
<div class="row" style="margin-top: 50px">
<div class="version-footer text-center small">
Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}},
build date: {{buildInfo.buildstamp | date: 'yyyy-MM-dd HH:mm:ss' }}
</div>
</div>
</div>
</div>
public/app/partials/signup_invited.html
......@@ -6,7 +6,8 @@
<div class="login-box">
<div class="login-box-logo">
<img src="img/logo_transparent_200x75.png">
<img class="logo-icon" src="public/img/grafana_icon.svg"></img><br>
<i class="icon-gf icon-gf-grafana_wordmark"></i>
</div>
<div class="invite-box">
......@@ -14,82 +15,40 @@
Hello {{greeting}}.
</h3>
<div class="modal-tagline">
<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">
<div class="tight-form-container">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 128px">
Email
</li>
<li>
<input type="email" name="email" class="tight-form-input last" required ng-model='formModel.email' placeholder="Email" style="width: 253px">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 128px">
Name
</li>
<li>
<input type="text" name="name" class="tight-form-input last" ng-model='formModel.name' placeholder="Name (optional)" style="width: 253px">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 128px">
Username
</li>
<li>
<input type="text" name="username" class="tight-form-input last" required ng-model='formModel.username' placeholder="Username" style="width: 253px">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 128px">
Password
</li>
<li>
<input type="password" name="password" class="tight-form-input last" required ng-model="formModel.password" id="inputPassword" style="width: 253px" placeholder="password">
</li>
</ul>
<div class="clearfix"></div>
</div>
<form name="inviteForm" class="login-form gf-form-group">
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Email</span>
<input type="email" name="email" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.email' placeholder="Email">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Name</span>
<input type="text" name="name" class="gf-form-input gf-size-max-xxl" ng-model='formModel.name' placeholder="Name (optional)">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Username</span>
<input type="text" name="username" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.username' placeholder="Username">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-sm">Password</span>
<input type="password" name="password" class="gf-form-input gf-size-max-xxl" required ng-model="formModel.password" id="inputPassword" placeholder="password">
</div>
<div style="margin-left: 147px; width: 254px;">
<div style="margin-left: 7.5rem; width: 254px;">
<password-strength password="formModel.password"></password-strength>
</div>
<div class="login-submit-button-row">
<button type="submit" class="btn" ng-click="submit();" ng-class="{'btn-inverse': !inviteForm.$valid, 'btn-primary': inviteForm.$valid}">
<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 class="clearfix"></div>
</div>
<div class="row" style="margin-top: 50px">
<div class="version-footer text-center small">
Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}},
build date: {{buildInfo.buildstamp | date: 'yyyy-MM-dd HH:mm:ss' }}
</div>
</div>
</div>
</div>
public/app/partials/signup_step2.html
......@@ -6,7 +6,8 @@
<div class="login-box">
<div class="login-box-logo">
<img src="public/img/logo_transparent_200x75.png">
<img class="logo-icon" src="public/img/grafana_icon.svg"></img><br>
<i class="icon-gf icon-gf-grafana_wordmark"></i>
</div>
<div class="invite-box">
......@@ -24,90 +25,50 @@
<span class="large">{{formModel.email}}</span>
</div>
</div>
<br>
<br>
<form name="signUpForm" class="login-form">
<form name="signUpForm" class="login-form gf-form-group">
<div style="display: inline-block; margin-bottom: 25px; width: 300px" ng-if="verifyEmailEnabled">
<div class="editor-option">
<label class="small">Email verification code: (sent to your email)</label>
<input type="text" class="input input-xlarge text-center" ng-model="formModel.code" required></input>
</div>
<div class="gf-form" ng-if="verifyEmailEnabled">
<span class="gf-form-label gf-size-md">
Email code<tip>Email verification code (sent to your email)</tip>
</span>
<input type="text" class="gf-form-input gf-size-max-xl" ng-model="formModel.code" required></input>
</div>
<div class="tight-form-container">
<div class="tight-form" ng-if="!autoAssignOrg">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 128px">
Organization name
</li>
<li>
<input type="text" name="orgName" class="tight-form-input last" ng-model='formModel.orgName' placeholder="Name your organization" style="width: 253px">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 128px">
Your name
</li>
<li>
<input type="text" name="name" class="tight-form-input last" ng-model='formModel.name' placeholder="(optional)" style="width: 253px">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 128px">
Username
</li>
<li>
<input type="text" class="tight-form-input last" required ng-model='formModel.username' placeholder="Username" style="width: 253px" autocomplete="off">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="gf-form" ng-if="!autoAssignOrg">
<span class="gf-form-label gf-size-md">Org. name</span>
<input type="text" name="orgName" class="gf-form-input gf-size-max-xl" ng-model='formModel.orgName' placeholder="Name your organization">
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 128px">
Password
</li>
<li>
<input type="password" class="tight-form-input last" required ng-model="formModel.password" id="inputPassword" style="width: 253px" placeholder="password" autocomplete="off">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-md">Your name</span>
<input type="text" name="name" class="gf-form-input gf-size-max-xl" ng-model='formModel.name' placeholder="(optional)">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-md">Username</span>
<input type="text" class="gf-form-input gf-size-max-xl" required ng-model='formModel.username' placeholder="Username" autocomplete="off">
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-md">Password</span>
<input type="password" class="gf-form-input gf-size-max-xl" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off">
</div>
<div style="margin-left: 147px; width: 254px;">
<div style="margin-left: 7.5rem; width: 254px;">
<password-strength password="formModel.password"></password-strength>
</div>
<div class="login-submit-button-row">
<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 class="clearfix"></div>
</div>
<div class="row" style="margin-top: 50px">
<div class="version-footer text-center small">
Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}},
build date: {{buildInfo.buildstamp | date: 'yyyy-MM-dd HH:mm:ss' }}
</div>
</div>
</div>
</div>
public/sass/_variables.dark.scss
......@@ -141,7 +141,6 @@ $input-bg-disabled: #555;
$input-color: $gray-light;
$input-border-color: lighten($gray-dark,5%);
$input-btn-border-width: 1px;
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
$input-border-focus: $input-border-color !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default;
......
public/sass/_variables.light.scss
......@@ -158,12 +158,11 @@ $input-bg-disabled: $gray-lighter;
$input-color: #020202;
$input-border-color: $gray-lighter;
$input-btn-border-width: 1px;
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
$input-border-focus: #66afe9 !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: #999 !default;
$input-label-bg: #f8f8f8;
$input-label-bg: #f8f8f8;
// Sidemenu
// -------------------------
......
public/sass/_variables.scss
......@@ -169,6 +169,7 @@ $input-padding-x: .75rem !default;
$input-padding-y: .6rem !default;
$input-line-height: 1.35rem !default;
$input-btn-border-width: 1px;
$input-border-radius: $border-radius !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default;
......
public/sass/components/_buttons.scss
......@@ -14,7 +14,7 @@
text-align: center;
vertical-align: middle;
cursor: pointer;
border: none;
border: $input-btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
......@@ -92,6 +92,25 @@
border: 1px solid $tight-form-func-highlight-bg;
}
.btn-outline-primary {
@include button-outline-variant($btnPrimaryBackground);
}
.btn-outline-secondary {
@include button-outline-variant($btnInverseBackground);
}
.btn-outline-info {
@include button-outline-variant($btnInfoBackground);
}
.btn-outline-success {
@include button-outline-variant($btnSuccessBackground);
}
.btn-outline-warning {
@include button-outline-variant($btnWarningBackground);
}
.btn-outline-danger {
@include button-outline-variant($btnDangerBackground);
}
.btn-text {
color: $btnText;
margin: 0;
......
public/sass/components/_gf-form.scss
......@@ -6,6 +6,7 @@ $gf-form-margin: 0.4rem;
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
.checkbox-label {
display: inline;
......
public/sass/mixins/_buttons.scss
......@@ -22,3 +22,50 @@
font-size: $font-size;
@include border-radius($border-radius);
}
@mixin button-outline-variant($color) {
color: $color;
background-image: none;
background-color: transparent;
border-color: $color;
@include hover {
color: #fff;
background-color: $color;
border-color: $color;
}
&:focus,
&.focus {
color: #fff;
background-color: $color;
border-color: $color;
}
&:active,
&.active,
.open > &.dropdown-toggle {
color: #fff;
background-color: $color;
border-color: $color;
&:hover,
&:focus,
&.focus {
color: #fff;
background-color: darken($color, 17%);
border-color: darken($color, 25%);
}
}
&.disabled,
&:disabled {
&:focus,
&.focus {
border-color: lighten($color, 20%);
}
@include hover {
border-color: lighten($color, 20%);
}
}
}
public/sass/pages/_login.scss
.login-form {
width: 50%;
float: left;
margin-left: 25%;
margin-right: 25%;
padding-top: 25px;
display: inline-block;
max-width: 24rem;
}
.login-box {
width: 700px;
margin: 70px auto 0 auto;
max-width: 700px;
margin: $spacer * 2 auto 0 auto;
}
.login-box-logo {
text-align: center;
img {
width: 125px;
width: 6rem;
}
.icon-gf-grafana_wordmark {
color: $link-color;
position: relative;
top: -90px;
font-size: 3rem;
top: -4.5rem;
font-size: 2.5rem;
text-shadow: 3px 3px 5px black;
}
}
.login-inner-box {
background: $panel-bg;
text-align: center;
}
.login-tab-header {
background: $tight-form-bg;
text-align: center;
margin-bottom: 3rem;
}
.btn-login-tab {
......@@ -145,7 +144,7 @@
text-align: center;
border: 1px solid $tight-form-func-bg;
background-color: $panel-bg;
width: 800px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
......@@ -167,3 +166,16 @@
font-size: 16px;
}
}
@include media-breakpoint-up(md) {
.login-box-logo {
img {
width: 125px;
}
.icon-gf-grafana_wordmark {
top: -90px;
font-size: 3rem;
}
}
}
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