1 files changed, 58 insertions, 46 deletions

diff --git a/pages/login.tsx b/pages/login.tsx
index abfca04..1e14573 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -3,47 +3,43 @@ 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';
+import { Button, Input, Vierkant } from '../components/ui';
 
+import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
 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,
-		password: (document.getElementById("password") as HTMLInputElement).value
-	}
+		email: (document.getElementById('email') as HTMLInputElement).value,
+		password: (document.getElementById('password') as HTMLInputElement).value,
+	};
 
-	if ( !formData.email ||
-		 !formData.password ) {
-		toast({ message: "Vul alsjeblieft alle velden in!",
-			  type: "error",
-			  icon: <ReportProblemOutlinedIcon/>});
+	if (
+		!formData.email
+		|| !formData.password
+	) {
+		toast({ message: 'Vul alsjeblieft alle velden in!', type: 'error', icon: <ReportProblemOutlinedIcon /> });
 		return;
 	}
 
 	axios({
-		method: "post",
+		method: 'post',
 		url: `${window.location.origin}/api/auth/login`,
-		headers: {"content-type": "application/json"},
-		data: formData
+		headers: { 'content-type': 'application/json' },
+		data: formData,
 	})
-	.then(() => window.location.pathname = "/")
-	.catch(error => {
-		if (error.response.status === 401) {
-			toast({ message: "Verkeerde gebruikersnaam of wachtwoord!",
-				  type: "error",
-				  icon: <VpnKeyIcon/>});
-			return;
-		}
-		toast({ message: "Er is iets fout gegaan",
-			  type: "error",
-			  icon: <ErrorOutlineIcon/>});
-	});
+		.then(() => window.location.pathname = '/')
+		.catch(error => {
+			if (error.response.status === 401) {
+				toast({ message: 'Verkeerde gebruikersnaam of wachtwoord!', type: 'error', icon: <VpnKeyIcon /> });
+				return;
+			}
+			toast({ message: 'Er is iets fout gegaan', type: 'error', icon: <ErrorOutlineIcon /> });
+		});
 }
 
 export default function LoginPage() {
@@ -51,29 +47,46 @@ 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"
-				}}>
+			<NavBar />
+			<CenteredPage width={500} style={{ height: '100vh' }}>
+				<div
+					style={{
+						position: 'relative',
+						top: '50%',
+						transform: 'translateY(-50%)',
+						margin: '0 auto',
+						textAlign: 'center',
+					}}
+				>
 					<Vierkant>
 						<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={{
-								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(null, toast)}></Button>
+							<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={{
+									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(null, toast)}></Button>
 							</div>
-							<input type="submit" style={{ display: "none" }}/>
+							<input type='submit' style={{ display: 'none' }} />
 						</form>
 					</Vierkant>
 				</div>
@@ -81,4 +94,3 @@ export default function LoginPage() {
 		</div>
 	);
 }
-