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

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/DeleteModal.tsx

@@ -1,105 +0,0 @@
-import { ReactNode, useState } from 'react';
-import styled from '@emotion/styled';
-import { AnimatePresence, LayoutGroup } from 'framer-motion';
-import { useRecoilValue } from 'recoil';
-
-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 {
-  isOpen: boolean;
-  title: string;
-  subtitle: ReactNode;
-  setIsOpen: (val: boolean) => void;
-  handleConfirmDelete: () => void;
-  deleteButtonText?: string;
-}
-
-const StyledCenteredButton = styled(Button)`
-  justify-content: center;
-`;
-
-export const StyledDeleteButton = styled(StyledCenteredButton)`
-  border-color: ${({ theme }) => theme.color.red20};
-  box-shadow: none;
-  color: ${({ theme }) => theme.color.red};
-  font-size: ${({ theme }) => theme.font.size.md};
-  line-height: ${({ theme }) => theme.text.lineHeight.lg};
-  :hover {
-    background-color: ${({ theme }) => theme.color.red10};
-  }
-`;
-
-export function DeleteModal({
-  isOpen = false,
-  title,
-  subtitle,
-  setIsOpen,
-  handleConfirmDelete,
-  deleteButtonText = 'Delete',
-}: DeleteModalProps) {
-  const [email, setEmail] = useState('');
-  const [isValidEmail, setIsValidEmail] = useState(true);
-  const currentUser = useRecoilValue(currentUserState);
-  const userEmail = currentUser?.email;
-
-  const handleEmailChange = (val: string) => {
-    setEmail(val);
-    isEmailMatchingUserEmail(val, userEmail);
-  };
-
-  const isEmailMatchingUserEmail = debounce(
-    (email1?: string, email2?: string) => {
-      setIsValidEmail(Boolean(email1 && email2 && email1 === email2));
-    },
-    250,
-  );
-
-  return (
-    <AnimatePresence mode="wait">
-      <LayoutGroup>
-        <Modal
-          isOpen={isOpen}
-          onOutsideClick={() => {
-            if (isOpen) {
-              setIsOpen(false);
-            }
-          }}
-        >
-          <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}
-            variant={ButtonVariant.Secondary}
-            title={deleteButtonText}
-            disabled={!isValidEmail || !email}
-            fullWidth
-          />
-          <StyledCenteredButton
-            onClick={() => setIsOpen(false)}
-            variant={ButtonVariant.Secondary}
-            title="Cancel"
-            fullWidth
-            style={{
-              marginTop: 10,
-            }}
-          />
-        </Modal>
-      </LayoutGroup>
-    </AnimatePresence>
-  );
-}

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"
       />
     </>