Improve login experienceHEADmaster

2 files changed, 60 insertions, 11 deletions

diff --git a/api/WhatApi/Templates/TemplateFulfiller.cs b/api/WhatApi/Templates/TemplateFulfiller.cs
index 3433701..e24e77d 100644
--- a/api/WhatApi/Templates/TemplateFulfiller.cs
+++ b/api/WhatApi/Templates/TemplateFulfiller.cs
@@ -5,25 +5,37 @@ namespace WhatApi.Templates;
 public class TemplateFulfiller
 {
     private static readonly FluidParser Parser = new();
+    private static readonly TemplateContext EmptyContext = new();
     private static readonly string TemplateDirectory = Path.Combine(Directory.GetCurrentDirectory(), "Templates");
     private static string WebMapTemplate => File.ReadAllText(Path.Combine(TemplateDirectory, "web_map.liquid"));
     private static string WebUploadTemplate => File.ReadAllText(Path.Combine(TemplateDirectory, "web_upload.liquid"));
     private static string WebLoginTemplate => File.ReadAllText(Path.Combine(TemplateDirectory, "web_login.liquid"));
+    private static string WebTermsTemplate => File.ReadAllText(Path.Combine(TemplateDirectory, "web_terms.liquid"));
 
-    public static string WebMapPage(object? data = null) {
+
+    public static string WebMapPage() {
         Parser.TryParse(WebMapTemplate, out var template);
-        var context = data is null ? new TemplateContext() : new TemplateContext(data);
-        return template.Render(context);
+        return template.Render(EmptyContext);
     }
 
-    public static string WebUploadPage(object? data = null) {
+    public static string WebUploadPage() {
         Parser.TryParse(WebUploadTemplate, out var template);
-        var context = data is null ? new TemplateContext() : new TemplateContext(data);
-        return template.Render(context);
+        return template.Render(EmptyContext);
+    }
+
+    public class WebLoginModel
+    {
+        public string Error { get; set; } = string.Empty;
     }
-    public static string WebLoginPage(object? data = null) {
+
+    public static string WebLoginPage(WebLoginModel model) {
         Parser.TryParse(WebLoginTemplate, out var template);
-        var context = data is null ? new TemplateContext() : new TemplateContext(data);
+        var context = new TemplateContext(model);
         return template.Render(context);
     }
+
+    public static string WebTermsPage() {
+        Parser.TryParse(WebTermsTemplate, out var template);
+        return template.Render(EmptyContext);
+    }
 }
\ No newline at end of file
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