Added gradient and changed types of patch user

src/frontend/src/components/headerComponent/index.tsx

@@ -140,7 +140,7 @@ export default function Header(): JSX.Element {
                     className={
                       "h-7 w-7 rounded-full focus-visible:outline-0 " +
                       gradients[
-                        parseInt(userData?.id ?? "", 10) % gradients.length
+                        parseInt(userData?.id ?? "", 30) % gradients.length
                       ]
                     }
                   />

src/frontend/src/constants/constants.ts

@@ -534,9 +534,10 @@ export const CONTROL_INPUT_STATE = {
   username: "",
 };
 
-export const CONTROL_RESET_PASSWORD_STATE = {
+export const CONTROL_PATCH_USER_STATE = {
   password: "",
   cnfPassword: "",
+  gradient: "",
 };
 
 export const CONTROL_LOGIN_STATE = {

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

@@ -6,6 +6,7 @@ import {
   APIObjectType,
   LoginType,
   Users,
+  changeUser,
   sendAllProps,
 } from "../../types/api/index";
 import { UserInputType } from "../../types/components";
@@ -427,19 +428,6 @@ 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
@@ -470,7 +458,7 @@ export async function deleteUser(user_id: string) {
   }
 }
 
-export async function updateUser(user_id: string, user: Users) {
+export async function updateUser(user_id: string, user: changeUser) {
   try {
     const res = await api.patch(`${BASE_URL_API}users/${user_id}`, user);
     if (res.status === 200) {

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

@@ -4,20 +4,20 @@ import IconComponent from "../../components/genericIconComponent";
 import Header from "../../components/headerComponent";
 import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
-import { CONTROL_RESET_PASSWORD_STATE } from "../../constants/constants";
+import { CONTROL_PATCH_USER_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 { updateUser } from "../../controllers/API";
 import {
   inputHandlerEventType,
-  resetPasswordInputStateType,
+  patchUserInputStateType,
 } from "../../types/components";
 export default function ProfileSettingsPage(): JSX.Element {
   const { setTabId } = useContext(TabsContext);
 
-  const [inputState, setInputState] = useState<resetPasswordInputStateType>(
+  const [inputState, setInputState] = useState<patchUserInputStateType>(
-    CONTROL_RESET_PASSWORD_STATE
+    CONTROL_PATCH_USER_STATE
   );
 
   // set null id
@@ -26,9 +26,9 @@ export default function ProfileSettingsPage(): JSX.Element {
   }, []);
   const { setErrorData } = useContext(alertContext);
   const { userData } = useContext(AuthContext);
-  const { password, cnfPassword } = inputState;
+  const { password, cnfPassword, gradient } = inputState;
 
-  function changePassword() {
+  function handlePatchUser() {
     if (password !== cnfPassword) {
       setErrorData({
         title: "Error changing password",
@@ -36,7 +36,8 @@ export default function ProfileSettingsPage(): JSX.Element {
       });
       return;
     }
-    resetPassword(userData!.id, password);
+
+    updateUser(userData!.id, {password, profile_image: gradient});
   }
 
   function handleInput({
@@ -62,7 +63,7 @@ export default function ProfileSettingsPage(): JSX.Element {
         </span>
         <Form.Root
           onSubmit={(event) => {
-            changePassword();
+            handlePatchUser();
             const data = Object.fromEntries(new FormData(event.currentTarget));
             event.preventDefault();
           }}
@@ -70,7 +71,7 @@ export default function ProfileSettingsPage(): JSX.Element {
         >
           <div className="flex gap-4">
           <div className="mb-3 w-96">
-            <Form.Field name="username">
+            <Form.Field name="password">
               <Form.Label className="data-[invalid]:label-invalid">
                 Password <span className="font-medium text-destructive">*</span>
               </Form.Label>
@@ -95,7 +96,7 @@ export default function ProfileSettingsPage(): JSX.Element {
             </Form.Field>
           </div>
           <div className="mb-3 w-96">
-            <Form.Field name="password">
+            <Form.Field name="cnfPassword">
               <Form.Label className="data-[invalid]:label-invalid">
                 Confirm Password{" "}
                 <span className="font-medium text-destructive">*</span>
@@ -117,12 +118,34 @@ export default function ProfileSettingsPage(): JSX.Element {
                 Please confirm your password
               </Form.Message>
             </Form.Field>
+            <Form.Field name="gradient">
+              <Form.Label className="data-[invalid]:label-invalid">
+                Insert Gradient{" "}
+                <span className="font-medium text-destructive">*</span>
+              </Form.Label>
+
+              <InputComponent
+                onChange={(value) => {
+                  handleInput({ target: { name: "gradient", value } });
+                }}
+                value={gradient}
+                isForm
+                password={true}
+                required
+                placeholder="Insert Gradient"
+                className="w-full"
+              />
+
+              <Form.Message className="field-invalid" match="valueMissing">
+                Please insert gradient
+              </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
+                Save
               </Button>
             </Form.Submit>
           </div>

src/frontend/src/types/api/index.ts

@@ -78,6 +78,14 @@ export type LoginAuthType = {
   token_type?: string;
 };
 
+export type changeUser = {
+  username?: string;
+  is_active?: boolean;
+  is_superuser?: boolean;
+  password?: string;
+  profile_image?: string;
+}
+
 export type Users = {
   id: string;
   username: string;

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

@@ -262,9 +262,10 @@ export type loginInputStateType = {
   password: string;
 };
 
-export type resetPasswordInputStateType = {
+export type patchUserInputStateType = {
   password: string;
   cnfPassword: string;
+  gradient: string;
 };
 
 export type UserInputType = {