Add DeleteAccountModal and EmailPasswordModal tests

app/src/components/modals/account/DeleteAccountModal.test.tsx

@@ -0,0 +1,772 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import {
+  render as rtlRender,
+  screen,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
+import React from 'react';
+import { MantineProvider } from '@mantine/core';
+import DeleteAccountModal from './DeleteAccountModal';
+
+// Mock notifications
+vi.mock('@mantine/notifications', () => ({
+  notifications: {
+    show: vi.fn(),
+  },
+}));
+
+// Helper wrapper component for testing
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <MantineProvider defaultColorScheme="light">{children}</MantineProvider>
+);
+
+// Custom render function
+const render = (ui: React.ReactElement) => {
+  return rtlRender(ui, { wrapper: TestWrapper });
+};
+
+describe('DeleteAccountModal', () => {
+  const mockOnConfirm = vi.fn();
+  const mockOnClose = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockOnConfirm.mockResolvedValue(undefined);
+    mockOnClose.mockClear();
+  });
+
+  describe('Modal Visibility', () => {
+    it('renders modal when opened', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      expect(screen.getByText('Delete Account')).toBeInTheDocument();
+      expect(
+        screen.getByText('Warning: This action cannot be undone')
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          'Please enter your password to confirm account deletion.'
+        )
+      ).toBeInTheDocument();
+      expect(
+        screen.getByTestId('delete-account-password-input')
+      ).toBeInTheDocument();
+      expect(screen.getByTestId('cancel-delete-button')).toBeInTheDocument();
+      expect(screen.getByTestId('confirm-delete-button')).toBeInTheDocument();
+    });
+
+    it('does not render modal when closed', () => {
+      render(
+        <DeleteAccountModal
+          opened={false}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      expect(screen.queryByText('Delete Account')).not.toBeInTheDocument();
+    });
+
+    it('calls onClose when modal is closed via cancel button', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const cancelButton = screen.getByTestId('cancel-delete-button');
+      fireEvent.click(cancelButton);
+
+      expect(mockOnClose).toHaveBeenCalled();
+    });
+  });
+
+  describe('Form Interaction', () => {
+    it('updates password input when typed', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('delete-account-password-input');
+      fireEvent.change(passwordInput, { target: { value: 'testpassword123' } });
+
+      expect((passwordInput as HTMLInputElement).value).toBe('testpassword123');
+    });
+
+    it('handles form submission with valid password', async () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('delete-account-password-input');
+      const deleteButton = screen.getByTestId('confirm-delete-button');
+
+      fireEvent.change(passwordInput, { target: { value: 'validpassword' } });
+      fireEvent.click(deleteButton);
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith('validpassword');
+      });
+    });
+
+    it('prevents submission with empty password', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const deleteButton = screen.getByTestId('confirm-delete-button');
+      fireEvent.click(deleteButton);
+
+      // Should not call the function with empty password
+      expect(mockOnConfirm).not.toHaveBeenCalled();
+    });
+
+    it('clears input after successful submission', async () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('delete-account-password-input');
+      const deleteButton = screen.getByTestId('confirm-delete-button');
+
+      fireEvent.change(passwordInput, { target: { value: 'testpassword' } });
+      fireEvent.click(deleteButton);
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith('testpassword');
+      });
+
+      await waitFor(() => {
+        expect((passwordInput as HTMLInputElement).value).toBe('');
+      });
+    });
+  });
+
+  describe('Modal Actions', () => {
+    it('has cancel and delete buttons', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const deleteButton = screen.getByTestId('confirm-delete-button');
+      const cancelButton = screen.getByTestId('cancel-delete-button');
+
+      expect(deleteButton).toBeInTheDocument();
+      expect(cancelButton).toBeInTheDocument();
+
+      expect(deleteButton).toHaveRole('button');
+      expect(cancelButton).toHaveRole('button');
+    });
+
+    it('has proper button styling and colors', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const deleteButton = screen.getByTestId('confirm-delete-button');
+      const cancelButton = screen.getByTestId('cancel-delete-button');
+
+      expect(deleteButton).toHaveTextContent('Delete');
+      expect(cancelButton).toHaveTextContent('Cancel');
+    });
+
+    it('closes modal when cancel button is clicked', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const cancelButton = screen.getByTestId('cancel-delete-button');
+      fireEvent.click(cancelButton);
+
+      expect(mockOnClose).toHaveBeenCalled();
+    });
+
+    it('calls onConfirm when delete button is clicked with valid input', async () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('delete-account-password-input');
+      const deleteButton = screen.getByTestId('confirm-delete-button');
+
+      fireEvent.change(passwordInput, { target: { value: 'mypassword' } });
+      fireEvent.click(deleteButton);
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledTimes(1);
+        expect(mockOnConfirm).toHaveBeenCalledWith('mypassword');
+      });
+    });
+  });
+
+  describe('Warning Display', () => {
+    it('displays the warning message prominently', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const warningElement = screen.getByText(
+        'Warning: This action cannot be undone'
+      );
+      expect(warningElement).toBeInTheDocument();
+    });
+
+    it('displays the confirmation instructions', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      expect(
+        screen.getByText(
+          'Please enter your password to confirm account deletion.'
+        )
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('Password Validation', () => {
+    it('handles various password formats', async () => {
+      const passwords = [
+        'simple123',
+        'Complex!Password@123',
+        'spaces in password',
+        '12345',
+        'very-long-password-with-many-characters-and-symbols!@#$%^&*()',
+      ];
+
+      for (const password of passwords) {
+        const { unmount } = render(
+          <DeleteAccountModal
+            opened={true}
+            onClose={mockOnClose}
+            onConfirm={mockOnConfirm}
+          />
+        );
+
+        const passwordInput = screen.getByTestId(
+          'delete-account-password-input'
+        );
+        const deleteButton = screen.getByTestId('confirm-delete-button');
+
+        fireEvent.change(passwordInput, { target: { value: password } });
+        fireEvent.click(deleteButton);
+
+        await waitFor(() => {
+          expect(mockOnConfirm).toHaveBeenCalledWith(password);
+        });
+
+        unmount();
+        vi.clearAllMocks();
+        mockOnConfirm.mockResolvedValue(undefined);
+      }
+    });
+
+    it('handles unicode characters in passwords', async () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('delete-account-password-input');
+      const deleteButton = screen.getByTestId('confirm-delete-button');
+
+      const unicodePassword = 'パスワード123';
+      fireEvent.change(passwordInput, { target: { value: unicodePassword } });
+      fireEvent.click(deleteButton);
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith(unicodePassword);
+      });
+    });
+
+    it('handles whitespace-only passwords', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('delete-account-password-input');
+      const deleteButton = screen.getByTestId('confirm-delete-button');
+
+      fireEvent.change(passwordInput, { target: { value: '   ' } });
+      fireEvent.click(deleteButton);
+
+      // Should not call confirm function for whitespace-only password
+      expect(mockOnConfirm).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles deletion errors gracefully', async () => {
+      mockOnConfirm.mockRejectedValue(new Error('Account deletion failed'));
+
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('delete-account-password-input');
+      const deleteButton = screen.getByTestId('confirm-delete-button');
+
+      fireEvent.change(passwordInput, { target: { value: 'wrongpassword' } });
+      fireEvent.click(deleteButton);
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith('wrongpassword');
+      });
+
+      // Modal should handle the error gracefully (not crash)
+      expect(screen.getByText('Delete Account')).toBeInTheDocument();
+    });
+
+    it('does not clear input when deletion fails', async () => {
+      mockOnConfirm.mockRejectedValue(new Error('Invalid password'));
+
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('delete-account-password-input');
+      const deleteButton = screen.getByTestId('confirm-delete-button');
+
+      fireEvent.change(passwordInput, { target: { value: 'testpassword' } });
+      fireEvent.click(deleteButton);
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith('testpassword');
+      });
+
+      // Input should retain value when deletion fails
+      expect((passwordInput as HTMLInputElement).value).toBe('testpassword');
+    });
+
+    it('handles authentication errors', async () => {
+      mockOnConfirm.mockRejectedValue(new Error('Authentication failed'));
+
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('delete-account-password-input');
+      const deleteButton = screen.getByTestId('confirm-delete-button');
+
+      fireEvent.change(passwordInput, { target: { value: 'authtest' } });
+      fireEvent.click(deleteButton);
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith('authtest');
+      });
+
+      // Should not crash the component
+      expect(screen.getByText('Delete Account')).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper form labels and structure', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('delete-account-password-input');
+      expect(passwordInput).toBeInTheDocument();
+      expect(passwordInput.tagName).toBe('INPUT');
+      expect(passwordInput).toHaveAttribute('type', 'password');
+    });
+
+    it('has proper button roles', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const buttons = screen.getAllByRole('button');
+      expect(buttons.length).toBeGreaterThanOrEqual(2); // Cancel and Delete buttons
+
+      const cancelButton = screen.getByRole('button', { name: /cancel/i });
+      const deleteButton = screen.getByRole('button', {
+        name: /delete/i,
+      });
+
+      expect(cancelButton).toBeInTheDocument();
+      expect(deleteButton).toBeInTheDocument();
+    });
+
+    it('supports keyboard navigation', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('delete-account-password-input');
+
+      // Check that the input is focusable (not disabled or readonly)
+      expect(passwordInput).not.toHaveAttribute('disabled');
+      expect(passwordInput).not.toHaveAttribute('readonly');
+
+      // Check that the input can receive keyboard events
+      fireEvent.keyDown(passwordInput, { key: 'a' });
+      fireEvent.change(passwordInput, { target: { value: 'test' } });
+
+      expect((passwordInput as HTMLInputElement).value).toBe('test');
+
+      // Verify the input is accessible via keyboard navigation
+      expect(passwordInput).toHaveAttribute('type', 'password');
+      expect(passwordInput).toHaveAccessibleName(); // Has proper label
+    });
+
+    it('has proper modal structure', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      // Modal should have proper title
+      expect(screen.getByText('Delete Account')).toBeInTheDocument();
+
+      // Should have form elements
+      expect(
+        screen.getByTestId('delete-account-password-input')
+      ).toBeInTheDocument();
+    });
+
+    it('has proper warning styling and visibility', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const warningText = screen.getByText(
+        'Warning: This action cannot be undone'
+      );
+      expect(warningText).toBeInTheDocument();
+    });
+  });
+
+  describe('Component Props', () => {
+    it('accepts and uses onConfirm prop correctly', async () => {
+      const customMockConfirm = vi.fn().mockResolvedValue(undefined);
+
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={customMockConfirm}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('delete-account-password-input');
+      const deleteButton = screen.getByTestId('confirm-delete-button');
+
+      fireEvent.change(passwordInput, { target: { value: 'custompassword' } });
+      fireEvent.click(deleteButton);
+
+      await waitFor(() => {
+        expect(customMockConfirm).toHaveBeenCalledWith('custompassword');
+      });
+    });
+
+    it('accepts and uses onClose prop correctly', () => {
+      const customMockClose = vi.fn();
+
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={customMockClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const cancelButton = screen.getByTestId('cancel-delete-button');
+      fireEvent.click(cancelButton);
+
+      expect(customMockClose).toHaveBeenCalled();
+    });
+
+    it('handles function props correctly', () => {
+      const testOnConfirm = vi.fn();
+      const testOnClose = vi.fn();
+
+      expect(() => {
+        render(
+          <DeleteAccountModal
+            opened={true}
+            onClose={testOnClose}
+            onConfirm={testOnConfirm}
+          />
+        );
+      }).not.toThrow();
+
+      expect(screen.getByText('Delete Account')).toBeInTheDocument();
+    });
+
+    it('handles opened prop correctly', () => {
+      const { rerender } = render(
+        <DeleteAccountModal
+          opened={false}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      // Should not be visible when opened is false
+      expect(screen.queryByText('Delete Account')).not.toBeInTheDocument();
+
+      rerender(
+        <TestWrapper>
+          <DeleteAccountModal
+            opened={true}
+            onClose={mockOnClose}
+            onConfirm={mockOnConfirm}
+          />
+        </TestWrapper>
+      );
+
+      // Should be visible when opened is true
+      expect(screen.getByText('Delete Account')).toBeInTheDocument();
+    });
+  });
+
+  describe('User Interaction Flow', () => {
+    it('completes full deletion confirmation flow successfully', async () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      // 1. Modal opens and shows warning
+      expect(
+        screen.getByText('Warning: This action cannot be undone')
+      ).toBeInTheDocument();
+
+      // 2. User types password
+      const passwordInput = screen.getByTestId('delete-account-password-input');
+      fireEvent.change(passwordInput, { target: { value: 'userpassword' } });
+
+      // 3. User clicks delete
+      const deleteButton = screen.getByTestId('confirm-delete-button');
+      fireEvent.click(deleteButton);
+
+      // 4. Confirmation function is called
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith('userpassword');
+      });
+
+      // 5. Input is cleared
+      await waitFor(() => {
+        expect((passwordInput as HTMLInputElement).value).toBe('');
+      });
+    });
+
+    it('allows user to cancel account deletion', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      // User types password but then cancels
+      const passwordInput = screen.getByTestId('delete-account-password-input');
+      fireEvent.change(passwordInput, {
+        target: { value: 'cancelledaction' },
+      });
+
+      const cancelButton = screen.getByTestId('cancel-delete-button');
+      fireEvent.click(cancelButton);
+
+      // Should close modal without calling confirm function
+      expect(mockOnConfirm).not.toHaveBeenCalled();
+      expect(mockOnClose).toHaveBeenCalled();
+    });
+
+    it('handles multiple rapid clicks gracefully', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('delete-account-password-input');
+      const deleteButton = screen.getByTestId('confirm-delete-button');
+
+      fireEvent.change(passwordInput, { target: { value: 'rapidtest' } });
+
+      // Rapidly click multiple times - should not crash
+      fireEvent.click(deleteButton);
+      fireEvent.click(deleteButton);
+      fireEvent.click(deleteButton);
+
+      // Verify component is still functional
+      expect(screen.getByText('Delete Account')).toBeInTheDocument();
+      expect(mockOnConfirm).toHaveBeenCalledWith('rapidtest');
+    });
+
+    it('prevents accidental deletion with empty password', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      // User immediately clicks delete without entering password
+      const deleteButton = screen.getByTestId('confirm-delete-button');
+      fireEvent.click(deleteButton);
+
+      // Should not proceed with deletion
+      expect(mockOnConfirm).not.toHaveBeenCalled();
+      expect(screen.getByText('Delete Account')).toBeInTheDocument();
+    });
+  });
+
+  describe('Security Considerations', () => {
+    it('masks password input properly', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('delete-account-password-input');
+      expect(passwordInput).toHaveAttribute('type', 'password');
+    });
+
+    it('clears password from memory after successful deletion', async () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('delete-account-password-input');
+      const deleteButton = screen.getByTestId('confirm-delete-button');
+
+      fireEvent.change(passwordInput, {
+        target: { value: 'sensitivepassword' },
+      });
+      fireEvent.click(deleteButton);
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith('sensitivepassword');
+      });
+
+      // Password should be cleared from the input
+      await waitFor(() => {
+        expect((passwordInput as HTMLInputElement).value).toBe('');
+      });
+    });
+
+    it('requires explicit password confirmation', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      // Should require password input
+      const passwordInput = screen.getByTestId('delete-account-password-input');
+      expect(passwordInput).toHaveAttribute('required');
+
+      // Should show clear warning
+      expect(
+        screen.getByText('Warning: This action cannot be undone')
+      ).toBeInTheDocument();
+    });
+  });
+});

