From eea023a2008e697e7ea10e52275ba7fd8e4fce85 Mon Sep 17 00:00:00 2001 From: Callan Bryant Date: Fri, 20 Jul 2018 09:34:13 +0100 Subject: [PATCH 1/2] Make notifications appear on top instead of inline 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: --- client/src/css/01-main.css | 5 +++-- server/src/views/firstfactor.pug | 2 +- server/src/views/password-reset-form.pug | 4 ++-- server/src/views/password-reset-request.pug | 4 ++-- server/src/views/secondfactor.pug | 10 +++++----- 5 files changed, 13 insertions(+), 12 deletions(-) diff --git a/client/src/css/01-main.css b/client/src/css/01-main.css index 0ed7ac73..ead0852a 100644 --- a/client/src/css/01-main.css +++ b/client/src/css/01-main.css @@ -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; -} \ No newline at end of file +} diff --git a/server/src/views/firstfactor.pug b/server/src/views/firstfactor.pug index 373d2f45..4f64c69d 100644 --- a/server/src/views/firstfactor.pug +++ b/server/src/views/firstfactor.pug @@ -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) diff --git a/server/src/views/password-reset-form.pug b/server/src/views/password-reset-form.pug index 5f14cdbb..07f0baa7 100644 --- a/server/src/views/password-reset-form.pug +++ b/server/src/views/password-reset-form.pug @@ -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") \ No newline at end of file + span(class="clearfix") diff --git a/server/src/views/password-reset-request.pug b/server/src/views/password-reset-request.pug index 8236508f..21746af9 100644 --- a/server/src/views/password-reset-request.pug +++ b/server/src/views/password-reset-request.pug @@ -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") \ No newline at end of file + span(class="clearfix") diff --git a/server/src/views/secondfactor.pug b/server/src/views/secondfactor.pug index 681b8bbc..095f1334 100644 --- a/server/src/views/secondfactor.pug +++ b/server/src/views/secondfactor.pug @@ -7,16 +7,16 @@ block form-header h1 Sign in block content - div + div + div(class="notification notification-totp") h3 Hi #{username} div(class="row") div(class="u2f-token") img(src="/img/pendrive.png", alt="security key") - p + p | Please, touch your security key
b Or
| 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") \ No newline at end of file + script(src="/js/u2f-api.js", type="text/javascript") From dc0d0d046c47f28f7103286a31f46a47c3df1f35 Mon Sep 17 00:00:00 2001 From: Callan Bryant Date: Thu, 26 Jul 2018 08:17:23 +0100 Subject: [PATCH 2/2] restore important whitespace --- server/src/views/secondfactor.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/src/views/secondfactor.pug b/server/src/views/secondfactor.pug index 095f1334..87b57818 100644 --- a/server/src/views/secondfactor.pug +++ b/server/src/views/secondfactor.pug @@ -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")