packages/pass/components/Form/Field/Control/OTPValueControl.tsx

   1 import { type FC } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { usePassCore } from '@proton/pass/components/Core/PassCoreProvider';
   6 import { OTPDonut } from '@proton/pass/components/Otp/OTPDonut';
   7 import { OTPValue } from '@proton/pass/components/Otp/OTPValue';
   8 import { usePeriodicOtpCode } from '@proton/pass/hooks/usePeriodicOtpCode';
   9 import { type OtpRequest } from '@proton/pass/types';
  10
  11 import { ValueControl } from './ValueControl';
  12
  13 type Props = { label?: string; payload: OtpRequest };
  14
  15 /* This component handles the period otp code generation
  16  * to avoid cluttering the render cycle of a component in
  17  * need of the OTP code generation as it involves alot of
  18  * re-rendering. eg: we do not want to re-render `Login.view`
  19  * everytime the OTP countdown updates */
  20 export const OTPValueControl: FC<Props> = ({ label, payload }) => {
  21     const { generateOTP } = usePassCore();
  22     const [otp, percent] = usePeriodicOtpCode({ generate: generateOTP, payload });
  23
  24     return (
  25         <ValueControl
  26             clickToCopy
  27             icon="lock"
  28             value={otp?.token ?? ''}
  29             label={label ?? c('Label').t`2FA token (TOTP)`}
  30             actions={<OTPDonut enabled={otp !== null} percent={percent} period={otp?.period} />}
  31         >
  32             <OTPValue code={otp?.token ?? ''} />
  33         </ValueControl>
  34     );
  35 };