import { useState } from "react"; import { NewUser } from "../Types/Users"; import { api } from "../API/API"; import Logo from "../assets/Logo.svg"; import Button from "./Button"; function InputField(props: { label: string; type: string; value: string; onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; }): JSX.Element { return ( <div className="mb-4"> <label className="block text-gray-700 text-sm font-sans font-bold mb-2" htmlFor={props.label} > {props.label} </label> <input className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id={props.label} type={props.type} placeholder={props.label} value={props.value} onChange={props.onChange} /> </div> ); } export default function Register(): JSX.Element { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const handleRegister = async (): Promise<void> => { const newUser: NewUser = { userName: username, password }; await api.registerUser(newUser); // TODO: Handle errors }; return ( <div className="flex flex-col h-fit w-screen items-center justify-center"> <div className="border-4 border-black bg-white flex flex-col items-center justify-center h-fit w-fit rounded-3xl content-center pl-20 pr-20"> <form className="bg-white rounded px-8 pt-6 pb-8 mb-4 items-center justify-center flex flex-col w-fit h-fit" onSubmit={(e) => { e.preventDefault(); void handleRegister(); }} > <img src={Logo} className="logo w-[7vw] mb-10 mt-10" alt="TTIME Logo" /> <h3 className="pb-4 mb-2 text-center font-bold text-[18px]"> Register New User </h3> <InputField label="Username" type="text" value={username} onChange={(e) => { setUsername(e.target.value); }} /> <InputField label="Password" type="password" value={password} onChange={(e) => { setPassword(e.target.value); }} /> <div className="flex items-center justify-between"> <Button text="Register" onClick={(): void => { return; }} type="submit" /> </div> </form> <p className="text-center text-gray-500 text-xs"></p> </div> </div> ); }