app/src/components/modals/account/DeleteAccountModal.tsx

@@ -21,6 +21,20 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
 }) => {
   const [password, setPassword] = useState<string>('');
 
+  const handleConfirm = async (): Promise<void> => {
+    const trimmedPassword = password.trim();
+    if (!trimmedPassword) {
+      return;
+    }
+    try {
+      await onConfirm(trimmedPassword);
+      setPassword('');
+    } catch (error) {
+      // Keep password in case of error
+      console.error('Error confirming password:', error);
+    }
+  };
+
   return (
     <Modal
       opened={opened}
@@ -54,13 +68,10 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
           </Button>
           <Button
             color="red"
-            onClick={() => {
+            onClick={() => void handleConfirm()}
-              void onConfirm(password);
-              setPassword('');
-            }}
             data-testid="confirm-delete-button"
           >
-            Delete Account
+            Delete
           </Button>
         </Group>
       </Stack>

app/src/components/modals/account/EmailPasswordModal.test.tsx

@@ -0,0 +1,651 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import {
+  render as rtlRender,
+  screen,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
+import React from 'react';
+import { MantineProvider } from '@mantine/core';
+import EmailPasswordModal from './EmailPasswordModal';
+
+// Mock notifications
+vi.mock('@mantine/notifications', () => ({
+  notifications: {
+    show: vi.fn(),
+  },
+}));
+
+// Helper wrapper component for testing
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <MantineProvider defaultColorScheme="light">{children}</MantineProvider>
+);
+
+// Custom render function
+const render = (ui: React.ReactElement) => {
+  return rtlRender(ui, { wrapper: TestWrapper });
+};
+
+describe('EmailPasswordModal', () => {
+  const mockOnConfirm = vi.fn();
+  const mockOnClose = vi.fn();
+  const testEmail = 'newemail@example.com';
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockOnConfirm.mockResolvedValue(undefined);
+    mockOnClose.mockClear();
+  });
+
+  describe('Modal Visibility', () => {
+    it('renders modal when opened', () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      expect(screen.getByText('Confirm Password')).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          `Please enter your password to confirm changing your email to: ${testEmail}`
+        )
+      ).toBeInTheDocument();
+      expect(screen.getByTestId('email-password-input')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('cancel-email-password-button')
+      ).toBeInTheDocument();
+      expect(
+        screen.getByTestId('confirm-email-password-button')
+      ).toBeInTheDocument();
+    });
+
+    it('does not render modal when closed', () => {
+      render(
+        <EmailPasswordModal
+          opened={false}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      expect(screen.queryByText('Confirm Password')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Form Interaction', () => {
+    it('updates password input when typed', () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('email-password-input');
+      fireEvent.change(passwordInput, { target: { value: 'testpassword123' } });
+
+      expect((passwordInput as HTMLInputElement).value).toBe('testpassword123');
+    });
+
+    it('handles form submission with valid password', async () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('email-password-input');
+      const confirmButton = screen.getByTestId('confirm-email-password-button');
+
+      fireEvent.change(passwordInput, { target: { value: 'validpassword' } });
+      fireEvent.click(confirmButton);
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith('validpassword');
+      });
+    });
+
+    it('prevents submission with empty password', () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const confirmButton = screen.getByTestId('confirm-email-password-button');
+      fireEvent.click(confirmButton);
+
+      // Should not call the function with empty password
+      expect(mockOnConfirm).not.toHaveBeenCalled();
+    });
+
+    it('clears input after successful submission', async () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('email-password-input');
+      const confirmButton = screen.getByTestId('confirm-email-password-button');
+
+      fireEvent.change(passwordInput, { target: { value: 'testpassword' } });
+      fireEvent.click(confirmButton);
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith('testpassword');
+      });
+
+      await waitFor(() => {
+        expect((passwordInput as HTMLInputElement).value).toBe('');
+      });
+    });
+  });
+
+  describe('Modal Actions', () => {
+    it('has cancel and confirm buttons', () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const confirmButton = screen.getByTestId('confirm-email-password-button');
+      const cancelButton = screen.getByTestId('cancel-email-password-button');
+
+      expect(confirmButton).toBeInTheDocument();
+      expect(cancelButton).toBeInTheDocument();
+
+      expect(confirmButton).toHaveRole('button');
+      expect(cancelButton).toHaveRole('button');
+    });
+
+    it('closes modal when cancel button is clicked', () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const cancelButton = screen.getByTestId('cancel-email-password-button');
+      fireEvent.click(cancelButton);
+
+      expect(mockOnClose).toHaveBeenCalled();
+    });
+
+    it('calls onConfirm when confirm button is clicked with valid input', async () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('email-password-input');
+      const confirmButton = screen.getByTestId('confirm-email-password-button');
+
+      fireEvent.change(passwordInput, { target: { value: 'mypassword' } });
+      fireEvent.click(confirmButton);
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledTimes(1);
+        expect(mockOnConfirm).toHaveBeenCalledWith('mypassword');
+      });
+    });
+  });
+
+  describe('Email Display', () => {
+    it('displays the correct email in the confirmation message', () => {
+      const customEmail = 'user@custom.com';
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={customEmail}
+        />
+      );
+
+      expect(
+        screen.getByText(
+          `Please enter your password to confirm changing your email to: ${customEmail}`
+        )
+      ).toBeInTheDocument();
+    });
+
+    it('handles different email formats', () => {
+      const emailFormats = [
+        'simple@example.com',
+        'user.name@example.com',
+        'user+tag@example.com',
+        'very.long.email.address@domain.co.uk',
+      ];
+
+      emailFormats.forEach((email) => {
+        const { unmount } = render(
+          <EmailPasswordModal
+            opened={true}
+            onClose={mockOnClose}
+            onConfirm={mockOnConfirm}
+            email={email}
+          />
+        );
+
+        expect(
+          screen.getByText(
+            `Please enter your password to confirm changing your email to: ${email}`
+          )
+        ).toBeInTheDocument();
+
+        unmount();
+      });
+    });
+
+    it('handles empty email string', () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email=""
+        />
+      );
+
+      expect(screen.getByTestId('email-password-message')).toHaveTextContent(
+        'Please enter your password to confirm changing your email to:'
+      );
+    });
+  });
+
+  describe('Password Validation', () => {
+    it('handles various password formats', async () => {
+      const passwords = [
+        'simple123',
+        'Complex!Password@123',
+        'spaces in password',
+        '12345',
+        'very-long-password-with-many-characters-and-symbols!@#$%^&*()',
+      ];
+
+      for (const password of passwords) {
+        const { unmount } = render(
+          <EmailPasswordModal
+            opened={true}
+            onClose={mockOnClose}
+            onConfirm={mockOnConfirm}
+            email={testEmail}
+          />
+        );
+
+        const passwordInput = screen.getByTestId('email-password-input');
+        const confirmButton = screen.getByTestId(
+          'confirm-email-password-button'
+        );
+
+        fireEvent.change(passwordInput, { target: { value: password } });
+        fireEvent.click(confirmButton);
+
+        await waitFor(() => {
+          expect(mockOnConfirm).toHaveBeenCalledWith(password);
+        });
+
+        unmount();
+        vi.clearAllMocks();
+        mockOnConfirm.mockResolvedValue(undefined);
+      }
+    });
+
+    it('handles unicode characters in passwords', async () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('email-password-input');
+      const confirmButton = screen.getByTestId('confirm-email-password-button');
+
+      const unicodePassword = 'パスワード123';
+      fireEvent.change(passwordInput, { target: { value: unicodePassword } });
+      fireEvent.click(confirmButton);
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith(unicodePassword);
+      });
+    });
+
+    it('trims whitespace from passwords', async () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('email-password-input');
+      const confirmButton = screen.getByTestId('confirm-email-password-button');
+
+      fireEvent.change(passwordInput, {
+        target: { value: '  password123  ' },
+      });
+      fireEvent.click(confirmButton);
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith('password123');
+      });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles confirmation errors gracefully', async () => {
+      mockOnConfirm.mockRejectedValue(new Error('Authentication failed'));
+
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('email-password-input');
+      const confirmButton = screen.getByTestId('confirm-email-password-button');
+
+      fireEvent.change(passwordInput, { target: { value: 'wrongpassword' } });
+      fireEvent.click(confirmButton);
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith('wrongpassword');
+      });
+
+      // Modal should handle the error gracefully (not crash)
+      expect(screen.getByText('Confirm Password')).toBeInTheDocument();
+    });
+
+    it('does not clear input when confirmation fails', async () => {
+      mockOnConfirm.mockRejectedValue(new Error('Invalid password'));
+
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('email-password-input');
+      const confirmButton = screen.getByTestId('confirm-email-password-button');
+
+      fireEvent.change(passwordInput, { target: { value: 'testpassword' } });
+      fireEvent.click(confirmButton);
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith('testpassword');
+      });
+
+      // Input should retain value when confirmation fails
+      expect((passwordInput as HTMLInputElement).value).toBe('testpassword');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper form labels and structure', () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('email-password-input');
+      expect(passwordInput).toBeInTheDocument();
+      expect(passwordInput.tagName).toBe('INPUT');
+      expect(passwordInput).toHaveAttribute('type', 'password');
+    });
+
+    it('has proper button roles', () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const buttons = screen.getAllByRole('button');
+      expect(buttons.length).toBeGreaterThanOrEqual(2); // Cancel and Confirm buttons
+
+      const cancelButton = screen.getByRole('button', { name: /cancel/i });
+      const confirmButton = screen.getByRole('button', { name: /confirm/i });
+
+      expect(cancelButton).toBeInTheDocument();
+      expect(confirmButton).toBeInTheDocument();
+    });
+
+    it('supports keyboard navigation', () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('email-password-input');
+
+      // Check that the input is focusable (not disabled or readonly)
+      expect(passwordInput).not.toHaveAttribute('disabled');
+      expect(passwordInput).not.toHaveAttribute('readonly');
+
+      // Check that the input can receive keyboard events
+      fireEvent.keyDown(passwordInput, { key: 'a' });
+      fireEvent.change(passwordInput, { target: { value: 'test' } });
+
+      expect((passwordInput as HTMLInputElement).value).toBe('test');
+
+      // Verify the input is accessible via keyboard navigation
+      expect(passwordInput).toHaveAttribute('type', 'password');
+      expect(passwordInput).toHaveAccessibleName(); // Has proper label
+    });
+
+    it('has proper modal structure', () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      // Modal should have proper title
+      expect(screen.getByText('Confirm Password')).toBeInTheDocument();
+
+      // Should have form elements
+      expect(screen.getByTestId('email-password-input')).toBeInTheDocument();
+    });
+  });
+
+  describe('Component Props', () => {
+    it('accepts and uses onConfirm prop correctly', async () => {
+      const customMockConfirm = vi.fn().mockResolvedValue(undefined);
+
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={customMockConfirm}
+          email={testEmail}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('email-password-input');
+      const confirmButton = screen.getByTestId('confirm-email-password-button');
+
+      fireEvent.change(passwordInput, { target: { value: 'custompassword' } });
+      fireEvent.click(confirmButton);
+
+      await waitFor(() => {
+        expect(customMockConfirm).toHaveBeenCalledWith('custompassword');
+      });
+    });
+
+    it('accepts and uses onClose prop correctly', () => {
+      const customMockClose = vi.fn();
+
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={customMockClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const cancelButton = screen.getByTestId('cancel-email-password-button');
+      fireEvent.click(cancelButton);
+
+      expect(customMockClose).toHaveBeenCalled();
+    });
+
+    it('handles function props correctly', () => {
+      const testOnConfirm = vi.fn();
+      const testOnClose = vi.fn();
+
+      expect(() => {
+        render(
+          <EmailPasswordModal
+            opened={true}
+            onClose={testOnClose}
+            onConfirm={testOnConfirm}
+            email={testEmail}
+          />
+        );
+      }).not.toThrow();
+
+      expect(screen.getByText('Confirm Password')).toBeInTheDocument();
+    });
+  });
+
+  describe('User Interaction Flow', () => {
+    it('completes full confirmation flow successfully', async () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      // 1. Modal opens and shows email change confirmation
+      expect(
+        screen.getByText(
+          `Please enter your password to confirm changing your email to: ${testEmail}`
+        )
+      ).toBeInTheDocument();
+
+      // 2. User types password
+      const passwordInput = screen.getByTestId('email-password-input');
+      fireEvent.change(passwordInput, { target: { value: 'userpassword' } });
+
+      // 3. User clicks confirm
+      const confirmButton = screen.getByTestId('confirm-email-password-button');
+      fireEvent.click(confirmButton);
+
+      // 4. Confirmation function is called
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith('userpassword');
+      });
+
+      // 5. Input is cleared
+      await waitFor(() => {
+        expect((passwordInput as HTMLInputElement).value).toBe('');
+      });
+    });
+
+    it('allows user to cancel email change', () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      // User types password but then cancels
+      const passwordInput = screen.getByTestId('email-password-input');
+      fireEvent.change(passwordInput, {
+        target: { value: 'cancelleddaction' },
+      });
+
+      const cancelButton = screen.getByTestId('cancel-email-password-button');
+      fireEvent.click(cancelButton);
+
+      // Should close modal without calling confirm function
+      expect(mockOnConfirm).not.toHaveBeenCalled();
+      expect(mockOnClose).toHaveBeenCalled();
+    });
+
+    it('handles multiple rapid clicks gracefully', () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('email-password-input');
+      const confirmButton = screen.getByTestId('confirm-email-password-button');
+
+      fireEvent.change(passwordInput, { target: { value: 'rapidtest' } });
+
+      // Rapidly click multiple times - should not crash
+      fireEvent.click(confirmButton);
+      fireEvent.click(confirmButton);
+      fireEvent.click(confirmButton);
+
+      // Verify component is still functional
+      expect(screen.getByText('Confirm Password')).toBeInTheDocument();
+      expect(mockOnConfirm).toHaveBeenCalledWith('rapidtest');
+    });
+  });
+});

