Improve login experienceHEADmaster

1 files changed, 40 insertions, 3 deletions

diff --git a/api/WhatApi/Templates/web_login.liquid b/api/WhatApi/Templates/web_login.liquid
index c5de790..314c9ef 100644
--- a/api/WhatApi/Templates/web_login.liquid
+++ b/api/WhatApi/Templates/web_login.liquid
@@ -7,11 +7,17 @@
     <meta http-equiv="X-UA-Compatible"
           content="ie=edge">
     <style>
+        :root {
+            --lavender-color: rgba(135, 137, 192, .66);
+            --text-color: rgb(17, 29, 74);
+        }
+
         html, body {
             height: 100%;
             margin: 0;
             padding: 0;
             width: 100%;
+            color: var(--text-color);
             aspect-ratio: 1 / 1;
             font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
         }
@@ -22,7 +28,12 @@
             margin: 15px auto;
         }
 
-        input:not([type="submit"]) {
+        label {
+            display: inline-block;
+            width: 100%;
+        }
+
+        input:not([type="submit"],[type="checkbox"]) {
             height: 15px;
             padding: 10px 12px;
             border: 1px solid rgba(0, 0, 0, 0.2);
@@ -37,9 +48,11 @@
             border-radius: 3px;
             transition: all .1s ease-in-out;
             height: 40px;
-            color: rgb(17, 29, 74);
             font-weight: 600;
-            background: rgba(135, 137, 192, .66);
+            font-size: 1.1rem;
+            text-align: right;
+            padding-right: 10px;
+            background: var(--lavender-color);
             width: 100%;
 
             &:active {
@@ -47,6 +60,15 @@
                 transform: scale(.99);
             }
         }
+
+        #error {
+            border-left: 3px solid red;
+            padding-left: 5px;
+        }
+
+        fieldset {
+            border-color: var(--lavender-color);
+        }
     </style>
     <title>Logg inn</title>
 </head>
@@ -57,19 +79,34 @@
       autocomplete="off">
     <fieldset>
         <legend><span id="login-tab">Logg inn</span></legend>
+        {% if Error != '' %}
+            <p id="error">{{ Error }}</p>
+        {% endif %}
         <label for="username">Brukernavn
             <input type="text"
                    name="username"
+                   id="username"
                    required>
         </label>
         <label for="password">Passord
             <input type="password"
                    name="password"
+                   id="password"
                    required>
         </label>
+        <label for="read">
+            <input type="checkbox"
+                   id="read"
+                   required
+                   name="read">
+            Jeg godtar <a href="/terms">vilkår og databehandling</a>
+        </label>
         <input type="submit"
                value="Logg inn">
     </fieldset>
 </form>
+<script>
+	window.history.replaceState({}, document.title, "/" + "login");
+</script>
 </body>
 </html>
\ No newline at end of file