import React from 'react';
import brandImg2 from '../../assets/brandImgColor2.svg';
import {
LoginFooterItem,
LoginForm,
LoginMainFooterBandItem,
LoginMainFooterLinksItem,
LoginPage,
ListItem,
ListVariant,
MenuToggle,
MenuToggleElement,
Select,
SelectList,
SelectOption
} from '@breakaway/preact-core';
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
export const LoginPageLanguageSelect: 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 [isHeaderUtilsOpen, setIsHeaderUtilsOpen] = React.useState(false);
const [selectedHeaderUtils, setSelectedHeaderUtils] = React.useState('English');
/** i18n object is used to simulate i18n integration of native language translation */
const i18n = {
English: 'English',
Mandarin: '普通话',
Hindi: 'हिन्दी',
Spanish: 'Español',
Portuguese: 'Português',
Arabic: 'عربى',
Bengali: 'বাংলা'
};
const headerUtilsOptions = (
{i18n.English}
{i18n.Mandarin}
{i18n.Hindi}
{i18n.Spanish}
{i18n.Portuguese}
{i18n.Arabic}
{i18n.Bengali}
);
const onHeaderUtilsSelect = (
_event: React.MouseEvent | React.ChangeEvent,
value: string
) => {
setSelectedHeaderUtils(value);
setIsHeaderUtilsOpen(false);
};
const headerUtils = (
);
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}
);
};