feat(DIA-898): use shared password field for sign-up and login [WIP] (#…

…10904) * feat: use shared password field for sign-up and login * used forwardRef to pass an input ref
artsy · Oct 8, 2024 · 8caed6b · 8caed6b
1 parent ac2e3f6
commit 8caed6b
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 99 deletions.
diff --git a/src/app/Scenes/Onboarding/Auth2/components/PasswordInput.tsx b/src/app/Scenes/Onboarding/Auth2/components/PasswordInput.tsx
@@ -0,0 +1,49 @@
+import { Input, useTheme } from "@artsy/palette-mobile"
+import { LoginPasswordStepFormValues } from "app/Scenes/Onboarding/Auth2/scenes/LoginPasswordStep"
+import { SignUpPasswordStepFormValues } from "app/Scenes/Onboarding/Auth2/scenes/SignUpPasswordStep"
+import { FormikContextType, useFormikContext } from "formik"
+import { forwardRef } from "react"
+
+export const PasswordInput = forwardRef<Input>((_props, ref) => {
+  const {
+    dirty,
+    errors,
+    handleChange,
+    handleSubmit,
+    validateForm,
+    values,
+  }: FormikContextType<LoginPasswordStepFormValues | SignUpPasswordStepFormValues> =
+    useFormikContext<LoginPasswordStepFormValues | SignUpPasswordStepFormValues>()
+
+  const { color } = useTheme()
+
+  return (
+    <Input
+      autoCapitalize="none"
+      autoComplete="password"
+      autoCorrect={false}
+      blurOnSubmit={false}
+      error={errors.password}
+      placeholderTextColor={color("black30")}
+      ref={ref}
+      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}
+      onChangeText={(text) => {
+        handleChange("password")(text)
+      }}
+      onSubmitEditing={() => {
+        if (dirty && !!values.password) {
+          handleSubmit()
+        }
+      }}
+      onBlur={validateForm}
+    />
+  )
+})
diff --git a/src/app/Scenes/Onboarding/Auth2/scenes/LoginPasswordStep.tsx b/src/app/Scenes/Onboarding/Auth2/scenes/LoginPasswordStep.tsx
@@ -7,8 +7,8 @@ import {
   Spacer,
   Text,
   Touchable,
-  useTheme,
 } from "@artsy/palette-mobile"
+import { PasswordInput } from "app/Scenes/Onboarding/Auth2/components/PasswordInput"
 import {
   useAuthNavigation,
   useAuthScreen,
@@ -20,7 +20,7 @@ import { Formik, useFormikContext } from "formik"
 import { useRef } from "react"
 import * as Yup from "yup"
 
-interface LoginPasswordStepFormValues {
+export interface LoginPasswordStepFormValues {
   password: string
 }
 
@@ -31,7 +31,6 @@ export const LoginPasswordStep: React.FC = () => {
   return (
     <Formik<LoginPasswordStepFormValues>
       initialValues={{ password: "" }}
-      validateOnChange={true}
       validationSchema={Yup.object().shape({
         password: Yup.string().required("Password field is required"),
       })}
@@ -84,24 +83,12 @@ export const LoginPasswordStep: React.FC = () => {
 }
 
 const LoginPasswordStepForm: React.FC = () => {
-  const {
-    dirty,
-    errors,
-    handleChange,
-    handleSubmit,
-    isSubmitting,
-    isValid,
-    resetForm,
-    setErrors,
-    touched,
-    validateForm,
-    values,
-  } = useFormikContext<LoginPasswordStepFormValues>()
+  const { handleSubmit, isSubmitting, isValid, resetForm } =
+    useFormikContext<LoginPasswordStepFormValues>()
 
   const navigation = useAuthNavigation()
   const screen = useAuthScreen()
   const passwordRef = useRef<Input>(null)
-  const { color } = useTheme()
 
   useInputAutofocus({
     screenName: "LoginPasswordStep",
@@ -121,44 +108,11 @@ const LoginPasswordStepForm: React.FC = () => {
 
       <Text variant="sm-display">Welcome back to Artsy</Text>
 
-      <Input
-        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}
-        onChangeText={(text) => {
-          // Hide error when the user starts to type again
-          if (errors.password) {
-            setErrors({
-              password: undefined,
-            })
-            validateForm()
-          }
-          handleChange("password")(text)
-        }}
-        onSubmitEditing={() => {
-          if (dirty && !!values.password) {
-            handleSubmit()
-          }
-        }}
-        onBlur={validateForm}
-      />
+      <PasswordInput ref={passwordRef} />
 
       <Spacer y={2} />
 
-      <Button block width="100%" onPress={handleSubmit} disabled={!isValid} loading={isSubmitting}>
+      <Button block width={100} onPress={handleSubmit} disabled={!isValid} loading={isSubmitting}>
         Continue
       </Button>
 

diff --git a/src/app/Scenes/Onboarding/Auth2/scenes/SignUpPasswordStep.tsx b/src/app/Scenes/Onboarding/Auth2/scenes/SignUpPasswordStep.tsx
@@ -1,13 +1,5 @@
-import {
-  BackButton,
-  Button,
-  Flex,
-  Input,
-  LinkText,
-  Spacer,
-  Text,
-  useTheme,
-} from "@artsy/palette-mobile"
+import { BackButton, Button, Flex, Input, LinkText, Spacer, Text } from "@artsy/palette-mobile"
+import { PasswordInput } from "app/Scenes/Onboarding/Auth2/components/PasswordInput"
 import {
   useAuthNavigation,
   useAuthScreen,
@@ -18,7 +10,7 @@ import { Formik, useFormikContext } from "formik"
 import React, { useRef } from "react"
 import * as Yup from "yup"
 
-interface SignUpPasswordStepFormValues {
+export interface SignUpPasswordStepFormValues {
   password: string
 }
 
@@ -57,20 +49,11 @@ export const SignUpPasswordStep: React.FC = () => {
 }
 
 const SignUpPasswordStepForm: React.FC = () => {
-  const {
-    errors,
-    handleChange,
-    handleSubmit,
-    isSubmitting,
-    isValid,
-    setErrors,
-    values,
-    resetForm,
-  } = useFormikContext<SignUpPasswordStepFormValues>()
+  const { handleSubmit, isSubmitting, isValid, resetForm } =
+    useFormikContext<SignUpPasswordStepFormValues>()
 
   const navigation = useAuthNavigation()
   const screen = useAuthScreen()
-  const { color } = useTheme()
   const passwordRef = useRef<Input>(null)
 
   useInputAutofocus({
@@ -91,31 +74,7 @@ const SignUpPasswordStepForm: React.FC = () => {
 
       <Text variant="sm-display">Welcome to Artsy</Text>
 
-      <Input
-        autoCapitalize="none"
-        autoComplete="password"
-        autoCorrect={false}
-        blurOnSubmit={false}
-        error={errors.password}
-        placeholder="Password"
-        placeholderTextColor={color("black30")}
-        ref={passwordRef}
-        returnKeyType="done"
-        secureTextEntry
-        textContentType="none"
-        title="Password"
-        value={values.password}
-        onChangeText={(text) => {
-          // Hide error when the user starts to type again
-          if (errors.password) {
-            setErrors({
-              password: undefined,
-            })
-          }
-          handleChange("password")(text)
-        }}
-        onSubmitEditing={handleSubmit}
-      />
+      <PasswordInput ref={passwordRef} />
 
       <Spacer y={2} />