finish user

apps/admin.saladeaula.digital/app/routes/_.$orgid.users.add/route.tsx

@@ -48,18 +48,48 @@ import { useEffect } from 'react'
 
 const isName = (name: string) => name && name.includes(' ')
 
-export const formSchema = z.object({
-  name: z
-    .string()
-    .trim()
-    .nonempty('Digite um nome')
-    .refine(isName, { message: 'Nome inválido' }),
-  email: z.email('Email inválido').trim().toLowerCase().optional(),
-  cpf: z
-    .string('CPF obrigatório')
-    .refine(isValidCPF, { message: 'CPF inválido' }),
-  given_email: z.coerce.boolean()
-})
+function randomEmail() {
+  const numberDict = NumberDictionary.generate({ min: 100, max: 999 })
+  const randomName: string = uniqueNamesGenerator({
+    dictionaries: [adjectives, colors, numberDict],
+    length: 3,
+    separator: '-'
+  })
+
+  return `${randomName}@users.noreply.saladeaula.digital`
+}
+
+export const formSchema = z
+  .object({
+    name: z
+      .string()
+      .trim()
+      .nonempty('Digite um nome')
+      .refine(isName, { message: 'Nome inválido' }),
+    email: z.string().trim().toLowerCase().optional(),
+    cpf: z
+      .string('CPF obrigatório')
+      .refine(isValidCPF, { message: 'CPF inválido' }),
+    given_email: z.coerce.boolean()
+  })
+  .refine(
+    ({ given_email, email }) => {
+      if (given_email) {
+        return true
+      }
+      return email && z.email().safeParse(email).success
+    },
+    {
+      message: 'Email inválido',
+      path: ['email']
+    }
+  )
+  .transform((data) => {
+    if (data.given_email) {
+      return { ...data, email: randomEmail() }
+    }
+    return data
+  })
 
 export type Schema = z.infer<typeof formSchema>
 
@@ -93,7 +123,7 @@ export default function Route() {
   const form = useForm({
     resolver: zodResolver(formSchema)
   })
-  const { handleSubmit, control, formState, reset, watch } = form
+  const { handleSubmit, control, formState, reset, watch, setValue } = form
   const givenEmail = watch('given_email') as boolean
 
   const onSubmit = async (user: Schema) => {
@@ -115,7 +145,11 @@ export default function Route() {
     }
   }, [fetcher.data])
 
-  // console.log(randomEmail())
+  useEffect(() => {
+    if (givenEmail) {
+      setValue('email', '', { shouldValidate: true })
+    }
+  }, [givenEmail, setValue])
 
   return (
     <div className="space-y-2.5">
@@ -166,13 +200,16 @@ export default function Route() {
                   <FormField
                     control={control}
                     name="email"
-                    disabled={givenEmail}
                     defaultValue=""
                     render={({ field }) => (
                       <FormItem>
                         <FormLabel>Email</FormLabel>
                         <FormControl>
-                          <Input {...field} />
+                          <Input
+                            {...field}
+                            readOnly={givenEmail}
+                            className="read-only:pointer-events-none read-only:opacity-50"
+                          />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
@@ -244,14 +281,3 @@ export default function Route() {
     </div>
   )
 }
-
-function randomEmail() {
-  const numberDict = NumberDictionary.generate({ min: 100, max: 999 })
-  const randomName: string = uniqueNamesGenerator({
-    dictionaries: [adjectives, colors, numberDict],
-    length: 3,
-    separator: '-'
-  })
-
-  return `${randomName}@users.noreply.saladeaula.digital`
-}