import { useState } from "react"; import { NewUser } from "../Types/goTypes"; import { api } from "../API/API"; import Logo from "../assets/Logo.svg"; import Button from "./Button"; import UsernameInput from "./Inputs/UsernameInput"; import PasswordInput from "./Inputs/PasswordInput"; import { alphanumeric, lowercase } from "../Data/regex"; import { passwordLength, usernameLowLimit, usernameUpLimit, } from "../Data/constants"; /** * Renders a registration form for the admin to add new users in. * @returns The JSX element representing the registration form. */ export default function Register(): JSX.Element { const [username, setUsername] = useState(); const [password, setPassword] = useState(); const [errMessage, setErrMessage] = useState(); const handleRegister = async (): Promise => { if (username !== undefined) { if ( username.length > usernameUpLimit || username.length < usernameLowLimit || !alphanumeric.test(username) ) { alert( "Please provide valid username: \n-Between 5-10 characters \n-No special characters (.-!?/*)", ); return; } } if (password !== undefined) { if (password.length !== passwordLength || !lowercase.test(password)) { alert( "Please provide valid password: \n-Exactly 6 characters \n-No uppercase letters \n-No numbers \n-No special characters (.-!?/*)", ); return; } } const newUser: NewUser = { username: username?.replace(/ /g, "") ?? "", password: password ?? "", }; const response = await api.registerUser(newUser); if (response.success) { alert(`${newUser.username} added!`); setPassword(""); setUsername(""); } else { alert("User not added, name could be taken"); setErrMessage(response.message ?? "Unknown error"); console.error(errMessage); } }; return (
{ e.preventDefault(); void handleRegister(); }} > TTIME Logo

Register New User

{ setUsername(e.target.value); }} />
{ setPassword(e.target.value); }} />

); }