login pagina werkt

1 files changed, 39 insertions, 3 deletions

diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 2c33bd7..bdaebc6 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -1,7 +1,43 @@
+import { v4 as uuidv4 } from 'uuid';
+import axios from 'axios';
+
 import { NavBar } from '../components/navbar';
 import { CenteredPage } from '../components/page';
 import { Vierkant, Input, Button } from '../components/ui';
 
+var ids = {
+	email: uuidv4(),
+	password: uuidv4()
+}
+
+function submitLogin() {
+	var formData = {
+		email: (document.getElementById(ids.email) as HTMLInputElement).value,
+		password: (document.getElementById(ids.password) as HTMLInputElement).value
+	}
+
+	if ( !formData.email ||
+		 !formData.password ) {
+		alert("Vul alsjeblieft alle velden in!");
+		return;
+	}
+
+	axios({
+		method: "post",
+		url: `${window.location.origin}/api/auth/login`,
+		headers: {"content-type": "application/json"},
+		data: formData
+	})
+	.then(() => window.location.pathname = "/")
+	.catch(error => {
+		if (error.response.status === 401) {
+			alert("Verkeerde gebruikersnaam/wachtwoord combinatie!")
+			return;
+		}
+		alert("Er is iets fout gegaan!");
+	});
+}
+
 export default function LoginPage() {
 	return (
 		<div>
@@ -15,8 +51,8 @@ export default function LoginPage() {
 					textAlign: "center"
 				}}>
 					<Vierkant>
-						<Input label="email of gebruikersnaam" style={{ marginBottom: 12 }}></Input>
-						<Input label="wachtwoord" type="password"></Input>
+						<Input id={ids.email} label="email of gebruikersnaam" style={{ marginBottom: 12 }}></Input>
+						<Input id={ids.password} label="wachtwoord" type="password"></Input>
 						<div style={{
 							marginTop: 24,
 							gridGap: 24,
@@ -24,7 +60,7 @@ export default function LoginPage() {
 							gridTemplateColumns: "1fr 1fr"
 						}}>
 						<Button text="Registreren" style={{ backgroundColor: "var(--background-alt)" }} onclick={() => window.location.pathname = "/register"}></Button>
-							<Button text="Inloggen"></Button>
+							<Button text="Inloggen" onclick={submitLogin}></Button>
 						</div>
 					</Vierkant>
 				</div>