diff --git a/app/routes/register.tsx b/app/routes/register.tsx index 63587b7..c792899 100644 --- a/app/routes/register.tsx +++ b/app/routes/register.tsx @@ -1,21 +1,23 @@ -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"; export const meta: MetaFunction = () => { - return [{ title: "Sign Up" }] -} + 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() @@ -24,28 +26,28 @@ const RegisterSchema = 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" - }) + 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" - }) + message: "Passwords do not match", + }); } - return true - }) + return true; + }); export default function Register() { const [form, fields] = useForm({ id: "register", constraint: getZodConstraint(RegisterSchema), onValidate({ formData }) { - return parseWithZod(formData, { schema: RegisterSchema }) - } - }) + return parseWithZod(formData, { schema: RegisterSchema }); + }, + }); return (
@@ -54,21 +56,33 @@ export default function Register() {
+ {...getFormProps(form)}>

All roads lead to Lume

🤘 Get 50 GB free storage and download for free,{" "} + y-2"> forever .{" "}

+
+ + +
+ className="text-primary-1 text-md hover:underline hover:underline-offset-4 mx-1"> Terms of Service and + className="text-primary-1 text-md hover:underline hover:underline-offset-4 mx-1"> Privacy Policy - ) + ), }} errors={fields.termsOfService.errors} /> @@ -113,8 +125,7 @@ export default function Register() { Already have an account?{" "} + className="text-primary-1 text-md hover:underline hover:underline-offset-4"> Login here instead →

@@ -132,8 +143,7 @@ export default function Register() { @@ -143,8 +153,7 @@ export default function Register() { @@ -153,5 +162,5 @@ export default function Register() {
- ) + ); }