From 5e8293023b30248d811c4e8ea7a21a08dd1d0707 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Wed, 17 Feb 2021 15:15:59 +0300 Subject: [PATCH] Web: LoginMobile: refactoring --- web/ASC.Web.LoginMobile/src/App.js | 6 +- web/ASC.Web.LoginMobile/src/api/fakeApi.js | 5 + .../src/components/fields/EmailField/index.js | 40 +++ .../components/fields/PasswordField/index.js | 69 +++++ .../src/components/fields/index.js | 2 + .../src/components/index.js | 1 + .../{ => components/pages/Login}/Login.jsx | 276 ++++-------------- .../forgot-password-modal-dialog.js | 0 .../sub-components/header-login-mobile.js | 5 +- .../pages/Login/sub-components/login-form.js | 138 +++++++++ .../sub-components/modal-dialog-container.js | 0 .../Login/sub-components/register-button.js | 33 +++ .../sub-components/register-container.js | 2 +- .../sub-components/register-modal-dialog.js | 0 .../pages/Registration/Registration.jsx | 0 .../src/locales/en/translation.json | 8 +- .../src/locales/ru/translation.json | 8 +- 17 files changed, 358 insertions(+), 235 deletions(-) create mode 100644 web/ASC.Web.LoginMobile/src/components/fields/EmailField/index.js create mode 100644 web/ASC.Web.LoginMobile/src/components/fields/PasswordField/index.js create mode 100644 web/ASC.Web.LoginMobile/src/components/fields/index.js create mode 100644 web/ASC.Web.LoginMobile/src/components/index.js rename web/ASC.Web.LoginMobile/src/{ => components/pages/Login}/Login.jsx (52%) rename web/ASC.Web.LoginMobile/src/{ => components/pages/Login}/sub-components/forgot-password-modal-dialog.js (100%) rename web/ASC.Web.LoginMobile/src/{ => components/pages/Login}/sub-components/header-login-mobile.js (77%) create mode 100644 web/ASC.Web.LoginMobile/src/components/pages/Login/sub-components/login-form.js rename web/ASC.Web.LoginMobile/src/{ => components/pages/Login}/sub-components/modal-dialog-container.js (100%) create mode 100644 web/ASC.Web.LoginMobile/src/components/pages/Login/sub-components/register-button.js rename web/ASC.Web.LoginMobile/src/{ => components/pages/Login}/sub-components/register-container.js (98%) rename web/ASC.Web.LoginMobile/src/{ => components/pages/Login}/sub-components/register-modal-dialog.js (100%) create mode 100644 web/ASC.Web.LoginMobile/src/components/pages/Registration/Registration.jsx diff --git a/web/ASC.Web.LoginMobile/src/App.js b/web/ASC.Web.LoginMobile/src/App.js index 72d4db793c..32b4b013f6 100644 --- a/web/ASC.Web.LoginMobile/src/App.js +++ b/web/ASC.Web.LoginMobile/src/App.js @@ -1,14 +1,12 @@ import React from "react"; -import { Provider } from "react-redux"; -import Login from "./Login"; -import Header from "./sub-components/header-login-mobile"; +import { Login } from "./components"; import "./custom.scss"; const App = () => { return ( <> -
+ ); }; diff --git a/web/ASC.Web.LoginMobile/src/api/fakeApi.js b/web/ASC.Web.LoginMobile/src/api/fakeApi.js index 7a4651936f..9fddb9843c 100644 --- a/web/ASC.Web.LoginMobile/src/api/fakeApi.js +++ b/web/ASC.Web.LoginMobile/src/api/fakeApi.js @@ -3,3 +3,8 @@ export const fakeHashSettings = { iterations: 100000, salt: "0a783fef249b0cfa2b1ddc3825bf9a5c9c869bf65a4a45cbd5a0c93b16b5a47e", }; + +export function login() { + console.log("here"); + return Promise.resolve(); +} diff --git a/web/ASC.Web.LoginMobile/src/components/fields/EmailField/index.js b/web/ASC.Web.LoginMobile/src/components/fields/EmailField/index.js new file mode 100644 index 0000000000..03b614c623 --- /dev/null +++ b/web/ASC.Web.LoginMobile/src/components/fields/EmailField/index.js @@ -0,0 +1,40 @@ +import React from "react"; + +import { FieldContainer, TextInput } from "ASC.Web.Components"; + +const EmailField = ({ + t, + identifierValid, + errorText, + identifier, + isLoading, + onChangeLogin, + onKeyPress, +}) => { + return ( + + + + ); +}; + +export default EmailField; diff --git a/web/ASC.Web.LoginMobile/src/components/fields/PasswordField/index.js b/web/ASC.Web.LoginMobile/src/components/fields/PasswordField/index.js new file mode 100644 index 0000000000..ea132198a0 --- /dev/null +++ b/web/ASC.Web.LoginMobile/src/components/fields/PasswordField/index.js @@ -0,0 +1,69 @@ +import React from "react"; + +import { PasswordInput, FieldContainer } from "ASC.Web.Components"; + +const settings = { + minLength: 6, + upperCase: false, + digits: false, + specSymbols: false, +}; + +const PasswordField = ({ + t, + passwordValid, + errorText, + password, + isLoading, + onChangePassword, + onKeyPress, +}) => { + const tooltipPassTitle = t("TooltipPasswordTitle"); + const tooltipPassLength = `${settings.minLength}${t( + "TooltipPasswordLength" + )}`; + const tooltipPassDigits = settings.digits + ? `${t("TooltipPasswordDigits")}` + : null; + const tooltipPassCapital = settings.upperCase + ? `${t("TooltipPasswordCapital")}` + : null; + const tooltipPassSpecial = settings.specSymbols + ? `${t("TooltipPasswordSpecial")}` + : null; + + return ( + + + + ); +}; + +export default PasswordField; diff --git a/web/ASC.Web.LoginMobile/src/components/fields/index.js b/web/ASC.Web.LoginMobile/src/components/fields/index.js new file mode 100644 index 0000000000..46906ea144 --- /dev/null +++ b/web/ASC.Web.LoginMobile/src/components/fields/index.js @@ -0,0 +1,2 @@ +export { default as PasswordField } from "./PasswordField"; +export { default as EmailField } from "./EmailField"; \ No newline at end of file diff --git a/web/ASC.Web.LoginMobile/src/components/index.js b/web/ASC.Web.LoginMobile/src/components/index.js new file mode 100644 index 0000000000..376343f5a4 --- /dev/null +++ b/web/ASC.Web.LoginMobile/src/components/index.js @@ -0,0 +1 @@ +export { default as Login } from "./pages/Login/Login"; diff --git a/web/ASC.Web.LoginMobile/src/Login.jsx b/web/ASC.Web.LoginMobile/src/components/pages/Login/Login.jsx similarity index 52% rename from web/ASC.Web.LoginMobile/src/Login.jsx rename to web/ASC.Web.LoginMobile/src/components/pages/Login/Login.jsx index 13166572e1..d75c1e0c92 100644 --- a/web/ASC.Web.LoginMobile/src/Login.jsx +++ b/web/ASC.Web.LoginMobile/src/components/pages/Login/Login.jsx @@ -7,25 +7,16 @@ import { withRouter } from "react-router"; import { PageLayout, store, api, utils } from "ASC.Web.Common"; import { checkPwd } from "ASC.Web.Common/desktop"; -import { - Box, - Button, - Text, - TextInput, - Link, - toastr, - Checkbox, - HelpButton, - PasswordInput, - FieldContainer, - tre, -} from "ASC.Web.Components"; +import { Text, toastr } from "ASC.Web.Components"; -import i18n from "./i18n"; +import i18n from "../../../i18n"; import ForgotPasswordModalDialog from "./sub-components/forgot-password-modal-dialog"; import Register from "./sub-components/register-container"; +import RegisterButton from "./sub-components/register-button"; +import Header from "./sub-components/header-login-mobile"; +import LoginForm from "./sub-components/login-form"; -import { fakeHashSettings } from "./api/fakeApi"; +import * as fakeApi from "../../../api/fakeApi"; const { login, setIsLoaded, reloadPortalSettings } = store.auth.actions; const { getLanguage, isDesktopClient } = store.auth.selectors; @@ -33,83 +24,15 @@ const { sendInstructionsToChangePassword } = api.people; const { createPasswordHash, tryRedirectTo } = utils; const LoginContainer = styled.div` - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: 1fr; + grid-gap: 30px; align-items: center; - margin: 120px auto 0 auto; - max-width: 960px; - - @media (max-width: 768px) { - padding: 0 16px; - max-width: 475px; - } - @media (max-width: 375px) { - margin: 72px auto 0 auto; - max-width: 311px; - } + margin: 34px 32px 0 32px; .greeting-title { width: 100%; - - @media (max-width: 768px) { - text-align: left; - } - @media (max-width: 375px) { - font-size: 23px; - } - } - - .auth-form-container { - margin: 32px 213px 0 213px; - width: 311px; - - @media (max-width: 768px) { - margin: 32px 0 0 0; - width: 100%; - } - @media (max-width: 375px) { - margin: 32px 0 0 0; - width: 100%; - } - - .login-forgot-wrapper { - height: 36px; - padding: 14px 0; - - .login-checkbox-wrapper { - display: flex; - - .login-checkbox { - float: left; - span { - font-size: 12px; - } - } - } - - .login-link { - line-height: 18px; - margin-left: auto; - } - } - - .login-button { - margin-bottom: 16px; - } - - .login-button-dialog { - margin-right: 8px; - } - - .login-bottom-border { - width: 100%; - height: 1px; - background: #eceef1; - } - - .login-bottom-text { - margin: 0 8px; - } + text-align: left; } `; @@ -163,7 +86,7 @@ class Form extends Component { onChangeCheckbox = () => this.setState({ isChecked: !this.state.isChecked }); - onClick = () => { + onClickForgot = () => { this.setState({ openDialog: true, isDisabled: true, @@ -233,11 +156,12 @@ class Form extends Component { if (hasError) return false; this.setState({ isLoading: true }); - const hash = createPasswordHash(pass, fakeHashSettings); + const hash = createPasswordHash(pass, fakeApi.fakeHashSettings); isDesktop && checkPwd(); - login(userName, hash) + fakeApi + .login(userName, hash) .then(() => { if (!tryRedirectTo(defaultPage)) { setIsLoaded(true); @@ -269,7 +193,7 @@ class Form extends Component { // confirmedEmail && this.setState({ identifier: confirmedEmail }); window.addEventListener("keyup", this.onKeyPress); - if (!fakeHashSettings) { + if (!fakeApi.fakeHashSettings) { reloadPortalSettings(); } } @@ -278,15 +202,8 @@ class Form extends Component { window.removeEventListener("keyup", this.onKeyPress); } - settings = { - minLength: 6, - upperCase: false, - digits: false, - specSymbols: false, - }; - render() { - const { greetingTitle, match, t } = this.props; + const { match, t } = this.props; const { identifierValid, @@ -307,9 +224,10 @@ class Form extends Component { return ( <> +
-
- - - - - - -
-
- {t("Remember")}} - /> - {/*{t("RememberHelper")} - } - />*/} - - {t("ForgotPassword")} - -
-
+ - {openDialog && ( - - )} - -