user.html

1 files changed, 110 insertions, 0 deletions

diff --git a/templates/user.html b/templates/user.html
new file mode 100644
index 0000000..cde9267
--- /dev/null
+++ b/templates/user.html
@@ -0,0 +1,110 @@
+
+<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>
\ No newline at end of file