packages/components/containers/mnemonic/MnemonicPhraseStep.tsx

   1 import type { ReactNode } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button, Card } from '@proton/atoms';
   6 import Copy from '@proton/components/components/button/Copy';
   7 import Icon from '@proton/components/components/icon/Icon';
   8 import Loader from '@proton/components/components/loader/Loader';
   9 import useNotifications from '@proton/components/hooks/useNotifications';
  10 import downloadFile from '@proton/shared/lib/helpers/downloadFile';
  11
  12 export const MnemonicPhraseStepContent = ({
  13     mnemonic,
  14     loading,
  15     children,
  16 }: {
  17     mnemonic?: string;
  18     loading?: boolean;
  19     children?: ReactNode;
  20 }) => {
  21     const { createNotification } = useNotifications();
  22
  23     const onCopy = () => {
  24         createNotification({ text: c('Info').t`Recovery phrase copied to clipboard` });
  25     };
  26
  27     return (
  28         <>
  29             {children ? (
  30                 children
  31             ) : (
  32                 <>
  33                     <p className="mt-0">
  34                         {c('Info')
  35                             .t`Your recovery phrase is a series of 12 randomly generated words in a specific order.`}
  36                     </p>
  37
  38                     <p className="color-warning">
  39                         <Icon className="mr-2 float-left mt-1" name="exclamation-circle-filled" />
  40
  41                         {c('Info')
  42                             .t`Please keep it safe. You'll need it to access your account and decrypt your data in case of a password reset.`}
  43                     </p>
  44                 </>
  45             )}
  46
  47             {!mnemonic || loading ? (
  48                 <Loader />
  49             ) : (
  50                 <>
  51                     <span className="text-semibold">{c('Label').t`Recovery phrase`}</span>
  52                     <Card className="mt-2 flex justify-space-between items-center flex-nowrap" bordered={false} rounded>
  53                         <span className="mr-2" data-testid="account:recovery:generatedRecoveryPhrase">
  54                             {mnemonic}
  55                         </span>
  56                         <Copy className="bg-norm shrink-0" value={mnemonic} onCopy={onCopy} />
  57                     </Card>
  58                 </>
  59             )}
  60         </>
  61     );
  62 };
  63
  64 interface MnemonicPhraseStepButtonsProps {
  65     mnemonic?: string;
  66     disabled?: boolean;
  67     onDone?: () => void;
  68 }
  69 export const MnemonicPhraseStepButtons = ({ mnemonic, disabled, onDone }: MnemonicPhraseStepButtonsProps) => {
  70     const { createNotification } = useNotifications();
  71
  72     const handleDownload = async () => {
  73         if (!mnemonic) {
  74             return;
  75         }
  76
  77         const blob = new Blob([mnemonic], { type: 'text/plain;charset=utf-8' });
  78         downloadFile(blob, `proton_recovery_phrase.txt`);
  79         createNotification({ text: c('Info').t`Recovery phrase downloaded` });
  80     };
  81
  82     return (
  83         <>
  84             <Button disabled={!mnemonic || disabled} onClick={onDone}>
  85                 {c('Action').t`Done`}
  86             </Button>
  87             <Button disabled={!mnemonic || disabled} onClick={handleDownload} color="norm">
  88                 {c('Action').t`Download`}
  89             </Button>
  90         </>
  91     );
  92 };