fix: 401 error code redirect to login page

src/components/Setting/ChangePasswordForm.tsx

@@ -93,6 +93,14 @@ export default function ChangePasswordForm() {
       });
 
       const json = await res.json();
+
+      if (json.status === 401) {
+        // If the user is not authenticated, redirect to the login page
+        // Clear the cookie
+        Cookies.remove(TOKEN_COOKIE_NAME);
+        window.location.href = '/login';
+      }
+
       if (res.ok) {
         setAuthProvider(json.authProvider);
       } else {

src/components/Setting/UpdateProfileForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useCallback, useEffect, useState } from 'preact/hooks';
 import { TOKEN_COOKIE_NAME } from '../../lib/constants';
 import Cookies from 'js-cookie';
 
@@ -55,6 +55,9 @@ export default function UpdateProfileForm() {
           setLinkedin(linkedin || '');
           setWebsite(website || '');
         }
+
+        // Check if the user has changed their email
+        fetchProfile();
         setMessage({
           type: 'success',
           message: 'Profile updated successfully',
@@ -69,9 +72,7 @@ export default function UpdateProfileForm() {
       });
   };
 
-  // Make a request to the backend to fill in the form with the current values
-  useEffect(() => {
-    async function fetchProfile() {
+  const fetchProfile = useCallback(async () => {
     // Set the loading state
     setIsLoading(true);
 
@@ -91,6 +92,14 @@ export default function UpdateProfileForm() {
       });
 
       const json = await res.json();
+
+      if (json.status === 401) {
+        // If the user is not authenticated, redirect to the login page
+        // Clear the cookie
+        Cookies.remove(TOKEN_COOKIE_NAME);
+        window.location.href = '/login';
+      }
+
       if (res.ok) {
         setName(json.name);
         setEmail(json.email);
@@ -111,8 +120,10 @@ export default function UpdateProfileForm() {
       });
     }
     setIsLoading(false);
-    }
+  }, []);
 
+  // Make a request to the backend to fill in the form with the current values
+  useEffect(() => {
     fetchProfile();
   }, []);