1 files changed, 95 insertions, 0 deletions
diff --git a/src/server/Pages/Login.cshtml b/src/server/Pages/Login.cshtml
new file mode 100644
index 0000000..d3829a2
--- /dev/null
+++ b/src/server/Pages/Login.cshtml
@@ -0,0 +1,95 @@
+@page
+@model Dough.Pages.Login
+
+@{
+    Layout = null;
+}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Login - dough</title>
+    <style>
+        form {
+        display: flex;
+        flex-direction: column;
+        max-width: 350px;
+        margin: 0 auto;
+        }
+        
+        form label {
+        padding-top: 15px;
+        }
+
+        button {
+        margin-top:15px;
+        }
+    </style>
+</head>
+<body>
+<div id="error" style="display: none">
+    <h2 id="title"></h2>
+    <p id="message"></p>
+</div>
+<form onsubmit="return false">
+    <label for="username">Username: </label>
+    <input type="text" id="username" name="username" required autofocus>
+    <label for="password">Password: </label>
+    <input type="password" id="password" name="password" required>
+    <label for="persist">Remeber me: <input type="checkbox" id="persist" name="persist"/></label>
+    @Html.AntiForgeryToken()
+    <button>Login</button>
+</form>
+
+<script>
+        const form = document.querySelector("form");
+      const errorEL = document.querySelector("#error");
+      const titleEl = document.querySelector("#title");
+      const messageEl =document.querySelector("#message");
+    form.addEventListener("submit", () => {
+        const username = document.querySelector("#username").value;
+        const password = document.querySelector("#password").value;
+        const returnUrl = new URL(location.href).searchParams.get("ReturnUrl");
+        const persist = document.querySelector("#persist").checked;
+    let data = {
+                           username,
+                           password,
+                           returnUrl,
+                           persist
+                           };
+        errorEL.style.diplay = "none";
+
+        fetch("/account/login", {
+            method: "POST",
+            body: JSON.stringify(data),
+            credentials: "include",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8",
+                "RequestVerificationToken": document.querySelector("input[name='__RequestVerificationToken']").value
+            }
+        }).then(response => {
+            if(response.status === 400) {
+                response.json().then(res => {
+                    if(res.title && res.message) {
+                        displayError(res.title, res.message);
+                    }
+                })
+            } else {
+                location.href = returnUrl;
+            }
+        }).catch(error => console.error(error));
+    })
+    
+    function displayError(title, message) {
+      const errorEL = document.querySelector("#error");
+      const titleEl = document.querySelector("#title");
+      const messageEl =document.querySelector("#message");
+      titleEl.innerText = title;
+      messageEl.innerText = message;
+      errorEL.style.display = "inline-block";
+    }
+</script>
+
+</body>
+</html>
+\ No newline at end of file