packages/components/containers/recovery/phone/VerifyRecoveryPhoneModal.tsx

   1 import { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   7 import Prompt from '@proton/components/components/prompt/Prompt';
   8 import useApi from '@proton/components/hooks/useApi';
   9 import { postVerifyPhone } from '@proton/shared/lib/api/verify';
  10 import type { UserSettings } from '@proton/shared/lib/interfaces';
  11
  12 interface Props extends ModalProps {
  13     phone: UserSettings['Phone'];
  14 }
  15
  16 const VerifyRecoveryPhoneModal = ({ phone, onClose, ...rest }: Props) => {
  17     const [loading, setLoading] = useState(false);
  18     const api = useApi();
  19
  20     const handleSendVerificationPhoneClick = async () => {
  21         setLoading(true);
  22         try {
  23             // PostVerifyPhone will call /core/v4/verify/phone which should return error 9001 Human Verification.
  24             // The client will then display the verify modal and replay the endpoint to submit the token and verify the phone number.
  25             await api(postVerifyPhone());
  26         } catch (error) {}
  27
  28         onClose?.();
  29     };
  30     return (
  31         <Prompt
  32             title={c('Recovery Phone').t`Verify recovery phone?`}
  33             buttons={[
  34                 <Button loading={loading} shape="solid" color="norm" onClick={handleSendVerificationPhoneClick}>{c(
  35                     'Recovery Phone'
  36                 ).t`Verify by SMS`}</Button>,
  37                 <Button onClick={onClose} disabled={loading}>{c('Recovery Phone').t`Cancel`}</Button>,
  38             ]}
  39             {...rest}
  40         >
  41             {c('Recovery Phone')
  42                 .t`Verifying your phone number increases your account security and allows additional options for recovery.`}
  43         </Prompt>
  44     );
  45 };
  46
  47 export default VerifyRecoveryPhoneModal;