feat: implement register

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<AuthActionResponse> {
+    async register(params: RegisterFormRequest): Promise<AuthActionResponse> {
-        return {success: true};
+        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<AuthActionResponse> {

app/routes/register.tsx

@@ -1,14 +1,16 @@
-import type { MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node"
-import { Link } from "@remix-run/react";
+import { Link } from "@remix-run/react"
-import { Button } from "~/components/ui/button";
+import { Button } from "~/components/ui/button"
-import logoPng from "~/images/lume-logo.png?url";
+import logoPng from "~/images/lume-logo.png?url"
-import lumeColorLogoPng from "~/images/lume-color-logo.png?url";
+import lumeColorLogoPng from "~/images/lume-color-logo.png?url"
-import discordLogoPng from "~/images/discord-logo.png?url";
+import discordLogoPng from "~/images/discord-logo.png?url"
-import lumeBgPng from "~/images/lume-bg-image.png?url";
+import lumeBgPng from "~/images/lume-bg-image.png?url"
-import { Field, FieldCheckbox } from "~/components/forms";
+import { Field, FieldCheckbox } from "~/components/forms"
-import { getFormProps, useForm } from "@conform-to/react";
+import { getFormProps, useForm } from "@conform-to/react"
-import { z } from "zod";
+import { z } from "zod"
-import { getZodConstraint, parseWithZod } from "@conform-to/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<RegisterFormRequest>()
+    const login = useLogin<AuthFormRequest>();
   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 (
     <div className="p-10 h-screen relative">