Merge branch 'chore/sections-division-ProfileScreen' of github.com:binarapps/baca-react-native-template into chore/sections-division-ProfileScreen

Author: MateuszRostkowski

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/ProfileEditImage.tsx

@@ -1,4 +1,3 @@
-import { isWeb } from '@baca/constants'
 import { Box, Text, Button, Row, themeColors } from '@baca/design-system'
 import * as ImagePicker from 'expo-image-picker'
 import { t } from 'i18next'
@@ -22,8 +21,8 @@ export const ProfileEditImage: React.FC = () => {
   }, [])
 
   return (
-    <Box borderColor="border.secondary" borderTopWidth={1} py={6}>
-      <Box style={styles.marginBottom}>
+    <Row style={styles.container}>
+      <Box style={styles.textContainer}>
         <Text.SmBold color="text.primary">{t('profile_screen.your_photo')}</Text.SmBold>
         <Text.SmRegular color="text.secondary">
           {t('profile_screen.your_photo_description')}
@@ -34,39 +33,47 @@ export const ProfileEditImage: React.FC = () => {
           <Image source={{ uri: image }} style={styles.image} />
         ) : (
           <Box style={styles.placeholder}>
-            <Text color="Gray modern.600">{t('profile_screen.photo_innerText')}</Text>
+            <Text fontSize={11} color="Gray modern.600">
+              {t('profile_screen.photo_innerText')}
+            </Text>
           </Box>
         )}
       </Box>
-      <Row maxW={800} justifyContent="flex-end">
-        <Button onPress={pickImage}>{t('common.upload')}</Button>
-      </Row>
-    </Box>
+      <Button onPress={pickImage}>{t('common.upload')}</Button>
+    </Row>
   )
 }
 
 const styles = StyleSheet.create({
+  container: {
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    maxWidth: 800,
+  },
   image: {
     height: '100%',
     width: '100%',
   },
   imageContainer: {
-    alignSelf: 'center',
-    borderRadius: 50,
-    height: 100,
+    borderRadius: 32,
+    height: 64,
     marginBottom: 10,
+    marginRight: 82,
     overflow: 'hidden',
-    right: isWeb ? 150 : 0,
-    width: 100,
-  },
-  marginBottom: {
-    marginBottom: 10,
+    width: 64,
   },
   placeholder: {
     alignItems: 'center',
     backgroundColor: themeColors.primitives['Gray neutral']['50'],
     height: '100%',
     justifyContent: 'center',
-    width: '100%',
+  },
+  textContainer: {
+    flex: 1,
+    marginBottom: 30,
+    maxWidth: 260,
+    minWidth: 260,
   },
 })

src/components/screens/profile/ProfilePasswordForm.tsx

@@ -1,29 +1,44 @@
 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}>
       <ProfileControlledInput
+        control={control}
+        errors={errors}
         label={t('form.labels.old_password')}
         name="oldPassword"
+        onSubmitEditing={focusNewPasswordInput}
         placeholder={t('form.placeholders.old_password')}
-        control={control}
-        errors={errors}
+        type="password"
       />
       <ProfileControlledInput
+        control={control}
+        errors={{}}
+        isInvalid={isPasswordError}
+        isRequired
         label={t('form.labels.new_password')}
         name="password"
+        onSubmitEditing={Keyboard.dismiss}
         placeholder={t('form.placeholders.new_password')}
-        control={control}
-        errors={errors}
+        rules={{ validate: { validationFn } }}
+        type="password"
       />
+      {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
 }