packages/components/containers/organization/ActivatePasswordlessOrganizationKey.tsx

   1 import type { ReactNode } from 'react';
   2 import { useEffect, useState } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import type { AcceptOrganizationKeyInvitePayload } from '@proton/account';
   7 import { acceptOrganizationKeyInvite, prepareAcceptOrganizationKeyInvite } from '@proton/account';
   8 import { useOrganization } from '@proton/account/organization/hooks';
   9 import { useOrganizationKey } from '@proton/account/organizationKey/hooks';
  10 import { Button, Card, CircleLoader } from '@proton/atoms';
  11 import Icon from '@proton/components/components/icon/Icon';
  12 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
  13 import ModalTwo from '@proton/components/components/modalTwo/Modal';
  14 import ModalTwoContent from '@proton/components/components/modalTwo/ModalContent';
  15 import ModalTwoFooter from '@proton/components/components/modalTwo/ModalFooter';
  16 import ModalTwoHeader from '@proton/components/components/modalTwo/ModalHeader';
  17 import getBoldFormattedText from '@proton/components/helpers/getBoldFormattedText';
  18 import useApi from '@proton/components/hooks/useApi';
  19 import useErrorHandler from '@proton/components/hooks/useErrorHandler';
  20 import useNotifications from '@proton/components/hooks/useNotifications';
  21 import { useLoading } from '@proton/hooks';
  22 import { useDispatch } from '@proton/redux-shared-store';
  23 import { getSilentApi } from '@proton/shared/lib/api/helpers/customConfig';
  24 import { BRAND_NAME } from '@proton/shared/lib/constants';
  25 import noop from '@proton/utils/noop';
  26
  27 import useVerifyOutboundPublicKeys from '../keyTransparency/useVerifyOutboundPublicKeys';
  28
  29 interface Props extends Omit<ModalProps, 'buttons' | 'title' | 'children'> {
  30     onResetKeys?: () => void;
  31 }
  32
  33 const ActivatePasswordlessOrganizationKey = ({ onResetKeys, ...rest }: Props) => {
  34     const [organizationKey] = useOrganizationKey();
  35     const [organization] = useOrganization();
  36     const organizationName = organization?.Name || '';
  37     const adminEmail = organizationKey?.Key.SignatureAddress || '';
  38     const { createNotification } = useNotifications();
  39     const dispatch = useDispatch();
  40     const errorHandler = useErrorHandler();
  41     const verifyOutboundPublicKeys = useVerifyOutboundPublicKeys();
  42     const [payload, setPayload] = useState<AcceptOrganizationKeyInvitePayload | null>(null);
  43     const silentApi = getSilentApi(useApi());
  44
  45     const [loading, withLoading] = useLoading();
  46     const [loadingInit, withLoadingInit] = useLoading(true);
  47
  48     useEffect(() => {
  49         withLoadingInit(
  50             dispatch(
  51                 prepareAcceptOrganizationKeyInvite({
  52                     api: silentApi,
  53                     adminEmail,
  54                     verifyOutboundPublicKeys,
  55                 })
  56             )
  57                 .then(setPayload)
  58                 .catch((e) => {
  59                     errorHandler(e);
  60                     rest.onClose?.();
  61                 })
  62         );
  63     }, []);
  64
  65     const handleSubmit = async () => {
  66         if (payload?.state === 'verified') {
  67             try {
  68                 await dispatch(acceptOrganizationKeyInvite({ api: silentApi, payload }));
  69                 createNotification({ text: c('passwordless').t`Organization key activated` });
  70                 rest.onClose?.();
  71             } catch (e: any) {
  72                 errorHandler(e);
  73             }
  74         } else {
  75         }
  76     };
  77
  78     const handleClose = loading ? noop : rest.onClose;
  79
  80     return (
  81         <ModalTwo open {...rest} onClose={handleClose}>
  82             <ModalTwoHeader title={c('Title').t`Activate organization key`} {...rest} />
  83             <ModalTwoContent>
  84                 {(() => {
  85                     if (payload === null || loadingInit) {
  86                         return (
  87                             <div className="text-center">
  88                                 <CircleLoader />
  89                             </div>
  90                         );
  91                     }
  92                     const intro = (
  93                         <div className="text-break mb-2">
  94                             {getBoldFormattedText(
  95                                 c('passwordless')
  96                                     .t`You have been made administrator of the organization **${organizationName}** by`
  97                             )}
  98                         </div>
  99                     );
 100                     const getCard = (icon: ReactNode) => {
 101                         return (
 102                             <Card rounded className="text-break">
 103                                 <div className="flex justify-space-between gap-1">
 104                                     <div className="flex-1">{adminEmail}</div>
 105                                     <div className="shrink-0">{icon}</div>
 106                                 </div>
 107                             </Card>
 108                         );
 109                     };
 110
 111                     if (payload.state === 'verified') {
 112                         return (
 113                             <>
 114                                 {intro}
 115                                 {getCard(<Icon name="checkmark-circle-filled" className="color-success" />)}
 116                                 <div className="mt-2 color-weak">
 117                                     {c('passwordless')
 118                                         .t`We have verified the authenticity of this sender and invitation.`}
 119                                     <br />
 120                                     <br />
 121                                     {c('passwordless')
 122                                         .t`To enable administrator rights on your account, activate the organization key.`}
 123                                 </div>
 124                             </>
 125                         );
 126                     }
 127
 128                     return (
 129                         <>
 130                             {intro}
 131                             {getCard(<Icon name="info-circle-filled" className="color-danger" />)}
 132                             <div className="mt-2 color-danger">
 133                                 {c('passwordless')
 134                                     .t`We couldn't verify the security of this sender's address key. Sometimes there is a delay in updating the sender's information. Try again later. If you do not trust the validity of this invitation or sender, contact ${BRAND_NAME} Customer Support.`}
 135                             </div>
 136                         </>
 137                     );
 138                 })()}
 139             </ModalTwoContent>
 140             <ModalTwoFooter>
 141                 {payload === null || payload.state === 'verified' ? (
 142                     <>
 143                         <Button disabled={loading} onClick={handleClose}>
 144                             {c('Action').t`Cancel`}
 145                         </Button>
 146                         <Button
 147                             color="norm"
 148                             loading={loading}
 149                             onClick={() => {
 150                                 withLoading(handleSubmit());
 151                             }}
 152                         >
 153                             {c('Action').t`Activate`}
 154                         </Button>
 155                     </>
 156                 ) : (
 157                     <>
 158                         <div />
 159                         <Button color="norm" disabled={loading} onClick={handleClose}>
 160                             {c('Action').t`Got it`}
 161                         </Button>
 162                     </>
 163                 )}
 164             </ModalTwoFooter>
 165         </ModalTwo>
 166     );
 167 };
 168
 169 export default ActivatePasswordlessOrganizationKey;