packages/pass/components/Lock/PasswordModal.tsx

   1 import { type FC, useCallback, useMemo, useRef, useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import {
   7     Form,
   8     InputFieldTwo,
   9     ModalTwo,
  10     ModalTwoContent,
  11     ModalTwoFooter,
  12     ModalTwoHeader,
  13     PasswordInputTwo,
  14 } from '@proton/components';
  15 import { Card } from '@proton/pass/components/Layout/Card/Card';
  16 import type { Maybe, MaybePromise } from '@proton/pass/types';
  17
  18 export type PasswordModalProps = {
  19     label?: string;
  20     loading?: boolean;
  21     message?: string;
  22     open?: boolean;
  23     placeholder?: string;
  24     submitLabel?: string;
  25     title: string;
  26     type: 'new-password' | 'current-password';
  27     warning?: string;
  28     onClose?: () => void;
  29     onSubmit?: (password: string) => MaybePromise<void>;
  30     onValidate?: (password: string) => Maybe<string>;
  31 };
  32
  33 export const PasswordModal: FC<PasswordModalProps> = ({
  34     label,
  35     loading,
  36     message,
  37     open,
  38     placeholder,
  39     submitLabel,
  40     title,
  41     type,
  42     warning,
  43     onClose,
  44     onSubmit,
  45     onValidate,
  46 }) => {
  47     const touched = useRef(false);
  48     const [password, setPassword] = useState('');
  49     const error = useMemo(() => onValidate?.(password), [password, onValidate]);
  50
  51     const onValue = useCallback((value: string) => {
  52         touched.current = true;
  53         setPassword(value);
  54     }, []);
  55
  56     return (
  57         <ModalTwo
  58             as={Form}
  59             onClose={onClose}
  60             onReset={onClose}
  61             onSubmit={() => !error && onSubmit?.(password)}
  62             open={open}
  63             size="small"
  64         >
  65             <ModalTwoHeader title={title} closeButtonProps={{ pill: true, disabled: loading }} />
  66             <ModalTwoContent>
  67                 {message && (
  68                     <Card className="mb-4 text-sm" type="primary">
  69                         {message}
  70                     </Card>
  71                 )}
  72                 <InputFieldTwo
  73                     as={PasswordInputTwo}
  74                     autoComplete={type}
  75                     autoFocus
  76                     dense
  77                     disabled={loading}
  78                     error={touched.current ? error : undefined}
  79                     id="password"
  80                     label={label ?? c('Label').t`Password`}
  81                     onValue={onValue}
  82                     placeholder={placeholder ?? c('Placeholder').t`Password`}
  83                     required
  84                     value={password}
  85                 />
  86
  87                 {warning && <div className="mt-4 mb-4 text-sm color-danger">{warning}</div>}
  88             </ModalTwoContent>
  89             <ModalTwoFooter>
  90                 <Button color="danger" shape="outline" onClick={onClose} disabled={loading}>
  91                     {c('Action').t`Cancel`}
  92                 </Button>
  93                 <Button type="submit" color="norm" loading={loading} disabled={loading || error !== undefined}>
  94                     {submitLabel ?? c('Action').t`Authenticate`}
  95                 </Button>
  96             </ModalTwoFooter>
  97         </ModalTwo>
  98     );
  99 };