Added some alerts and a new password field

frontend/src/Components/UserInfoModal.tsx

@@ -13,6 +13,7 @@ function UserInfoModal(props: {
 }): JSX.Element {
   const [showInput, setShowInput] = useState(false);
   const [newUsername, setNewUsername] = useState("");
+  const [newPassword, setNewPassword] = useState("");
   if (!props.isVisible) {
     return <></>;
   }
@@ -26,11 +27,34 @@ function UserInfoModal(props: {
   };
 
   const handleClickChangeName = (): void => {
-    const nameChange: StrNameChange = {
-      prevName: props.username,
-      newName: newUsername.replace(/ /g, ""),
-    };
-    ChangeUsername({ nameChange: nameChange });
+    if (newUsername === "") return;
+    if (
+      confirm(
+        `Do you really want to change username of ${props.username} to ${newUsername}?`,
+      )
+    ) {
+      const nameChange: StrNameChange = {
+        prevName: props.username,
+        newName: newUsername.replace(/ /g, ""),
+      };
+      ChangeUsername({ nameChange: nameChange });
+    } else {
+      alert("Name was not changed!");
+    }
+  };
+
+  const handleClickChangePassword = (): void => {
+    if (newPassword === "") return;
+
+    if (
+      confirm(`Are you sure you want to change password of ${props.username}?`)
+    ) {
+      //TODO: insert change password functionality
+      alert("Not implemented yet");
+      setNewPassword("");
+    } else {
+      alert("Password was not changed!");
+    }
   };
 
   return (
@@ -38,14 +62,14 @@ function UserInfoModal(props: {
       className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm 
       flex justify-center items-center"
     >
-      <div className="border-4 border-black bg-white rounded-lg text-center flex flex-col">
+      <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)
+            (Change Username or Password)
           </p>
           {showInput && (
             <div>
@@ -54,14 +78,25 @@ function UserInfoModal(props: {
                 type={"text"}
                 value={newUsername}
                 onChange={function (e): void {
-                  e.defaultPrevented;
                   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();
+                  handleClickChangePassword();
                 }}
                 type={"submit"}
               />