packages/components/containers/organization/ChangeOrganizationKeysModal.tsx

   1 import { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { rotateOrganizationKeys } from '@proton/account';
   6 import { Button } from '@proton/atoms';
   7 import Alert from '@proton/components/components/alert/Alert';
   8 import Form from '@proton/components/components/form/Form';
   9 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
  10 import Modal from '@proton/components/components/modalTwo/Modal';
  11 import ModalContent from '@proton/components/components/modalTwo/ModalContent';
  12 import ModalFooter from '@proton/components/components/modalTwo/ModalFooter';
  13 import ModalHeader from '@proton/components/components/modalTwo/ModalHeader';
  14 import useModalState from '@proton/components/components/modalTwo/useModalState';
  15 import InputFieldTwo from '@proton/components/components/v2/field/InputField';
  16 import PasswordInputTwo from '@proton/components/components/v2/input/PasswordInput';
  17 import useFormErrors from '@proton/components/components/v2/useFormErrors';
  18 import AuthModal from '@proton/components/containers/password/AuthModal';
  19 import useErrorHandler from '@proton/components/hooks/useErrorHandler';
  20 import useEventManager from '@proton/components/hooks/useEventManager';
  21 import useNotifications from '@proton/components/hooks/useNotifications';
  22 import { useLoading } from '@proton/hooks';
  23 import { useDispatch } from '@proton/redux-shared-store';
  24 import { confirmPasswordValidator, passwordLengthValidator } from '@proton/shared/lib/helpers/formValidators';
  25 import type { CachedOrganizationKey } from '@proton/shared/lib/interfaces';
  26 import noop from '@proton/utils/noop';
  27
  28 interface Props extends ModalProps {
  29     hasOtherAdmins: boolean;
  30     organizationKey: CachedOrganizationKey;
  31     mode?: 'reset';
  32 }
  33
  34 const ChangeOrganizationKeysModal = ({ onClose, mode, hasOtherAdmins, organizationKey, ...rest }: Props) => {
  35     const [authModalProps, setAuthModal, renderAuthModal] = useModalState();
  36     const dispatch = useDispatch();
  37     const { call } = useEventManager();
  38     const { createNotification } = useNotifications();
  39     const { validator, onFormSubmit } = useFormErrors();
  40     const [config, setConfig] = useState<any>();
  41     const errorHandler = useErrorHandler();
  42
  43     const [loading, withLoading] = useLoading();
  44     const [newPassword, setNewPassword] = useState('');
  45     const [confirmPassword, setConfirmPassword] = useState('');
  46
  47     const title =
  48         mode === 'reset' ? c('passwordless').t`Reset organization key` : c('passwordless').t`Change organization key`;
  49
  50     const handleClose = loading ? noop : onClose;
  51
  52     const handleSubmit = async (password: string) => {
  53         setConfig(undefined);
  54         const config = await dispatch(rotateOrganizationKeys({ password }));
  55         setConfig(config);
  56         setAuthModal(true);
  57     };
  58
  59     return (
  60         <>
  61             {renderAuthModal && config && (
  62                 <AuthModal
  63                     scope="password"
  64                     {...authModalProps}
  65                     config={config}
  66                     onCancel={() => {
  67                         setAuthModal(false);
  68                     }}
  69                     onExit={() => setConfig(undefined)}
  70                     onSuccess={async () => {
  71                         await call();
  72                         createNotification({ text: c('Success').t`Keys updated` });
  73                         onClose?.();
  74                     }}
  75                 />
  76             )}
  77             <Modal
  78                 as={Form}
  79                 onSubmit={() => {
  80                     if (!onFormSubmit()) {
  81                         return;
  82                     }
  83
  84                     void withLoading(handleSubmit(newPassword)).catch(errorHandler);
  85                 }}
  86                 onClose={handleClose}
  87                 {...rest}
  88             >
  89                 <ModalHeader title={title} />
  90                 <ModalContent>
  91                     <>
  92                         {hasOtherAdmins && (
  93                             <Alert className="mb-4">{c('Info')
  94                                 .t`Other administrators exist in your organization, you are responsible for communicating the new password to them.`}</Alert>
  95                         )}
  96                         <Alert className="mb-4" type="warning">
  97                             {c('Info')
  98                                 .t`Do NOT forget this password. If you forget it, you will not be able to manage your organization.`}
  99                             <br />
 100                             {c('Info')
 101                                 .t`Save your password somewhere safe. Click on icon to confirm that you have typed your password correctly.`}
 102                         </Alert>
 103
 104                         <InputFieldTwo
 105                             id="organizationPassword"
 106                             as={PasswordInputTwo}
 107                             label={c('Label').t`New organization password`}
 108                             placeholder={c('Placeholder').t`Password`}
 109                             value={newPassword}
 110                             onValue={setNewPassword}
 111                             error={validator([passwordLengthValidator(newPassword)])}
 112                             autoComplete="new-password"
 113                             autoFocus
 114                         />
 115
 116                         <InputFieldTwo
 117                             id="confirmPassword"
 118                             as={PasswordInputTwo}
 119                             label={c('Label').t`Confirm organization password`}
 120                             placeholder={c('Placeholder').t`Confirm`}
 121                             value={confirmPassword}
 122                             onValue={setConfirmPassword}
 123                             error={validator([
 124                                 passwordLengthValidator(newPassword),
 125                                 confirmPasswordValidator(newPassword, confirmPassword),
 126                             ])}
 127                             autoComplete="new-password"
 128                         />
 129                     </>
 130                 </ModalContent>
 131                 <ModalFooter>
 132                     <Button onClick={handleClose} disabled={loading}>
 133                         {c('Action').t`Close`}
 134                     </Button>
 135                     <Button loading={loading} type="submit" color="norm">
 136                         {c('Action').t`Change keys`}
 137                     </Button>
 138                 </ModalFooter>
 139             </Modal>
 140         </>
 141     );
 142 };
 143 export default ChangeOrganizationKeysModal;