bugfix: fixing error mensages

fga-eps-mds · Dec 20, 2024 · beaa7da · beaa7da
1 parent 801f566
commit beaa7da
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 24 deletions.
diff --git a/src/pages/SignUp/SignUpForm/index.tsx b/src/pages/SignUp/SignUpForm/index.tsx
@@ -6,6 +6,7 @@ import { useForm } from 'react-hook-form';
 import { PasswordInput } from '../../../components/ui/password-input';
 import { Button } from '../../../components/ui/button';
 import { Field } from '../../../components/ui/field';
+import { formatPhoneNumber } from './phoneformat';
 
 interface FormValues {
   firstName: string;
@@ -25,11 +26,9 @@ function SignUpForm() {
     handleSubmit,
     formState: { errors, isValid },
     watch,
+    trigger,
   } = useForm<FormValues>();
 
-
-
-
   const { signUp, isAuthenticated } = useAuth();
 
   const onSubmit = handleSubmit(async (data: FormValues) => {
@@ -78,37 +77,54 @@ function SignUpForm() {
                   message: "E-mail inválido."
                 }
               })}
+              onChange={(e) => {
+                register('email').onChange(e); 
+                trigger('email'); 
+            }}
             />
           </Field>
-          <Field invalid={!!errors.phone} errorText={errors.phone?.message}>
-            <Input
-              size={'2xl'}
-              placeholder={'Telefone'}
-              {...register('phone', {
-                required: "Campo obrigatório.",
-                pattern: {
-                  value: /^\d{11}$/,
-                  message: "Telefone inválido."
-                }
-              })}
-            />
-          </Field>
+           <Input
+            size={'2xl'}
+            placeholder={'(DDD) Telefone'}
+            {...register('phone', {
+             required: "Campo obrigatório.",
+              validate: (value) => {
+              const onlyNumbers = value.replace(/\D/g, '');
+            return onlyNumbers.length === 11 || "Telefone inválido.";
+        }
+    })}
+    onChange={(e) => {
+        const formatted = formatPhoneNumber(e.target.value); 
+        e.target.value = formatted; 
+        register('phone').onChange(e); 
+        trigger('phone'); 
+    }}
+/>
           <Field invalid={!!errors.password} errorText={errors.password?.message}>
             <PasswordInput
               size={'2xl'}
               placeholder={'Senha'}
               {...register('password', { required: "Campo obrigatório." })}
             />
           </Field>
+
           <Field invalid={!!errors.passwordConfirmation} errorText={errors.passwordConfirmation?.message}>
-            <PasswordInput
-              size={'2xl'}
-              placeholder={'Confirmar senha'}
-              {...register('passwordConfirmation', { required: "Campo obrigatório.",
-              validate: (value) =>
-              value === watch('password') || "As senhas não correspondem."
-              })}
-            />
+    <PasswordInput
+
+        size={'2xl'}
+        placeholder={'Confirmar senha'}
+        {...register('passwordConfirmation', {
+            required: "Campo obrigatório.",
+            validate: (value) =>
+                value === watch('password') || "As senhas não correspondem."
+        })}
+        onChange={(e) => {
+            register('passwordConfirmation').onChange(e);
+            trigger('passwordConfirmation'); 
+        }}
+    />
+
+
           </Field>
         </Stack>
         <Button

diff --git a/src/pages/SignUp/SignUpForm/phoneformat.tsx b/src/pages/SignUp/SignUpForm/phoneformat.tsx
@@ -0,0 +1,11 @@
+export const formatPhoneNumber = (value :string) => {
+    // Remove tudo que não for número
+    const onlyNumbers = value.replace(/\D/g, '');
+
+    // Aplica a formatação
+    if (onlyNumbers.length <= 2) return `(${onlyNumbers}`;
+    if (onlyNumbers.length <= 6) return `(${onlyNumbers.slice(0, 2)}) ${onlyNumbers.slice(2)}`;
+    return `(${onlyNumbers.slice(0, 2)}) ${onlyNumbers.slice(2, 7)}-${onlyNumbers.slice(7, 11)}`;
+};
+
+export default formatPhoneNumber