#1 Ajustes de estilo e mensagem de CPF inválido

Eslley · Oct 28, 2022 · 4c9e9e1 · 4c9e9e1
1 parent 4e47d58
commit 4c9e9e1
Showing 1 changed file with 57 additions and 17 deletions.
diff --git a/src/components/FormDadosPessoais.js b/src/components/FormDadosPessoais.js
@@ -1,4 +1,5 @@
-import { Grid, TextField } from "@mui/material"
+import { AccountCircle, Description, Email, Phone } from "@mui/icons-material"
+import { Grid, InputAdornment, TextField } from "@mui/material"
 import { useEffect } from "react"
 import util from "../providers/util"
 
@@ -11,58 +12,97 @@ function Form({ register, errors }) {
     const maskCPF = (e) => {
         e.target.value = util.maskCPF(e.target.value)
     }
-    
+
     return (
 
         <Grid container direction="column" textAlign="center">
-            <Grid sx={{ marginY: "0.6em" }} item>
+            <Grid item>
                 <TextField
+                    margin='normal'
                     sx={{ width: "90%" }}
                     label="Nome"
                     type="text"
-                    {...register("name", { required: true})}
+                    InputProps={{
+                        startAdornment: (
+                            <InputAdornment position="start">
+                                <AccountCircle color="primary" />
+                            </InputAdornment>
+                        ),
+                    }}
+                    {...register("name", { required: true })}
                     helperText={errors.name ? "O nome é obrigatório" : ""}
                     error={!!errors.name}
                 />
             </Grid>
 
-            <Grid sx={{ marginY: "0.6em" }} item>
+            <Grid item>
                 <TextField
+                    margin='normal'
                     sx={{ width: "90%" }}
                     label="Email"
                     type="email"
-                    {...register("email", { required: true, pattern: {
-                        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-                        message: "Email inválido"
-                      }})}
+                    InputProps={{
+                        startAdornment: (
+                            <InputAdornment position="start">
+                                <Email color="primary" />
+                            </InputAdornment>
+                        ),
+                    }}
+                    {...register("email", {
+                        required: true, pattern: {
+                            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                            message: "Email inválido"
+                        }
+                    })}
                     helperText={errors.email?.type === 'required' ? "O email é obrigatório" : errors.email && errors.email.message}
                     error={!!errors.email}
                 />
             </Grid>
 
-            <Grid sx={{ marginY: "0.6em" }} item>
+            <Grid item>
                 <TextField
+                    margin='normal'
                     sx={{ width: "90%" }}
                     label="Telefone"
                     type="tel"
-                    {...register("cell", { required: true, pattern: {
-                        value: /^\([0-9]{2}\)\s{0,1}[0-9]{4,5}\-[0-9]{4}$/,
-                        message: "Telefone inválido"
-                      }})}
+                    InputProps={{
+                        startAdornment: (
+                            <InputAdornment position="start">
+                                <Phone color="primary" />
+                            </InputAdornment>
+                        ),
+                    }}
+                    {...register("cell", {
+                        required: true, pattern: {
+                            value: /^\([0-9]{2}\)\s{0,1}[0-9]{4,5}\-[0-9]{4}$/,
+                            message: "Telefone inválido"
+                        }
+                    })}
                     onInput={maskCell}
                     helperText={errors.cell?.type === 'required' ? "O telefone é obrigatório" : errors.cell && errors.cell.message}
                     error={!!errors.cell}
                 />
             </Grid>
 
-            <Grid sx={{ marginY: "0.6em" }} item>
+            <Grid item>
                 <TextField
+                    margin='normal'
                     sx={{ width: "90%" }}
                     label="CPF"
                     type="text"
-                    {...register("cpf", { required: true, pattern: /\d{3}\.\d{3}\.\d{3}\-\d{2}/g })}
+                    InputProps={{
+                        startAdornment: (
+                            <InputAdornment position="start">
+                                <Description color="primary" />
+                            </InputAdornment>
+                        ),
+                    }}
+                    {...register("cpf", { required: true, pattern: {
+                        value: /\d{3}\.\d{3}\.\d{3}\-\d{2}/,
+                        message: "CPF inválido"
+                    } })}
                     onInput={maskCPF}
-                    helperText={errors.cpf ? "O CPF é obrigatório" : ""}
+                    helperText={errors.cpf?.type === 'required' ? "O CPF é obrigatório" : errors.cpf && errors.cpf.message}
                     error={!!errors.cpf}
                 />