Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-21 22:29:41 +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() {
//no op
},
onEditProtection() {
//no op
},
onEditCategory() {

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

@ -31,10 +31,10 @@ export default Route.extend({
activate() {
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() {
$('body').removeClass('background-color-theme-light');
$('body').removeClass('background-color-theme-light d-flex justify-content-center align-items-center');
}
});

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

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

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

@ -62,10 +62,10 @@ export default Route.extend({
activate() {
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() {
$('body').removeClass('background-color-theme-light');
$('body').removeClass('background-color-theme-light d-flex justify-content-center align-items-center');
}
});

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

@ -1,18 +1,19 @@
{{#if model.showLogin}}
<div class="auth-center">
{{#if model.showLogin}}
<div class="auth-box">
<div class="logo">
<img src="/assets/img/logo-color.png" title="Documize" alt="Documize" class="img-fluid" />
<img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid" />
</div>
<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=""}}
{{focus-input type="email" value=email id="authEmail" class="form-control mousetrap" placeholder="" autocomplete="username email"}}
</div>
<div class="form-group">
<label for="authPassword">Password</label>
{{input type="password" value=password id="authPassword" class="form-control"}}
{{input type="password" value=password id="authPassword" class="form-control" autocomplete="current-password"}}
</div>
<button type="submit" class="btn btn-primary mt-4">Sign in</button>
<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">
@ -21,4 +22,5 @@
{{/if}}
</form>
</div>
{{/if}}
{{/if}}
</div>

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

@ -19,10 +19,10 @@ export default Route.extend({
activate() {
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() {
$('body').removeClass('background-color-theme-light');
$('body').removeClass('background-color-theme-light d-flex justify-content-center align-items-center');
}
});

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

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

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

@ -132,3 +132,22 @@ footer {
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}}
<div class="form-group">
<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 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>
{{/if}}
<div class="mt-5">

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

@ -2,16 +2,16 @@
<form {{action 'reset' on="submit"}}>
<div class="form-group">
<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>
</div>
<div class="form-group">
<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>
</div>
<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>
</div>
</form>