import * as React from 'react'; import { Form, FormGroup, ActionGroup, FormHelperText } from '../Form'; import { TextInput } from '../TextInput'; import { Button } from '../Button'; import { Checkbox } from '../Checkbox'; import { ValidatedOptions } from '../../helpers/constants'; import { InputGroup, InputGroupItem } from '../InputGroup'; import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon'; import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon'; import { HelperText, HelperTextItem } from '../HelperText'; export interface LoginFormProps extends Omit, 'ref'> { /** Flag to indicate if the first dropdown item should not gain initial focus */ noAutoFocus?: boolean; /** Additional classes added to the login main body's form */ className?: string; /** Flag indicating the helper text is visible * */ showHelperText?: boolean; /** Content displayed in the helper text component * */ helperText?: React.ReactNode; /** Icon displayed to the left in the helper text */ helperTextIcon?: React.ReactNode; /** Label for the username input field */ usernameLabel?: string; /** Value for the username */ usernameValue?: string; /** Function that handles the onChange event for the username */ onChangeUsername?: (event: React.FormEvent, value: string) => void; /** Flag indicating if the username is valid */ isValidUsername?: boolean; /** Label for the password input field */ passwordLabel?: string; /** Value for the password */ passwordValue?: string; /** Function that handles the onChange event for the password */ onChangePassword?: (event: React.FormEvent, value: string) => void; /** Flag indicating if the password is valid */ isValidPassword?: boolean; /** Flag indicating if the user can toggle hiding the password */ isShowPasswordEnabled?: boolean; /** Accessible label for the show password button */ showPasswordAriaLabel?: string; /** Accessible label for the hide password button */ hidePasswordAriaLabel?: string; /** Label for the log in button input */ loginButtonLabel?: string; /** Flag indicating if the login button is disabled */ isLoginButtonDisabled?: boolean; /** Function that is called when the login button is clicked */ onLoginButtonClick?: (event: React.MouseEvent) => void; /** Label for the remember me checkbox that indicates the user should be kept logged in. If the label is not provided, the checkbox will not show. */ rememberMeLabel?: string; /** Flag indicating if the remember me checkbox is checked. */ isRememberMeChecked?: boolean; /** Function that handles the onChange event for the remember me checkbox */ onChangeRememberMe?: (event: React.FormEvent, checked: boolean) => void; } export const LoginForm: React.FunctionComponent = ({ noAutoFocus = false, className = '', showHelperText = false, helperText = null, helperTextIcon = null, usernameLabel = 'Username', usernameValue = '', onChangeUsername = () => undefined as any, isValidUsername = true, passwordLabel = 'Password', passwordValue = '', onChangePassword = () => undefined as any, isShowPasswordEnabled = false, hidePasswordAriaLabel = 'Hide password', showPasswordAriaLabel = 'Show password', isValidPassword = true, loginButtonLabel = 'Log In', isLoginButtonDisabled = false, onLoginButtonClick = () => undefined as any, rememberMeLabel = '', isRememberMeChecked = false, onChangeRememberMe = () => undefined as any, ...props }: LoginFormProps) => { const [passwordHidden, setPasswordHidden] = React.useState(true); const passwordInput = ( ); return ( {showHelperText && ( {helperText} )} {isShowPasswordEnabled && ( {passwordInput}
)} {!isShowPasswordEnabled && passwordInput} {rememberMeLabel.length > 0 && ( )}
); }; LoginForm.displayName = 'LoginForm';