packages/pass/components/Lock/PinUnlockModal.tsx

   1 import { type FC, useEffect, useState } from 'react';
   2
   3 import { Card } from '@proton/atoms';
   4 import { type ModalProps, ModalTwoContent, ModalTwoHeader } from '@proton/components';
   5 import { PassModal } from '@proton/pass/components/Layout/Modal/PassModal';
   6 import { useSessionLockPinSubmitEffect } from '@proton/pass/hooks/useSessionLockPinSubmitEffect';
   7
   8 import { PinCodeInput } from './PinCodeInput';
   9
  10 type Props = Omit<ModalProps, 'onSubmit'> & {
  11     title: string;
  12     assistiveText?: string;
  13     loading?: boolean;
  14     onSubmit: (pin: string) => void;
  15 };
  16
  17 export const PinUnlockModal: FC<Props> = ({ title, assistiveText, loading, onSubmit, ...modalProps }) => {
  18     const [value, setValue] = useState<string>('');
  19     useSessionLockPinSubmitEffect(value, { onSubmit });
  20
  21     useEffect(() => {
  22         if (!modalProps.open) setValue('');
  23     }, [modalProps.open]);
  24
  25     return (
  26         <PassModal {...modalProps} size="small">
  27             <ModalTwoHeader title={title} />
  28             <ModalTwoContent className="mb-8">
  29                 {assistiveText && (
  30                     <Card rounded className="text-sm mb-7">
  31                         {assistiveText}
  32                     </Card>
  33                 )}
  34                 <PinCodeInput loading={loading} value={value} onValue={setValue} />
  35             </ModalTwoContent>
  36         </PassModal>
  37     );
  38 };