add forgot login

apps/id.saladeaula.digital/app/routes/forgot.tsx

@@ -1,9 +1,10 @@
-import type { Route } from './+types'
+import type { Route } from './+types/forgot'
 
 import { isValidCPF } from '@brazilian-utils/brazilian-utils'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { Link } from 'react-router'
+import { MailIcon } from 'lucide-react'
 import { z } from 'zod'
 
 import logo from '@repo/ui/components/logo2.svg'
@@ -17,6 +18,10 @@ import {
   FormMessage
 } from '@repo/ui/components/ui/form'
 import { Input } from '@repo/ui/components/ui/input'
+import { useFetcher } from 'react-router'
+import { Spinner } from '@repo/ui/components/ui/spinner'
+import { request as req } from '@repo/util/request'
+import { useEffect } from 'react'
 
 const schema = z.object({
   username: z
@@ -38,14 +43,67 @@ export function meta({}: Route.MetaArgs) {
   return [{ title: 'Redefinir senha · EDUSEG®' }]
 }
 
-export default function Forgot({}: Route.ComponentProps) {
-  const form = useForm({
-    resolver: zodResolver(schema)
+export async function action({ request, context }: Route.ActionArgs) {
+  const url = new URL('/forgot', context.cloudflare.env.ISSUER_URL)
+  const body = await request.json()
+
+  console.log(url.toString())
+
+  const r = await fetch(url.toString(), {
+    method: 'POST',
+    headers: new Headers({ 'Content-Type': 'application/json' }),
+    body: JSON.stringify(body),
+    signal: request.signal
   })
-  const { control, handleSubmit, formState } = form
+  const data = (await r.json()) as any
+
+  if (r.ok) {
+    return { ok: true, ...data }
+  }
+
+  return { ok: false, ...data }
+}
+
+export default function Forgot({}: Route.ComponentProps) {
+  const fetcher = useFetcher()
+  const form = useForm({ resolver: zodResolver(schema) })
+  const { control, handleSubmit, formState, setError } = form
 
   const onSubmit = async (data: Schema) => {
-    console.log(data)
+    await fetcher.submit(data, {
+      method: 'POST',
+      encType: 'application/json'
+    })
+  }
+
+  useEffect(() => {
+    const message = fetcher.data?.message
+
+    switch (message) {
+      case 'User not found':
+        return setError('username', {
+          message:
+            'Não encontramos sua conta. Verifique se está usando o Email ou CPF correto',
+          type: 'manual'
+        })
+    }
+  }, [fetcher.data, setError])
+
+  if (fetcher.data?.ok) {
+    return (
+      <div className="flex flex-col text-center items-center gap-6">
+        <MailIcon className="size-12" />
+        <div className="space-y-1.5">
+          <h1 className="text-xl text-gray-10 font-bold">
+            Verifique seu email
+          </h1>
+          <p>
+            Acabamos de enviar um email com as instruções para{' '}
+            <span className="font-medium italic">{fetcher.data?.email}</span>
+          </p>
+        </div>
+      </div>
+    )
   }
 
   return (
@@ -68,7 +126,7 @@ export default function Forgot({}: Route.ComponentProps) {
         </div>
 
         <Form {...form}>
-          <form onSubmit={handleSubmit(onSubmit)} className="grid gap-6">
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
             <FormField
               control={control}
               name="username"
@@ -93,6 +151,7 @@ export default function Forgot({}: Route.ComponentProps) {
               className="w-full cursor-pointer"
               disabled={formState.isSubmitting}
             >
+              {formState.isSubmitting && <Spinner />}
               Enviar instruções
             </Button>
           </form>