register werks

4 files changed, 76 insertions, 9 deletions

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index e5d2915..7725ca8 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -49,7 +49,7 @@ export function NavBar() {
 				<div style={{
 					width: 24,
 					height: 24,
-					background: "#888888",
+					/* background: "#888888", */
 					borderRadius: 12
 				}}>
 					<PersonIcon/>
diff --git a/src/components/ui.tsx b/src/components/ui.tsx
index 29f77ff..c2ce35e 100644
--- a/src/components/ui.tsx
+++ b/src/components/ui.tsx
@@ -57,9 +57,10 @@ export function Button(props: {
 export function Input(props: {
 	label?: string,
 	style?: CSSProperties,
-	type?: string
+	type?: string,
+	id?: string
 }) {
-	return <input type={props.type || "text"} placeholder={props.label} spellCheck={false} style={{
+	return <input id={props.id} type={props.type || "text"} placeholder={props.label} spellCheck={false} style={{
 		padding: 12,
 		border: 0,
 		width: "calc(100% - 24px)",
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index bbbd363..2c33bd7 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -1,5 +1,5 @@
 import { NavBar } from '../components/navbar';
-import { CenteredPage, PageTitle } from '../components/page';
+import { CenteredPage } from '../components/page';
 import { Vierkant, Input, Button } from '../components/ui';
 
 export default function LoginPage() {
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
index 4ab3106..25ec30b 100644
--- a/src/pages/register.tsx
+++ b/src/pages/register.tsx
@@ -1,7 +1,73 @@
 import { NavBar } from '../components/navbar';
-import { CenteredPage, PageTitle } from '../components/page';
+import { CenteredPage } from '../components/page';
 import { Vierkant, Input, Button } from '../components/ui';
 
+import { v4 as uuidv4 } from 'uuid';
+import { validate as validateEmail } from 'email-validator';
+import axios from 'axios';
+
+var ids = {
+	username: uuidv4(),
+	email: uuidv4(),
+	password: uuidv4()
+}
+
+function submitRegister() {
+	var formData = {
+		username: (document.getElementById(ids.username) as HTMLInputElement).value,
+		email: (document.getElementById(ids.email) as HTMLInputElement).value,
+		password: (document.getElementById(ids.password) as HTMLInputElement).value
+	}
+
+	if ( !formData.username ||
+	   	 !formData.email ||
+		 !formData.password ) {
+		alert("Vul alsjeblieft alle velden in!");
+		return;
+	}
+
+	var passwordRegex: RegExp = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{8,}$/;
+	/*
+	 * ^ 				Begin string
+	 * (?=.*[A-Z]) 		Minimaal één hoofdletter
+	 * (?=.*[a-z]) 		Minimaal één kleine letter
+	 * (?=.*[0-9]) 		Minimaal één getal
+	 * .{8,} 			Minimaal acht tekens in lengte
+	 * $ 				Ende string
+	 * https://stackoverflow.com/questions/5142103/regex-to-validate-password-strength
+	 */
+
+	//TODO: alert -> react toast / material-ui snackbar
+	if ( formData.username.length > 35 ) {
+		alert("Je gebruikersnaam kan maximaal 35 tekens lang zijn!");
+	}
+
+	if ( !validateEmail(formData.email) ) {
+		alert("Voer alsjeblieft een geldig e-mail adres in!");
+	}
+
+	//TODO: wachtwoord max 72 tekens ivm bcrypt
+	if ( !formData.password.match(passwordRegex) ) {
+		alert("Je wachtwoord moet minimaal 8 tekens lang zijn en een hoofdletter, kleine letter, en een nummer bevatten!");
+	}
+	
+	axios({
+		method: "post",
+		url: `${window.location.origin}/api/auth/signup`,
+		headers: {"content-type": "application/json"},
+		data: formData
+	})
+	.then(() => {
+		//TODO: email verificatie
+		// redirect naar home, automatische login
+		window.location.pathname = "/";
+	})
+	.catch(error => {
+		alert("Er is iets fout gegaan!");
+		console.log(error);
+	});
+}
+
 export default function RegisterPage() {
 	return (
 		<div>
@@ -15,10 +81,10 @@ export default function RegisterPage() {
 					textAlign: "center"
 				}}>
 					<Vierkant>
-						<Input label="gebruikersnaam" style={{ marginBottom: 12 }}></Input>
-						<Input label="email" style={{ marginBottom: 12 }}></Input>
-						<Input label="wachtwoord" type="password"></Input>
-						<Button text="Registreren" style={{ marginTop: 24 }}></Button>
+						<Input id={ids.username} label="gebruikersnaam" style={{ marginBottom: 12 }}></Input>
+						<Input id={ids.email} label="email" style={{ marginBottom: 12 }}></Input>
+						<Input id={ids.password} label="wachtwoord" type="password"></Input>
+						<Button text="Registreren" style={{ marginTop: 24 }} onclick={submitRegister}></Button>
 					</Vierkant>
 				</div>
 			</CenteredPage>