Profile page updated with auth service

src/pages/profile/profile.js

@@ -2,8 +2,6 @@ import {
   Box,
   Flex,
   Heading,
-  Text,
-  Input,
   Button,
   useToast,
   AlertDialog,
@@ -13,38 +11,44 @@ import {
   AlertDialogContent,
   AlertDialogOverlay,
 } from "@chakra-ui/react";
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import NavigationBar from "../../components/navbar/navbar";
+import { useNavigate } from "react-router-dom";
 
 const ProfilePage = () => {
-  const authToken = ""; // Load from storage.
-
-  const [currentPassword, setCurrentPassword] = useState("");
-  const [newPassword, setNewPassword] = useState("");
   const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState(false);
   const toast = useToast();
+  const navigate = useNavigate();
+  const baseUrl = (process.env.REACT_APP_AUTH_SERVICE_ENDPOINT);
 
-  const handleChangePassword = () => {
-    // TODO: Implement change password functionality
-    toast({
-      title: "Password Changed",
-      description: "Your password has been updated successfully!",
-      status: "success",
-      duration: 5000,
-      isClosable: true,
-    });
-  };
-
-  const handleDeleteAccount = () => {
-    // TODO: Implement delete account functionality
+  const handleDeleteAccount = async () => {
     setIsDeleteAlertOpen(false);
-    toast({
-      title: "Account Deleted",
-      description: "Your account has been deleted successfully!",
-      status: "success",
-      duration: 5000,
-      isClosable: true,
-    });
+    try {
+      const response = await fetch(`${baseUrl}/delete/`, {
+        method: 'DELETE',
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+      });
+      if (!response.ok) {
+        throw new Error("Failed to delete account");
+      }
+      toast({
+        title: "Account Deleted",
+        description: "Your account has been deleted successfully!",
+        status: "success",
+        duration: 5000,
+        isClosable: true,
+      });
+      navigate('/login');
+    } catch (error) {
+      toast({
+        title: "Failed to delete account.",
+        status: "error",
+        duration: 2000,
+        isClosable: true,
+      });
+    }
   };
 
   const cancelDeleteAccount = () => {
@@ -60,70 +64,62 @@ const ProfilePage = () => {
       <NavigationBar />
       <Flex align={"center"} justify={"center"} bg={"gray.50"} minH={'92vh'}>
         <Box p={8}>
-          <Flex alignItems="center">
+          <Flex alignItems="center" justify={'center'} flexDirection={'column'}>
             <Heading as="h1" fontSize="4xl" fontWeight="bold">
-              John Doe
+              Manage your account
             </Heading>
+
+            <Box py={4}>
+
+              <Button colorScheme="blue" onClick={() => {
+                localStorage.removeItem('token');
+                navigate("/");
+              }}>
+                Sign Out
+              </Button>
+            </Box>
+
+            <Box>
+              <Button
+                variant="outline"
+                colorScheme="red"
+                onClick={handleConfirmDeleteAccount}
+              >
+                Delete your account
+              </Button>
+              <AlertDialog
+                isOpen={isDeleteAlertOpen}
+                leastDestructiveRef={cancelDeleteAccount}
+              >
+                <AlertDialogOverlay>
+                  <AlertDialogContent>
+                    <AlertDialogHeader fontSize="lg" fontWeight="bold">
+                      Delete Account
+                    </AlertDialogHeader>
+                    <AlertDialogBody>
+                      Are you sure? This action cannot be undone.
+                    </AlertDialogBody>
+                    <AlertDialogFooter>
+                      <Button
+                        ref={cancelDeleteAccount}
+                        onClick={cancelDeleteAccount}
+                      >
+                        Cancel
+                      </Button>
+                      <Button
+                        colorScheme="red"
+                        onClick={() => handleDeleteAccount}
+                        ml={3}
+                      >
+                        Delete
+                      </Button>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialogOverlay>
+              </AlertDialog>
+            </Box>
+
           </Flex>
-          <Text fontSize="xl" mt={4}>
-            Password Management
-          </Text>
-          <Box mt={8}>
-            <Input
-              placeholder="Enter your current password"
-              value={currentPassword}
-              onChange={(e) => setCurrentPassword(e.target.value)}
-              mb={4}
-            />
-            <Input
-              placeholder="Enter your new password"
-              value={newPassword}
-              onChange={(e) => setNewPassword(e.target.value)}
-              mb={4}
-            />
-            <Button colorScheme="blue" onClick={handleChangePassword}>
-              Change Password
-            </Button>
-          </Box>
-          <Box mt={8}>
-            <Button
-              variant="outline"
-              colorScheme="red"
-              onClick={handleConfirmDeleteAccount}
-            >
-              Delete your account
-            </Button>
-            <AlertDialog
-              isOpen={isDeleteAlertOpen}
-              leastDestructiveRef={cancelDeleteAccount}
-            >
-              <AlertDialogOverlay>
-                <AlertDialogContent>
-                  <AlertDialogHeader fontSize="lg" fontWeight="bold">
-                    Delete Account
-                  </AlertDialogHeader>
-                  <AlertDialogBody>
-                    Are you sure? This action cannot be undone.
-                  </AlertDialogBody>
-                  <AlertDialogFooter>
-                    <Button
-                      ref={cancelDeleteAccount}
-                      onClick={cancelDeleteAccount}
-                    >
-                      Cancel
-                    </Button>
-                    <Button
-                      colorScheme="red"
-                      onClick={handleDeleteAccount}
-                      ml={3}
-                    >
-                      Delete
-                    </Button>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialogOverlay>
-            </AlertDialog>
-          </Box>
         </Box>
       </Flex>
     </>