packages/components/containers/mnemonic/DisableMnemonicModal.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   5 import useModalState from '@proton/components/components/modalTwo/useModalState';
   6 import Prompt from '@proton/components/components/prompt/Prompt';
   7 import AuthModal from '@proton/components/containers/password/AuthModal';
   8 import useEventManager from '@proton/components/hooks/useEventManager';
   9 import useNotifications from '@proton/components/hooks/useNotifications';
  10 import { disableMnemonicPhrase } from '@proton/shared/lib/api/settingsMnemonic';
  11
  12 interface DisableMnemonicModalProps {
  13     onClose: ModalProps['onClose'];
  14     onExit: ModalProps['onExit'];
  15     open: ModalProps['open'];
  16 }
  17
  18 const DisableMnemonicModal = ({ open, onClose, onExit }: DisableMnemonicModalProps) => {
  19     const [authModalProps, setAuthModalOpen, renderAuthModal] = useModalState();
  20
  21     const { createNotification } = useNotifications();
  22     const { call } = useEventManager();
  23
  24     return (
  25         <>
  26             {renderAuthModal && (
  27                 <AuthModal
  28                     scope="password"
  29                     config={disableMnemonicPhrase()}
  30                     {...authModalProps}
  31                     onCancel={undefined}
  32                     onSuccess={async () => {
  33                         await call();
  34                         onClose?.();
  35                         createNotification({ text: c('Info').t`Recovery phrase has been disabled` });
  36                     }}
  37                 />
  38             )}
  39             <Prompt
  40                 open={open}
  41                 title={c('Action').t`Disable recovery phrase?`}
  42                 buttons={[
  43                     <Button color="danger" onClick={() => setAuthModalOpen(true)}>
  44                         {c('Action').t`Disable recovery phrase`}
  45                     </Button>,
  46                     <Button onClick={onClose}>{c('Action').t`Cancel`}</Button>,
  47                 ]}
  48                 onClose={onClose}
  49                 onExit={onExit}
  50             >
  51                 <p className="mt-0">{c('Info')
  52                     .t`This will disable your current recovery phrase. You won't be able to use it to access your account or decrypt your data.`}</p>
  53                 <p className="mb-0">{c('Info')
  54                     .t`Enabling recovery by phrase again will generate a new recovery phrase.`}</p>
  55             </Prompt>
  56         </>
  57     );
  58 };
  59
  60 export default DisableMnemonicModal;