register werks

6 files changed, 107 insertions, 9 deletions

diff --git a/package.json b/package.json
index 88a60a1..19859f6 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,15 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@types/uuid": "^8.3.0",
+    "axios": "^0.21.1",
+    "email-validator": "^2.0.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.1",
     "typescript": "^4.1.3",
+    "uuid": "^8.3.2",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
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>
diff --git a/yarn.lock b/yarn.lock
index 63cf0b1..646c9f5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1938,6 +1938,11 @@
   dependencies:
     source-map "^0.6.1"
 
+"@types/uuid@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.0.tgz#215c231dff736d5ba92410e6d602050cce7e273f"
+  integrity sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ==
+
 "@types/webpack-sources@*":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-2.0.0.tgz#08216ab9be2be2e1499beaebc4d469cec81e82a7"
@@ -2602,6 +2607,13 @@ axe-core@^4.0.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.1.1.tgz#70a7855888e287f7add66002211a423937063eaf"
   integrity sha512-5Kgy8Cz6LPC9DJcNb3yjAXTu3XihQgEdnIg50c//zOC/MyLP0Clg+Y8Sh9ZjjnvBrDZU4DgXS9C3T9r4/scGZQ==
 
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -4367,6 +4379,11 @@ elliptic@^6.5.3:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+email-validator@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/email-validator/-/email-validator-2.0.4.tgz#b8dfaa5d0dae28f1b03c95881d904d4e40bfe7ed"
+  integrity sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==
+
 emittery@^0.7.1:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.2.tgz#25595908e13af0f5674ab419396e2fb394cdfa82"
@@ -5168,6 +5185,11 @@ follow-redirects@^1.0.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
   integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==
 
+follow-redirects@^1.10.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.1.tgz#5f69b813376cee4fd0474a3aba835df04ab763b7"
+  integrity sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -11162,6 +11184,11 @@ uuid@^8.3.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.1.tgz#2ba2e6ca000da60fce5a196954ab241131e05a31"
   integrity sha512-FOmRr+FmWEIG8uhZv6C2bTgEVXsHk08kE7mPlrBbEe+c3r9pjceVPgupIfNIhc4yx55H69OXANrUaSuu9eInKg==
 
+uuid@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
 v8-compile-cache@^2.0.3:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz#9471efa3ef9128d2f7c6a7ca39c4dd6b5055b132"