feat: login UI - vector + dynamic colors

assets/svg/login-bg-dark.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 1500 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
+    <path d="M1500,543c0,0 -135.753,54.677 -252.197,101.577c-106.023,42.702 -223.596,47.2 -332.571,12.724c-56.088,-17.745 -118.404,-37.46 -173.999,-55.048c-103.773,-32.831 -216.376,-22.709 -312.631,28.103c0,0 0,0.001 0,0.001c-94.821,50.055 -206.441,57.476 -307.053,20.415c-63.317,-23.322 -121.549,-44.772 -121.549,-44.772l0,417l1500,0l0,-480Z" style="fill:#2d2d2d;fill-opacity:0.282609;"/>
+    <path d="M1510,580c0,0 -144.155,47.882 -252.311,83.806c-74.651,24.796 -156.199,17.958 -225.679,-18.923c0,0 0,0 0,0c-62.207,-33.021 -133.629,-44.415 -203.023,-32.389c-98.381,17.051 -244.859,42.438 -352.664,61.121c-92.259,15.99 -187.076,8.079 -275.41,-22.977c-93.342,-32.818 -200.913,-70.638 -200.913,-70.638l0,466l1500,0l10,-466Z" style="fill:#2d2d2d;fill-opacity:0.550725;"/>
+    <path d="M1500,650c0,0 -143.367,28.581 -239.425,47.731c-56.087,11.181 -113.694,12.508 -170.237,3.922c-74.75,-11.351 -183.318,-27.838 -261.719,-39.743c-65.252,-9.909 -131.707,-8.759 -196.577,3.4c-49.655,9.308 -109.704,20.564 -158.992,29.803c-63.125,11.833 -127.839,12.479 -191.188,1.911c-111.875,-18.665 -281.862,-47.024 -281.862,-47.024l0,430l1500,0l0,-430Z" style="fill:#2d2d2d;"/>
+</svg>

assets/svg/login-bg.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 1500 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
+    <path d="M1500,543c0,0 -135.753,54.677 -252.197,101.577c-106.023,42.702 -223.596,47.2 -332.571,12.724c-56.088,-17.745 -118.404,-37.46 -173.999,-55.048c-103.773,-32.831 -216.376,-22.709 -312.631,28.103c0,0 0,0.001 0,0.001c-94.821,50.055 -206.441,57.476 -307.053,20.415c-63.317,-23.322 -121.549,-44.772 -121.549,-44.772l0,417l1500,0l0,-480Z" style="fill:#fff;fill-opacity:0.282609;"/>
+    <path d="M1510,580c0,0 -144.155,47.882 -252.311,83.806c-74.651,24.796 -156.199,17.958 -225.679,-18.923c0,0 0,0 0,0c-62.207,-33.021 -133.629,-44.415 -203.023,-32.389c-98.381,17.051 -244.859,42.438 -352.664,61.121c-92.259,15.99 -187.076,8.079 -275.41,-22.977c-93.342,-32.818 -200.913,-70.638 -200.913,-70.638l0,466l1500,0l10,-466Z" style="fill:#fff;fill-opacity:0.550725;"/>
+    <path d="M1500,650c0,0 -143.367,28.581 -239.425,47.731c-56.087,11.181 -113.694,12.508 -170.237,3.922c-74.75,-11.351 -183.318,-27.838 -261.719,-39.743c-65.252,-9.909 -131.707,-8.759 -196.577,3.4c-49.655,9.308 -109.704,20.564 -158.992,29.803c-63.125,11.833 -127.839,12.479 -191.188,1.911c-111.875,-18.665 -281.862,-47.024 -281.862,-47.024l0,430l1500,0l0,-430Z" style="fill:#fff;"/>
+</svg>

client/scss/pages/_login.scss

