Change password implemented, but not working

src/frontend/src/constants/constants.ts

@@ -534,6 +534,11 @@ export const CONTROL_INPUT_STATE = {
   username: "",
 };
 
+export const CONTROL_RESET_PASSWORD_STATE = {
+  password: "",
+  cnfPassword: "",
+};
+
 export const CONTROL_LOGIN_STATE = {
   username: "",
   password: "",

src/frontend/src/controllers/API/index.ts

@@ -427,6 +427,19 @@ export async function addUser(user: UserInputType): Promise<Array<Users>> {
   return [];
 }
 
+export async function resetPassword(user_id: string, password: string): Promise<Array<Users>> {
+  try {
+    const res = await api.post(`${BASE_URL_API}users/${user_id}/reset-password`, {password});
+    if (res.status === 200) {
+      return res.data;
+    }
+  } catch (error) {
+    console.log("Error:", error);
+    throw error;
+  }
+  return [];
+}
+
 export async function getUsersPage(
   skip: number,
   limit: number

src/frontend/src/pages/ProfileSettingsPage/index.tsx

@@ -1,17 +1,49 @@
-import { useContext, useEffect } from "react";
+import * as Form from "@radix-ui/react-form";
+import { useContext, useEffect, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import Header from "../../components/headerComponent";
-import { Input } from "../../components/ui/input";
+import InputComponent from "../../components/inputComponent";
+import { Button } from "../../components/ui/button";
+import { CONTROL_RESET_PASSWORD_STATE } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
+import { AuthContext } from "../../contexts/authContext";
 import { TabsContext } from "../../contexts/tabsContext";
+import { resetPassword } from "../../controllers/API";
+import {
+  inputHandlerEventType,
+  resetPasswordInputStateType,
+} from "../../types/components";
 export default function ProfileSettingsPage(): JSX.Element {
   const { setTabId } = useContext(TabsContext);
 
+  const [inputState, setInputState] = useState<resetPasswordInputStateType>(
+    CONTROL_RESET_PASSWORD_STATE
+  );
+
   // set null id
   useEffect(() => {
     setTabId("");
   }, []);
   const { setErrorData } = useContext(alertContext);
+  const { userData } = useContext(AuthContext);
+  const { password, cnfPassword } = inputState;
+
+  function changePassword() {
+    if (password !== cnfPassword) {
+      setErrorData({
+        title: "Error changing password",
+        list: ["Passwords do not match"],
+      });
+      return;
+    }
+    resetPassword(userData!.id, password);
+  }
+
+  function handleInput({
+    target: { name, value },
+  }: inputHandlerEventType): void {
+    setInputState((prev) => ({ ...prev, [name]: value }));
+  }
 
   return (
     <>
@@ -28,9 +60,73 @@ export default function ProfileSettingsPage(): JSX.Element {
           Change your profile settings like your password and your profile
           picture.
         </span>
-        <div className="community-pages-flows-panel">
-          <Input placeholder="Password"></Input>
-        </div>
+        <Form.Root
+          onSubmit={(event) => {
+            changePassword();
+            const data = Object.fromEntries(new FormData(event.currentTarget));
+            event.preventDefault();
+          }}
+          className="flex justify-between px-6"
+        >
+          <div className="flex gap-4">
+          <div className="mb-3 w-96">
+            <Form.Field name="username">
+              <Form.Label className="data-[invalid]:label-invalid">
+                Password <span className="font-medium text-destructive">*</span>
+              </Form.Label>
+
+              <Form.Control asChild>
+                <InputComponent
+                  onChange={(value) => {
+                    handleInput({ target: { name: "password", value } });
+                  }}
+                  value={password}
+                  isForm
+                  password={true}
+                  required
+                  placeholder="Password"
+                  className="w-full"
+                />
+              </Form.Control>
+
+              <Form.Message match="valueMissing" className="field-invalid">
+                Please enter your password
+              </Form.Message>
+            </Form.Field>
+          </div>
+          <div className="mb-3 w-96">
+            <Form.Field name="password">
+              <Form.Label className="data-[invalid]:label-invalid">
+                Confirm Password{" "}
+                <span className="font-medium text-destructive">*</span>
+              </Form.Label>
+
+              <InputComponent
+                onChange={(value) => {
+                  handleInput({ target: { name: "cnfPassword", value } });
+                }}
+                value={cnfPassword}
+                isForm
+                password={true}
+                required
+                placeholder="Confirm Password"
+                className="w-full"
+              />
+
+              <Form.Message className="field-invalid" match="valueMissing">
+                Please confirm your password
+              </Form.Message>
+            </Form.Field>
+          </div>
+          </div>
+          <div className="w-40">
+            <Form.Submit asChild>
+              <Button className="mr-3 mt-6 w-full" type="submit">
+                Reset Password
+              </Button>
+            </Form.Submit>
+          </div>
+        </Form.Root>
       </div>
     </>
   );

src/frontend/src/pages/loginPage/index.tsx

@@ -54,7 +54,7 @@ export default function LoginPage(): JSX.Element {
       setTimeout(() => {
         getLoggedUser()
           .then((user) => {
-            const isSuperUser = user.is_superuser;
+            const isSuperUser = user!.is_superuser;
             setIsAdmin(isSuperUser);
             setUserData(user);
           })

src/frontend/src/types/components/index.ts

@@ -262,6 +262,11 @@ export type loginInputStateType = {
   password: string;
 };
 
+export type resetPasswordInputStateType = {
+  password: string;
+  cnfPassword: string;
+};
+
 export type UserInputType = {
   username: string;
   password: string;