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, useNotification, useRegister} from "@refinedev/core"; import {AuthFormRequest, RegisterFormRequest} from "~/data/auth-provider.js"; export const meta: MetaFunction = () => { return [{ title: "Sign Up" }]; }; const RegisterSchema = z .object({ firstName: z.string().min(1), lastName: z.string().min(1), email: z.string().email(), password: z .string() .min(8, { message: "Password must be at least 8 characters" }), confirmPassword: z .string() .min(8, { message: "Password must be at least 8 characters" }), termsOfService: z.boolean({ required_error: "You must agree to the terms of service", }), }) .superRefine((data, ctx) => { if (data.password !== data.confirmPassword) { return ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["confirmPassword"], message: "Passwords do not match", }); } return true; }); export default function Register() { const register = useRegister() const login = useLogin(); const { open } = useNotification(); 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: () => { open?.({ type: "success", message: "Verify your Email", description: "An Email was sent to your email address. Please verify your email address to activate your account.", key: "register-success" }) login.mutate({ email: data.email.toString(), password: data.password.toString(), rememberMe: false, }) } }) } }); return (
Lume logo

All roads lead to Lume

🤘 Get 50 GB free storage and download for free,{" "} forever .{" "}

I agree to the Terms of Service and Privacy Policy ), }} errors={fields.termsOfService.errors} />

Already have an account?{" "} Login here instead →

Lume background
); }