From 49112bef3fd001168db5538698782632c73bc65c Mon Sep 17 00:00:00 2001
From: Viktor Fomin <viktor.fomin@onlyoffice.com>
Date: Mon, 25 Jul 2022 18:08:09 +0300
Subject: [PATCH] Web: Login: add background patter, fix login form

---
 web/ASC.Web.Login/src/Login.jsx      | 280 ++++++++++++++-------------
 web/ASC.Web.Login/src/StyledLogin.js |  39 +++-
 2 files changed, 180 insertions(+), 139 deletions(-)

diff --git a/web/ASC.Web.Login/src/Login.jsx b/web/ASC.Web.Login/src/Login.jsx
index f4084ec5c8..91b158080c 100644
--- a/web/ASC.Web.Login/src/Login.jsx
+++ b/web/ASC.Web.Login/src/Login.jsx
@@ -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
diff --git a/web/ASC.Web.Login/src/StyledLogin.js b/web/ASC.Web.Login/src/StyledLogin.js
index 78751ab2e1..711dc8f908 100644
--- a/web/ASC.Web.Login/src/StyledLogin.js
+++ b/web/ASC.Web.Login/src/StyledLogin.js
@@ -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;
+  }
 `;