Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-27 17:19:42 +02:00
Code Releases Activity

auth page UX update

Browse source
This commit is contained in:
Harvey Kandola 2017-11-27 19:07:36 +00:00
parent 533a0f094e
commit 102f0c3800
9 changed files with 62 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

4
gui/app/pods/auth/forgot/route.js
View file

@ -29,10 +29,10 @@ export default Route.extend({
}, },
activate() { activate() {
$('body').addClass('background-color-off-white'); $('body').addClass('background-color-theme-light');
}, },
deactivate() { deactivate() {
$('body').removeClass('background-color-off-white'); $('body').removeClass('background-color-theme-light');
} }
}); });

4
gui/app/pods/auth/login/route.js
View file

@ -61,10 +61,10 @@ export default Route.extend({
}, },
activate() { activate() {
$('body').addClass('background-color-off-white'); $('body').addClass('background-color-theme-light');
}, },
deactivate() { deactivate() {
$('body').removeClass('background-color-off-white'); $('body').removeClass('background-color-theme-light');
} }
}); });

37
gui/app/pods/auth/login/template.hbs
View file

@ -3,25 +3,22 @@
<div class="logo"> <div class="logo">
<img src="/assets/img/logo-color.png" title="Documize" alt="Documize" class="img-fluid" /> <img src="/assets/img/logo-color.png" title="Documize" alt="Documize" class="img-fluid" />
</div> </div>
<div class="login-form"> <form {{action 'login' on="submit"}}>
<form id="login-form" {{action 'login' on="submit"}}> <div class="form-group">
<div class="input-control"> <label for="authEmail">Email</label>
<label>Email</label> {{focus-input type="email" value=email id="authEmail" class="form-control mousetrap" placeholder=""}}
{{focus-input type="email" value=email id="authEmail"}} </div>
</div> <div class="form-group">
<div class="input-control"> <label for="authPassword">Password</label>
<label>Password</label> {{input type="password" value=password id="authPassword" class="form-control"}}
{{input type="password" value=password id="authPassword"}} </div>
</div> <button type="submit" class="btn btn-primary mt-4">Sign in</button>
<div class="clearfix" /> <div class="{{unless invalidCredentials "invisible"}} color-red mt-3">Invalid credentials</div>
<div class="margin-top-10 margin-bottom-20"> {{#if isAuthProviderDocumize}}
<button type="submit" class="regular-button button-blue">Sign in</button> <div class="mt-5">
<span class="{{unless invalidCredentials "hide"}} color-red margin-left-20">Invalid credentials</span> {{#link-to 'auth.forgot'}}Forgot your password?{{/link-to}}
</div> </div>
{{#if isAuthProviderDocumize}} {{/if}}
{{#link-to 'auth.forgot'}}Forgot your password?{{/link-to}} </form>
{{/if}}
</form>
</div>
</div> </div>
{{/if}} {{/if}}

4
gui/app/pods/auth/reset/route.js
View file

@ -17,10 +17,10 @@ export default Route.extend({
}, },
activate() { activate() {
$('body').addClass('background-color-off-white'); $('body').addClass('background-color-theme-light');
}, },
deactivate() { deactivate() {
$('body').removeClass('background-color-off-white'); $('body').removeClass('background-color-theme-light');
} }
}); });

4
gui/app/router.js
View file

@ -100,9 +100,11 @@ export default Router.map(function () {
this.route('profile', { this.route('profile', {
path: 'profile' path: 'profile'
}); });
this.route('search', { this.route('search', {
path: 'search' path: 'search'
}); });
this.route('accounts', { this.route('accounts', {
path: 'accounts' path: 'accounts'
}); });
@ -114,6 +116,4 @@ export default Router.map(function () {
this.route('not-found', { this.route('not-found', {
path: '/*wildcard' path: '/*wildcard'
}); });
// this.route('pods', function () {});
}); });

10
gui/app/styles/color.scss
View file

@ -105,9 +105,15 @@ $color-sidebar-toolbar: $color-sidebar-border;
.background-color-off-white { .background-color-off-white {
background-color: $color-off-white !important; background-color: $color-off-white !important;
} }
.background-color-primary { .background-color-off-black {
background-color: $color-primary !important; background-color: $color-off-black !important;
} }
.background-color-green { .background-color-green {
background-color: $color-green !important; background-color: $color-green !important;
} }
.background-color-theme {
background-color: $color-primary !important;
}
.background-color-theme-light {
background-color: $color-primary-light !important;
}

5
gui/app/styles/mixins.scss
View file

@ -65,3 +65,8 @@
color: $color-primary; color: $color-primary;
} }
} }
@mixin shadow() {
box-shadow: 1px 1px 3px 0px rgba(211,211,211,1);
}

10
gui/app/styles/view/page-auth.scss
View file

@ -1,13 +1,13 @@
.auth-box { .auth-box {
display: inline-block;
height: 500px; height: 500px;
width: 500px; width: 500px;
background-color: $color-white;
border: 1px solid $color-border;
display: inline-block;
border-radius : 3px;
color: $color-off-black;
padding: 20px 50px; padding: 20px 50px;
background-color: $color-white;
color: $color-off-black;
@extend .absolute-center; @extend .absolute-center;
@include border-radius(3px);
@include shadow();
.logo { .logo {
text-align: center; text-align: center;

15
gui/app/templates/components/forgot-password.hbs
View file

@ -2,14 +2,15 @@
{{#if sayThanks}} {{#if sayThanks}}
<div class="reset-thanks margin-bottom-30">Thanks. Check your email for instructions.</div> <div class="reset-thanks margin-bottom-30">Thanks. Check your email for instructions.</div>
{{else}} {{else}}
<div class="input-control"> <div class="form-group">
<label>Email</label> <label for="email">Email</label>
{{focus-input type="email" value=email id="email" class=(if hasEmptyEmailError 'error')}} {{focus-input type="email" value=email id="email" class="form-control {{if hasEmptyEmailError 'is-invalid')}}"}}
</div> </div>
<div class="clearfix" /> <div class="mt-4">
<div class="margin-top-10 margin-bottom-20"> <button type="submit" class="btn btn-primary">Reset</button>
<button type="submit" class="regular-button button-blue">Reset</button>
</div> </div>
{{/if}} {{/if}}
{{#link-to 'auth.login'}}Sign In{{/link-to}} <div class="mt-5">
{{#link-to 'auth.login'}}Click here to sign in{{/link-to}}
</div>
</form> </form>