packages/pass/components/Lock/PasswordForm.tsx

   1 import { type FC } from 'react';
   2
   3 import { Form, type FormikErrors, FormikProvider, useFormik } from 'formik';
   4
   5 import { Button } from '@proton/atoms';
   6 import { Field } from '@proton/pass/components/Form/Field/Field';
   7 import { PasswordField } from '@proton/pass/components/Form/legacy/PasswordField';
   8 import { type PasswordCredentials } from '@proton/pass/lib/auth/password';
   9
  10 type Props = {
  11     id: string;
  12     disabled?: boolean;
  13     loading?: boolean;
  14     submitLabel?: string;
  15     onSubmit: (values: PasswordCredentials) => void;
  16     onValidate?: (values: PasswordCredentials) => FormikErrors<PasswordCredentials>;
  17 };
  18
  19 export const PasswordForm: FC<Props> = ({ id, disabled, loading, submitLabel, onSubmit, onValidate }) => {
  20     const form = useFormik({
  21         initialValues: { password: '' },
  22         validateOnMount: true,
  23         validateOnBlur: true,
  24         validate: onValidate,
  25         onSubmit,
  26     });
  27
  28     return (
  29         <FormikProvider value={form}>
  30             <Form id={id}>
  31                 <div className="flex flex-nowrap items-end w-full" style={{ '--border-radius-xl': '2em' }}>
  32                     <Field
  33                         component={PasswordField}
  34                         name="password"
  35                         dense
  36                         rootClassName="flex-1"
  37                         className="flex-1 rounded-xl overflow-hidden"
  38                         inputClassName="text-rg rounded-none"
  39                         disabled={disabled || loading}
  40                         autoFocus={!disabled}
  41                         {...(disabled ? { error: undefined } : {})}
  42                     />
  43                 </div>
  44                 <Button
  45                     pill
  46                     shape="solid"
  47                     color="norm"
  48                     className="w-full"
  49                     type="submit"
  50                     loading={loading}
  51                     disabled={!form.isValid || disabled}
  52                 >
  53                     {submitLabel}
  54                 </Button>
  55             </Form>
  56         </FormikProvider>
  57     );
  58 };