packages/components/containers/members/SubUserDeleteModal.tsx

   1 import type { FormEvent } from 'react';
   2 import { useState } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import { Button, Card } from '@proton/atoms';
   7 import Alert from '@proton/components/components/alert/Alert';
   8 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   9 import ModalTwo from '@proton/components/components/modalTwo/Modal';
  10 import ModalTwoContent from '@proton/components/components/modalTwo/ModalContent';
  11 import ModalTwoFooter from '@proton/components/components/modalTwo/ModalFooter';
  12 import ModalTwoHeader from '@proton/components/components/modalTwo/ModalHeader';
  13 import InputFieldTwo from '@proton/components/components/v2/field/InputField';
  14 import useFormErrors from '@proton/components/components/v2/useFormErrors';
  15 import { useLoading } from '@proton/hooks';
  16 import { NAME_PLACEHOLDER } from '@proton/shared/lib/constants';
  17 import { requiredValidator } from '@proton/shared/lib/helpers/formValidators';
  18 import { removeDiacritics } from '@proton/shared/lib/helpers/string';
  19 import type { Member } from '@proton/shared/lib/interfaces/Member';
  20
  21 const clean = (value: string) => {
  22     return removeDiacritics(value.toLowerCase().replace(/\s+/g, ''));
  23 };
  24
  25 interface Props extends ModalProps<'form'> {
  26     member: Member | undefined;
  27     onDelete: (member: Member) => Promise<void>;
  28 }
  29
  30 const SubUserDeleteModal = ({ member: initialMember, onDelete, ...rest }: Props) => {
  31     const [member] = useState(initialMember!);
  32     const [username, setUsername] = useState('');
  33     const isValid = clean(username) === clean(member.Name);
  34     const { validator, onFormSubmit } = useFormErrors();
  35     const [loading, withLoading] = useLoading();
  36
  37     const handleClose = loading ? undefined : rest.onClose;
  38
  39     return (
  40         <ModalTwo
  41             as="form"
  42             {...rest}
  43             onSubmit={async (event: FormEvent) => {
  44                 event.preventDefault();
  45                 if (!onFormSubmit()) {
  46                     return;
  47                 }
  48                 await withLoading(onDelete(member));
  49                 rest.onClose?.();
  50             }}
  51             onClose={handleClose}
  52         >
  53             <ModalTwoHeader title={c('Title').t`Delete user?`} />
  54             <ModalTwoContent>
  55                 <div className="mb-4">
  56                     {c('Info')
  57                         .t`This will permanently delete the data and all email addresses associated with this user.`}
  58                 </div>
  59                 <Card rounded className="text-pre-wrap break user-select mb-4">
  60                     {member.Name}
  61                 </Card>
  62                 <Alert className="mb-4" type="error">{c('Info')
  63                     .t`To confirm, please enter the name of the user you wish to delete.`}</Alert>
  64                 <InputFieldTwo
  65                     autoComplete="false"
  66                     value={username}
  67                     onValue={setUsername}
  68                     label={c('Label').t`Name`}
  69                     placeholder={NAME_PLACEHOLDER}
  70                     error={validator([requiredValidator(username), !isValid ? c('Error').t`Name does not match` : ''])}
  71                     autoFocus
  72                     data-testid="deleteMemberModal:username-input"
  73                 />
  74             </ModalTwoContent>
  75             <ModalTwoFooter>
  76                 <Button disabled={loading} onClick={handleClose}>{c('Action').t`Cancel`}</Button>
  77                 <Button color="danger" loading={loading} type="submit">{c('Action').t`Delete user`}</Button>
  78             </ModalTwoFooter>
  79         </ModalTwo>
  80     );
  81 };
  82
  83 export default SubUserDeleteModal;