90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
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>
|
|
);
|
|
}
|