Confirmation before deleting a member (#1074)

* feat: require confirmation before on memeber deletion

* fix: typo

* feat: ConfrimationModal moved to ui/modals/component - confirmation modal storybook

* fix: modal member deletion text

* fix: extra ! operator - remove deletemodal - using styledconfirmationbutton

* fix: story structer

* fix: imports

Author: Mbistami

front/src/modules/settings/profile/components/DeleteAccount.tsx

@@ -1,19 +1,25 @@
 import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
 
 import { useAuth } from '@/auth/hooks/useAuth';
+import { currentUserState } from '@/auth/states/currentUserState';
 import { AppPath } from '@/types/AppPath';
 import { ButtonVariant } from '@/ui/button/components/Button';
+import {
+  ConfirmationModal,
+  StyledConfirmationButton,
+} from '@/ui/modal/components/ConfirmationModal';
 import { H2Title } from '@/ui/typography/components/H2Title';
 import { useDeleteUserAccountMutation } from '~/generated/graphql';
 
-import { DeleteModal, StyledDeleteButton } from './DeleteModal';
-
 export function DeleteAccount() {
   const [isDeleteAccountModalOpen, setIsDeleteAccountModalOpen] =
     useState(false);
 
   const [deleteUserAccount] = useDeleteUserAccountMutation();
+  const currentUser = useRecoilValue(currentUserState);
+  const userEmail = currentUser?.email;
   const { signOut } = useAuth();
   const navigate = useNavigate();
 
@@ -34,13 +40,15 @@ export function DeleteAccount() {
         description="Delete account and all the associated data"
       />
 
-      <StyledDeleteButton
+      <StyledConfirmationButton
         onClick={() => setIsDeleteAccountModalOpen(true)}
         variant={ButtonVariant.Secondary}
         title="Delete account"
       />
 
-      <DeleteModal
+      <ConfirmationModal
+        confirmationValue={userEmail}
+        confirmationPlaceholder={userEmail ?? ''}
         isOpen={isDeleteAccountModalOpen}
         setIsOpen={setIsDeleteAccountModalOpen}
         title="Account Deletion"
@@ -50,7 +58,7 @@ export function DeleteAccount() {
             entire account. <br /> Please type in your email to confirm.
           </>
         }
-        handleConfirmDelete={deleteAccount}
+        onConfirmClick={deleteAccount}
         deleteButtonText="Delete account"
       />
     </>

front/src/modules/settings/profile/components/DeleteWorkspace.tsx

@@ -1,19 +1,25 @@
 import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
 
 import { useAuth } from '@/auth/hooks/useAuth';
+import { currentUserState } from '@/auth/states/currentUserState';
 import { AppPath } from '@/types/AppPath';
 import { ButtonVariant } from '@/ui/button/components/Button';
+import {
+  ConfirmationModal,
+  StyledConfirmationButton,
+} from '@/ui/modal/components/ConfirmationModal';
 import { H2Title } from '@/ui/typography/components/H2Title';
 import { useDeleteCurrentWorkspaceMutation } from '~/generated/graphql';
 
-import { DeleteModal, StyledDeleteButton } from './DeleteModal';
-
 export function DeleteWorkspace() {
   const [isDeleteWorkSpaceModalOpen, setIsDeleteWorkSpaceModalOpen] =
     useState(false);
 
   const [deleteCurrentWorkspace] = useDeleteCurrentWorkspaceMutation();
+  const currentUser = useRecoilValue(currentUserState);
+  const userEmail = currentUser?.email;
   const { signOut } = useAuth();
   const navigate = useNavigate();
 
@@ -30,13 +36,15 @@ export function DeleteWorkspace() {
   return (
     <>
       <H2Title title="Danger zone" description="Delete your whole workspace" />
-      <StyledDeleteButton
+      <StyledConfirmationButton
         onClick={() => setIsDeleteWorkSpaceModalOpen(true)}
         variant={ButtonVariant.Secondary}
         title="Delete workspace"
       />
 
-      <DeleteModal
+      <ConfirmationModal
+        confirmationPlaceholder={userEmail}
+        confirmationValue={userEmail}
         isOpen={isDeleteWorkSpaceModalOpen}
         setIsOpen={setIsDeleteWorkSpaceModalOpen}
         title="Workspace Deletion"
@@ -46,7 +54,7 @@ export function DeleteWorkspace() {
             entire workspace. <br /> Please type in your email to confirm.
           </>
         }
-        handleConfirmDelete={deleteWorkspace}
+        onConfirmClick={deleteWorkspace}
         deleteButtonText="Delete workspace"
       />
     </>

front/src/modules/settings/profile/components/DeleteModal.tsx renamed to front/src/modules/ui/modal/components/ConfirmationModal.tsx

@@ -1,30 +1,30 @@
 import { ReactNode, useState } from 'react';
 import styled from '@emotion/styled';
 import { AnimatePresence, LayoutGroup } from 'framer-motion';
-import { useRecoilValue } from 'recoil';
+import debounce from 'lodash.debounce';
 
-import { currentUserState } from '@/auth/states/currentUserState';
 import { Button, ButtonVariant } from '@/ui/button/components/Button';
 import { TextInput } from '@/ui/input/text/components/TextInput';
 import { Modal } from '@/ui/modal/components/Modal';
 import { Section, SectionAlignment } from '@/ui/section/components/Section';
 import { H1Title, H1TitleFontColor } from '@/ui/typography/components/H1Title';
-import { debounce } from '~/utils/debounce';
 
-interface DeleteModalProps {
+interface ConfirmationModalProps {
   isOpen: boolean;
   title: string;
   subtitle: ReactNode;
   setIsOpen: (val: boolean) => void;
-  handleConfirmDelete: () => void;
+  onConfirmClick: () => void;
   deleteButtonText?: string;
+  confirmationPlaceholder?: string;
+  confirmationValue?: string;
 }
 
-const StyledCenteredButton = styled(Button)`
+export const StyledCenteredButton = styled(Button)`
   justify-content: center;
 `;
 
-export const StyledDeleteButton = styled(StyledCenteredButton)`
+export const StyledConfirmationButton = styled(StyledCenteredButton)`
   border-color: ${({ theme }) => theme.color.red20};
   box-shadow: none;
   color: ${({ theme }) => theme.color.red};
@@ -35,27 +35,28 @@ export const StyledDeleteButton = styled(StyledCenteredButton)`
   }
 `;
 
-export function DeleteModal({
+export function ConfirmationModal({
   isOpen = false,
   title,
   subtitle,
   setIsOpen,
-  handleConfirmDelete,
+  onConfirmClick,
   deleteButtonText = 'Delete',
-}: DeleteModalProps) {
-  const [email, setEmail] = useState('');
-  const [isValidEmail, setIsValidEmail] = useState(true);
-  const currentUser = useRecoilValue(currentUserState);
-  const userEmail = currentUser?.email;
+  confirmationValue,
+  confirmationPlaceholder,
+}: ConfirmationModalProps) {
+  const [inputConfirmationValue, setInputConfirmationValue] =
+    useState<string>('');
+  const [isValidValue, setIsValidValue] = useState(!confirmationValue);
 
-  const handleEmailChange = (val: string) => {
-    setEmail(val);
-    isEmailMatchingUserEmail(val, userEmail);
+  const handleInputConfimrationValueChange = (value: string) => {
+    setInputConfirmationValue(value);
+    isValueMatchingUserEmail(confirmationValue, value);
   };
 
-  const isEmailMatchingUserEmail = debounce(
-    (email1?: string, email2?: string) => {
-      setIsValidEmail(Boolean(email1 && email2 && email1 === email2));
+  const isValueMatchingUserEmail = debounce(
+    (value?: string, inputValue?: string) => {
+      setIsValidValue(Boolean(value && inputValue && value === inputValue));
     },
     250,
   );
@@ -73,20 +74,22 @@ export function DeleteModal({
         >
           <H1Title title={title} fontColor={H1TitleFontColor.Primary} />
           <Section alignment={SectionAlignment.Center}>{subtitle}</Section>
-          <Section>
-            <TextInput
-              value={email}
-              onChange={handleEmailChange}
-              placeholder={userEmail}
-              fullWidth
-              key={'email-' + userEmail}
-            />
-          </Section>
-          <StyledDeleteButton
-            onClick={handleConfirmDelete}
+          {confirmationValue && (
+            <Section>
+              <TextInput
+                value={inputConfirmationValue}
+                onChange={handleInputConfimrationValueChange}
+                placeholder={confirmationPlaceholder}
+                fullWidth
+                key={'email-' + confirmationValue}
+              />
+            </Section>
+          )}
+          <StyledConfirmationButton
+            onClick={onConfirmClick}
             variant={ButtonVariant.Secondary}
             title={deleteButtonText}
-            disabled={!isValidEmail || !email}
+            disabled={!isValidValue}
             fullWidth
           />
           <StyledCenteredButton

front/src/modules/ui/modal/components/__stories__/ConfirmModal.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { ConfirmationModal } from '../ConfirmationModal';
+
+const meta: Meta<typeof ConfirmationModal> = {
+  title: 'UI/Modal/ConfirmationModal',
+  component: ConfirmationModal,
+  decorators: [ComponentDecorator],
+};
+export default meta;
+
+type Story = StoryObj<typeof ConfirmationModal>;
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    title: 'Pariatur labore.',
+    subtitle: 'Velit dolore aliquip laborum occaecat fugiat.',
+    deleteButtonText: 'Delete',
+  },
+  decorators: [ComponentDecorator],
+};
+
+export const InputConfirmation: Story = {
+  args: {
+    confirmationValue: '[email protected]',
+    confirmationPlaceholder: '[email protected]',
+    ...Default.args,
+  },
+  decorators: Default.decorators,
+};

front/src/pages/settings/SettingsWorkspaceMembers.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
@@ -10,6 +11,7 @@ import {
 } from '@/ui/button/components/Button';
 import { IconSettings, IconTrash } from '@/ui/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
+import { ConfirmationModal } from '@/ui/modal/components/ConfirmationModal';
 import { Section } from '@/ui/section/components/Section';
 import { H1Title } from '@/ui/typography/components/H1Title';
 import { H2Title } from '@/ui/typography/components/H2Title';
@@ -36,6 +38,9 @@ const ButtonContainer = styled.div`
 `;
 
 export function SettingsWorkspaceMembers() {
+  const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
+  const [userToDelete, setUserToDelete] = useState<string | undefined>();
+
   const [currentUser] = useRecoilState(currentUserState);
   const workspace = currentUser?.workspaceMember?.workspace;
   const theme = useTheme();
@@ -75,6 +80,7 @@ export function SettingsWorkspaceMembers() {
         cache.gc();
       },
     });
+    setIsConfirmationModalOpen(false);
   };
 
   return (
@@ -105,9 +111,10 @@ export function SettingsWorkspaceMembers() {
                 currentUser?.id !== member.user.id && (
                   <ButtonContainer>
                     <Button
-                      onClick={() =>
-                        handleRemoveWorkspaceMember(member.user.id)
-                      }
+                      onClick={() => {
+                        setIsConfirmationModalOpen(true);
+                        setUserToDelete(member.user.id);
+                      }}
                       variant={ButtonVariant.Tertiary}
                       size={ButtonSize.Small}
                       icon={<IconTrash size={theme.icon.size.md} />}
@@ -119,6 +126,21 @@ export function SettingsWorkspaceMembers() {
           ))}
         </Section>
       </StyledContainer>
+      <ConfirmationModal
+        isOpen={isConfirmationModalOpen}
+        setIsOpen={setIsConfirmationModalOpen}
+        title="Account Deletion"
+        subtitle={
+          <>
+            This action cannot be undone. This will permanently delete this user
+            and remove them from all their assignements.
+          </>
+        }
+        onConfirmClick={() =>
+          userToDelete && handleRemoveWorkspaceMember(userToDelete)
+        }
+        deleteButtonText="Delete account"
+      />
     </SubMenuTopBarContainer>
   );
 }