76 lines
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
import { Button, Form, Input } from "@heroui/react"
|
|
import { useMutation } from "@tanstack/react-query"
|
|
import { createFileRoute, redirect } from "@tanstack/react-router"
|
|
import { createServerFn, useServerFn } from "@tanstack/react-start"
|
|
import { getSupabaseServerClient } from "@/integrations/supabase/supabase"
|
|
|
|
export const signupFn = createServerFn({ method: "POST" })
|
|
.validator(
|
|
(d: { email: string; password: string; redirectUrl?: string }) => d
|
|
)
|
|
.handler(async ({ data }) => {
|
|
const supabase = getSupabaseServerClient()
|
|
const { error } = await supabase.auth.signUp({
|
|
email: data.email,
|
|
password: data.password
|
|
})
|
|
if (error) {
|
|
return {
|
|
error: true,
|
|
message: error.message
|
|
}
|
|
}
|
|
|
|
throw redirect({
|
|
href: data.redirectUrl || "/"
|
|
})
|
|
})
|
|
|
|
export const Route = createFileRoute("/signup")({
|
|
component: SignupComp
|
|
})
|
|
|
|
function SignupComp() {
|
|
const signup = useServerFn(signupFn)
|
|
const signupMutation = useMutation({
|
|
mutationKey: ["signup"],
|
|
mutationFn: async (data: {
|
|
email: string
|
|
password: string
|
|
redirectUrl?: string
|
|
}) => {
|
|
return signup({
|
|
data: {
|
|
email: data.email,
|
|
password: data.password,
|
|
redirectUrl: data.redirectUrl
|
|
}
|
|
})
|
|
}
|
|
})
|
|
return (
|
|
<div className="flex justify-center items-center flex-col h-screen">
|
|
<p className="font-semibold mb-3">Signup</p>
|
|
<Form
|
|
className="grid gap-2 max-w-5xl w-full"
|
|
onSubmit={(e) => {
|
|
e.preventDefault()
|
|
const formData = new FormData(e.currentTarget)
|
|
const email = formData.get("email") as string
|
|
const password = formData.get("password") as string
|
|
signupMutation.mutate({
|
|
email,
|
|
password
|
|
})
|
|
}}
|
|
>
|
|
<Input name="email" type="email" placeholder="Email" />
|
|
<Input name="password" type="password" placeholder="Password" />
|
|
<Button type="submit" isLoading={signupMutation.isPending}>
|
|
Enviar
|
|
</Button>
|
|
</Form>
|
|
</div>
|
|
)
|
|
}
|