Web: Login: Fixed input focus.

packages/login/src/client/components/Login.tsx

@@ -267,13 +267,15 @@ const Login: React.FC<ILoginProps> = ({
             </FormWrapper>
             <Toast />
 
-            <RecoverAccessModalDialog
-              visible={recoverDialogVisible}
-              onClose={closeRecoverDialog}
-              textBody={t("RecoverTextBody")}
-              emailPlaceholderText={t("RecoverContactEmailPlaceholder")}
-              id="recover-access-modal"
-            />
+            {recoverDialogVisible && (
+              <RecoverAccessModalDialog
+                visible={recoverDialogVisible}
+                onClose={closeRecoverDialog}
+                textBody={t("RecoverTextBody")}
+                emailPlaceholderText={t("RecoverContactEmailPlaceholder")}
+                id="recover-access-modal"
+              />
+            )}
           </ColorTheme>
         </LoginContent>
 

packages/login/src/client/components/sub-components/LoginForm.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
 import { FieldContainer } from "@docspace/shared/components/field-container";
-import { EmailInput } from "@docspace/shared/components/email-input";
 import { PasswordInput } from "@docspace/shared/components/password-input";
 import { Checkbox } from "@docspace/shared/components/checkbox";
 import { HelpButton } from "@docspace/shared/components/help-button";
@@ -330,6 +329,7 @@ const LoginForm: React.FC<ILoginFormProps> = ({
           autoComplete="current-password"
           onChange={onChangePassword}
           onKeyDown={onKeyDown}
+          isAutoFocussed={!!emailFromInvitation}
         />
       </FieldContainer>
 

packages/shared/components/color-theme/sub-components/LoginContainer.ts

@@ -142,7 +142,7 @@ const LoginContainer = styled.div<{
       .password-input > div {
         background: ${(props) => props.theme.input.backgroundColor};
         color: ${(props) => props.theme.input.color};
-        border-color: ${(props) => props.theme.input.borderColor};
+        //border-color: ${(props) => props.theme.input.borderColor};
       }
     }
 

packages/shared/components/password-input/PasswordInput.tsx

@@ -75,6 +75,7 @@ const PasswordInput = React.forwardRef(
       isFullWidth,
       tooltipOffsetLeft,
       tooltipOffsetTop,
+      isAutoFocussed,
     }: PasswordInputProps,
     ref,
   ) => {
@@ -497,6 +498,7 @@ const PasswordInput = React.forwardRef(
             maxLength={maxLength}
             autoComplete={autoComplete}
             forwardedRef={forwardedRef}
+            isAutoFocussed={isAutoFocussed}
           />
 
           {!isDisableTooltip && !isDisabled && (
@@ -597,4 +599,3 @@ export { PasswordInput };
 // PasswordInput.displayName = "PasswordInput";
 
 // export { PasswordInput };
-

packages/shared/components/password-input/PasswordInput.types.ts

@@ -105,4 +105,6 @@ export interface PasswordInputProps {
   generatePasswordTitle?: string;
   /** Setting display block to set element to full width */
   isFullWidth?: boolean;
+  /** Focus the input field on initial render */
+  isAutoFocussed?: boolean;
 }