1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-08-02 20:15:26 +02:00

Flexbox for auth UI

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

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');
}
});

View file

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

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');
}
});

View file

@ -1,24 +1,26 @@
{{#if model.showLogin}}
<div class="auth-box">
<div class="logo">
<img src="/assets/img/logo-color.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=""}}
<div class="auth-center">
{{#if model.showLogin}}
<div class="auth-box">
<div class="logo">
<img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid" />
</div>
<div class="form-group">
<label for="authPassword">Password</label>
{{input type="password" value=password id="authPassword" class="form-control"}}
</div>
<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}}
<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="" autocomplete="username email"}}
</div>
{{/if}}
</form>
</div>
{{/if}}
<div class="form-group">
<label for="authPassword">Password</label>
{{input type="password" value=password id="authPassword" class="form-control" autocomplete="current-password"}}
</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>

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');
}
});

View file

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