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 62 | 8x 8x 8x 8x 8x 8x 37x 87x 87x 37x 37x 37x 3x 34x 37x 8x | import { FieldProps } from 'formik';
import React, { memo, useCallback, useMemo, FunctionComponent } from 'react';
import { TranslatedString } from '../locale';
import { FormField, TextInput } from '../ui/form';
import { IconEye, IconEyeSlash } from '../ui/icon';
import { Toggle } from '../ui/toggle';
export interface PasswordFieldProps {
forgotPasswordUrl?: string;
}
const PasswordField: FunctionComponent<PasswordFieldProps> = ({
forgotPasswordUrl,
}) => {
const renderInput = useCallback((props: FieldProps) => (
<Toggle openByDefault={ false }>
{ ({ isOpen, toggle }) => (
<div className="form-field-password">
<TextInput
{ ...props.field }
additionalClassName="form-input--withIcon"
id={ props.field.name }
type={ isOpen ? 'text' : 'password' }
/>
<a className="form-toggle-password form-input-icon" href="#" onClick={ toggle }>
{ isOpen ? <IconEye /> : <IconEyeSlash /> }
</a>
</div>
) }
</Toggle>
), []);
const labelContent = useMemo(() => (
<TranslatedString id={ 'customer.password_label' } />
), []);
const footer = useMemo(() => {
if (!forgotPasswordUrl) {
return null;
}
return <a
data-test="forgot-password-link"
href={ forgotPasswordUrl }
rel="noopener noreferrer"
target="_blank"
>
<TranslatedString id="customer.forgot_password_action" />
</a>;
}, [forgotPasswordUrl]);
return <FormField
footer={ footer }
input={ renderInput }
labelContent={ labelContent }
name="password"
/>;
};
export default memo(PasswordField);
|