password with validations done

Author: olafch

src/components/screens/profile/ProfileControlledInput.tsx

@@ -3,7 +3,6 @@ import { isWeb } from '@baca/constants'
 import { Box, Text } from '@baca/design-system'
 import { useWeb } from '@baca/hooks'
 import { ProfileControlledInputProps } from '@baca/types'
-import { StyleSheet } from 'react-native'
 
 export const ProfileControlledInput = ({
   label,
@@ -20,7 +19,7 @@ export const ProfileControlledInput = ({
       mb={isWeb ? 10 : 0}
       maxW={800}
     >
-      <Text.SmBold flex={1} color="text.primary" style={styles.labelMargin}>
+      <Text.SmBold flex={1} color="text.primary" mb={2.5}>
         {label}
       </Text.SmBold>
       <Box flex={isWeb ? 2 : 0}>
@@ -36,7 +35,3 @@ export const ProfileControlledInput = ({
     </Box>
   )
 }
-
-const styles = StyleSheet.create({
-  labelMargin: { marginBottom: 10 },
-})

src/components/screens/profile/ProfilePasswordForm.tsx

@@ -1,12 +1,19 @@
 import { Box, Button, Row } from '@baca/design-system'
-import { useUpdatePasswordForm } from '@baca/hooks/forms/useUpdatePasswordForm'
+import { useCallback } from '@baca/hooks'
+import { useUpdatePasswordForm } from '@baca/hooks/forms'
+import { usePasswordValidation } from '@baca/hooks/usePasswordValidation'
 import { useTranslation } from 'react-i18next'
+import { Keyboard } from 'react-native'
 
 import { ProfileControlledInput } from './ProfileControlledInput'
 
 export const ProfilePasswordForm = () => {
   const { t } = useTranslation()
-  const { control, errors, submit, isSubmitting } = useUpdatePasswordForm()
+  const { control, errors, submit, isSubmitting, setFocus } = useUpdatePasswordForm()
+
+  const { isPasswordError, passwordSuggestions, validationFn } = usePasswordValidation()
+
+  const focusNewPasswordInput = useCallback(() => setFocus('password'), [setFocus])
 
   return (
     <Box borderColor="border.secondary" borderTopWidth={1} py={6}>
@@ -16,14 +23,21 @@ export const ProfilePasswordForm = () => {
         placeholder={t('form.placeholders.old_password')}
         control={control}
         errors={errors}
+        onSubmitEditing={focusNewPasswordInput}
       />
       <ProfileControlledInput
         label={t('form.labels.new_password')}
         name="password"
         placeholder={t('form.placeholders.new_password')}
         control={control}
-        errors={errors}
+        errors={{}}
+        isInvalid={isPasswordError}
+        isRequired
+        rules={{ validate: { validationFn } }}
+        type="password"
+        onSubmitEditing={Keyboard.dismiss}
       />
+      {passwordSuggestions}
       <Row maxW={800} justifyContent="flex-end">
         <Button
           disabled={isSubmitting}

src/hooks/forms/index.ts

@@ -4,3 +4,4 @@ export * from './useSignInForm'
 export * from './useSignUpForm'
 export * from './useTestForm'
 export * from './useUpdateProfileForm'
+export * from './useUpdatePasswordForm'

src/hooks/forms/useUpdatePasswordForm.ts

@@ -18,9 +18,10 @@ export const useUpdatePasswordForm = () => {
     formState: { errors },
     handleSubmit,
     reset,
+    setFocus,
     setError: setFormError,
   } = useForm<AuthUpdateDto>({
-    mode: 'onTouched',
+    mode: 'onChange',
     defaultValues,
   })
 
@@ -49,6 +50,7 @@ export const useUpdatePasswordForm = () => {
     control,
     errors,
     isSubmitting: isLoading,
+    setFocus,
     submit: handleSubmit(onSubmit),
   }
 }

src/types/ProfileInputProps.ts

@@ -1,12 +1,16 @@
-import { Control, FieldErrors } from 'react-hook-form'
+import { Control, FieldErrors, RegisterOptions } from 'react-hook-form'
 
 export type ProfileControlledInputProps = {
-  label: string
-  name: string
-  placeholder: string
   control: Control
   errors: FieldErrors
   isDisabled?: boolean
+  isInvalid?: boolean
+  isRequired?: boolean
+  label: string
+  name: string
   onFocus?: () => void
   onSubmitEditing?: () => void
+  placeholder: string
+  rules?: RegisterOptions
+  type?: 'text' | 'password' | undefined
 }