From f66b6a0f0a880ad289bd22eacd6dd39dfb8de826 Mon Sep 17 00:00:00 2001
From: Peter KW <peter.k.w.96@gmail.com>
Date: Sat, 13 Apr 2024 21:18:01 +0200
Subject: [PATCH] Now uses new input types and checks if input is allowed +
 alerts and design changes

---
 frontend/src/Components/Register.tsx      |  72 +++++++-----
 frontend/src/Components/UserInfoModal.tsx | 133 ++++++++++++++++------
 2 files changed, 145 insertions(+), 60 deletions(-)

diff --git a/frontend/src/Components/Register.tsx b/frontend/src/Components/Register.tsx
index af5808c..281042f 100644
--- a/frontend/src/Components/Register.tsx
+++ b/frontend/src/Components/Register.tsx
@@ -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,9 +22,25 @@ 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");
-      return;
+    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, "") ?? "",
@@ -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 ?? ""}
-              onChange={(e) => {
-                setUsername(e.target.value);
-              }}
-              placeholder={"Username"}
-            />
-            <InputField
-              label="Password"
-              type="password"
-              value={password ?? ""}
-              onChange={(e) => {
-                setPassword(e.target.value);
-              }}
-              placeholder={"Password"}
-            />
-          </div>
-          <div className="flex items-center justify-between">
+
+          <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 => {
diff --git a/frontend/src/Components/UserInfoModal.tsx b/frontend/src/Components/UserInfoModal.tsx
index 6caf8d9..764d176 100644
--- a/frontend/src/Components/UserInfoModal.tsx
+++ b/frontend/src/Components/UserInfoModal.tsx
@@ -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}
-          >
-            (Change Username or Password)
+          <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}
+            >
+              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"