Now uses new input types and checks if input is allowed + alerts and design changes
This commit is contained in:
Peter KW
parent
2f3f7261a0
commit
f66b6a0f0a
2 changed files with 145 additions and 60 deletions
|
|
@ -3,7 +3,14 @@ import { NewUser } from "../Types/goTypes";
|
|||
import { api } from "../API/API";
|
||||
import Logo from "../assets/Logo.svg";
|
||||
import Button from "./Button";
|
||||
import InputField from "./InputField";
|
||||
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.
|
||||
|
|
@ -15,10 +22,26 @@ export default function Register(): JSX.Element {
|
|||
const [errMessage, setErrMessage] = useState<string>();
|
||||
|
||||
const handleRegister = async (): Promise<void> => {
|
||||
if (username === "" || password === "") {
|
||||
alert("Must provide username and password");
|
||||
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 ?? "",
|
||||
|
|
@ -39,7 +62,7 @@ export default function Register(): JSX.Element {
|
|||
<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"
|
||||
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();
|
||||
|
|
@ -47,33 +70,28 @@ export default function Register(): JSX.Element {
|
|||
>
|
||||
<img
|
||||
src={Logo}
|
||||
className="logo w-[7vw] mb-10 mt-10"
|
||||
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>
|
||||
<div className="space-y-3">
|
||||
<InputField
|
||||
label="Username"
|
||||
type="text"
|
||||
value={username ?? ""}
|
||||
|
||||
<UsernameInput
|
||||
username={username ?? ""}
|
||||
onChange={(e) => {
|
||||
setUsername(e.target.value);
|
||||
}}
|
||||
placeholder={"Username"}
|
||||
/>
|
||||
<InputField
|
||||
label="Password"
|
||||
type="password"
|
||||
value={password ?? ""}
|
||||
<div className="py-2" />
|
||||
<PasswordInput
|
||||
password={password ?? ""}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
}}
|
||||
placeholder={"Password"}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
|
||||
<div className="flex self-center justify-between">
|
||||
<Button
|
||||
text="Register"
|
||||
onClick={(): void => {
|
||||
|
|
|
|||
|
|
@ -2,32 +2,72 @@ import Button from "./Button";
|
|||
import DeleteUser from "./DeleteUser";
|
||||
import UserProjectListAdmin from "./UserProjectListAdmin";
|
||||
import { useState } from "react";
|
||||
import InputField from "./InputField";
|
||||
import ChangeUsername from "./ChangeUsername";
|
||||
import { StrNameChange } from "../Types/goTypes";
|
||||
import UsernameInput from "./Inputs/UsernameInput";
|
||||
import PasswordInput from "./Inputs/PasswordInput";
|
||||
import { alphanumeric, lowercase } from "../Data/regex";
|
||||
import {
|
||||
passwordLength,
|
||||
usernameLowLimit,
|
||||
usernameUpLimit,
|
||||
} from "../Data/constants";
|
||||
|
||||
function UserInfoModal(props: {
|
||||
isVisible: boolean;
|
||||
username: string;
|
||||
onClose: () => void;
|
||||
}): JSX.Element {
|
||||
const [showInput, setShowInput] = useState(false);
|
||||
const [showNameInput, setShowNameInput] = useState(false);
|
||||
const [showPwordInput, setShowPwordInput] = useState(false);
|
||||
const [newUsername, setNewUsername] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
if (!props.isVisible) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
const handleChangeNameView = (): void => {
|
||||
if (showInput) {
|
||||
setShowInput(false);
|
||||
/*
|
||||
* Switches name input between visible/invisible
|
||||
* and makes password input invisible
|
||||
*/
|
||||
const handleShowNameInput = (): void => {
|
||||
if (showPwordInput) setShowPwordInput(false);
|
||||
if (showNameInput) {
|
||||
setShowNameInput(false);
|
||||
setNewUsername("");
|
||||
} else {
|
||||
setShowInput(true);
|
||||
setShowNameInput(true);
|
||||
setNewPassword("");
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* Switches password input between visible/invisible
|
||||
* and makes username input invisible
|
||||
*/
|
||||
const handleShowPwordInput = (): void => {
|
||||
if (showNameInput) setShowNameInput(false);
|
||||
if (showPwordInput) {
|
||||
setShowPwordInput(false);
|
||||
setNewPassword("");
|
||||
} else {
|
||||
setShowPwordInput(true);
|
||||
setNewUsername("");
|
||||
}
|
||||
};
|
||||
|
||||
// Handles name change and checks if new name meets requirements
|
||||
const handleClickChangeName = (): void => {
|
||||
if (newUsername === "") return;
|
||||
if (
|
||||
!alphanumeric.test(newUsername) ||
|
||||
newUsername.length > usernameUpLimit ||
|
||||
newUsername.length < usernameLowLimit
|
||||
) {
|
||||
alert(
|
||||
"Please provide valid username: \n-Between 5-10 characters \n-No special characters (.-!?/*)",
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (
|
||||
confirm(
|
||||
`Do you really want to change username of ${props.username} to ${newUsername}?`,
|
||||
|
|
@ -43,9 +83,14 @@ function UserInfoModal(props: {
|
|||
}
|
||||
};
|
||||
|
||||
// Handles password change and checks if new password meets requirements
|
||||
const handleClickChangePassword = (): void => {
|
||||
if (newPassword === "") return;
|
||||
|
||||
if (newPassword.length !== passwordLength || !lowercase.test(newPassword)) {
|
||||
alert(
|
||||
"Please provide valid password: \n-Exactly 6 characters \n-No uppercase letters \n-No numbers \n-No special characters (.-!?/*)",
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (
|
||||
confirm(`Are you sure you want to change password of ${props.username}?`)
|
||||
) {
|
||||
|
|
@ -65,37 +110,57 @@ function UserInfoModal(props: {
|
|||
<div className="border-4 border-black bg-white rounded-2xl text-center flex flex-col">
|
||||
<div className="mx-10">
|
||||
<p className="font-bold text-[30px]">{props.username}</p>
|
||||
<p
|
||||
className="mb-[10px] hover:font-bold hover:cursor-pointer underline"
|
||||
onClick={handleChangeNameView}
|
||||
<p className="mt-2 font-bold text-[20px]">Change:</p>
|
||||
<p className="mt-2 space-x-3 mb-[10px]">
|
||||
<span
|
||||
className={
|
||||
showNameInput
|
||||
? "items-start font-semibold py-1 px-2 border-2 border-transparent rounded-full bg-orange-500 transition-all hover:bg-orange-600 text-white hover:cursor-pointer ring-2 ring-black"
|
||||
: "items-start font-medium py-1 px-2 border-2 border-gray-500 text-white rounded-full bg-orange-300 hover:bg-orange-400 transition-all hover:text-gray-100 hover:border-gray-600 hover:cursor-pointer"
|
||||
}
|
||||
onClick={handleShowNameInput}
|
||||
>
|
||||
(Change Username or Password)
|
||||
Username
|
||||
</span>{" "}
|
||||
<span
|
||||
className={
|
||||
showPwordInput
|
||||
? "items-start font-semibold py-1 px-2 border-2 border-transparent rounded-full bg-orange-500 transition-all hover:bg-orange-600 text-white hover:cursor-pointer ring-2 ring-black"
|
||||
: "items-start font-medium py-1 px-2 border-2 border-gray-500 text-white rounded-full bg-orange-300 hover:bg-orange-400 transition-all hover:text-gray-100 hover:border-gray-600 hover:cursor-pointer"
|
||||
}
|
||||
onClick={handleShowPwordInput}
|
||||
>
|
||||
Password
|
||||
</span>
|
||||
</p>
|
||||
{showInput && (
|
||||
<div>
|
||||
<InputField
|
||||
label={"New username"}
|
||||
type={"text"}
|
||||
value={newUsername}
|
||||
onChange={function (e): void {
|
||||
{showNameInput && (
|
||||
<div className="mt-7">
|
||||
<UsernameInput
|
||||
username={newUsername}
|
||||
onChange={(e) => {
|
||||
setNewUsername(e.target.value);
|
||||
}}
|
||||
placeholder={"Username"}
|
||||
/>
|
||||
<div className="m-4"></div>
|
||||
<InputField
|
||||
label={"New password"}
|
||||
type={"password"}
|
||||
value={newPassword}
|
||||
onChange={function (e): void {
|
||||
setNewPassword(e.target.value);
|
||||
}}
|
||||
placeholder={"Password"}
|
||||
/>
|
||||
<Button
|
||||
text={"Change"}
|
||||
onClick={function (): void {
|
||||
handleClickChangeName();
|
||||
}}
|
||||
type={"submit"}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{showPwordInput && (
|
||||
<div className="mt-7">
|
||||
<PasswordInput
|
||||
password={newPassword}
|
||||
onChange={(e) => {
|
||||
setNewPassword(e.target.value);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
text={"Change"}
|
||||
onClick={function (): void {
|
||||
handleClickChangePassword();
|
||||
}}
|
||||
type={"submit"}
|
||||
|
|
@ -122,7 +187,9 @@ function UserInfoModal(props: {
|
|||
text={"Close"}
|
||||
onClick={function (): void {
|
||||
setNewUsername("");
|
||||
setShowInput(false);
|
||||
setNewPassword("");
|
||||
setShowNameInput(false);
|
||||
setShowPwordInput(false);
|
||||
props.onClose();
|
||||
}}
|
||||
type="button"
|
||||
|
|
|
|||
Loading…
Reference in a new issue