DOM -> toast :tada:

3 files changed, 38 insertions, 21 deletions

diff --git a/pages/game.tsx b/pages/game.tsx
index 030938c..f03933f 100644
--- a/pages/game.tsx
+++ b/pages/game.tsx
@@ -12,16 +12,19 @@ import { DialogBox } from '../components/dialogBox';
 import { CurrentGameSettings } from '../components/gameSettings';
 import { Button, SearchBar, IconLabelButton } from '../components/ui';
 import { GameBar } from '../components/gameBar';
+import { ToastContext, toastType } from '../components/toast';
 
 import WifiTetheringRoundedIcon from '@material-ui/icons/WifiTetheringRounded';
 import LinkRoundedIcon from '@material-ui/icons/LinkRounded';
 import RefreshIcon from '@material-ui/icons/Refresh';
+import FlagOutlinedIcon from '@material-ui/icons/FlagOutlined';
 
 function VoerGame(props: {
 	gameID: string;
 	active: boolean;
 	player1: boolean;
 	io: Socket;
+	toast: toastType;
 }) {
 	var width = 7;
 	var height = 6;
@@ -58,7 +61,7 @@ function VoerGame(props: {
 		});
 
 		props.io.on("resign", () => {
-			alert("resign")
+			props.toast("Het potje is opgegeven", "normal", <FlagOutlinedIcon style={{ fontSize: 32 }}/>);
 		});
 
 		setIoListeners(true);
@@ -174,6 +177,7 @@ export default function GamePage() {
 	var gameIDUrl = useRouter().query["id"] as string;
 
 	var { io } = useContext(SocketContext);
+	var { toast } = useContext(ToastContext);
 
 	if (gameIDUrl && gameIDUrl != gameID) {
 		// join game
@@ -207,7 +211,8 @@ export default function GamePage() {
 				active={active}
 				gameID={gameID}
 				player1={player1}
-				io={io}/>
+				io={io}
+				toast={toast}/>
 			<DialogBox
 				title="Nieuw spel"
 				style={{ display: gameIDUrl || gameID ? "none" : "inline-block" }}
diff --git a/pages/login.tsx b/pages/login.tsx
index 1cbacb1..e33883f 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -1,12 +1,17 @@
 import axios from 'axios';
-import { FormEvent } from 'react';
+import { FormEvent, useContext } from 'react';
 
 import { NavBar } from '../components/navbar';
 import { CenteredPage } from '../components/page';
 import { Vierkant, Input, Button } from '../components/ui';
+import { ToastContext, toastType } from '../components/toast';
 
-function submitLogin(event?: FormEvent<HTMLFormElement>) {
-	event.preventDefault();
+import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
+import VpnKeyIcon from '@material-ui/icons/VpnKey';
+import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
+
+function submitLogin(event?: FormEvent<HTMLFormElement>, toast?: toastType) {
+	event?.preventDefault();
 
 	var formData = {
 		email: (document.getElementById("email") as HTMLInputElement).value,
@@ -15,7 +20,7 @@ function submitLogin(event?: FormEvent<HTMLFormElement>) {
 
 	if ( !formData.email ||
 		 !formData.password ) {
-		alert("Vul alsjeblieft alle velden in!");
+		toast("Vul alsjeblieft alle velden in!", "error", <ReportProblemOutlinedIcon style={{ fontSize: 32 }}/>);
 		return;
 	}
 
@@ -28,14 +33,16 @@ function submitLogin(event?: FormEvent<HTMLFormElement>) {
 	.then(() => window.location.pathname = "/")
 	.catch(error => {
 		if (error.response.status === 401) {
-			alert("Verkeerde gebruikersnaam/wachtwoord combinatie!")
+			toast("Verkeerde gebruikersnaam of wachtwoord!", "error", <VpnKeyIcon style={{ fontSize: 32 }}/>);
 			return;
 		}
-		alert("Er is iets fout gegaan!");
+		toast("Er is iets fout gegaan", "error", <ErrorOutlineIcon style={{ fontSize: 32 }}/>);
 	});
 }
 
 export default function LoginPage() {
+	var { toast } = useContext(ToastContext);
+
 	return (
 		<div>
 			<NavBar/>
@@ -48,7 +55,7 @@ export default function LoginPage() {
 					textAlign: "center"
 				}}>
 					<Vierkant>
-						<form onSubmit={submitLogin}>
+						<form onSubmit={(e) => submitLogin(e, toast)}>
 							<Input autofocus autocomplete="username" id="email" label="email of gebruikersnaam" style={{ marginBottom: 12 }}></Input>
 							<Input autocomplete="current-password" id="password" label="wachtwoord" type="password"></Input>
 							<div style={{
@@ -58,7 +65,7 @@ export default function LoginPage() {
 								gridTemplateColumns: "1fr 1fr"
 							}}>
 								<Button href="/register" text="Registreren" style={{ backgroundColor: "var(--background-alt)"}}></Button>
-								<Button text="Inloggen" onclick={submitLogin}></Button>
+								<Button text="Inloggen" onclick={() => submitLogin(null, toast)}></Button>
 							</div>
 							<input type="submit" style={{ display: "none" }}/>
 						</form>
diff --git a/pages/register.tsx b/pages/register.tsx
index 5426cbc..b6db605 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -1,13 +1,17 @@
 import axios from 'axios';
 import { validate as validateEmail } from 'email-validator';
-import { FormEvent } from 'react';
+import { FormEvent, useContext } from 'react';
 
 import { NavBar } from '../components/navbar';
 import { CenteredPage } from '../components/page';
 import { Vierkant, Input, Button } from '../components/ui';
+import { ToastContext, toastType } from '../components/toast';
 
-function submitRegister(event?: FormEvent<HTMLFormElement>) {
-	event.preventDefault();
+import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
+import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
+
+function submitRegister(event?: FormEvent<HTMLFormElement>, toast?: toastType) {
+	event?.preventDefault();
 
 	var formData = {
 		username: (document.getElementById("username") as HTMLInputElement).value,
@@ -18,7 +22,7 @@ function submitRegister(event?: FormEvent<HTMLFormElement>) {
 	if ( !formData.username ||
 	   	 !formData.email ||
 		 !formData.password ) {
-		alert("Vul alsjeblieft alle velden in!");
+		toast("Vul alsjeblieft alle velden in!", "error", <ReportProblemOutlinedIcon style={{ fontSize: 32 }}/>);
 		return;
 	}
 
@@ -33,20 +37,19 @@ function submitRegister(event?: FormEvent<HTMLFormElement>) {
 	 * https://stackoverflow.com/questions/5142103/regex-to-validate-password-strength
 	 */
 
-	//TODO: alert -> react toast / material-ui snackbar
 	if ( formData.username.length < 3 || formData.username.length > 35 ) {
-		alert("Je gebruikersnaam moet tussen de 3 en 35 tekens lang zijn!");
+		toast("Je gebruikersnaam moet tussen de 3 en 35 letters zijn!", "error", <ReportProblemOutlinedIcon style={{ fontSize: 32 }}/>);
 		return;
 	}
 
 	if ( !validateEmail(formData.email) ) {
-		alert("Voer alsjeblieft een geldig e-mail adres in!");
+		toast("Vul alsjeblieft een geldig email-adres in!", "error", <ReportProblemOutlinedIcon style={{ fontSize: 32 }}/>);
 		return;
 	}
 
 	//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!");
+		toast("Je wachtwoord moet een hoofdletter, kleine letter en een getal bevatten!", "error", <ReportProblemOutlinedIcon style={{ fontSize: 32 }}/>);
 		return;
 	}
 	
@@ -62,12 +65,14 @@ function submitRegister(event?: FormEvent<HTMLFormElement>) {
 		window.location.pathname = "/";
 	})
 	.catch(error => {
-		alert("Er is iets fout gegaan!");
+		toast("Er is iets fout gegaan", "error", <ErrorOutlineIcon style={{ fontSize: 32 }}/>);
 		console.log(error);
 	});
 }
 
 export default function RegisterPage() {
+	var { toast } = useContext(ToastContext);
+
 	return (
 		<div>
 			<NavBar/>
@@ -80,11 +85,11 @@ export default function RegisterPage() {
 					textAlign: "center"
 				}}>
 					<Vierkant>
-						<form onSubmit={submitRegister}>
+						<form onSubmit={(e) => submitRegister(e, toast)}>
 							<Input autofocus autocomplete="username" id="username" label="gebruikersnaam" style={{ marginBottom: 12 }}></Input>
 							<Input autocomplete="email" id="email" label="email" style={{ marginBottom: 12 }}></Input>
 							<Input autocomplete="new-password" id="password" label="wachtwoord" type="password"></Input>
-							<Button text="Registreren" style={{ marginTop: 24 }} onclick={submitRegister}></Button>
+							<Button text="Registreren" style={{ marginTop: 24 }} onclick={() => submitRegister(null, toast)}></Button>
 							<input type="submit" style={{ display: "none" }}/>
 						</form>
 					</Vierkant>