import React from 'react'; import brandImg from '../../assets/PF-IconLogo.svg'; import { LoginFooterItem, LoginForm, LoginMainFooterBandItem, LoginMainFooterLinksItem, LoginPage, ListItem, ListVariant, Button } from '@patternfly/react-core'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon'; import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon'; import DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon'; import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-square-icon'; import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon'; export const SimpleLoginPage: React.FunctionComponent = () => { const [showHelperText, setShowHelperText] = React.useState(false); const [username, setUsername] = React.useState(''); const [isValidUsername, setIsValidUsername] = React.useState(true); const [password, setPassword] = React.useState(''); const [isValidPassword, setIsValidPassword] = React.useState(true); const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false); const handleUsernameChange = (_event: React.FormEvent, value: string) => { setUsername(value); }; const handlePasswordChange = (_event: React.FormEvent, value: string) => { setPassword(value); }; const onRememberMeClick = () => { setIsRememberMeChecked(!isRememberMeChecked); }; const onLoginButtonClick = (event: React.MouseEvent) => { event.preventDefault(); setIsValidUsername(!!username); setIsValidPassword(!!password); setShowHelperText(!username || !password); }; const socialMediaLoginContent = (
} />
} />
} />
} />
} /> ); const signUpForAccountMessage = ( Need an account? Sign up. ); const forgotCredentials = ( Forgot username or password? ); const listItem = ( Terms of Use Help Privacy Policy ); const loginForm = ( } usernameLabel="Username" usernameValue={username} onChangeUsername={handleUsernameChange} isValidUsername={isValidUsername} passwordLabel="Password" passwordValue={password} onChangePassword={handlePasswordChange} isValidPassword={isValidPassword} rememberMeLabel="Keep me logged in for 30 days." isRememberMeChecked={isRememberMeChecked} onChangeRememberMe={onRememberMeClick} onLoginButtonClick={onLoginButtonClick} loginButtonLabel="Log in" /> ); return ( {loginForm} ); };