@@ -1,22 +1,41 @@
 .login {
-  background-size: cover;
-  background-position: center center;
-  background-image: url('../images/bg.jpg');
+  background-image: linear-gradient(to right, mc('blue', '400'), mc('blue', '600'));
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 
+  &.is-error {
+    background-image: linear-gradient(to right, mc('red', '400'), mc('red', '600'));
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    background-image: url('../svg/login-bg.svg');
+    background-position: center bottom;
+    background-size: cover;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+  }
+
   &-container {
     position: relative;
     display: flex;
-    width: 450px;
+    width: 400px;
     align-items: stretch;
-    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+    box-shadow: 0 14px 28px rgba(0,0,0,0.2);
+    border-radius: 6px;
 
     &.is-expanded {
       width: 650px;
+
+      .login-frame {
+        border-radius: 0 6px 6px 0;
+      }
     }
 
     @include until($tablet) {
@@ -30,22 +49,24 @@
 
   &-error {
     position: absolute;
-    bottom: 100%;
+    bottom: 105%;
     width: 100%;
     min-height: 50px;
-    background-image: radial-gradient(ellipse at top left, rgba(mc('red', '900'),.9) 0%,rgba(mc('red', '400'),.8) 100%);
-    border: 1px solid #FFF;
-    color: #FFF;
+    background-image: radial-gradient(ellipse at top left, rgba(255,255,255,.9) 0%,rgba(255,255,255,.8) 100%);
+    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
+    border-radius: 6px;
+    color: mc('red', '800');
     display: flex;
     justify-content: center;
     align-items: center;
+    padding: 1rem;
 
     strong {
       font-weight: 600;
       text-transform: uppercase;
       display: block;
       padding: 0 1rem 0 0;
-      border-right: 1px solid #FFF;
+      border-right: 1px solid mc('red', '200');
     }
     span {
       padding: 0 0 0 1rem;
@@ -57,9 +78,12 @@
     display: flex;
     flex-direction: column;
     width: 250px;
-    border: 1px solid #FFF;
+
+    border-right: none;
+    border-radius: 6px 0 0 6px;
     background-color: mc('grey', '900');
     z-index: 1;
+    overflow: hidden;
 
     @include until($tablet) {
       width: 50px;
@@ -70,8 +94,8 @@
       padding: 5px 15px;
       border: none;
       color: #FFF;
-      background-color: mc('grey', '800');
-      border-top: 1px solid mc('grey', '900');
+      background-color: mc('light-blue', '800');
+      border-top: 1px solid mc('light-blue', '900');
       font-family: $core-font-standard;
       font-weight: 600;
       text-align: left;
@@ -86,7 +110,7 @@
       }
 
       &:hover {
-        background-color: mc('grey', '600');
+        background-color: mc('light-blue', '600');
       }
 
       &:first-child {
@@ -96,7 +120,7 @@
       &.is-active {
         background-color: mc('grey', '100');
         background-image: radial-gradient(circle at top left, rgba(mc('grey', '200'),1) 0%,rgba(255,255,255,1) 100%);
-        color: mc('grey', '700');
+        color: mc('light-blue', '700');
       }
 
       i {
@@ -137,8 +161,8 @@
   }
 
   &-frame {
-    background-image: radial-gradient(circle at top left, rgba(255,255,255,1) 0%,rgba(240,240,240,.6) 100%);
-    border: 1px solid #FFF;
+    background-image: radial-gradient(circle at top left, rgba(255,255,255,1) 5%,rgba(240,240,240,.6) 100%);
+    border-radius: 6px;
     width: 400px;
     padding: 1rem;
     color: mc('grey', '700');
@@ -154,7 +178,7 @@
     h1 {
       font-size: 2rem;
       font-weight: 600;
-      color: mc('grey', '700');
+      color: mc('light-blue', '700');
       padding: 0;
       margin: 0;
     }
@@ -176,7 +200,7 @@
       width: 100%;
       border: 1px solid #FFF;
       border-radius: 3px;
-      background-color: rgba(255,255,255,.7);
+      background-color: rgba(255,255,255,.9);
       padding: 0 15px;
       height: 40px;
       margin: 0 0 10px 0;
@@ -188,7 +212,7 @@
 
       &:focus {
         outline: none;
-        border-color: mc('grey','400');
+        border-color: mc('light-blue','500');
       }
 
     }
@@ -204,13 +228,12 @@
     bottom: 10vh;
     width: 100%;
     z-index: 2;
-    color: #FFF;
+    color: mc('grey', '500');
     font-weight: 400;
-    text-shadow: 1px 1px 0 #000;
 
     a {
       font-weight: 600;
-      color: #FFF;
+      color: mc('light-blue', '500');
       margin-left: .25rem;
     }
 

server/controllers/auth.js

@@ -35,8 +35,8 @@ const bruteforce = new ExpressBrute(EBstore, {
  */
 router.get('/login', function (req, res, next) {
   res.render('auth/login', {
-    authStrategies: wiki.auth.strategies,
-    hasMultipleStrategies: Object.keys(wiki.config.auth.strategies).length > 0
+    authStrategies: _.reject(wiki.auth.strategies, { key: 'local' }),
+    hasMultipleStrategies: Object.keys(wiki.config.auth.strategies).length > 1
   })
 })
 

server/views/auth/login.pug

@@ -2,8 +2,8 @@ extends ../master.pug
 
 block body
   body
-    .login#root
-      .login-container(:class={ "is-expanded": hasMultipleStrategies })
+    .login#root(class={ "is-error": flash.length > 0 })
+      .login-container(class={ "is-expanded": hasMultipleStrategies })
         if flash.length > 0
           .login-error
             strong
@@ -25,7 +25,7 @@ block body
           form(method='post', action='/login')
             input#login-user(type='text', name='email', placeholder=t('auth:fields.emailuser'))
             input#login-pass(type='password', name='password', placeholder=t('auth:fields.password'))
-            button.button.is-light-green.is-fullwidth(type='submit')
+            button.button.is-light-blue.is-fullwidth(type='submit')
               span= t('auth:actions.login')
       .login-copyright
         = t('footer.poweredby')