semi working next project

1 files changed, 71 insertions, 0 deletions

diff --git a/pages/login.tsx b/pages/login.tsx
new file mode 100644
index 0000000..8528a39
--- /dev/null
+++ b/pages/login.tsx
@@ -0,0 +1,71 @@
+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>
+			<NavBar/>
+			<CenteredPage width={500} style={{ height: "100vh" }}>
+				<div style={{
+					position: "relative",
+					top: "50%",
+					transform: "translateY(-50%)",
+					margin: "0 auto",
+					textAlign: "center"
+				}}>
+					<Vierkant>
+						<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,
+							display: "grid",
+							gridTemplateColumns: "1fr 1fr"
+						}}>
+							<Button href="/register" text="Registreren" style={{ backgroundColor: "var(--background-alt)"}}></Button>
+							<Button text="Inloggen" onclick={submitLogin}></Button>
+						</div>
+					</Vierkant>
+				</div>
+			</CenteredPage>
+		</div>
+	);
+}
+