108 lines
3.3 KiB
TypeScript
108 lines
3.3 KiB
TypeScript
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<string>();
|
|
const [password, setPassword] = useState<string>();
|
|
const [errMessage, setErrMessage] = useState<string>();
|
|
|
|
const handleRegister = async (): Promise<void> => {
|
|
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 (
|
|
<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 justify-center flex flex-col w-fit h-fit"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
void handleRegister();
|
|
}}
|
|
>
|
|
<img
|
|
src={Logo}
|
|
className="logo self-center 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>
|
|
|
|
<UsernameInput
|
|
username={username ?? ""}
|
|
onChange={(e) => {
|
|
setUsername(e.target.value);
|
|
}}
|
|
/>
|
|
<div className="py-2" />
|
|
<PasswordInput
|
|
password={password ?? ""}
|
|
onChange={(e) => {
|
|
setPassword(e.target.value);
|
|
}}
|
|
/>
|
|
|
|
<div className="flex self-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>
|
|
);
|
|
}
|