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

Flexbox for auth UI

Browse source 
Providing better support for flaky IE/Edge browsers.
This commit is contained in:
sauls8t 2018-06-29 16:06:50 +01:00
parent 10a184ad10
commit 4130d1f129
10 changed files with 70 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

2
gui/app/components/document/document-meta.js
View file

@ -207,11 +207,9 @@ export default Component.extend(Modals, Tooltips, {
}, },
onEditLifecycle() { onEditLifecycle() {
//no op
}, },
onEditProtection() { onEditProtection() {
//no op
}, },
onEditCategory() { onEditCategory() {

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

@ -31,10 +31,10 @@ export default Route.extend({
activate() { activate() {
this.get('browser').setTitleAsPhrase('Forgot Password'); this.get('browser').setTitleAsPhrase('Forgot Password');
$('body').addClass('background-color-theme-light'); $('body').addClass('background-color-theme-light d-flex justify-content-center align-items-center');
}, },
deactivate() { deactivate() {
$('body').removeClass('background-color-theme-light'); $('body').removeClass('background-color-theme-light d-flex justify-content-center align-items-center');
} }
}); });

16
gui/app/pods/auth/forgot/template.hbs
View file

@ -1,8 +1,10 @@
<div class="auth-box"> <div class="auth-center">
<div class="logo"> <div class="auth-box">
<img src="/assets/img/logo-color.png" title="Documize" alt="Documize" class="img-fluid" /> <div class="logo">
</div> <img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid" />
<div class="login-form"> </div>
{{forgot-password forgot=(action 'forgot')}} <div class="login-form">
</div> {{forgot-password forgot=(action 'forgot')}}
</div>
</div>
</div> </div>

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

@ -62,10 +62,10 @@ export default Route.extend({
activate() { activate() {
this.get('browser').setTitleAsPhrase('Login'); this.get('browser').setTitleAsPhrase('Login');
$('body').addClass('background-color-theme-light'); $('body').addClass('background-color-theme-light d-flex justify-content-center align-items-center');
}, },
deactivate() { deactivate() {
$('body').removeClass('background-color-theme-light'); $('body').removeClass('background-color-theme-light d-flex justify-content-center align-items-center');
} }
}); });

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

