packages/components/containers/organization/ChangeOrganizationKeysPasswordlessModal.tsx

   1 import { useEffect, useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import type { OrganizationKeyRotationPayload } from '@proton/account';
   6 import { getKeyRotationPayload, rotatePasswordlessOrganizationKeys } from '@proton/account';
   7 import { Button, CircleLoader } from '@proton/atoms';
   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 useModalState from '@proton/components/components/modalTwo/useModalState';
  14 import AuthModal from '@proton/components/containers/password/AuthModal';
  15 import useApi from '@proton/components/hooks/useApi';
  16 import useErrorHandler from '@proton/components/hooks/useErrorHandler';
  17 import useEventManager from '@proton/components/hooks/useEventManager';
  18 import useNotifications from '@proton/components/hooks/useNotifications';
  19 import { useLoading } from '@proton/hooks';
  20 import { useDispatch } from '@proton/redux-shared-store';
  21 import { getSilentApi } from '@proton/shared/lib/api/helpers/customConfig';
  22
  23 import useVerifyOutboundPublicKeys from '../keyTransparency/useVerifyOutboundPublicKeys';
  24 import AdministratorList from './AdministratorList';
  25
  26 interface ChangeProps extends Omit<ModalProps, 'children' | 'title' | 'buttons'> {
  27     mode?: 'reset';
  28 }
  29
  30 export const ChangeOrganizationKeysPasswordlessModal = ({ onClose, mode, ...rest }: ChangeProps) => {
  31     const dispatch = useDispatch();
  32     const [config, setConfig] = useState<any>();
  33     const [loading, withLoading] = useLoading();
  34     const [loadingInit, withLoadingInit] = useLoading(true);
  35     const verifyOutboundPublicKeys = useVerifyOutboundPublicKeys();
  36     const api = useApi();
  37     const silentApi = getSilentApi(api);
  38     const { call } = useEventManager();
  39     const { createNotification } = useNotifications();
  40     const [authModalProps, setAuthModal, renderAuthModal] = useModalState();
  41     const [result, setResult] = useState<null | OrganizationKeyRotationPayload>(null);
  42     const errorHandler = useErrorHandler();
  43
  44     useEffect(() => {
  45         const run = async () => {
  46             setResult(null);
  47             const result = await dispatch(getKeyRotationPayload({ verifyOutboundPublicKeys, api: silentApi }));
  48             setResult(result);
  49         };
  50         withLoadingInit(run()).catch(errorHandler);
  51     }, []);
  52
  53     const handleSubmit = async (result: OrganizationKeyRotationPayload) => {
  54         setConfig(undefined);
  55         const config = await dispatch(rotatePasswordlessOrganizationKeys(result));
  56         setConfig(config);
  57         setAuthModal(true);
  58     };
  59
  60     const title = (() => {
  61         if (mode === 'reset') {
  62             return c('passwordless').t`Reset organization key`;
  63         }
  64         return c('passwordless').t`Change organization key`;
  65     })();
  66
  67     const confirmText = c('passwordless').t`Are you sure you want to change your organization key?`;
  68
  69     return (
  70         <>
  71             {renderAuthModal && config && (
  72                 <AuthModal
  73                     scope="password"
  74                     {...authModalProps}
  75                     config={config}
  76                     onCancel={() => {
  77                         setAuthModal(false);
  78                     }}
  79                     onExit={() => setConfig(undefined)}
  80                     onSuccess={async () => {
  81                         await call();
  82                         createNotification({ text: c('passwordless').t`Organization key updated` });
  83                         onClose?.();
  84                     }}
  85                 />
  86             )}
  87             <ModalTwo open {...rest} onClose={onClose}>
  88                 <ModalTwoHeader title={title} {...rest} />
  89                 <ModalTwoContent>
  90                     {(() => {
  91                         if (loadingInit) {
  92                             return (
  93                                 <div className="text-center">
  94                                     <CircleLoader />
  95                                 </div>
  96                             );
  97                         }
  98
  99                         if (!result?.memberKeyPayloads.length) {
 100                             return <div>{confirmText}</div>;
 101                         }
 102
 103                         return (
 104                             <div>
 105                                 <div className="mb-4">
 106                                     {confirmText} {c('passwordless').t`All administrators will get access to the key.`}
 107                                 </div>
 108
 109                                 <AdministratorList members={result?.memberKeyPayloads} expandByDefault={false} />
 110                             </div>
 111                         );
 112                     })()}
 113                 </ModalTwoContent>
 114                 <ModalTwoFooter>
 115                     <Button onClick={onClose}>{c('Action').t`Cancel`}</Button>
 116                     <Button
 117                         color="norm"
 118                         loading={loading}
 119                         disabled={loadingInit}
 120                         onClick={() => {
 121                             if (!result) {
 122                                 return;
 123                             }
 124                             withLoading(handleSubmit(result)).catch(errorHandler);
 125                         }}
 126                     >
 127                         {c('Action').t`Confirm`}
 128                     </Button>
 129                 </ModalTwoFooter>
 130             </ModalTwo>
 131         </>
 132     );
 133 };
 134
 135 export default ChangeOrganizationKeysPasswordlessModal;