Skip to content

Commit 4130d1f

Browse files
sauls8tsauls8t
committed
Flexbox for auth UI
Providing better support for flaky IE/Edge browsers.
1 parent 10a184a commit 4130d1f

File tree

10 files changed

+70
-47
lines changed

10 files changed

+70
-47
lines changed

‎gui/app/components/document/document-meta.js

-2
Original file line numberDiff line numberDiff line change
@@ -207,11 +207,9 @@ export default Component.extend(Modals, Tooltips, {
207207
},
208208

209209
onEditLifecycle() {
210-
//no op
211210
},
212211

213212
onEditProtection() {
214-
//no op
215213
},
216214

217215
onEditCategory() {

‎gui/app/pods/auth/forgot/route.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@ export default Route.extend({
3131

3232
activate() {
3333
this.get('browser').setTitleAsPhrase('Forgot Password');
34-
$('body').addClass('background-color-theme-light');
34+
$('body').addClass('background-color-theme-light d-flex justify-content-center align-items-center');
3535
},
3636

3737
deactivate() {
38-
$('body').removeClass('background-color-theme-light');
38+
$('body').removeClass('background-color-theme-light d-flex justify-content-center align-items-center');
3939
}
4040
});

‎gui/app/pods/auth/forgot/template.hbs

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
<div class="auth-box">
2-
<div class="logo">
3-
<img src="/assets/img/logo-color.png" title="Documize" alt="Documize" class="img-fluid" />
4-
</div>
5-
<div class="login-form">
6-
{{forgot-password forgot=(action 'forgot')}}
7-
</div>
1+
<div class="auth-center">
2+
<div class="auth-box">
3+
<div class="logo">
4+
<img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid" />
5+
</div>
6+
<div class="login-form">
7+
{{forgot-password forgot=(action 'forgot')}}
8+
</div>
9+
</div>
810
</div>

‎gui/app/pods/auth/login/route.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,10 @@ export default Route.extend({
6262

6363
activate() {
6464
this.get('browser').setTitleAsPhrase('Login');
65-
$('body').addClass('background-color-theme-light');
65+
$('body').addClass('background-color-theme-light d-flex justify-content-center align-items-center');
6666
},
6767

6868
deactivate() {
69-
$('body').removeClass('background-color-theme-light');
69+
$('body').removeClass('background-color-theme-light d-flex justify-content-center align-items-center');
7070
}
7171
});

‎gui/app/pods/auth/login/template.hbs

+24-22
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
1-
{{#if model.showLogin}}
2-
<div class="auth-box">
3-
<div class="logo">
4-
<img src="/assets/img/logo-color.png" title="Documize" alt="Documize" class="img-fluid" />
5-
</div>
6-
<form {{action 'login' on="submit"}}>
7-
<div class="form-group">
8-
<label for="authEmail">Email</label>
9-
{{focus-input type="email" value=email id="authEmail" class="form-control mousetrap" placeholder=""}}
1+
<div class="auth-center">
2+
{{#if model.showLogin}}
3+
<div class="auth-box">
4+
<div class="logo">
5+
<img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid" />
106
</div>
11-
<div class="form-group">
12-
<label for="authPassword">Password</label>
13-
{{input type="password" value=password id="authPassword" class="form-control"}}
14-
</div>
15-
<button type="submit" class="btn btn-primary mt-4">Sign in</button>
16-
<div class="{{unless invalidCredentials "invisible"}} color-red mt-3">Invalid credentials</div>
17-
{{#if isAuthProviderDocumize}}
18-
<div class="mt-5">
19-
{{#link-to 'auth.forgot'}}Forgot your password?{{/link-to}}
7+
<form {{action 'login' on="submit"}}>
8+
<div class="form-group">
9+
<label for="authEmail">Email</label>
10+
{{focus-input type="email" value=email id="authEmail" class="form-control mousetrap" placeholder="" autocomplete="username email"}}
11+
</div>
12+
<div class="form-group">
13+
<label for="authPassword">Password</label>
14+
{{input type="password" value=password id="authPassword" class="form-control" autocomplete="current-password"}}
2015
</div>
21-
{{/if}}
22-
</form>
23-
</div>
24-
{{/if}}
16+
<button type="submit" class="btn btn-success font-weight-bold text-uppercase mt-4">Sign in</button>
17+
<div class="{{unless invalidCredentials "invisible"}} color-red mt-3">Invalid credentials</div>
18+
{{#if isAuthProviderDocumize}}
19+
<div class="mt-5">
20+
{{#link-to 'auth.forgot'}}Forgot your password?{{/link-to}}
21+
</div>
22+
{{/if}}
23+
</form>
24+
</div>
25+
{{/if}}
26+
</div>

‎gui/app/pods/auth/reset/route.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ export default Route.extend({
1919

2020
activate() {
2121
this.get('browser').setTitleAsPhrase('Reset Password');
22-
$('body').addClass('background-color-theme-light');
22+
$('body').addClass('background-color-theme-light d-flex justify-content-center align-items-center');
2323
},
2424

2525
deactivate() {
26-
$('body').removeClass('background-color-theme-light');
26+
$('body').removeClass('background-color-theme-light d-flex justify-content-center align-items-center');
2727
}
2828
});

‎gui/app/pods/auth/reset/template.hbs

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
<div class="auth-box">
2-
<div class="logo">
3-
<img src="/assets/img/logo-color.png" title="Documize" alt="Documize" class="img-fluid" />
4-
</div>
5-
{{password-reset reset=(action 'reset')}}
1+
<div class="auth-center">
2+
<div class="auth-box">
3+
<div class="logo">
4+
<img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid" />
5+
</div>
6+
{{password-reset reset=(action 'reset')}}
7+
</div>
68
</div>

‎gui/app/styles/layout/layout-master.scss

+19
Original file line numberDiff line numberDiff line change
@@ -132,3 +132,22 @@ footer {
132132
bottom: auto;
133133
}
134134
}
135+
136+
/**
137+
* Conditional CSS for Edge 12+.
138+
* @link: https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
139+
*/
140+
@supports (-ms-ime-align:auto) {
141+
// For IE/Edge footer must be at bottom as sticky/flex is not quite supported.
142+
.layout-footer, footer {
143+
position: relative !important;
144+
}
145+
}
146+
147+
/**
148+
* Conditional CSS for IE 8+ (and old Firefox 1.x).
149+
* @link: https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
150+
*/
151+
@media screen\0 {
152+
/* Conditional IE styles */
153+
}

‎gui/app/templates/components/forgot-password.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
{{else}}
55
<div class="form-group">
66
<label for="email">Email</label>
7-
{{focus-input type="email" value=email id="email" class="form-control {{if hasEmptyEmailError 'is-invalid')}}"}}
7+
{{focus-input type="email" value=email id="email" class=(if hasEmptyEmailError 'form-control is-invalid' 'form-control')}}
88
</div>
99
<div class="mt-4">
10-
<button type="submit" class="btn btn-primary">Reset</button>
10+
<button type="submit" class="btn btn-success font-weight-bold text-uppercase">Reset</button>
1111
</div>
1212
{{/if}}
1313
<div class="mt-5">

‎gui/app/templates/components/password-reset.hbs

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@
22
<form {{action 'reset' on="submit"}}>
33
<div class="form-group">
44
<label>New Password</label>
5-
{{focus-input type="password" value=password id="newPassword" class=(if hasPasswordError 'form-control is-invalid' 'form-control')}}
5+
{{focus-input type="password" value=password id="newPassword" autocomplete="new-password" class=(if hasPasswordError 'form-control is-invalid' 'form-control')}}
66
<small class="form-text text-muted">Choose a strong password</small>
77
</div>
88
<div class="form-group">
99
<label>Confirm Password</label>
10-
{{input type="password" value=passwordConfirm id="passwordConfirm" class=(if hasConfirmError 'form-control is-invalid' 'form-control')}}
10+
{{input type="password" value=passwordConfirm id="passwordConfirm" autocomplete="new-password" class=(if hasConfirmError 'form-control is-invalid' 'form-control')}}
1111
<small class="form-text text-muted">Please type your new password again</small>
1212
</div>
1313
<div class="margin-top-10 margin-bottom-20">
14-
<button type="submit" class="btn btn-success">Reset</button>
14+
<button type="submit" class="btn btn-success font-weight-bold text-uppercase">Reset</button>
1515
<span class="{{unless mustMatch "d-none"}} color-red margin-left-20">Passwords must match</span>
1616
</div>
1717
</form>

0 commit comments

Comments
 (0)