From 8e888b51916cefa4a1072e02dc2fa290a63489f0 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 25 Jul 2022 18:07:04 +0300 Subject: [PATCH 01/66] Web: add background pattern image --- public/images/background.pattern.react.svg | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 public/images/background.pattern.react.svg diff --git a/public/images/background.pattern.react.svg b/public/images/background.pattern.react.svg new file mode 100644 index 0000000000..989e5d7442 --- /dev/null +++ b/public/images/background.pattern.react.svg @@ -0,0 +1,5 @@ + + + + + From 49112bef3fd001168db5538698782632c73bc65c Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 25 Jul 2022 18:08:09 +0300 Subject: [PATCH 02/66] 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} - {ssoExists() && {ssoButton()}} +
+ {ssoExists() && {ssoButton()}} - {oauthDataExists() && ( - <> - {providerButtons()} - {providers && providers.length > 2 && ( - - {t("Common:ShowMore")} - - )} - - )} + {oauthDataExists() && ( + <> + {providerButtons()} + {providers && providers.length > 2 && ( + + {t("Common:ShowMore")} + + )} + + )} - {(oauthDataExists() || ssoExists()) && ( -
- - {t("Or")} - -
- )} - -
- - - - - - - -
-
-
- {t("RememberHelper")} - } - /> - } - /> -
- - - {t("ForgotPassword")} - + {(oauthDataExists() || ssoExists()) && ( +
+ + {t("Or")} +
-
+ )} - {isDialogVisible && ( - + + + + + + + +
+
+
+ {t("RememberHelper")} + } + /> + } + /> +
+ + + {t("ForgotPassword")} + +
+
+ + {isDialogVisible && ( + + )} +
Date: Mon, 25 Jul 2022 18:28:23 +0300 Subject: [PATCH 03/66] Web: Common: add class with-background-pattern --- packages/asc-web-common/custom.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/asc-web-common/custom.scss b/packages/asc-web-common/custom.scss index 83fc18eafe..68b5f428f2 100644 --- a/packages/asc-web-common/custom.scss +++ b/packages/asc-web-common/custom.scss @@ -62,3 +62,18 @@ body.desktop { padding: 30px; bottom: 15px; } + +.with-background-pattern { + background-image: url("/static/images/background.pattern.react.svg"); + background-repeat: no-repeat; + background-attachment: fixed; + background-size: 100% 100%; + + @media (max-width: 1024px) { + background-size: cover; + } + + @media (max-width: 428px) { + background-image: none; + } +} From 2f1740cb28592c9d730c6d2c01d00b07885bf362 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 25 Jul 2022 18:28:53 +0300 Subject: [PATCH 04/66] Web: Login: use class with-background-pattern --- web/ASC.Web.Login/src/Login.jsx | 6 +++++- web/ASC.Web.Login/src/StyledLogin.js | 13 ------------- 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/web/ASC.Web.Login/src/Login.jsx b/web/ASC.Web.Login/src/Login.jsx index 91b158080c..dddcea0b7f 100644 --- a/web/ASC.Web.Login/src/Login.jsx +++ b/web/ASC.Web.Login/src/Login.jsx @@ -570,7 +570,11 @@ const LoginForm = (props) => { const { enabledJoin, isDesktop } = props; return ( - +
diff --git a/web/ASC.Web.Login/src/StyledLogin.js b/web/ASC.Web.Login/src/StyledLogin.js index 711dc8f908..33c5e110fe 100644 --- a/web/ASC.Web.Login/src/StyledLogin.js +++ b/web/ASC.Web.Login/src/StyledLogin.js @@ -225,17 +225,4 @@ 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; - } `; From 112ffc5bcf49def312503fe4b5e01968208503b4 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 25 Jul 2022 18:32:58 +0300 Subject: [PATCH 05/66] Web: Client: add background pattern for confirm --- web/ASC.Web.Client/src/components/Main/index.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/web/ASC.Web.Client/src/components/Main/index.js b/web/ASC.Web.Client/src/components/Main/index.js index 34eaa8598c..a7980d9ad9 100644 --- a/web/ASC.Web.Client/src/components/Main/index.js +++ b/web/ASC.Web.Client/src/components/Main/index.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect } from "react"; import styled, { css } from "styled-components"; import { isIOS, @@ -41,7 +41,16 @@ const Main = React.memo((props) => { // }, []); //console.log("Main render"); - return ; + + useEffect(() => { + if (window.location.pathname.includes("confirm")) { + document + .getElementById("main-layout") + .classList.add("with-background-pattern"); + } + }, []); + + return ; }); /*Main.defaultProps = { From 94cb5b0a189ae7cbffc5a50cee0b58ade258e02f Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 25 Jul 2022 19:27:34 +0300 Subject: [PATCH 06/66] Web: Components: init form wrapper --- .../asc-web-components/form-wrapper/index.js | 34 +++++++++++++++++++ packages/asc-web-components/index.js | 1 + 2 files changed, 35 insertions(+) create mode 100644 packages/asc-web-components/form-wrapper/index.js diff --git a/packages/asc-web-components/form-wrapper/index.js b/packages/asc-web-components/form-wrapper/index.js new file mode 100644 index 0000000000..b084961f46 --- /dev/null +++ b/packages/asc-web-components/form-wrapper/index.js @@ -0,0 +1,34 @@ +import React from "react"; +import styled from "styled-components"; +import { tablet, hugeMobile } from "@appserver/components/utils/device"; + +const StyledWrapper = styled.div` + 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; + } +`; + +const FormWrapper = (props) => { + const { children } = props; + return {children}; +}; + +export default FormWrapper; diff --git a/packages/asc-web-components/index.js b/packages/asc-web-components/index.js index 8500143393..ef7fbcf471 100644 --- a/packages/asc-web-components/index.js +++ b/packages/asc-web-components/index.js @@ -64,3 +64,4 @@ export * as Themes from "./themes"; export { default as Portal } from "./portal"; export { default as TableContainer } from "./TableContainer"; export { default as Slider } from "./slider"; +export { default as FormWrapper } from "./form-wrapper"; From 73e834c09f9e992a4ce7cdb67d337537ad6b5acb Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 25 Jul 2022 19:28:10 +0300 Subject: [PATCH 07/66] Web: Login: delete useless, use FormWrapper --- web/ASC.Web.Login/src/Login.jsx | 5 +++-- web/ASC.Web.Login/src/StyledLogin.js | 26 +------------------------- 2 files changed, 4 insertions(+), 27 deletions(-) diff --git a/web/ASC.Web.Login/src/Login.jsx b/web/ASC.Web.Login/src/Login.jsx index dddcea0b7f..f48b698a4b 100644 --- a/web/ASC.Web.Login/src/Login.jsx +++ b/web/ASC.Web.Login/src/Login.jsx @@ -42,6 +42,7 @@ import { import AppLoader from "@appserver/common/components/AppLoader"; import EmailInput from "@appserver/components/email-input"; import { ReactSVG } from "react-svg"; +import FormWrapper from "@appserver/components/form-wrapper"; const settings = { minLength: 6, @@ -384,7 +385,7 @@ const Form = (props) => { {greetingTitle} -
+ {ssoExists() && {ssoButton()}} {oauthDataExists() && ( @@ -531,7 +532,7 @@ const Form = (props) => { )} -
+ Date: Mon, 25 Jul 2022 19:42:53 +0300 Subject: [PATCH 08/66] Web: Client: Confirm: use FormWrapper --- .../Confirm/sub-components/changeOwner.js | 41 ++- .../Confirm/sub-components/changePassword.js | 103 +++--- .../Confirm/sub-components/changePhone.js | 43 +-- .../Confirm/sub-components/createUser.js | 337 +++++++++--------- .../Confirm/sub-components/profileRemove.js | 21 +- .../Confirm/sub-components/tfaActivation.js | 97 ++--- .../pages/Confirm/sub-components/tfaAuth.js | 107 +++--- 7 files changed, 386 insertions(+), 363 deletions(-) diff --git a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changeOwner.js b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changeOwner.js index 04f7176bcf..77f6823e38 100644 --- a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changeOwner.js +++ b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changeOwner.js @@ -12,6 +12,7 @@ import { ButtonsWrapper, } from "./StyledConfirm"; import withLoader from "../withLoader"; +import FormWrapper from "@appserver/components/form-wrapper"; const ChangeOwnerForm = (props) => { const { t, greetingTitle } = props; @@ -29,25 +30,27 @@ const ChangeOwnerForm = (props) => { - -
- - {ssoExists() && {ssoButton()}} + + + {ssoExists() && {ssoButton()}} - {oauthDataExists() && ( - <> - {providerButtons()} - {providers && providers.length > 2 && ( - - {t("Common:ShowMore")} - - )} - - )} + {oauthDataExists() && ( + <> + {providerButtons()} + {providers && providers.length > 2 && ( + + {t("Common:ShowMore")} + + )} + + )} - {(oauthDataExists() || ssoExists()) && ( -
- - {t("Or")} - -
- )} + {(oauthDataExists() || ssoExists()) && ( +
+ + {t("Or")} + +
+ )} -
-
- - +
+ - + errorMessage={ + emailErrorText + ? t(`Common:${emailErrorText}`) + : t("Common:RequiredField") + } + > + + - - - + errorMessage={errorText ? errorText : t("Common:RequiredField")} + > + + - - - + errorMessage={errorText ? errorText : t("Common:RequiredField")} + > + + - - + + + +
+
-