diff --git a/src/app/Scenes/Onboarding/Auth2/components/AuthModal.tsx b/src/app/Scenes/Onboarding/Auth2/components/AuthModal.tsx index a85778f7374..61a710b35b2 100644 --- a/src/app/Scenes/Onboarding/Auth2/components/AuthModal.tsx +++ b/src/app/Scenes/Onboarding/Auth2/components/AuthModal.tsx @@ -1,8 +1,9 @@ import { Box, Flex, useTheme } from "@artsy/palette-mobile" import { AuthContext } from "app/Scenes/Onboarding/Auth2/AuthContext" import { MotiView } from "moti" -import { Dimensions, KeyboardAvoidingView, Platform } from "react-native" +import { Dimensions } from "react-native" import { Easing } from "react-native-reanimated" +import { useSafeAreaInsets } from "react-native-safe-area-context" const HEIGHT = { LoginWelcomeStep: 320, @@ -20,6 +21,7 @@ export const AuthModal: React.FC = ({ children }) => { const { isModalExpanded, isMounted, currentScreen } = AuthContext.useStoreState((state) => state) const { space } = useTheme() + const insets = useSafeAreaInsets() const screenHeight = Dimensions.get("window").height @@ -34,44 +36,40 @@ export const AuthModal: React.FC = ({ children }) => { const translateY = (() => { // Position the modal in the center of the screen, minus some padding if (isModalExpanded) { - return 0 + return insets.top + space(6) } - return screenHeight / 2 - height / 2 - space(6) + return screenHeight - height - insets.bottom })() return ( - - - - - {children} - - - - + + + + {children} + + + + // ) } diff --git a/src/app/Scenes/Onboarding/Auth2/components/AuthScreen.tsx b/src/app/Scenes/Onboarding/Auth2/components/AuthScreen.tsx index e427af6bb0a..8249bb46182 100644 --- a/src/app/Scenes/Onboarding/Auth2/components/AuthScreen.tsx +++ b/src/app/Scenes/Onboarding/Auth2/components/AuthScreen.tsx @@ -10,8 +10,6 @@ export const AuthScreen: React.FC = ({ children, name }) => { const { currentScreen } = AuthContext.useStoreState((state) => state) const isVisible = name === currentScreen?.name - if (!isVisible) return null - return ( <> {children} diff --git a/src/app/Scenes/Onboarding/Auth2/scenes/ForgotPasswordStep.tsx b/src/app/Scenes/Onboarding/Auth2/scenes/ForgotPasswordStep.tsx index 20661056660..bcc763c0712 100644 --- a/src/app/Scenes/Onboarding/Auth2/scenes/ForgotPasswordStep.tsx +++ b/src/app/Scenes/Onboarding/Auth2/scenes/ForgotPasswordStep.tsx @@ -62,11 +62,8 @@ const ForgotPasswordStepForm: React.FC = () => { } = useFormikContext() const navigation = useAuthNavigation() - const screen = useAuthScreen() - const { color } = useTheme() - const forgotPasswordRef = useRef(null) const handleBackButtonPress = () => { diff --git a/src/app/Scenes/Onboarding/Auth2/scenes/LoginOTPStep.tsx b/src/app/Scenes/Onboarding/Auth2/scenes/LoginOTPStep.tsx index ffcfd5e4ffa..2c81833026b 100644 --- a/src/app/Scenes/Onboarding/Auth2/scenes/LoginOTPStep.tsx +++ b/src/app/Scenes/Onboarding/Auth2/scenes/LoginOTPStep.tsx @@ -14,11 +14,9 @@ import { useAuthScreen, } from "app/Scenes/Onboarding/Auth2/hooks/useAuthNavigation" import { useInputAutofocus } from "app/Scenes/Onboarding/Auth2/hooks/useInputAutofocus" -import { waitForSubmit } from "app/Scenes/Onboarding/Auth2/utils/waitForSubmit" import { GlobalStore } from "app/store/GlobalStore" import { Formik, useFormikContext } from "formik" import { useRef, useState } from "react" -import { Keyboard } from "react-native" import * as Yup from "yup" interface LoginOTPStepFormValues { @@ -36,8 +34,6 @@ export const LoginOTPStep: React.FC = () => { otp: Yup.string().required("This field is required"), })} onSubmit={async ({ otp }, { setErrors, resetForm }) => { - Keyboard.dismiss() - const res = await GlobalStore.actions.auth.signIn({ oauthProvider: "email", oauthMode: "email", @@ -46,8 +42,6 @@ export const LoginOTPStep: React.FC = () => { otp: otp.trim(), }) - await waitForSubmit() - if (res === "invalid_otp") { setErrors({ otp: "Invalid two-factor authentication code" }) } else if (res !== "success") { @@ -102,6 +96,7 @@ const LoginOTPStepForm: React.FC = () => { autoCapitalize="none" autoComplete="one-time-code" autoCorrect={false} + blurOnSubmit={false} error={errors.otp} keyboardType={recoveryCodeMode ? "ascii-capable" : "number-pad"} placeholder={recoveryCodeMode ? "Enter a recovery code" : "Enter an authentication code"} diff --git a/src/app/Scenes/Onboarding/Auth2/scenes/LoginPasswordStep.tsx b/src/app/Scenes/Onboarding/Auth2/scenes/LoginPasswordStep.tsx index 497519eda30..7e3d89e1c29 100644 --- a/src/app/Scenes/Onboarding/Auth2/scenes/LoginPasswordStep.tsx +++ b/src/app/Scenes/Onboarding/Auth2/scenes/LoginPasswordStep.tsx @@ -13,12 +13,10 @@ import { useAuthScreen, } from "app/Scenes/Onboarding/Auth2/hooks/useAuthNavigation" import { useInputAutofocus } from "app/Scenes/Onboarding/Auth2/hooks/useInputAutofocus" -import { waitForSubmit } from "app/Scenes/Onboarding/Auth2/utils/waitForSubmit" import { GlobalStore } from "app/store/GlobalStore" import { showBlockedAuthError } from "app/utils/auth/authHelpers" import { Formik, useFormikContext } from "formik" import { useRef } from "react" -import { Keyboard } from "react-native" import * as Yup from "yup" interface LoginPasswordStepFormValues { @@ -37,8 +35,6 @@ export const LoginPasswordStep: React.FC = () => { password: Yup.string().required("Password field is required"), })} onSubmit={async ({ password }, { setErrors, resetForm }) => { - Keyboard.dismiss() - const res = await GlobalStore.actions.auth.signIn({ oauthProvider: "email", oauthMode: "email", @@ -46,8 +42,6 @@ export const LoginPasswordStep: React.FC = () => { password, }) - await waitForSubmit() - if (res === "otp_missing") { navigation.navigate({ name: "LoginOTPStep", @@ -128,15 +122,19 @@ const LoginPasswordStepForm: React.FC = () => { autoCapitalize="none" autoComplete="password" autoCorrect={false} + blurOnSubmit={false} error={values.password.length > 0 || touched.password ? errors.password : undefined} placeholderTextColor={color("black30")} ref={passwordRef} returnKeyType="done" secureTextEntry // textContentType="oneTimeCode" + // We need to to set textContentType to password here + // enable autofill of login details from the device keychain. + textContentType="password" testID="password" title="Password" - // value={values.password} + value={values.password} onChangeText={(text) => { // Hide error when the user starts to type again if (errors.password) { @@ -152,10 +150,7 @@ const LoginPasswordStepForm: React.FC = () => { handleSubmit() } }} - onBlur={() => validateForm()} - // We need to to set textContentType to password here - // enable autofill of login details from the device keychain. - textContentType="password" + onBlur={validateForm} /> diff --git a/src/app/Scenes/Onboarding/Auth2/scenes/LoginWelcomeStep.tsx b/src/app/Scenes/Onboarding/Auth2/scenes/LoginWelcomeStep.tsx index d0377dad712..1eefda901f2 100644 --- a/src/app/Scenes/Onboarding/Auth2/scenes/LoginWelcomeStep.tsx +++ b/src/app/Scenes/Onboarding/Auth2/scenes/LoginWelcomeStep.tsx @@ -12,7 +12,6 @@ import { useRecaptcha } from "app/Components/Recaptcha/Recaptcha" import { AuthContext } from "app/Scenes/Onboarding/Auth2/AuthContext" import { useAuthNavigation } from "app/Scenes/Onboarding/Auth2/hooks/useAuthNavigation" import { useInputAutofocus } from "app/Scenes/Onboarding/Auth2/hooks/useInputAutofocus" -import { waitForSubmit } from "app/Scenes/Onboarding/Auth2/utils/waitForSubmit" import { AuthPromiseRejectType, AuthPromiseResolveType } from "app/store/AuthModel" import { GlobalStore } from "app/store/GlobalStore" import { navigate } from "app/system/navigation/navigate" @@ -20,7 +19,7 @@ import { osMajorVersion } from "app/utils/platformUtil" import { Formik, useFormikContext } from "formik" import { MotiView } from "moti" import React, { useRef, useState } from "react" -import { Alert, Image, InteractionManager, Keyboard, Platform } from "react-native" +import { Alert, Image, InteractionManager, Platform } from "react-native" import { Easing } from "react-native-reanimated" import * as Yup from "yup" @@ -49,8 +48,6 @@ export const LoginWelcomeStep: React.FC = () => { .required("Email field is required"), })} onSubmit={async ({ email }, { resetForm }) => { - Keyboard.dismiss() - // FIXME if (!token) { Alert.alert("Something went wrong. Please try again, or contact support@artsy.net") @@ -59,8 +56,6 @@ export const LoginWelcomeStep: React.FC = () => { const res = await GlobalStore.actions.auth.verifyUser({ email, recaptchaToken: token }) - await waitForSubmit() - if (res === "user_exists") { navigation.navigate({ name: "LoginPasswordStep", params: { email } }) } else if (res === "user_does_not_exist") { @@ -121,6 +116,7 @@ const LoginWelcomeStepForm: React.FC = () => { autoCapitalize="none" autoComplete="email" autoCorrect={false} + blurOnSubmit={false} error={errors.email} placeholderTextColor={color("black30")} ref={emailRef} diff --git a/src/app/Scenes/Onboarding/Auth2/scenes/SignUpNameStep.tsx b/src/app/Scenes/Onboarding/Auth2/scenes/SignUpNameStep.tsx index 1d91f272f11..dd39e69bb62 100644 --- a/src/app/Scenes/Onboarding/Auth2/scenes/SignUpNameStep.tsx +++ b/src/app/Scenes/Onboarding/Auth2/scenes/SignUpNameStep.tsx @@ -5,7 +5,6 @@ import { useAuthScreen, } from "app/Scenes/Onboarding/Auth2/hooks/useAuthNavigation" import { useInputAutofocus } from "app/Scenes/Onboarding/Auth2/hooks/useInputAutofocus" -import { waitForSubmit } from "app/Scenes/Onboarding/Auth2/utils/waitForSubmit" import { OnboardingNavigationStack } from "app/Scenes/Onboarding/Onboarding" import { EmailSubscriptionCheckbox } from "app/Scenes/Onboarding/OnboardingCreateAccount/EmailSubscriptionCheckbox" import { TermsOfServiceCheckbox } from "app/Scenes/Onboarding/OnboardingCreateAccount/TermsOfServiceCheckbox" @@ -13,7 +12,7 @@ import { GlobalStore } from "app/store/GlobalStore" import { showBlockedAuthError } from "app/utils/auth/authHelpers" import { Formik, useFormikContext } from "formik" import React, { useRef, useState } from "react" -import { Alert, Keyboard } from "react-native" +import { Alert } from "react-native" import * as Yup from "yup" interface SignUpNameStepFormValues { @@ -41,8 +40,6 @@ export const SignUpNameStep: React.FC = () => { return } - Keyboard.dismiss() - const res = await GlobalStore.actions.auth.signUp({ oauthProvider: "email", oauthMode: "email", @@ -52,8 +49,6 @@ export const SignUpNameStep: React.FC = () => { agreedToReceiveEmails: values.agreedToReceiveEmails, }) - await waitForSubmit() - if (!res.success) { if (res.error === "blocked_attempt") { showBlockedAuthError("sign up") diff --git a/src/app/Scenes/Onboarding/Auth2/scenes/SignUpPasswordStep.tsx b/src/app/Scenes/Onboarding/Auth2/scenes/SignUpPasswordStep.tsx index d0991b73b9e..c1e9f60daa2 100644 --- a/src/app/Scenes/Onboarding/Auth2/scenes/SignUpPasswordStep.tsx +++ b/src/app/Scenes/Onboarding/Auth2/scenes/SignUpPasswordStep.tsx @@ -4,10 +4,8 @@ import { useAuthScreen, } from "app/Scenes/Onboarding/Auth2/hooks/useAuthNavigation" import { useInputAutofocus } from "app/Scenes/Onboarding/Auth2/hooks/useInputAutofocus" -import { waitForSubmit } from "app/Scenes/Onboarding/Auth2/utils/waitForSubmit" import { Formik, useFormikContext } from "formik" import React, { useRef } from "react" -import { Keyboard } from "react-native" import * as Yup from "yup" interface SignUpPasswordStepFormValues { @@ -30,10 +28,6 @@ export const SignUpPasswordStep: React.FC = () => { .required("Password field is required"), })} onSubmit={async ({ password }, { resetForm }) => { - Keyboard.dismiss() - - await waitForSubmit() - navigation.navigate({ name: "SignUpNameStep", params: { @@ -88,6 +82,7 @@ const SignUpPasswordStepForm: React.FC = () => { autoCapitalize="none" autoComplete="password" autoCorrect={false} + blurOnSubmit={false} error={errors.password} placeholder="Password" placeholderTextColor={color("black30")}