techies/authelia
1
0
Fork 0
mirror of https://github.com/0rangebananaspy/authelia.git synced 2024-09-14 22:47:21 +07:00
Code Issues Projects Releases Wiki Activity

Make notifications appear on top instead of inline

Browse Source 
Currently notifications reflow the document which causes the interface
to jump twice which can be frustrating if you're trying to click
something.

This change makes the notification appear at the top of the form as
such:
This commit is contained in:
Callan Bryant 2018-07-20 09:34:13 +01:00
parent f67bb69ee0
commit eea023a200
5 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/css/01-main.css
View File

@ -19,9 +19,10 @@ body {
/* notifications */
.notification {
padding: 10px;
margin: 10px 0px;
margin: 15px 0px;
border-radius: 6px;
display: none;
position: absolute;
}
.notification img {
width: 24px;
@ -63,4 +64,4 @@ body {
}
h1 {
font-size: 25px;
}
}

2
server/src/views/firstfactor.pug
View File

@ -7,9 +7,9 @@ block form-header
h1 Sign in
block content
div(class="notification")
img(class="header-img" src="/img/user.png" alt="user profile")
p Enter your credentials to sign in
div(class="notification")
form(class="form-signin")
div(class="form-inputs")
input(type="text" class="form-control" id="username" placeholder="Username" required autofocus)

4
server/src/views/password-reset-form.pug
View File

@ -7,12 +7,12 @@ block form-header
h1 Reset password
block content
div(class="notification")
img(class="header-img" src="/img/password.png" alt="password")
p Set your new password and confirm it.
div(class="notification")
form(class="form-signin")
div(class="form-inputs")
input(class="form-control" type="password" name="password1" id="password1" placeholder="New password" required="required")
input(class="form-control" type="password" name="password2" id="password2" placeholder="Password confirmation" required="required")
button(id="reset-password-button" class="btn btn-lg btn-primary btn-block" type="submit") Reset Password
span(class="clearfix")
span(class="clearfix")

4
server/src/views/password-reset-request.pug
View File

@ -7,12 +7,12 @@ block form-header
h1 Reset password
block content
div(class="notification")
div
img(class="header-img" src="/img/password.png" alt="password")
p After giving your username, you will receive an email to change your password.
div(class="notification")
form(class="form-signin")
div(class="form-inputs")
input(type="text" class="form-control" name="username" id="username" placeholder="Your username" required="required")
button(id="reset-password-button" class="btn btn-lg btn-primary btn-block" type="submit") Reset Password
span(class="clearfix")
span(class="clearfix")

10
server/src/views/secondfactor.pug
View File

@ -7,16 +7,16 @@ block form-header
h1 Sign in
block content
div
div
div(class="notification notification-totp")
h3 Hi <b>#{username}</b>
div(class="row")
div(class="u2f-token")
img(src="/img/pendrive.png", alt="security key")
p
p
| Please, touch your <a href="https://www.yubico.com/products/yubikey-hardware/fido-u2f-security-key/">security key</a><br/>
b Or<br/>
| Get a one-time password
div(class="notification notification-totp")
form(class="form-signin totp")
div(class="form-inputs")
input(type="text" autocomplete="off" class="form-control" id="token" placeholder="Token" required autofocus)
@ -25,7 +25,7 @@ block content
div Need to register?
div
a(href=u2f_identity_start_endpoint, class="link register-u2f", data-toggle="tooltip", title="A security key is required to register.") Security key
| |
| |
a(href=totp_identity_start_endpoint, class="link register-totp") Google Authenticator
span(class="clearfix")
script(src="/js/u2f-api.js", type="text/javascript")
script(src="/js/u2f-api.js", type="text/javascript")