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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
<!--Template for the EXPANSION 'Allowing users to login and register 'securely' (2 points) ' -->
<div id="user-stuff">
<button id="login">Show Login</button>
<div id="login-info">
<br>
<input id="login-username" type="text" placeholder="Username"> <br>
<input id="login-password" type="password" placeholder="Password"> <br>
<button id="login-submit">Login</button> <br><br>
</div>
<button id="register">Show Register</button>
<div id="register-info">
<br>
<input id="register-username" type="text" placeholder="Username"> <br>
<input id="register-password1" type="password" placeholder="Password"> <br>
<input id="register-password2" type="password" placeholder="Confirm Password"> <br>
<button id="register-submit">Register</button> <br> <br>
</div>
</div>
<script>
var login = {}
login.button = document.getElementById("login")
login.info = document.getElementById("login-info")
login.info.style.display = "none"
login.username = document.getElementById("login-username")
login.password = document.getElementById("login-password")
login.submit = document.getElementById("login-submit")
login.show = false
var register = {}
register.button = document.getElementById("register")
register.info = document.getElementById("register-info")
register.info.style.display = "none"
register.username = document.getElementById("register-username")
register.password1 = document.getElementById("register-password1")
register.password2 = document.getElementById("register-password2")
register.submit = document.getElementById("register-submit")
register.show = false
login.button.onclick = ()=> {
if(!login.show){
login.button.textContent = "Hide Login"
login.show = true
login.info.style.display = "block"
} else {
login.button.textContent = "Show Login"
login.show = false
login.info.style.display = "none"
}
}
login.submit.onclick = async ()=> {
var username = login.username.value,
password = login.password.value;
var req = {
username,
password
}
var res = await fetch('/login',{
method: 'POST',
credentials: 'same-origin',
body: JSON.stringify(req)
})
res = await res.json()
console.log(res)
// How is your response formatted? Was it a success or a failure?
// If the user is now logged in, then maybe hide all the login/register stuff?
}
register.button.onclick = () => {
if(!register.show){
register.button.textContent = "Hide Register"
register.show = true
register.info.style.display = "block"
} else {
register.button.textContent = "Show Register"
register.show = false
register.info.style.display = "none"
}
}
register.submit.onclick = async ()=> {
var username = register.username.value,
password1 = register.password1.value,
password2 = register.password2.value;
if (password1 != password2)
return alert("The passwords don't match")
var req = {
username,
password: password1
}
var res = await fetch('/register',{
method: 'POST',
credentials: 'same-origin',
body: JSON.stringify(req)
})
res = await res.json()
console.log(res)
// How is your response formatted? Was it a success or a failure?
// If the user is now logged in, then maybe hide all the login/register stuff?
}
</script>
|
