Web: Login: add background patter, fix login form
This commit is contained in:
parent
8e888b5191
commit
49112bef3f
@ -384,150 +384,154 @@ const Form = (props) => {
|
||||
{greetingTitle}
|
||||
</Text>
|
||||
|
||||
{ssoExists() && <ButtonsWrapper>{ssoButton()}</ButtonsWrapper>}
|
||||
<div className="form-wrapper">
|
||||
{ssoExists() && <ButtonsWrapper>{ssoButton()}</ButtonsWrapper>}
|
||||
|
||||
{oauthDataExists() && (
|
||||
<>
|
||||
<ButtonsWrapper>{providerButtons()}</ButtonsWrapper>
|
||||
{providers && providers.length > 2 && (
|
||||
<Link
|
||||
isHovered
|
||||
type="action"
|
||||
fontSize="13px"
|
||||
fontWeight="600"
|
||||
color="#3B72A7"
|
||||
className="more-label"
|
||||
onClick={moreAuthOpen}
|
||||
>
|
||||
{t("Common:ShowMore")}
|
||||
</Link>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{oauthDataExists() && (
|
||||
<>
|
||||
<ButtonsWrapper>{providerButtons()}</ButtonsWrapper>
|
||||
{providers && providers.length > 2 && (
|
||||
<Link
|
||||
isHovered
|
||||
type="action"
|
||||
fontSize="13px"
|
||||
fontWeight="600"
|
||||
color="#3B72A7"
|
||||
className="more-label"
|
||||
onClick={moreAuthOpen}
|
||||
>
|
||||
{t("Common:ShowMore")}
|
||||
</Link>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{(oauthDataExists() || ssoExists()) && (
|
||||
<div className="line">
|
||||
<Text color="#A3A9AE" className="or-label">
|
||||
{t("Or")}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form className="auth-form-container">
|
||||
<FieldContainer
|
||||
isVertical={true}
|
||||
labelVisible={false}
|
||||
hasError={isEmailErrorShow}
|
||||
errorMessage={
|
||||
errorText ? t(`Common:${errorText}`) : t("Common:RequiredField")
|
||||
} //TODO: Add wrong login server error
|
||||
>
|
||||
<EmailInput
|
||||
id="login"
|
||||
name="login"
|
||||
type="email"
|
||||
hasError={isEmailErrorShow}
|
||||
value={identifier}
|
||||
placeholder={t("RegistrationEmailWatermark")}
|
||||
size="large"
|
||||
scale={true}
|
||||
isAutoFocussed={true}
|
||||
tabIndex={1}
|
||||
isDisabled={isLoading}
|
||||
autoComplete="username"
|
||||
onChange={onChangeLogin}
|
||||
onBlur={onBlurEmail}
|
||||
onValidateInput={onValidateEmail}
|
||||
forwardedRef={inputRef}
|
||||
/>
|
||||
</FieldContainer>
|
||||
<FieldContainer
|
||||
isVertical={true}
|
||||
labelVisible={false}
|
||||
hasError={!passwordValid}
|
||||
errorMessage={!password.trim() ? t("Common:RequiredField") : ""} //TODO: Add wrong password server error
|
||||
>
|
||||
<PasswordInput
|
||||
simpleView={true}
|
||||
passwordSettings={settings}
|
||||
id="password"
|
||||
inputName="password"
|
||||
placeholder={t("Common:Password")}
|
||||
type="password"
|
||||
hasError={!passwordValid}
|
||||
inputValue={password}
|
||||
size="large"
|
||||
scale={true}
|
||||
tabIndex={1}
|
||||
isDisabled={isLoading}
|
||||
autoComplete="current-password"
|
||||
onChange={onChangePassword}
|
||||
onKeyDown={onKeyDown}
|
||||
/>
|
||||
</FieldContainer>
|
||||
|
||||
<div className="login-forgot-wrapper">
|
||||
<div className="login-checkbox-wrapper">
|
||||
<div className="remember-wrapper">
|
||||
<Checkbox
|
||||
className="login-checkbox"
|
||||
isChecked={isChecked}
|
||||
onChange={onChangeCheckbox}
|
||||
label={t("Remember")}
|
||||
helpButton={
|
||||
<HelpButton
|
||||
helpButtonHeaderContent={t("CookieSettingsTitle")}
|
||||
tooltipContent={
|
||||
<Text fontSize="12px">{t("RememberHelper")}</Text>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
fontSize="13px"
|
||||
color="#316DAA"
|
||||
className="login-link"
|
||||
type="page"
|
||||
isHovered={false}
|
||||
onClick={onClick}
|
||||
>
|
||||
{t("ForgotPassword")}
|
||||
</Link>
|
||||
{(oauthDataExists() || ssoExists()) && (
|
||||
<div className="line">
|
||||
<Text color="#A3A9AE" className="or-label">
|
||||
{t("Or")}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isDialogVisible && (
|
||||
<ForgotPasswordModalDialog
|
||||
visible={isDialogVisible}
|
||||
email={identifier}
|
||||
onDialogClose={onDialogClose}
|
||||
<form className="auth-form-container">
|
||||
<FieldContainer
|
||||
isVertical={true}
|
||||
labelVisible={false}
|
||||
hasError={isEmailErrorShow}
|
||||
errorMessage={
|
||||
errorText
|
||||
? t(`Common:${errorText}`)
|
||||
: t("Common:RequiredField")
|
||||
} //TODO: Add wrong login server error
|
||||
>
|
||||
<EmailInput
|
||||
id="login"
|
||||
name="login"
|
||||
type="email"
|
||||
hasError={isEmailErrorShow}
|
||||
value={identifier}
|
||||
placeholder={t("RegistrationEmailWatermark")}
|
||||
size="large"
|
||||
scale={true}
|
||||
isAutoFocussed={true}
|
||||
tabIndex={1}
|
||||
isDisabled={isLoading}
|
||||
autoComplete="username"
|
||||
onChange={onChangeLogin}
|
||||
onBlur={onBlurEmail}
|
||||
onValidateInput={onValidateEmail}
|
||||
forwardedRef={inputRef}
|
||||
/>
|
||||
</FieldContainer>
|
||||
<FieldContainer
|
||||
isVertical={true}
|
||||
labelVisible={false}
|
||||
hasError={!passwordValid}
|
||||
errorMessage={!password.trim() ? t("Common:RequiredField") : ""} //TODO: Add wrong password server error
|
||||
>
|
||||
<PasswordInput
|
||||
simpleView={true}
|
||||
passwordSettings={settings}
|
||||
id="password"
|
||||
inputName="password"
|
||||
placeholder={t("Common:Password")}
|
||||
type="password"
|
||||
hasError={!passwordValid}
|
||||
inputValue={password}
|
||||
size="large"
|
||||
scale={true}
|
||||
tabIndex={1}
|
||||
isDisabled={isLoading}
|
||||
autoComplete="current-password"
|
||||
onChange={onChangePassword}
|
||||
onKeyDown={onKeyDown}
|
||||
/>
|
||||
</FieldContainer>
|
||||
|
||||
<div className="login-forgot-wrapper">
|
||||
<div className="login-checkbox-wrapper">
|
||||
<div className="remember-wrapper">
|
||||
<Checkbox
|
||||
className="login-checkbox"
|
||||
isChecked={isChecked}
|
||||
onChange={onChangeCheckbox}
|
||||
label={t("Remember")}
|
||||
helpButton={
|
||||
<HelpButton
|
||||
helpButtonHeaderContent={t("CookieSettingsTitle")}
|
||||
tooltipContent={
|
||||
<Text fontSize="12px">{t("RememberHelper")}</Text>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
fontSize="13px"
|
||||
color="#316DAA"
|
||||
className="login-link"
|
||||
type="page"
|
||||
isHovered={false}
|
||||
onClick={onClick}
|
||||
>
|
||||
{t("ForgotPassword")}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isDialogVisible && (
|
||||
<ForgotPasswordModalDialog
|
||||
visible={isDialogVisible}
|
||||
email={identifier}
|
||||
onDialogClose={onDialogClose}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
id="submit"
|
||||
className="login-button"
|
||||
primary
|
||||
size="normal"
|
||||
scale={true}
|
||||
label={
|
||||
isLoading
|
||||
? t("Common:LoadingProcessing")
|
||||
: t("Common:LoginButton")
|
||||
}
|
||||
tabIndex={1}
|
||||
isDisabled={isLoading}
|
||||
isLoading={isLoading}
|
||||
onClick={onSubmit}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
id="submit"
|
||||
className="login-button"
|
||||
primary
|
||||
size="normal"
|
||||
scale={true}
|
||||
label={
|
||||
isLoading
|
||||
? t("Common:LoadingProcessing")
|
||||
: t("Common:LoginButton")
|
||||
}
|
||||
tabIndex={1}
|
||||
isDisabled={isLoading}
|
||||
isLoading={isLoading}
|
||||
onClick={onSubmit}
|
||||
/>
|
||||
|
||||
{confirmedEmail && (
|
||||
<Text isBold={true} fontSize="16px">
|
||||
{t("MessageEmailConfirmed")} {t("MessageAuthorize")}
|
||||
</Text>
|
||||
)}
|
||||
</form>
|
||||
{confirmedEmail && (
|
||||
<Text isBold={true} fontSize="16px">
|
||||
{t("MessageEmailConfirmed")} {t("MessageAuthorize")}
|
||||
</Text>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
<Toast />
|
||||
|
||||
<MoreLoginModal
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { hugeMobile } from "@appserver/components/utils/device";
|
||||
import { tablet, hugeMobile } from "@appserver/components/utils/device";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
export const ButtonsWrapper = styled.div`
|
||||
@ -189,6 +189,30 @@ export const LoginContainer = styled.div`
|
||||
height: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 32px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 5px 20px rgba(4, 15, 27, 0.07);
|
||||
border-radius: 12px;
|
||||
|
||||
max-width: 384px;
|
||||
|
||||
@media ${tablet} {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
@media ${hugeMobile} {
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
max-width: 311px;
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const LoginFormWrapper = styled.div`
|
||||
@ -201,4 +225,17 @@ export const LoginFormWrapper = styled.div`
|
||||
: css`1fr`};
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
background-image: url("/static/images/background.pattern.react.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: 100% 100%;
|
||||
|
||||
@media ${tablet} {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@media ${hugeMobile} {
|
||||
background-image: none;
|
||||
}
|
||||
`;
|
||||
|
Loading…
Reference in New Issue
Block a user