diff options
Diffstat (limited to 'src/server/Pages/Login.cshtml')
| -rw-r--r-- | src/server/Pages/Login.cshtml | 166 |
1 files changed, 90 insertions, 76 deletions
diff --git a/src/server/Pages/Login.cshtml b/src/server/Pages/Login.cshtml index d3829a2..fc6ce55 100644 --- a/src/server/Pages/Login.cshtml +++ b/src/server/Pages/Login.cshtml @@ -10,86 +10,100 @@ <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> + <link rel="stylesheet" href="~/codyframe.css"> + <link rel="stylesheet" href="~/login.css"> </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> +<div class="container max-width-xs padding-y-lg"> + <form onsubmit="return false"> + <div class="text-component text-center margin-bottom-sm"> + <h1>dough</h1> + </div> + <div class="alert js-alert" id="alert" role="alert"> + <div class="flex items-center justify-between"> + <div class="flex items-center"> + <strong id="title">:</strong> + <p id="message"></p> + </div> + + <button class="reset alert__close-btn js-alert__close-btn"> + <svg class="icon" viewBox="0 0 24 24"> + <title>Close alert</title> + <g + stroke-linecap="square" + stroke-linejoin="miter" + stroke-width="3" + stroke="currentColor" + fill="none" + stroke-miterlimit="10"> + <line x1="19" y1="5" x2="5" y2="19"></line> + <line fill="none" x1="19" y1="19" x2="5" y2="5"></line> + </g> + </svg> + </button> + </div> + </div> + <div class="margin-bottom-sm"> + <label class="form-label margin-bottom-xxxs" for="username">Email</label> + <input + class="form-control width-100%" + type="text" + name="username" + id="username" + autofocus/> + </div> -<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"; + <div class="margin-bottom-sm"> + <div class="flex justify-between margin-bottom-xxxs"> + <label class="form-label" for="password">Password</label> + <span class="text-sm"> + <a href="http://localhost:3000/forgot">Forgot?</a> + </span> + </div> - 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> + <input + type="password" + class="form-control width-100%" + name="password" + id="password"/> + </div> + <div class="margin-bottom-sm"> + <input class="checkbox" type="checkbox" id="persist"> + <label for="persist">Remeber me</label> + </div> + @Html.AntiForgeryToken() + <div class="margin-bottom-sm"> + <button + id="login-btn" + class="btn btn--primary btn--md btn--preserve-width width-100%"> + <span class="btn__content-b"> + <svg aria-hidden="true" viewBox="0 0 16 16" class="icon icon--is-spinning"> + <title>Loading</title> + <g stroke-width="1" fill="currentColor" stroke="currentColor"> + <path + d="M.5,8a7.5,7.5,0,1,1,1.91,5" + fill="none" + stroke="currentColor" + stroke-linecap="round" + stroke-linejoin="round"> + </path> + </g> + </svg> + + </span> + <span class="btn__content-a"> + Login + </span> + </button> + </div> + + <div class="text-center"> + <p class="text-sm">Don't have an account? <a href="http://localhost:3000/signup">Get started</a></p> + </div> + </form> +</div> +<script src="~/codyframe.js"></script> +<script src="~/login.js"></script> </body> </html>
\ No newline at end of file |