Named routes & basic login framework

src/resources/assets/auth/theme.css

@@ -0,0 +1,116 @@
+:root {
+    --input-padding-x: 1.5rem;
+    --input-padding-y: 0.75rem;
+}
+
+.login,
+.image {
+    min-height: 100vh;
+}
+
+.login-heading {
+    font-weight: 300;
+}
+
+.btn-login {
+    font-size: 0.9rem;
+    letter-spacing: 0.05rem;
+    padding: 0.75rem 1rem;
+    border-radius: 2rem;
+}
+
+.form-label-group {
+    position: relative;
+    margin-bottom: 1rem;
+}
+
+.form-label-group>input,
+.form-label-group>label {
+    padding: var(--input-padding-y) var(--input-padding-x);
+    height: auto;
+    border-radius: 2rem;
+}
+
+.form-label-group>label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    margin-bottom: 0;
+    /* Override default `<label>` margin */
+    line-height: 1.5;
+    color: #495057;
+    cursor: text;
+    /* Match the input under the label */
+    border: 1px solid transparent;
+    border-radius: .25rem;
+    transition: all .1s ease-in-out;
+}
+
+.form-label-group input::-webkit-input-placeholder {
+    color: transparent;
+}
+
+.form-label-group input:-ms-input-placeholder {
+    color: transparent;
+}
+
+.form-label-group input::-ms-input-placeholder {
+    color: transparent;
+}
+
+.form-label-group input::-moz-placeholder {
+    color: transparent;
+}
+
+.form-label-group input::placeholder {
+    color: transparent;
+}
+
+.form-label-group input:not(:placeholder-shown) {
+    padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
+    padding-bottom: calc(var(--input-padding-y) / 3);
+}
+
+.form-label-group input:not(:placeholder-shown)~label {
+    padding-top: calc(var(--input-padding-y) / 3);
+    padding-bottom: calc(var(--input-padding-y) / 3);
+    font-size: 12px;
+    color: #777;
+}
+
+.form-error-message {
+    color: darkred;
+    font-weight: bold;
+}
+
+.form-submit-button {
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+/* Fallback for Edge
+-------------------------------------------------- */
+
+@supports (-ms-ime-align: auto) {
+    .form-label-group>label {
+        display: none;
+    }
+    .form-label-group input::-ms-input-placeholder {
+        color: #777;
+    }
+}
+
+/* Fallback for IE
+-------------------------------------------------- */
+
+@media all and (-ms-high-contrast: none),
+(-ms-high-contrast: active) {
+    .form-label-group>label {
+        display: none;
+    }
+    .form-label-group input:-ms-input-placeholder {
+        color: #777;
+    }
+}

src/resources/views/auth/login.pug

@@ -4,19 +4,21 @@ block head
     title Login | #{config('app.name', 'Extollo')}
 
 block heading
-    | Login to Continue
+    | Login to continue
 
 block form
     .form-label-group
-        input#inputUsername.form-control(type='text' name='username' value=(form_data ? form_data.username : '') required placeholder='Username' autofocus)
+        input#inputUsername.form-control(type='text' name='username' value=(formData ? formData.username : '') required placeholder='Username' autofocus)
         label(for='inputUsername') Username
+
     .form-label-group
         input#inputPassword.form-control(type='password' name='password' required placeholder='Password')
         label(for='inputPassword') Password
+
+
+
     button.btn.btn-lg.btn-primary.btn-block.btn-login.text-uppercase.font-weight-bold.mb-2.form-submit-button(type='submit') Login
 
     .text-center
         span.small Need an account? 
             a(href='./register') Register here.
-    // .text-center
-        span.small(style="color: #999999;") Provider: #{provider_name}

src/resources/views/auth/message.pug

@@ -0,0 +1,12 @@
+extends ./theme
+
+block content
+    if heading
+        h3.login-heading.mb-4 #{heading}
+
+    if errors
+        each error in errors
+            p.form-error-message #{error}
+
+    if message
+        p #{message}

src/resources/views/auth/theme.pug

@@ -5,18 +5,17 @@ html
         block head
 
         block styles
-            link(rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css')
-            link(rel='stylesheet' href=vendor('@extollo', 'auth/theme.css'))
+            link(rel='stylesheet' href=vendor('@extollo/lib', 'lib/bootstrap.min.css'))
+            link(rel='stylesheet' href=vendor('@extollo/lib', 'auth/theme.css'))
     body
         .container-fluid
             .row.no-gutter
-                .d-none.d-md-flex.col-md-6.col-lg-8.bg-image
-                .col-md-6.col-lg-4
+                .col-md-12.col-lg-12
                     .login.d-flex.align-items-center.py-5
                         .container
                             .row
-                                .col-md-9.col-lg-8.mx-auto
+                                .col-md-9.col-lg-6.mx-auto
                                     block content
 
         block scripts
-            script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css')
+            script(src=vendor('@extollo/lib', 'lib/bootstrap.min.js'))