Merge pull request #245 from CydarLtd/overlay_notifications

Make notifications appear on top instead of inline

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;
-}
+}

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)

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")
+    span(class="clearfix")

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")
+    span(class="clearfix")

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 <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)
@@ -28,4 +28,4 @@ block content
           |  | 
           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")