Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 3x 3x 3x 3x 8x 27x 27x 8x 8x 8x 3x | import { FieldProps } from 'formik';
import React, { memo, useCallback, useMemo, Fragment, FunctionComponent } from 'react';
import { TranslatedString } from '../locale';
import { FormField, TextInput } from '../ui/form';
export interface PasswordField {
minLength: number;
}
const SignUpPasswordField: FunctionComponent<PasswordField> = ({
minLength,
}) => {
const renderPasswordInput = useCallback(({ field }: FieldProps<string>) => (
<TextInput
{ ...field }
id={ field.name }
type="password"
/>
), []);
const renderPasswordConfirmationInput = useCallback(({ field }: FieldProps<string>) => (
<TextInput
{ ...field }
id={ field.name }
type="password"
/>
), []);
const passwordLabelContent = useMemo(() => (
<Fragment>
<TranslatedString id={ 'customer.password_label' } />
{ ' ' }
<small>
{ `${minLength}-` }
<TranslatedString id={ 'customer.password_minimum_character_label' } />
</small>
</Fragment>
), [minLength]);
const passwordConfirmationLabelContent = useMemo(() => (
<TranslatedString id={ 'customer.password_confirmation_label' } />
), []);
return <Fragment>
<FormField
input={ renderPasswordInput }
labelContent={ passwordLabelContent }
name="password"
/>
<FormField
input={ renderPasswordConfirmationInput }
labelContent={ passwordConfirmationLabelContent }
name="confirmPassword"
/>
</Fragment>;
};
export default memo(SignUpPasswordField);
|