added form submission on enter

2 files changed, 26 insertions, 17 deletions

diff --git a/pages/login.tsx b/pages/login.tsx
index 86066e6..9df9490 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -1,10 +1,13 @@
 import axios from 'axios';
+import { FormEvent } from 'react';
 
 import { NavBar } from '../components/navbar';
 import { CenteredPage } from '../components/page';
 import { Vierkant, Input, Button } from '../components/ui';
 
-function submitLogin() {
+function submitLogin(event?: FormEvent<HTMLFormElement>) {
+	event.preventDefault();
+
 	var formData = {
 		email: (document.getElementById("email") as HTMLInputElement).value,
 		password: (document.getElementById("password") as HTMLInputElement).value
@@ -45,17 +48,20 @@ export default function LoginPage() {
 					textAlign: "center"
 				}}>
 					<Vierkant>
-						<Input 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}></Button>
-						</div>
+						<form onSubmit={submitLogin}>
+							<Input 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}></Button>
+							</div>
+							<input type="submit" style={{ display: "none" }}/>
+						</form>
 					</Vierkant>
 				</div>
 			</CenteredPage>
diff --git a/pages/register.tsx b/pages/register.tsx
index 4940580..b9b8325 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -1,12 +1,14 @@
+import axios from 'axios';
+import { validate as validateEmail } from 'email-validator';
+import { FormEvent } from 'react';
+
 import { NavBar } from '../components/navbar';
 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';
+function submitRegister(event?: FormEvent<HTMLFormElement>) {
+	event.preventDefault();
 
-function submitRegister() {
 	var formData = {
 		username: (document.getElementById("username") as HTMLInputElement).value,
 		email: (document.getElementById("email") as HTMLInputElement).value,
@@ -78,11 +80,12 @@ export default function RegisterPage() {
 					textAlign: "center"
 				}}>
 					<Vierkant>
-						<form>
+						<form onSubmit={submitRegister}>
 							<Input 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>
+							<input type="submit" style={{ display: "none" }}/>
 						</form>
 					</Vierkant>
 				</div>