Improve login experienceHEADmaster

6 files changed, 68 insertions, 17 deletions

diff --git a/api/WhatApi/Endpoints/GetLoginPageEndpoint.cs b/api/WhatApi/Endpoints/GetLoginPageEndpoint.cs
index dd17669..8b07a0e 100644
--- a/api/WhatApi/Endpoints/GetLoginPageEndpoint.cs
+++ b/api/WhatApi/Endpoints/GetLoginPageEndpoint.cs
@@ -6,7 +6,9 @@ public class GetLoginPageEndpoint : BaseEndpoint
 {
     [AllowAnonymous]
     [HttpGet("~/login")]
-    public ActionResult Handle() {
-        return Content(TemplateFulfiller.WebLoginPage(), "text/html");
+    public ActionResult Handle(string? error = null) {
+        return Content(TemplateFulfiller.WebLoginPage(new TemplateFulfiller.WebLoginModel() {
+            Error = error ?? string.Empty
+        }), "text/html");
     }
 }
\ No newline at end of file
diff --git a/api/WhatApi/Endpoints/GetMapPageEndpoint.cs b/api/WhatApi/Endpoints/GetMapPageEndpoint.cs
index 833a98c..bafad6a 100644
--- a/api/WhatApi/Endpoints/GetMapPageEndpoint.cs
+++ b/api/WhatApi/Endpoints/GetMapPageEndpoint.cs
@@ -6,7 +6,7 @@ public class GetMapPageEndpoint : BaseEndpoint
 {
 
     [HttpGet("~/map")]
-    public ActionResult GetMapPage() {
+    public ActionResult Handle() {
         return Content(TemplateFulfiller.WebMapPage(), "text/html");
     }
 }
\ No newline at end of file
diff --git a/api/WhatApi/Endpoints/GetUploadPageEndpoint.cs b/api/WhatApi/Endpoints/GetUploadPageEndpoint.cs
index ea14819..309fa49 100644
--- a/api/WhatApi/Endpoints/GetUploadPageEndpoint.cs
+++ b/api/WhatApi/Endpoints/GetUploadPageEndpoint.cs
@@ -6,7 +6,7 @@ public class GetUploadPageEndpoint : BaseEndpoint
 {
 
     [HttpGet("~/upload")]
-    public ActionResult GetMapPage() {
+    public ActionResult Handle() {
         return Content(TemplateFulfiller.WebUploadPage(), "text/html");
     }
 }
\ No newline at end of file
diff --git a/api/WhatApi/Endpoints/LoginEndpoint.cs b/api/WhatApi/Endpoints/LoginEndpoint.cs
index cb76696..470ef34 100644
--- a/api/WhatApi/Endpoints/LoginEndpoint.cs
+++ b/api/WhatApi/Endpoints/LoginEndpoint.cs
@@ -17,10 +17,10 @@ public class LoginEndpoint(AppDatabase db, IConfiguration configuration) : BaseE
     [HttpPost("~/login")]
     public async Task<ActionResult> HandleAsync([FromForm] LoginRequest login, CancellationToken ct = default) {
         var user = await db.Users.FirstOrDefaultAsync(c => c.Name == login.Username, ct);
-        if (user?.PasswordHash is null) return Unauthorized();
+        if (user?.PasswordHash is null) return Redirect("/login?error=Ukjent bruker/passord");
 
         var verificationResult = PasswordHasher.VerifyHashedPassword(user.PasswordHash, login.Password);
-        if (verificationResult == PasswordVerificationResult.Failed) return Unauthorized();
+        if (verificationResult == PasswordVerificationResult.Failed) return Redirect("/login?error=Ukjent bruker/passord");
 
         var tokenEntropy = configuration.GetValue<string>(Constants.Env.TokenEntropy);
 
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