web: common: fix register block view

web/ASC.Web.Common/src/components/Main/index.js

@@ -5,7 +5,7 @@ import { isIOS, isFirefox } from "react-device-detect";
 const StyledMain = styled.main`
   height: ${isIOS && !isFirefox
     ? "calc(var(--vh, 1vh) * 100)"
-    : "calc(100vh - 56px)"};
+    : "calc(100vh - 122px)"};
   width: 100vw;
   z-index: 0;
   display: flex;

web/ASC.Web.Common/src/pages/index.js

@@ -1,2 +1,3 @@
 export { default as Login } from "./login";
+export { default as Register } from "./login/sub-components/register-container";
 export * from "./errors";

web/ASC.Web.Common/src/pages/login/index.js

@@ -452,10 +452,9 @@ Form.defaultProps = {
 };
 
 const FormWrapper = withTranslation()(Form);
-const RegisterWrapper = withTranslation()(Register);
 
 const LoginForm = (props) => {
-  const { language, isLoaded, enabledJoin } = props;
+  const { language, isLoaded } = props;
 
   useEffect(() => {
     i18n.changeLanguage(language);
@@ -467,10 +466,7 @@ const LoginForm = (props) => {
         <>
           <PageLayout>
             <PageLayout.SectionBody>
-              <>
-                <FormWrapper i18n={i18n} {...props} />
-                {enabledJoin && <RegisterWrapper i18n={i18n} {...props} />}
-              </>
+              <FormWrapper i18n={i18n} {...props} />
             </PageLayout.SectionBody>
           </PageLayout>
         </>
@@ -487,16 +483,10 @@ LoginForm.propTypes = {
 
 function mapStateToProps(state) {
   const { isLoaded, settings } = state.auth;
-  const {
-    greetingSettings,
-    enabledJoin,
-    organizationName,
-    hashSettings,
-  } = settings;
+  const { greetingSettings, organizationName, hashSettings } = settings;
 
   return {
     isLoaded,
-    enabledJoin,
     organizationName,
     language: getLanguage(state),
     greetingTitle: greetingSettings,

web/ASC.Web.Common/src/pages/login/sub-components/register-container.js

@@ -1,9 +1,13 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Box, Text, toastr } from "asc-web-components";
 import RegisterModalDialog from "./register-modal-dialog";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 import { sendRegisterRequest } from "../../../api/settings/index";
+import { I18nextProvider, withTranslation } from "react-i18next";
+import { getLanguage } from "../../../store/auth/selectors";
+import { connect } from "react-redux";
+import i18n from "../i18n";
 
 const StyledRegister = styled(Box)`
   position: absolute;
@@ -82,4 +86,32 @@ Register.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-export default Register;
+const RegisterTranslationWrapper = withTranslation()(Register);
+
+const RegisterWrapper = (props) => {
+  const { language, isAuthenticated, enabledJoin } = props;
+
+  useEffect(() => {
+    i18n.changeLanguage(language);
+  }, [language]);
+
+  return (
+    <I18nextProvider i18n={i18n}>
+      {!enabledJoin && !isAuthenticated && (
+        <RegisterTranslationWrapper {...props} />
+      )}
+    </I18nextProvider>
+  );
+};
+
+function mapStateToProps(state) {
+  const { isAuthenticated, settings } = state.auth;
+  const { enabledJoin } = settings;
+  return {
+    language: getLanguage(state),
+    isAuthenticated,
+    enabledJoin,
+  };
+}
+
+export default connect(mapStateToProps, null)(RegisterWrapper);