app/src/components/modals/account/EmailPasswordModal.tsx

@@ -11,7 +11,7 @@ import {
 interface EmailPasswordModalProps {
   opened: boolean;
   onClose: () => void;
-  onConfirm: (password: string) => Promise<void>;
+  onConfirm: (password: string) => Promise<boolean>;
   email: string;
 }
 
@@ -23,6 +23,27 @@ const EmailPasswordModal: React.FC<EmailPasswordModalProps> = ({
 }) => {
   const [password, setPassword] = useState<string>('');
 
+  async function handleConfirm(): Promise<void> {
+    const trimmedPassword = password.trim();
+    if (!trimmedPassword) {
+      return;
+    }
+    try {
+      await onConfirm(trimmedPassword);
+      setPassword('');
+    } catch (error) {
+      // Keep password in case of error
+      console.error('Error confirming password:', error);
+    }
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent): void => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      void handleConfirm();
+    }
+  };
+
   return (
     <Modal
       opened={opened}
@@ -32,14 +53,15 @@ const EmailPasswordModal: React.FC<EmailPasswordModalProps> = ({
       size="sm"
     >
       <Stack>
-        <Text size="sm">
+        <Text size="sm" data-testid="email-password-message">
-          Please enter your password to confirm changing your email to: {email}
+          {`Please enter your password to confirm changing your email to: ${email}`}
         </Text>
         <PasswordInput
           label="Current Password"
           placeholder="Enter your current password"
           data-testid="email-password-input"
           value={password}
+          onKeyDown={handleKeyDown}
           onChange={(e) => setPassword(e.currentTarget.value)}
           required
         />
@@ -52,11 +74,9 @@ const EmailPasswordModal: React.FC<EmailPasswordModalProps> = ({
             Cancel
           </Button>
           <Button
-            onClick={() => {
+            onClick={() => void handleConfirm()}
-              void onConfirm(password);
-              setPassword('');
-            }}
             data-testid="confirm-email-password-button"
+            disabled={!password.trim()}
           >
             Confirm
           </Button>

app/src/components/modals/file/CreateFileModal.tsx

@@ -56,6 +56,7 @@ const CreateFileModal: React.FC<CreateFileModalProps> = ({ onCreateFile }) => {
           <Button
             onClick={() => void handleSubmit()}
             data-testid="confirm-create-button"
+            disabled={!fileName.trim()}
           >
             Create
           </Button>

app/src/components/modals/git/CommitMessageModal.tsx

@@ -60,6 +60,7 @@ const CommitMessageModal: React.FC<CommitMessageModalProps> = ({
           <Button
             onClick={() => void handleSubmit()}
             data-testid="commit-button"
+            disabled={!message.trim()}
           >
             Commit
           </Button>

app/src/components/settings/account/AccountSettings.tsx

@@ -153,7 +153,7 @@ const AccountSettings: React.FC<AccountSettingsProps> = ({
     }
   };
 
-  const handleEmailConfirm = async (password: string): Promise<void> => {
+  const handleEmailConfirm = async (password: string): Promise<boolean> => {
     const updates: UserProfileSettings = {
       ...state.localSettings,
       currentPassword: password,
@@ -181,6 +181,11 @@ const AccountSettings: React.FC<AccountSettingsProps> = ({
       dispatch({ type: SettingsActionType.MARK_SAVED });
       setEmailModalOpened(false);
       onClose();
+      return true;
+    } else {
+      // TODO: Handle errors appropriately
+      // notifications.show({...
+      return false;
     }
   };