diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/navbar.tsx | 2 | ||||
| -rw-r--r-- | src/components/ui.tsx | 5 | ||||
| -rw-r--r-- | src/pages/login.tsx | 2 | ||||
| -rw-r--r-- | src/pages/register.tsx | 76 |
4 files changed, 76 insertions, 9 deletions
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> |