diff options
author | lonkaars <l.leblansch@gmail.com> | 2021-02-10 11:14:00 +0100 |
---|---|---|
committer | lonkaars <l.leblansch@gmail.com> | 2021-02-10 11:14:00 +0100 |
commit | cf6416ae99aaba26857bc63f1bbe26954d312efa (patch) | |
tree | 8a704c80df921418b781b8cddb944a10b068a2c3 | |
parent | da8d6e89ba9e70f166939f9294c4c52fd33003a1 (diff) |
added form submission on enter
-rw-r--r-- | pages/login.tsx | 30 | ||||
-rw-r--r-- | pages/register.tsx | 13 |
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> |