Client: Confirm: CreateUser: add greeting mode

packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js

@@ -144,7 +144,7 @@ export const RegisterContainer = styled.div`
   .line:after {
     content: "";
     flex-grow: 1;
-    background: ${(props) => props.theme.invitePage.borderColor};;
+    background: ${(props) => props.theme.invitePage.borderColor};
     height: 1px;
     font-size: 0px;
     line-height: 0px;

packages/client/src/pages/Confirm/sub-components/createUser.js

@@ -5,6 +5,8 @@ import { withTranslation } from "react-i18next";
 import PropTypes from "prop-types";
 import { createUser, signupOAuth } from "@docspace/common/api/people";
 import { inject, observer } from "mobx-react";
+import { isMobile } from "react-device-detect";
+import { isDesktop as isDesktopUtil } from "@docspace/components/utils/device";
 import Avatar from "@docspace/components/avatar";
 import Button from "@docspace/components/button";
 import TextInput from "@docspace/components/text-input";
@@ -67,12 +69,30 @@ const CreateUserForm = (props) => {
   const [isEmailErrorShow, setIsEmailErrorShow] = useState(false);
   const [isPasswordErrorShow, setIsPasswordErrorShow] = useState(false);
 
+  const [showForm, setShowForm] = useState(true);
+  const [showGreeting, setShowGreeting] = useState(true);
+
   const focusInput = () => {
     if (inputRef) {
       inputRef.current.focus();
     }
   };
 
+  const onCheckGreeting = () => {
+    const isGreetingMode = oauthDataExists() && isMobile; /*!isDesktopUtil()*/
+    setShowForm(!isGreetingMode);
+  };
+
+  const onGreetingJoin = () => {
+    setShowForm(true);
+    setShowGreeting(false);
+  };
+
+  /*useEffect(() => {
+    window.addEventListener("resize", onCheckGreeting);
+    return () => window.removeEventListener("resize", onCheckGreeting);
+  }, []);*/
+
   useEffect(() => {
     const { isAuthenticated, logout, linkData, capabilities } = props;
 
@@ -91,6 +111,7 @@ const CreateUserForm = (props) => {
 
       setSsoLabel(capabilities?.ssoLabel);
       setSsoUrl(capabilities?.ssoUrl);
+      onCheckGreeting();
       focusInput();
     };
 
@@ -378,6 +399,8 @@ const CreateUserForm = (props) => {
               {greetingTitle}
             </Text>
 
+            {showGreeting && (
+              <>
                 <div className="greeting-block">
                   <Avatar className="avatar" role="user" source={userAvatar} />
                   <div className="user-info">
@@ -393,6 +416,8 @@ const CreateUserForm = (props) => {
                 <div className="tooltip">
                   <span className="tooltiptext">{t("WelcomeUser")}</span>
                 </div>
+              </>
+            )}
           </GreetingContainer>
 
           <FormWrapper>
@@ -426,6 +451,7 @@ const CreateUserForm = (props) => {
                 </div>
               )}
 
+              {showForm && (
                 <form className="auth-form-container">
                   <div className="auth-form-fields">
                     <FieldContainer
@@ -575,6 +601,25 @@ const CreateUserForm = (props) => {
                     />
                   </div>
                 </form>
+              )}
+
+              {!showForm && (
+                <Button
+                  className="login-button"
+                  primary
+                  size="medium"
+                  scale={true}
+                  label={
+                    isLoading
+                      ? t("Common:LoadingProcessing")
+                      : t("LoginRegistryButton")
+                  }
+                  tabIndex={1}
+                  isDisabled={isLoading}
+                  isLoading={isLoading}
+                  onClick={onGreetingJoin}
+                />
+              )}
 
               <MoreLoginModal
                 t={t}