blob: d3829a2e15cc54a98c6b81a5d8a983abbd67478d (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
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>
|
