From 2a9ac1f3011c74841a00607747a6d967e67e0434 Mon Sep 17 00:00:00 2001
From: gf-rog <gf.rogozinski@gmail.com>
Date: Fri, 22 Mar 2024 11:18:39 +0100
Subject: [PATCH] Fix password not changing due to lack of access token

---
 frontend/src/components/EditPassword.tsx |  9 +++++++--
 frontend/src/pages/EditDataPage.tsx      | 14 +++++++++-----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/EditPassword.tsx b/frontend/src/components/EditPassword.tsx
index a86e3f08..afeeeca4 100644
--- a/frontend/src/components/EditPassword.tsx
+++ b/frontend/src/components/EditPassword.tsx
@@ -9,13 +9,13 @@ import { PasswordForm } from "../models/PasswordForm";
 export interface EditDetails {
   provider: string;
   user: User;
+  token?: string;
   redirectToLogin: () => void;
   logout: () => Promise<boolean>;
 }
 
 function EditPassword(props: EditDetails) {
-  const { provider, user, redirectToLogin, logout } = props;
-  console.log(redirectToLogin);
+  const { provider, user, token, redirectToLogin, logout } = props;
   const navigate = useNavigate();
 
   const { register, handleSubmit, formState } = useForm<PasswordForm>({
@@ -56,6 +56,10 @@ function EditPassword(props: EditDetails) {
   };
 
   const editPassword = async (passwords?: PasswordForm): Promise<void> => {
+    if (!token) {
+      throw new Error("Token is undefined");
+    }
+
     if (user) {
       const response = await fetch(
         `http://localhost:5000/users/${user.id}/change-password`,
@@ -63,6 +67,7 @@ function EditPassword(props: EditDetails) {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
+            "Authorization": `Bearer ${token}`,
           },
           body: JSON.stringify(passwords || {}),
         },
diff --git a/frontend/src/pages/EditDataPage.tsx b/frontend/src/pages/EditDataPage.tsx
index 1f8fcbd4..054db11d 100644
--- a/frontend/src/pages/EditDataPage.tsx
+++ b/frontend/src/pages/EditDataPage.tsx
@@ -8,7 +8,8 @@ import EditPassword from "../components/EditPassword";
 import { useUser } from "../helpers/UserContext";
 
 function EditDataPage() {
-  const { provider, user, updateUser, redirectToLogin, logout } = useUser();
+  const { provider, user, token, updateUser, redirectToLogin, logout } =
+    useUser();
   const [showAnimation, setShowAnim] = useState(false);
   const [showContent, setShowContent] = useState(false);
 
@@ -29,12 +30,15 @@ function EditDataPage() {
             className="mx-50 my-20 lg:mx-56 grid grid-cols-1 gap-8"
             id="wrapper"
           >
-            <EditDetails
+            <EditDetails user={user} updateUser={updateUser} />
+            <EditPhoto user={user} updateUser={updateUser} />
+            <EditPassword
+              provider={provider}
               user={user}
-              updateUser={updateUser}
+              token={token}
+              redirectToLogin={redirectToLogin}
+              logout={logout}
             />
-            <EditPhoto user={user} updateUser={updateUser} />
-            <EditPassword provider={provider} user={user} redirectToLogin={redirectToLogin} logout={logout} />
           </div>
         </>
       ) : (