Split AccountSettings

frontend/src/components/settings/AccordionControl.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Accordion, Title } from '@mantine/core';
+
+const AccordionControl = ({ children }) => (
+  <Accordion.Control>
+    <Title order={4}>{children}</Title>
+  </Accordion.Control>
+);
+
+export default AccordionControl;

frontend/src/components/settings/account/AccountSettings.jsx

@@ -7,16 +7,15 @@ import {
   Title,
   Stack,
   Accordion,
-  TextInput,
-  Box,
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { useAuth } from '../../../contexts/AuthContext';
 import { useProfileSettings } from '../../../hooks/useProfileSettings';
 import EmailPasswordModal from '../../modals/account/EmailPasswordModal';
-import DeleteAccountModal from '../../modals/account/DeleteAccountModal';
 import SecuritySettings from './SecuritySettings';
 import ProfileSettings from './ProfileSettings';
+import DangerZoneSettings from './DangerZoneSettings';
+import AccordionControl from '../AccordionControl';
 
 // Reducer for managing settings state
 const initialState = {
@@ -55,26 +54,11 @@ function settingsReducer(state, action) {
   }
 }
 
-const AccordionControl = ({ children }) => (
-  <Accordion.Control>
-    <Title order={4}>{children}</Title>
-  </Accordion.Control>
-);
-
-const DangerZone = ({ onDeleteClick }) => (
-  <Box>
-    <Button color="red" variant="light" onClick={onDeleteClick} fullWidth>
-      Delete Account
-    </Button>
-  </Box>
-);
-
 const AccountSettings = ({ opened, onClose }) => {
-  const { user, logout, refreshUser } = useAuth();
-  const { loading, updateProfile, deleteAccount } = useProfileSettings();
+  const { user, refreshUser } = useAuth();
+  const { loading, updateProfile } = useProfileSettings();
   const [state, dispatch] = useReducer(settingsReducer, initialState);
   const isInitialMount = useRef(true);
-  const [deleteModalOpened, setDeleteModalOpened] = useState(false);
   const [emailModalOpened, setEmailModalOpened] = useState(false);
 
   // Initialize settings on mount
@@ -169,15 +153,6 @@ const AccountSettings = ({ opened, onClose }) => {
     }
   };
 
-  const handleDelete = async (password) => {
-    const result = await deleteAccount(password);
-    if (result.success) {
-      setDeleteModalOpened(false);
-      onClose();
-      logout();
-    }
-  };
-
   return (
     <>
       <Modal
@@ -240,7 +215,7 @@ const AccountSettings = ({ opened, onClose }) => {
             <Accordion.Item value="danger">
               <AccordionControl>Danger Zone</AccordionControl>
               <Accordion.Panel>
-                <DangerZone onDeleteClick={() => setDeleteModalOpened(true)} />
+                <DangerZoneSettings />
               </Accordion.Panel>
             </Accordion.Item>
           </Accordion>
@@ -266,12 +241,6 @@ const AccountSettings = ({ opened, onClose }) => {
         onConfirm={handleEmailConfirm}
         email={state.localSettings.email}
       />
-
-      <DeleteAccountModal
-        opened={deleteModalOpened}
-        onClose={() => setDeleteModalOpened(false)}
-        onConfirm={handleDelete}
-      />
     </>
   );
 };

frontend/src/components/settings/account/DangerZoneSettings.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { Box, Button, Text } from '@mantine/core';
+import DeleteAccountModal from '../../modals/account/DeleteAccountModal';
+import { useAuth } from '../../../contexts/AuthContext';
+import { useProfileSettings } from '../../../hooks/useProfileSettings';
+
+const DangerZoneSettings = () => {
+  const { logout } = useAuth();
+  const { deleteAccount } = useProfileSettings();
+  const [deleteModalOpened, setDeleteModalOpened] = useState(false);
+
+  const handleDelete = async (password) => {
+    const result = await deleteAccount(password);
+    if (result.success) {
+      setDeleteModalOpened(false);
+      logout();
+    }
+  };
+
+  return (
+    <Box mb="md">
+      <Text size="sm" mb="sm" c="dimmed">
+        Once you delete your account, there is no going back. Please be certain.
+      </Text>
+      <Button
+        color="red"
+        variant="light"
+        onClick={() => setDeleteModalOpened(true)}
+        fullWidth
+      >
+        Delete Account
+      </Button>
+
+      <DeleteAccountModal
+        opened={deleteModalOpened}
+        onClose={() => setDeleteModalOpened(false)}
+        onConfirm={handleDelete}
+      />
+    </Box>
+  );
+};
+
+export default DangerZoneSettings;

frontend/src/components/settings/workspace/WorkspaceSettings.jsx

@@ -16,6 +16,7 @@ import GitSettings from './GitSettings';
 import GeneralSettings from './GeneralSettings';
 import { useModalContext } from '../../../contexts/ModalContext';
 import DangerZoneSettings from './DangerZoneSettings';
+import AccordionControl from '../AccordionControl';
 
 const initialState = {
   localSettings: {},
@@ -53,12 +54,6 @@ function settingsReducer(state, action) {
   }
 }
 
-const AccordionControl = ({ children }) => (
-  <Accordion.Control>
-    <Title order={4}>{children}</Title>
-  </Accordion.Control>
-);
-
 const WorkspaceSettings = () => {
   const { currentWorkspace, updateSettings } = useWorkspace();
   const { settingsModalVisible, setSettingsModalVisible } = useModalContext();