Fix password not changing due to lack of access token

Karol-2 · Mar 22, 2024 · 2a9ac1f · 2a9ac1f
1 parent 33fec8d
commit 2a9ac1f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git 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,13 +56,18 @@ 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`,
         {
           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
@@ -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>
         </>
       ) : (