feat: adjustments to login and sign in screens

Author: Guillermo Machado

src/components/login-form.tsx

@@ -5,18 +5,21 @@ import { useForm } from 'react-hook-form';
 import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
 import z from 'zod';
 
+import { translate } from '@/core';
 import { Button, ControlledInput, Text, View } from '@/ui';
 
 const MIN_CHARS = 6;
 const schema = z.object({
   email: z
-    .string({ required_error: 'Email is required' })
-    .email('Invalid email format'),
+    .string({
+      required_error: translate('auth.signIn.validation.emailRequired'),
+    })
+    .email(translate('auth.signIn.validation.invalidEmail')),
   password: z
     .string({
-      required_error: 'Password is required',
+      required_error: translate('auth.signIn.validation.passwordRequired'),
     })
-    .min(MIN_CHARS, 'Password must be at least 6 characters'),
+    .min(MIN_CHARS, translate('auth.signIn.validation.passwordMinChars')),
 });
 
 export type FormType = z.infer<typeof schema>;
@@ -39,41 +42,50 @@ export const LoginForm = ({
       behavior="padding"
       keyboardVerticalOffset={10}
     >
-      <View className="flex-1 justify-center p-4">
-        <Text testID="form-title" className="pb-6 text-center text-2xl">
-          Sign In
+      <View className="flex-1 justify-center gap-8 p-4">
+        <Text testID="form-title" className="text-center text-2xl">
+          {translate('auth.signIn.title')}
         </Text>
+        <View>
+          <ControlledInput
+            testID="email-input"
+            autoCapitalize="none"
+            autoComplete="email"
+            control={control}
+            name="email"
+            label={translate('auth.signIn.title')}
+          />
+          <ControlledInput
+            testID="password-input"
+            control={control}
+            name="password"
+            label={translate('auth.signIn.validation.passwordRequired')}
+            placeholder="***"
+            secureTextEntry={true}
+          />
 
-        <ControlledInput
-          testID="email-input"
-          autoCapitalize="none"
-          autoComplete="email"
-          control={control}
-          name="email"
-          label="Email"
-        />
-        <ControlledInput
-          testID="password-input"
-          control={control}
-          name="password"
-          label="Password"
-          placeholder="***"
-          secureTextEntry={true}
-        />
-
-        <Button
-          testID="login-button"
-          label="Login"
-          onPress={handleSubmit(onSubmit)}
-          loading={isLoading}
-        />
-
-        <Text>
-          Don't have an account?{' '}
-          <Link href="/sign-up" disabled={isLoading}>
-            <Text className="font-bold text-black">Sign up</Text>
+          <Button
+            testID="login-button"
+            label={translate('auth.signIn.buttons.login')}
+            onPress={handleSubmit(onSubmit)}
+            loading={isLoading}
+          />
+          <Text>
+            {translate('auth.signIn.newAccount')}{' '}
+            <Link href="/sign-up" disabled={isLoading}>
+              <Text className="font-bold text-black">
+                {translate('auth.signIn.buttons.signUp')}
+              </Text>
+            </Link>
+          </Text>
+          <Link href="/forgot-password" disabled={isLoading} asChild>
+            <Button
+              variant="link"
+              className="font-bold text-black"
+              label={translate('auth.signIn.forgotPasswordButton')}
+            />
           </Link>
-        </Text>
+        </View>
       </View>
     </KeyboardAvoidingView>
   );

src/components/sign-up-form.tsx

@@ -9,26 +9,26 @@ import { Button, ControlledInput, Text, View } from '@/ui';
 const MIN_PASSWORD_LENGTH = 6;
 
 const passwordSchema = z
-  .string({ required_error: translate('auth.sign_up.error.passwordRequired') })
-  .min(MIN_PASSWORD_LENGTH, translate('auth.sign_up.error.shortPassword'));
+  .string({ required_error: translate('auth.signUp.error.passwordRequired') })
+  .min(MIN_PASSWORD_LENGTH, translate('auth.signUp.error.shortPassword'));
 
 const schema = z
   .object({
     email: z
-      .string({ required_error: translate('auth.sign_up.error.emailRequired') })
-      .email(translate('auth.sign_up.error.emailInvalid')),
+      .string({ required_error: translate('auth.signUp.error.emailRequired') })
+      .email(translate('auth.signUp.error.emailInvalid')),
     name: z.string({
-      required_error: translate('auth.sign_up.error.nameRequired'),
+      required_error: translate('auth.signUp.error.nameRequired'),
     }),
     password: passwordSchema,
     passwordConfirmation: z.string({
       required_error: translate(
-        'auth.sign_up.error.passwordConfirmationRequired',
+        'auth.signUp.error.passwordConfirmationRequired',
       ),
     }),
   })
   .refine((data) => data.password === data.passwordConfirmation, {
-    message: translate('auth.sign_up.error.passwordsDoNotMatch'),
+    message: translate('auth.signUp.error.passwordsDoNotMatch'),
     path: ['passwordConfirmation'],
   });
 
@@ -55,7 +55,7 @@ export const SignUpForm = ({
     >
       <View className="flex-1 justify-center gap-4 p-4">
         <Text testID="form-title" className="text-center text-2xl">
-          {translate('auth.sign_up.title')}
+          {translate('auth.signUp.title')}
         </Text>
         <View>
           <ControlledInput
@@ -64,34 +64,34 @@ export const SignUpForm = ({
             autoComplete="email"
             control={control}
             name="email"
-            label={translate('auth.sign_up.fields.email')}
+            label={translate('auth.signUp.fields.email')}
           />
           <ControlledInput
             testID="name-input"
             control={control}
             name="name"
-            label={translate('auth.sign_up.fields.name')}
+            label={translate('auth.signUp.fields.name')}
           />
           <ControlledInput
             testID="password-input"
             control={control}
             name="password"
-            label={translate('auth.sign_up.fields.password')}
+            label={translate('auth.signUp.fields.password')}
             placeholder="***"
             secureTextEntry={true}
           />
           <ControlledInput
             testID="password-confirmation-input"
             control={control}
             name="passwordConfirmation"
-            label={translate('auth.sign_up.fields.password')}
+            label={translate('auth.signUp.fields.password')}
             placeholder="***"
             secureTextEntry={true}
           />
 
           <Button
             testID="sign-up-button"
-            label={translate('auth.sign_up.signUpButton')}
+            label={translate('auth.signUp.signUpButton')}
             onPress={handleSubmit(onSubmit)}
             loading={isPending}
             disabled={isPending}

src/translations/en.json

@@ -1,10 +1,26 @@
 {
   "auth": {
-    "sign-in": {
-      "forgotPasswordButton": "Forgot Password"
+    "signIn": {
+      "buttons": {
+        "login": "Login",
+        "signUp": "Sign Up"
+      },
+      "fields": {
+        "email": "Email",
+        "password": "Password"
+      },
+      "forgotPasswordButton": "Forgot Password",
+      "newAccount": "Doesn't have an account?",
+      "signUp": "Already have an account?",
+      "title": "Sign In",
+      "validation": {
+        "emailRequired": "Email is required",
+        "invalidEmail": "Invalid email format",
+        "passwordMinChars": "Password must be at least 6 characters",
+        "passwordRequired": "Password is required"
+      }
     },
-    "sign_up": {
-      "already_have_an_account": "Already have an account? ",
+    "signUp": {
       "error": {
         "emailInvalid": "Invalid email format",
         "emailRequired": "Email is required",