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}
|
{greetingTitle}
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
{ssoExists() && <ButtonsWrapper>{ssoButton()}</ButtonsWrapper>}
|
<div className="form-wrapper">
|
||||||
|
{ssoExists() && <ButtonsWrapper>{ssoButton()}</ButtonsWrapper>}
|
||||||
|
|
||||||
{oauthDataExists() && (
|
{oauthDataExists() && (
|
||||||
<>
|
<>
|
||||||
<ButtonsWrapper>{providerButtons()}</ButtonsWrapper>
|
<ButtonsWrapper>{providerButtons()}</ButtonsWrapper>
|
||||||
{providers && providers.length > 2 && (
|
{providers && providers.length > 2 && (
|
||||||
<Link
|
<Link
|
||||||
isHovered
|
isHovered
|
||||||
type="action"
|
type="action"
|
||||||
fontSize="13px"
|
fontSize="13px"
|
||||||
fontWeight="600"
|
fontWeight="600"
|
||||||
color="#3B72A7"
|
color="#3B72A7"
|
||||||
className="more-label"
|
className="more-label"
|
||||||
onClick={moreAuthOpen}
|
onClick={moreAuthOpen}
|
||||||
>
|
>
|
||||||
{t("Common:ShowMore")}
|
{t("Common:ShowMore")}
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{(oauthDataExists() || ssoExists()) && (
|
{(oauthDataExists() || ssoExists()) && (
|
||||||
<div className="line">
|
<div className="line">
|
||||||
<Text color="#A3A9AE" className="or-label">
|
<Text color="#A3A9AE" className="or-label">
|
||||||
{t("Or")}
|
{t("Or")}
|
||||||
</Text>
|
</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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
{isDialogVisible && (
|
<form className="auth-form-container">
|
||||||
<ForgotPasswordModalDialog
|
<FieldContainer
|
||||||
visible={isDialogVisible}
|
isVertical={true}
|
||||||
email={identifier}
|
labelVisible={false}
|
||||||
onDialogClose={onDialogClose}
|
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 && (
|
{confirmedEmail && (
|
||||||
<Text isBold={true} fontSize="16px">
|
<Text isBold={true} fontSize="16px">
|
||||||
{t("MessageEmailConfirmed")} {t("MessageAuthorize")}
|
{t("MessageEmailConfirmed")} {t("MessageAuthorize")}
|
||||||
</Text>
|
</Text>
|
||||||
)}
|
)}
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
<Toast />
|
<Toast />
|
||||||
|
|
||||||
<MoreLoginModal
|
<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";
|
import styled, { css } from "styled-components";
|
||||||
|
|
||||||
export const ButtonsWrapper = styled.div`
|
export const ButtonsWrapper = styled.div`
|
||||||
@ -189,6 +189,30 @@ export const LoginContainer = styled.div`
|
|||||||
height: 39px;
|
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`
|
export const LoginFormWrapper = styled.div`
|
||||||
@ -201,4 +225,17 @@ export const LoginFormWrapper = styled.div`
|
|||||||
: css`1fr`};
|
: css`1fr`};
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
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