packages/components/containers/organization/SendEmailReminderTwoFAModal.tsx

   1 import { c } from 'ttag';
   2
   3 import { Avatar, Button } from '@proton/atoms';
   4 import Badge from '@proton/components/components/badge/Badge';
   5 import Form from '@proton/components/components/form/Form';
   6 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   7 import Modal from '@proton/components/components/modalTwo/Modal';
   8 import ModalContent from '@proton/components/components/modalTwo/ModalContent';
   9 import ModalFooter from '@proton/components/components/modalTwo/ModalFooter';
  10 import ModalHeader from '@proton/components/components/modalTwo/ModalHeader';
  11 import useFormErrors from '@proton/components/components/v2/useFormErrors';
  12 import useApi from '@proton/components/hooks/useApi';
  13 import useEventManager from '@proton/components/hooks/useEventManager';
  14 import useNotifications from '@proton/components/hooks/useNotifications';
  15 import { useLoading } from '@proton/hooks';
  16 import { sendEmailReminderTwoFA } from '@proton/shared/lib/api/organization';
  17 import { MEMBER_ROLE } from '@proton/shared/lib/constants';
  18 import { getInitials } from '@proton/shared/lib/helpers/string';
  19 import type { Address, Member, PartialMemberAddress } from '@proton/shared/lib/interfaces';
  20 import noop from '@proton/utils/noop';
  21
  22 interface Props extends ModalProps {
  23     members: Member[];
  24     memberAddressesMap: { [key: string]: (Address | PartialMemberAddress)[] | undefined };
  25 }
  26
  27 const SendEmailReminderTwoFAModal = ({ onClose, members, memberAddressesMap, ...rest }: Props) => {
  28     const api = useApi();
  29     const { call } = useEventManager();
  30     const { createNotification } = useNotifications();
  31     const { onFormSubmit } = useFormErrors();
  32     const [loading, withLoading] = useLoading();
  33
  34     const handleSubmit = async () => {
  35         await api(sendEmailReminderTwoFA());
  36         await call();
  37         createNotification({ text: c('Notification').t`Reminder has been sent` });
  38         onClose?.();
  39     };
  40
  41     const handleClose = loading ? noop : onClose;
  42
  43     return (
  44         <Modal
  45             as={Form}
  46             onSubmit={() => {
  47                 if (!onFormSubmit()) {
  48                     return;
  49                 }
  50                 void withLoading(handleSubmit());
  51             }}
  52             onClose={handleClose}
  53             {...rest}
  54         >
  55             <ModalHeader title={c('Title').t`Send email reminders?`} />
  56             <ModalContent>
  57                 <p>{c('Info')
  58                     .t`The following members will receive an email prompting them to enable two-factor authentication as soon as possible.`}</p>
  59                 <ul className="unstyled">
  60                     {members
  61                         .filter(function (member) {
  62                             const memberAddresses = memberAddressesMap?.[member.ID] || [];
  63                             return memberAddresses.length > 0;
  64                         })
  65                         .map((member) => {
  66                             const memberAddresses = memberAddressesMap?.[member.ID] || [];
  67                             return (
  68                                 <li className="py-2 flex flex-nowrap items-center border-bottom" title={member.Name}>
  69                                     <Avatar className="mr-2 shrink-0">{getInitials(member.Name)}</Avatar>
  70                                     <div>
  71                                         <div className="text-ellipsis max-100" title={member.Name}>
  72                                             {member.Name}
  73                                         </div>
  74                                         <div className="max-w-full flex">
  75                                             <span className="flex-1 mr-2 text-ellipsis">
  76                                                 {memberAddresses[0]?.Email}
  77                                             </span>
  78                                             {member.Role === MEMBER_ROLE.ORGANIZATION_ADMIN && (
  79                                                 <span className="shrink-0">
  80                                                     <Badge type="light">{c('Admin').t`admin`}</Badge>
  81                                                 </span>
  82                                             )}
  83                                         </div>
  84                                     </div>
  85                                 </li>
  86                             );
  87                         })}
  88                 </ul>
  89             </ModalContent>
  90             <ModalFooter>
  91                 <Button onClick={handleClose} disabled={loading}>
  92                     {c('Action').t`Cancel`}
  93                 </Button>
  94                 <Button loading={loading} type="submit" color="norm" disabled={loading}>
  95                     {c('Action').t`Send reminder`}
  96                 </Button>
  97             </ModalFooter>
  98         </Modal>
  99     );
 100 };
 101
 102 export default SendEmailReminderTwoFAModal;