fix: Improve UX for auth flow

src/components/FieldPinInput/index.tsx

@@ -32,6 +32,7 @@ export const FieldPinInput = <FormattedValue = string,>(
     otherProps,
   } = useField(props);
   const {
+    isDisabled,
     label,
     helper,
     size = 'lg',
@@ -77,6 +78,8 @@ export const FieldPinInput = <FormattedValue = string,>(
           autoFocus={autoFocus}
           onComplete={handleOnComplete}
           placeholder="·"
+          isInvalid={showError}
+          isDisabled={isDisabled}
         >
           <PinInputField flex={1} />
           <PinInputField flex={1} />

src/features/auth/LoginForm.tsx

@@ -50,6 +50,7 @@ export const LoginForm = ({
         <Stack spacing={4}>
           <FieldInput
             name="email"
+            size="lg"
             label={t('auth:data.email.label')}
             required={t('auth:data.email.required')}
             validations={[
@@ -67,7 +68,8 @@ export const LoginForm = ({
               isDisabled={form.isSubmitted && !form.isValid}
               type="submit"
               variant="@primary"
-              ms="auto"
+              size="lg"
+              flex={1}
             >
               {t('auth:login.actions.login')}
             </Button>

src/features/auth/PageLoginValidate.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import {
   Box,
@@ -7,19 +7,16 @@ import {
   CardBody,
   CardHeader,
   Flex,
+  HStack,
   Heading,
   Stack,
   Text,
   chakra,
 } from '@chakra-ui/react';
 import { Formiz, useForm } from '@formiz/core';
-import {
-  useParams,
-  usePathname,
-  useRouter,
-  useSearchParams,
-} from 'next/navigation';
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
+import { LuArrowLeft, LuArrowRight } from 'react-icons/lu';
 
 import { FieldPinInput } from '@/components/FieldPinInput';
 import { Logo } from '@/components/Logo';
@@ -29,10 +26,12 @@ import {
   getRetryDelayInSeconds,
 } from '@/features/auth/utils';
 import { DevCodeHint } from '@/features/dev/DevCodeHint';
+import { useRtl } from '@/hooks/useRtl';
 import { useSearchParamsUpdater } from '@/hooks/useSearchParamsUpdater';
 import { trpc } from '@/lib/trpc/client';
 
 export default function PageLoginValidate() {
+  const { rtlValue } = useRtl();
   const { t } = useTranslation(['auth']);
   const router = useRouter();
   const params = useParams();
@@ -60,10 +59,6 @@ export default function PageLoginValidate() {
         const retries = parseInt(searchParams.get('retries') ?? '0', 10);
         const seconds = getRetryDelayInSeconds(retries);
 
-        form.setErrors({
-          code: `Code is invalid, please wait ${seconds} seconds before submitting`,
-        });
-
         searchParamsUpdater(
           {
             retries: (retries + 1).toString(),
@@ -75,6 +70,10 @@ export default function PageLoginValidate() {
           setTimeout(r, seconds * 1_000);
         });
 
+        form.setErrors({
+          code: `Code is invalid`,
+        });
+
         return;
       }
 
@@ -93,50 +92,54 @@ export default function PageLoginValidate() {
         <Logo h="3rem" mb="8" mx="auto" />
         <Card>
           <CardHeader pb={0}>
-            <Stack>
-              <Heading size="md" data-test="login-page-heading">
-                {t('auth:login.code.title')}
-              </Heading>
-              <Text>
-                We&apos;ve sent a 6-character code to{' '}
-                <chakra.strong>{email}</chakra.strong>. The code expires shortly
-                ({VALIDATION_TOKEN_EXPIRATION_IN_MINUTES} minutes), so please
-                enter it soon.
-              </Text>
-            </Stack>
+            <Button
+              me="auto"
+              size="sm"
+              leftIcon={rtlValue(<LuArrowLeft />, <LuArrowRight />)}
+              onClick={() => router.back()}
+            >
+              Back
+            </Button>
           </CardHeader>
           <CardBody>
             <Formiz connect={form} autoForm>
               <Stack spacing="4">
+                <Stack>
+                  <Heading size="md" data-test="login-page-heading">
+                    {t('auth:login.code.title')}
+                  </Heading>
+                  <Text fontSize="sm">
+                    We&apos;ve sent a 6-character code to{' '}
+                    <chakra.strong>{email}</chakra.strong>. The code expires
+                    shortly ({VALIDATION_TOKEN_EXPIRATION_IN_MINUTES} minutes),
+                    so please enter it soon.
+                  </Text>
+                </Stack>
                 <FieldPinInput
                   name="code"
-                  label="Code"
+                  label="Verification code"
                   helper="Can't find the code? Check your spams."
                   autoFocus
+                  isDisabled={validate.isLoading}
                   onComplete={() => {
-                    if (validate.isLoading) {
-                      // We don't want to submit if the previous request is
-                      // still loading.
-                      return;
+                    // Only auto submit on first try
+                    if (!form.isSubmitted) {
+                      form.submit();
                     }
-
-                    form.submit();
                   }}
                 />
-                <Flex>
-                  <Button type="button" onClick={() => router.back()}>
-                    Back
-                  </Button>
+                <HStack spacing={8}>
                   <Button
+                    size="lg"
                     isLoading={validate.isLoading}
                     isDisabled={form.isSubmitted && !form.isValid}
                     type="submit"
                     variant="@primary"
-                    ms="auto"
+                    flex={1}
                   >
-                    {t('auth:login.actions.login')}
+                    Confirm
                   </Button>
-                </Flex>
+                </HStack>
 
                 <DevCodeHint />
               </Stack>

src/features/auth/PageRegister.tsx

@@ -107,7 +107,8 @@ export default function PageRegister() {
                     isDisabled={form.isSubmitted && !form.isValid}
                     type="submit"
                     variant="@primary"
-                    ms="auto"
+                    flex={1}
+                    size="lg"
                   >
                     {t('auth:register.actions.create')}
                   </Button>

src/locales/en/auth.json

@@ -1,14 +1,14 @@
 {
   "login": {
-    "title": "Log In",
+    "title": "Sign in",
     "feedbacks": {
       "loginError": {
         "title": "Failed to log in"
       }
     },
     "actions": {
       "forgotPassword": "Forgot Password?",
-      "login": "Log In",
+      "login": "Sign in",
       "needAccount": "Need an Account?",
       "register": "Register Now!"
     },

src/locales/sw/auth.json

@@ -8,7 +8,7 @@
     },
     "actions": {
       "forgotPassword": "Umesahau nenosiri yako ?",
-      "login": "Ingia",
+      "login": "Weka sahihi",
       "needAccount": "Je, unahitaji akaunti?",
       "register": "Jiandikishe sasa!"
     }