diff --git a/app/data/auth-provider.ts b/app/data/auth-provider.ts index de3cd67..aa1b078 100644 --- a/app/data/auth-provider.ts +++ b/app/data/auth-provider.ts @@ -10,6 +10,13 @@ export type AuthFormRequest = { rememberMe: boolean; } +export type RegisterFormRequest = { + email: string; + password: string; + firstName: string; + lastName: string; +} + export class PortalAuthProvider implements RequiredAuthProvider { private apiUrl: string; private sdk: Sdk; @@ -61,8 +68,14 @@ export class PortalAuthProvider implements RequiredAuthProvider { return {logout: true}; } - async register(params: any): Promise { - return {success: true}; + async register(params: RegisterFormRequest): Promise { + const ret = await this.sdk.account().register({ + email: params.email, + password: params.password, + first_name: params.firstName, + last_name: params.lastName, + }); + return {success: ret, redirectTo: ret ? "/dashboard" : undefined}; } async forgotPassword(params: any): Promise { diff --git a/app/routes/register.tsx b/app/routes/register.tsx index c792899..a0d22af 100644 --- a/app/routes/register.tsx +++ b/app/routes/register.tsx @@ -1,14 +1,16 @@ -import type { MetaFunction } from "@remix-run/node"; -import { Link } from "@remix-run/react"; -import { Button } from "~/components/ui/button"; -import logoPng from "~/images/lume-logo.png?url"; -import lumeColorLogoPng from "~/images/lume-color-logo.png?url"; -import discordLogoPng from "~/images/discord-logo.png?url"; -import lumeBgPng from "~/images/lume-bg-image.png?url"; -import { Field, FieldCheckbox } from "~/components/forms"; -import { getFormProps, useForm } from "@conform-to/react"; -import { z } from "zod"; -import { getZodConstraint, parseWithZod } from "@conform-to/zod"; +import type { MetaFunction } from "@remix-run/node" +import { Link } from "@remix-run/react" +import { Button } from "~/components/ui/button" +import logoPng from "~/images/lume-logo.png?url" +import lumeColorLogoPng from "~/images/lume-color-logo.png?url" +import discordLogoPng from "~/images/discord-logo.png?url" +import lumeBgPng from "~/images/lume-bg-image.png?url" +import { Field, FieldCheckbox } from "~/components/forms" +import { getFormProps, useForm } from "@conform-to/react" +import { z } from "zod" +import { getZodConstraint, parseWithZod } from "@conform-to/zod" +import {useLogin, useRegister} from "@refinedev/core"; +import {AuthFormRequest, RegisterFormRequest} from "~/data/auth-provider.js"; export const meta: MetaFunction = () => { return [{ title: "Sign Up" }]; @@ -41,13 +43,34 @@ const RegisterSchema = z }); export default function Register() { + const register = useRegister() + const login = useLogin(); const [form, fields] = useForm({ id: "register", constraint: getZodConstraint(RegisterSchema), onValidate({ formData }) { return parseWithZod(formData, { schema: RegisterSchema }); }, - }); + onSubmit(e) { + e.preventDefault(); + + const data = Object.fromEntries(new FormData(e.currentTarget).entries()); + register.mutate({ + email: data.email.toString(), + password: data.password.toString(), + firstName: data.firstName.toString(), + lastName: data.lastName.toString(), + }, { + onSuccess: () => { + login.mutate({ + email: data.email.toString(), + password: data.password.toString(), + rememberMe: false, + }) + } + }) + } + }); return (