Web: Client: fix styles

web/ASC.Web.Client/src/components/pages/Confirm/sub-components/createUser.js

@@ -28,8 +28,8 @@ import { providersData } from "@appserver/common/constants";
 import withLoader from "../withLoader";
 import MoreLoginModal from "login/moreLogin";
 import AppLoader from "@appserver/common/components/AppLoader";
-import { isDesktop as DesktopView } from "@appserver/components/utils/device";
 import EmailInput from "@appserver/components/email-input";
+import { smallTablet } from "@appserver/components/utils/device";
 
 export const ButtonsWrapper = styled.div`
   display: flex;
@@ -66,6 +66,10 @@ const GreetingContainer = styled.div`
   height: 100%;
   padding-bottom: 32px;
 
+  @media (max-width: 768px) {
+    display: ${(props) => !props.isGreetingMode && "none"};
+  }
+
   .greeting-title {
     width: 100%;
     padding-bottom: 32px;
@@ -160,9 +164,23 @@ const RegisterContainer = styled.div`
     }
   }
 
+  .auth-form-fields {
+    @media (max-width: 768px) {
+      display: ${(props) => props.isGreetingMode && "none"};
+    }
+  }
+
   .password-field-wrapper {
     width: 100%;
   }
+
+  .is-greeting-mode-button {
+    display: ${(props) => !props.isGreetingMode && "none"};
+
+    @media (min-width: 768px) {
+      display: none;
+    }
+  }
 `;
 
 const Confirm = (props) => {
@@ -230,6 +248,7 @@ const Confirm = (props) => {
   }, []);
 
   const onSubmit = () => {
+    console.log("onSubmit");
     const { defaultPage, linkData, hashSettings } = props;
     const isVisitor = parseInt(linkData.emplType) === 2;
 
@@ -473,6 +492,7 @@ const Confirm = (props) => {
   };
 
   const onGreetingSubmit = () => {
+    console.log("onGreetingSubmit");
     setIsGreetingMode(false);
     focusInput();
   };
@@ -491,8 +511,7 @@ const Confirm = (props) => {
   if (!isLoaded) return <AppLoader />;
   return (
     <ConfirmContainer>
-      {isGreetingMode && (
-        <GreetingContainer>
+      <GreetingContainer isGreetingMode={isGreetingMode}>
         <Text
           fontSize="23px"
           fontWeight={700}
@@ -518,9 +537,8 @@ const Confirm = (props) => {
           <span className="tooltiptext">{t("WelcomeUser")}</span>
         </div>
       </GreetingContainer>
-      )}
 
-      <RegisterContainer>
+      <RegisterContainer isGreetingMode={isGreetingMode}>
         {ssoExists() && <ButtonsWrapper>{ssoButton()}</ButtonsWrapper>}
 
         {oauthDataExists() && (
@@ -551,6 +569,7 @@ const Confirm = (props) => {
         )}
 
         <form className="auth-form-container">
+          <div className="auth-form-fields">
             <FieldContainer
               isVertical={true}
               labelVisible={false}
@@ -673,6 +692,24 @@ const Confirm = (props) => {
               isLoading={isLoading}
               onClick={onSubmit}
             />
+          </div>
+
+          <Button
+            id="submit"
+            className="login-button is-greeting-mode-button"
+            primary
+            size="large"
+            scale={true}
+            label={
+              isLoading
+                ? t("Common:LoadingProcessing")
+                : t("LoginRegistryButton")
+            }
+            tabIndex={1}
+            isDisabled={isLoading}
+            isLoading={isLoading}
+            onClick={onGreetingSubmit}
+          />
         </form>
 
         <MoreLoginModal