From b770622603b3165b216727b9097c6e35c7e560f4 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 8 Sep 2023 11:23:57 -0300
Subject: [PATCH] Added gradient and changed types of patch user

---
 .../src/components/headerComponent/index.tsx  |  2 +-
 src/frontend/src/constants/constants.ts       |  3 +-
 src/frontend/src/controllers/API/index.ts     | 16 +------
 .../src/pages/ProfileSettingsPage/index.tsx   | 47 ++++++++++++++-----
 src/frontend/src/types/api/index.ts           |  8 ++++
 src/frontend/src/types/components/index.ts    |  3 +-
 6 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index e6702e342..69b493e89 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/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
                       ]
                     }
                   />
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index b5b2c266e..a7c8b111b 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/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 = {
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 406ba1862..15e315f97 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/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) {
diff --git a/src/frontend/src/pages/ProfileSettingsPage/index.tsx b/src/frontend/src/pages/ProfileSettingsPage/index.tsx
index 642b3aa73..189b7c23f 100644
--- a/src/frontend/src/pages/ProfileSettingsPage/index.tsx
+++ b/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>(
-    CONTROL_RESET_PASSWORD_STATE
+  const [inputState, setInputState] = useState<patchUserInputStateType>(
+    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>
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index b690d7134..247e3b2a2 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/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;
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index a5413f3a9..51db60dbd 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/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 = {