@ -1,24 +1,26 @@
{{#if model.showLogin}} <div class="auth-center">
<div class="auth-box"> {{#if model.showLogin}}
<div class="logo"> <div class="auth-box">
<img src="/assets/img/logo-color.png" title="Documize" alt="Documize" class="img-fluid" /> <div class="logo">
</div> <img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid" />
<form {{action 'login' on="submit"}}>
<div class="form-group">
<label for="authEmail">Email</label>
{{focus-input type="email" value=email id="authEmail" class="form-control mousetrap" placeholder=""}}
</div> </div>
<div class="form-group"> <form {{action 'login' on="submit"}}>
<label for="authPassword">Password</label> <div class="form-group">
{{input type="password" value=password id="authPassword" class="form-control"}} <label for="authEmail">Email</label>
</div> {{focus-input type="email" value=email id="authEmail" class="form-control mousetrap" placeholder="" autocomplete="username email"}}
<button type="submit" class="btn btn-primary mt-4">Sign in</button>
<div class="{{unless invalidCredentials "invisible"}} color-red mt-3">Invalid credentials</div>
{{#if isAuthProviderDocumize}}
<div class="mt-5">
{{#link-to 'auth.forgot'}}Forgot your password?{{/link-to}}
</div> </div>
{{/if}} <div class="form-group">
</form> <label for="authPassword">Password</label>
</div> {{input type="password" value=password id="authPassword" class="form-control" autocomplete="current-password"}}
{{/if}} </div>
<button type="submit" class="btn btn-success font-weight-bold text-uppercase mt-4">Sign in</button>
<div class="{{unless invalidCredentials "invisible"}} color-red mt-3">Invalid credentials</div>
{{#if isAuthProviderDocumize}}
<div class="mt-5">
{{#link-to 'auth.forgot'}}Forgot your password?{{/link-to}}
</div>
{{/if}}
</form>
</div>
{{/if}}
</div>

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

@ -19,10 +19,10 @@ export default Route.extend({
activate() { activate() {
this.get('browser').setTitleAsPhrase('Reset Password'); this.get('browser').setTitleAsPhrase('Reset Password');
$('body').addClass('background-color-theme-light'); $('body').addClass('background-color-theme-light d-flex justify-content-center align-items-center');
}, },
deactivate() { deactivate() {
$('body').removeClass('background-color-theme-light'); $('body').removeClass('background-color-theme-light d-flex justify-content-center align-items-center');
} }
}); });

12
gui/app/pods/auth/reset/template.hbs
View file

@ -1,6 +1,8 @@
<div class="auth-box"> <div class="auth-center">
<div class="logo"> <div class="auth-box">
<img src="/assets/img/logo-color.png" title="Documize" alt="Documize" class="img-fluid" /> <div class="logo">
</div> <img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid" />
{{password-reset reset=(action 'reset')}} </div>
{{password-reset reset=(action 'reset')}}
</div>
</div> </div>

19
gui/app/styles/layout/layout-master.scss
View file

@ -132,3 +132,22 @@ footer {
bottom: auto; bottom: auto;
} }
} }
/**
* Conditional CSS for Edge 12+.
* @link: https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
*/
@supports (-ms-ime-align:auto) {
// For IE/Edge footer must be at bottom as sticky/flex is not quite supported.
.layout-footer, footer {
position: relative !important;
}
}
/**
* Conditional CSS for IE 8+ (and old Firefox 1.x).
* @link: https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
*/
@media screen\0 {
/* Conditional IE styles */
}

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

@ -4,10 +4,10 @@
{{else}} {{else}}
<div class="form-group"> <div class="form-group">
<label for="email">Email</label> <label for="email">Email</label>
{{focus-input type="email" value=email id="email" class="form-control {{if hasEmptyEmailError 'is-invalid')}}"}} {{focus-input type="email" value=email id="email" class=(if hasEmptyEmailError 'form-control is-invalid' 'form-control')}}
</div> </div>
<div class="mt-4"> <div class="mt-4">
<button type="submit" class="btn btn-primary">Reset</button> <button type="submit" class="btn btn-success font-weight-bold text-uppercase">Reset</button>
</div> </div>
{{/if}} {{/if}}
<div class="mt-5"> <div class="mt-5">

6
gui/app/templates/components/password-reset.hbs
View file

@ -2,16 +2,16 @@
<form {{action 'reset' on="submit"}}> <form {{action 'reset' on="submit"}}>
<div class="form-group"> <div class="form-group">
<label>New Password</label> <label>New Password</label>
{{focus-input type="password" value=password id="newPassword" class=(if hasPasswordError 'form-control is-invalid' 'form-control')}} {{focus-input type="password" value=password id="newPassword" autocomplete="new-password" class=(if hasPasswordError 'form-control is-invalid' 'form-control')}}
<small class="form-text text-muted">Choose a strong password</small> <small class="form-text text-muted">Choose a strong password</small>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Confirm Password</label> <label>Confirm Password</label>
{{input type="password" value=passwordConfirm id="passwordConfirm" class=(if hasConfirmError 'form-control is-invalid' 'form-control')}} {{input type="password" value=passwordConfirm id="passwordConfirm" autocomplete="new-password" class=(if hasConfirmError 'form-control is-invalid' 'form-control')}}
<small class="form-text text-muted">Please type your new password again</small> <small class="form-text text-muted">Please type your new password again</small>
</div> </div>
<div class="margin-top-10 margin-bottom-20"> <div class="margin-top-10 margin-bottom-20">
<button type="submit" class="btn btn-success">Reset</button> <button type="submit" class="btn btn-success font-weight-bold text-uppercase">Reset</button>
<span class="{{unless mustMatch "d-none"}} color-red margin-left-20">Passwords must match</span> <span class="{{unless mustMatch "d-none"}} color-red margin-left-20">Passwords must match</span>
</div> </div>
</form> </form>