add forgot login

2025-12-05 10:23:22 -03:00
parent b929c492c0
commit 7c3239d856
14 changed files with 270 additions and 57 deletions
--- a/apps/id.saladeaula.digital/app/routes/reset.tsx
+++ b/apps/id.saladeaula.digital/app/routes/reset.tsx
@@ -0,0 +1,157 @@
+import type { Route } from './+types/reset'
+
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useFetcher, redirect } from 'react-router'
+import { z } from 'zod'
+
+import logo from '@repo/ui/components/logo2.svg'
+import { Input } from '@repo/ui/components/ui/input'
+import { Button } from '@repo/ui/components/ui/button'
+import { Checkbox } from '@repo/ui/components/ui/checkbox'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@repo/ui/components/ui/form'
+import { Label } from '@repo/ui/components/ui/label'
+import { Spinner } from '@repo/ui/components/ui/spinner'
+import { request as req } from '@repo/util/request'
+
+export const formSchema = z
+  .object({
+    password: z
+      .string()
+      .nonempty('Digite sua senha')
+      .min(6, 'Deve ter no mínimo 6 caracteres'),
+    confirm_password: z.string()
+  })
+  .refine((data) => data.password === data.confirm_password, {
+    message: 'As senhas não coincidem',
+    path: ['confirm_password']
+  })
+
+export type Schema = z.infer<typeof formSchema>
+
+export function meta({}: Route.MetaArgs) {
+  return [{ title: 'Define sua nova senha · EDUSEG®' }]
+}
+
+export async function action({ params, request, context }: Route.ActionArgs) {
+  const { token } = params
+  const url = new URL(`/reset/${token}`, context.cloudflare.env.ISSUER_URL)
+  const body = await request.json()
+
+  console.log(url.toString())
+
+  // const r = await fetch(issuerUrl.toString(), {
+  //   method: 'POST',
+  //   headers: new Headers({ 'Content-Type': 'application/json' }),
+  //   body: JSON.stringify(body),
+  //   signal: request.signal
+  // })
+
+  // if (r.ok) {
+  //   throw redirect('/authorize', { headers: r.headers })
+  // }
+
+  // return { ok: false, error: await r.json() }
+
+  await new Promise((r) => setTimeout(r, 2000))
+  return { ok: true }
+}
+
+export default function Route({}: Route.ComponentProps) {
+  const fetcher = useFetcher()
+  const [show, setShow] = useState(false)
+  const form = useForm({ resolver: zodResolver(formSchema) })
+  const { handleSubmit, control, formState } = form
+
+  const onSubmit = async ({ password }: Schema) => {
+    await fetcher.submit(JSON.stringify({ new_password: password }), {
+      method: 'POST',
+      encType: 'application/json'
+    })
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-center">
+        <div className="border border-white/15 bg-white/5 px-2.5 py-3 rounded-xl">
+          <img src={logo} alt="EDUSEG®" className="block size-12" />
+        </div>
+      </div>
+
+      <div className="text-center space-y-1.5">
+        <h1 className="text-2xl font-semibold font-display text-balance">
+          Defina sua nova senha
+        </h1>
+        <p className="text-white/50 text-sm">
+          Defina uma nova senha para manter sua conta sempre segura.
+        </p>
+      </div>
+      <Form {...form}>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          <FormField
+            control={control}
+            name="password"
+            defaultValue=""
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Senha</FormLabel>
+                <FormControl>
+                  <Input
+                    type={show ? 'text' : 'password'}
+                    autoComplete="false"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={control}
+            name="confirm_password"
+            defaultValue=""
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Confirmar senha</FormLabel>
+                <FormControl>
+                  <Input
+                    type={show ? 'text' : 'password'}
+                    autoComplete="false"
+                    {...field}
+                  />
+                </FormControl>
+                <div className="flex items-center gap-3">
+                  <Checkbox
+                    id="showPassword"
+                    onClick={() => setShow((x) => !x)}
+                    tabIndex={-1}
+                  />
+                  <Label htmlFor="showPassword">Mostrar senha</Label>
+                </div>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <Button
+            type="submit"
+            className="w-full cursor-pointer"
+            disabled={formState.isSubmitting}
+          >
+            {formState.isSubmitting && <Spinner />}
+            Definir senha
+          </Button>
+        </form>
+      </Form>
+    </div>
+  )
+}