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")}