Added gradient chooser and success messages

src/frontend/src/components/gradientChooserComponent/index.tsx

@@ -0,0 +1,13 @@
+import { useState } from "react";
+import { gradients } from "../../utils/styleUtils";
+
+
+export default function GradientChooserComponent({value, onChange}){
+    return (
+        <div className="flex flex-wrap gap-4 justify-center items-center">
+            {gradients.map((gradient, idx) => 
+            <div onClick={() => {onChange(gradient)}} className={"w-12 h-12 rounded-full transition-all duration-400 " + gradient + (value === gradient ?  " shadow-lg ring-2 ring-primary" : "")} key={idx}></div>
+            )}
+            </div>
+    )
+}

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

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

src/frontend/src/contexts/authContext.tsx

@@ -63,7 +63,7 @@ export function AuthProvider({ children }): React.ReactElement {
             .then((user) => {
               setUserData(user);
               setLoading(false);
-              const isSuperUser = user.is_superuser;
+              const isSuperUser = user!.is_superuser;
               setIsAdmin(isSuperUser);
             })
             .catch((error) => {});

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

@@ -463,6 +463,8 @@ export async function updateUser(user_id: string, user: changeUser) {
     const res = await api.patch(`${BASE_URL_API}users/${user_id}`, user);
     if (res.status === 200) {
       return res.data;
+    } else {
+      throw new Error(res.data.toString());
     }
   } catch (error) {
     console.log("Error:", error);

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

@@ -1,6 +1,7 @@
 import * as Form from "@radix-ui/react-form";
 import { useContext, useEffect, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
+import GradientChooserComponent from "../../components/gradientChooserComponent";
 import Header from "../../components/headerComponent";
 import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
@@ -13,6 +14,7 @@ import {
   inputHandlerEventType,
   patchUserInputStateType,
 } from "../../types/components";
+import { gradients } from "../../utils/styleUtils";
 export default function ProfileSettingsPage(): JSX.Element {
   const { setTabId } = useContext(TabsContext);
 
@@ -24,7 +26,7 @@ export default function ProfileSettingsPage(): JSX.Element {
   useEffect(() => {
     setTabId("");
   }, []);
-  const { setErrorData } = useContext(alertContext);
+  const { setErrorData, setSuccessData } = useContext(alertContext);
   const { userData } = useContext(AuthContext);
   const { password, cnfPassword, gradient } = inputState;
 
@@ -36,8 +38,12 @@ export default function ProfileSettingsPage(): JSX.Element {
       });
       return;
     }
+    try{
+      updateUser(userData!.id, { password, profile_image: gradient }).then(() => {setSuccessData({title: "Changes saved successfully!"})});
+    } catch (error) {
+      setErrorData({title: "Error saving changes", list: [error as string]});
+    }
 
-    updateUser(userData!.id, {password, profile_image: gradient});
   }
 
   function handleInput({
@@ -67,13 +73,14 @@ export default function ProfileSettingsPage(): JSX.Element {
             const data = Object.fromEntries(new FormData(event.currentTarget));
             event.preventDefault();
           }}
-          className="flex justify-between px-6"
+          className="flex h-full flex-col px-6 pb-16"
         >
+          <div className="flex h-full flex-col gap-4">
             <div className="flex gap-4">
               <div className="mb-3 w-96">
                 <Form.Field name="password">
                   <Form.Label className="data-[invalid]:label-invalid">
-                Password <span className="font-medium text-destructive">*</span>
+                    Password{" "}
                   </Form.Label>
 
                   <Form.Control asChild>
@@ -84,7 +91,6 @@ export default function ProfileSettingsPage(): JSX.Element {
                       value={password}
                       isForm
                       password={true}
-                  required
                       placeholder="Password"
                       className="w-full"
                     />
@@ -99,7 +105,6 @@ export default function ProfileSettingsPage(): JSX.Element {
                 <Form.Field name="cnfPassword">
                   <Form.Label className="data-[invalid]:label-invalid">
                     Confirm Password{" "}
-                <span className="font-medium text-destructive">*</span>
                   </Form.Label>
 
                   <InputComponent
@@ -109,7 +114,6 @@ export default function ProfileSettingsPage(): JSX.Element {
                     value={cnfPassword}
                     isForm
                     password={true}
-                required
                     placeholder="Confirm Password"
                     className="w-full"
                   />
@@ -118,37 +122,33 @@ export default function ProfileSettingsPage(): JSX.Element {
                     Please confirm your password
                   </Form.Message>
                 </Form.Field>
+              </div>
+            </div>
             <Form.Field name="gradient">
               <Form.Label className="data-[invalid]:label-invalid">
-                Insert Gradient{" "}
+                Profile Gradient{" "}
-                <span className="font-medium text-destructive">*</span>
               </Form.Label>
 
-              <InputComponent
+              <div className="mt-4 w-[1010px]">
+              <GradientChooserComponent
+                value={gradient == "" ? (userData!.profile_image ?? gradients[parseInt(userData!.id ?? "", 30) % gradients.length]) : gradient}
                 onChange={(value) => {
                   handleInput({ target: { name: "gradient", value } });
                 }}
-                value={gradient}
-                isForm
-                password={true}
-                required
-                placeholder="Insert Gradient"
-                className="w-full"
               />
-
+              </div>
-              <Form.Message className="field-invalid" match="valueMissing">
-                Please insert gradient
-              </Form.Message>
             </Form.Field>
           </div>
-          </div>
+
-          <div className="w-40">
+          <div className="flex w-full justify-end">
+            <div className="w-32">
               <Form.Submit asChild>
                 <Button className="mr-3 mt-6 w-full" type="submit">
                   Save
                 </Button>
               </Form.Submit>
             </div>
+          </div>
         </Form.Root>
       </div>
     </>

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

@@ -91,6 +91,7 @@ export type Users = {
   username: string;
   is_active: boolean;
   is_superuser: boolean;
+  profile_image: string;
   create_at: Date;
   updated_at: Date;
 };