This commit is contained in:
2025-12-05 12:26:03 -03:00
parent 04e43682fc
commit c3c319d8b6
3 changed files with 57 additions and 27 deletions

View File

@@ -1,5 +1,6 @@
import type { Route } from './+types/index' import type { Route } from './+types/index'
import { useToggle } from 'ahooks'
import { PatternFormat } from 'react-number-format' import { PatternFormat } from 'react-number-format'
import { zodResolver } from '@hookform/resolvers/zod' import { zodResolver } from '@hookform/resolvers/zod'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
@@ -53,7 +54,7 @@ export async function action({ request, context }: Route.ActionArgs) {
export default function Signup({}: Route.ComponentProps) { export default function Signup({}: Route.ComponentProps) {
const fetcher = useFetcher() const fetcher = useFetcher()
const [show, setShow] = useState(false) const [show, { toggle: setShow }] = useToggle(false)
const [user, setUser] = useState<User | null>(null) const [user, setUser] = useState<User | null>(null)
const form = useForm({ const form = useForm({
resolver: zodResolver(formSchema) resolver: zodResolver(formSchema)
@@ -185,10 +186,12 @@ export default function Signup({}: Route.ComponentProps) {
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Checkbox <Checkbox
id="showPassword" id="showPassword"
onClick={() => setShow((x) => !x)} onClick={setShow}
tabIndex={-1} tabIndex={-1}
/> />
<Label htmlFor="showPassword">Mostrar senha</Label> <Label htmlFor="showPassword" className="cursor-pointer">
Mostrar senha
</Label>
</div> </div>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>

View File

@@ -1,6 +1,8 @@
import type { Route } from './+types/reset' import type { Route } from './+types/reset'
import { useState } from 'react' import { AlertCircleIcon } from 'lucide-react'
import { useToggle } from 'ahooks'
import { useEffect } from 'react'
import { useForm } from 'react-hook-form' import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod' import { zodResolver } from '@hookform/resolvers/zod'
import { useFetcher, redirect } from 'react-router' import { useFetcher, redirect } from 'react-router'
@@ -21,6 +23,12 @@ import {
import { Label } from '@repo/ui/components/ui/label' import { Label } from '@repo/ui/components/ui/label'
import { Spinner } from '@repo/ui/components/ui/spinner' import { Spinner } from '@repo/ui/components/ui/spinner'
import { request as req } from '@repo/util/request' import { request as req } from '@repo/util/request'
import {
Alert,
AlertDescription,
AlertTitle
} from '@repo/ui/components/ui/alert'
import { Link } from 'react-router'
export const formSchema = z export const formSchema = z
.object({ .object({
@@ -46,30 +54,26 @@ export async function action({ params, request, context }: Route.ActionArgs) {
const url = new URL(`/reset/${token}`, context.cloudflare.env.ISSUER_URL) const url = new URL(`/reset/${token}`, context.cloudflare.env.ISSUER_URL)
const body = await request.json() 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 r = await fetch(issuerUrl.toString(), { if (r.ok) {
// method: 'POST', throw redirect('/authorize', { headers: r.headers })
// headers: new Headers({ 'Content-Type': 'application/json' }), }
// body: JSON.stringify(body),
// signal: request.signal
// })
// if (r.ok) { return { ok: false, error: await r.json() }
// 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) { export default function Route({}: Route.ComponentProps) {
const fetcher = useFetcher() const fetcher = useFetcher()
const [show, setShow] = useState(false)
const form = useForm({ resolver: zodResolver(formSchema) }) const form = useForm({ resolver: zodResolver(formSchema) })
const { handleSubmit, control, formState } = form const { handleSubmit, control, formState } = form
const [invalidCode, { set: setInvalidCode }] = useToggle(false)
const [show, { toggle: setShow }] = useToggle(false)
const onSubmit = async ({ password }: Schema) => { const onSubmit = async ({ password }: Schema) => {
await fetcher.submit(JSON.stringify({ new_password: password }), { await fetcher.submit(JSON.stringify({ new_password: password }), {
@@ -78,6 +82,13 @@ export default function Route({}: Route.ComponentProps) {
}) })
} }
useEffect(() => {
switch (fetcher.data?.error?.type) {
case 'InvalidCodeError':
setInvalidCode(true)
}
}, [fetcher.data])
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div className="flex justify-center"> <div className="flex justify-center">
@@ -94,6 +105,24 @@ export default function Route({}: Route.ComponentProps) {
Defina uma nova senha para manter sua conta sempre segura. Defina uma nova senha para manter sua conta sempre segura.
</p> </p>
</div> </div>
{invalidCode && (
<Alert variant="destructive">
<AlertCircleIcon />
<AlertTitle>O link para redefinição expirou.</AlertTitle>
<AlertDescription>
<p>Por favor, siga as instruções abaixo para continuar:</p>
<ul className="list-disc text-sm [&_a]:underline [&_a]:hover:no-underline">
<li>
<Link to="/forgot" className="underline hover:no-underline">
Gerar um novo link de redefinição de senha
</Link>
</li>
</ul>
</AlertDescription>
</Alert>
)}
<Form {...form}> <Form {...form}>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6"> <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
<FormField <FormField
@@ -130,12 +159,10 @@ export default function Route({}: Route.ComponentProps) {
/> />
</FormControl> </FormControl>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Checkbox <Checkbox id="showPassword" onClick={setShow} tabIndex={-1} />
id="showPassword" <Label htmlFor="showPassword" className="cursor-pointer">
onClick={() => setShow((x) => !x)} Mostrar senha
tabIndex={-1} </Label>
/>
<Label htmlFor="showPassword">Mostrar senha</Label>
</div> </div>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>

View File

@@ -82,7 +82,7 @@ Resources:
Reset: Reset:
Type: HttpApi Type: HttpApi
Properties: Properties:
Path: /reset Path: /reset/{token}
Method: POST Method: POST
ApiId: !Ref HttpApi ApiId: !Ref HttpApi
Lookup: Lookup: