feat: add first and last name to register form
This commit is contained in:
Juan Di Toro
parent
99ac9533f0
commit
d07dbff31f
|
|
@ -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 (
|
||||
<div className="p-10 h-screen relative">
|
||||
|
|
@ -54,21 +56,33 @@ export default function Register() {
|
|||
</header>
|
||||
<form
|
||||
className="w-full p-2 max-w-md space-y-4 mt-12 bg-background"
|
||||
{...getFormProps(form)}
|
||||
>
|
||||
{...getFormProps(form)}>
|
||||
<span className="!mb-12 space-y-2">
|
||||
<h2 className="text-3xl font-bold">All roads lead to Lume</h2>
|
||||
<p className="text-input-placeholder">
|
||||
🤘 Get 50 GB free storage and download for free,{" "}
|
||||
<b
|
||||
className="text-primar
|
||||
y-2"
|
||||
>
|
||||
y-2">
|
||||
forever
|
||||
</b>
|
||||
.{" "}
|
||||
</p>
|
||||
</span>
|
||||
<div className="flex gap-4">
|
||||
<Field
|
||||
className="flex-1"
|
||||
inputProps={{ name: fields.firstName.name }}
|
||||
labelProps={{ children: "First Name" }}
|
||||
errors={fields.firstName.errors}
|
||||
/>
|
||||
<Field
|
||||
className="flex-1"
|
||||
inputProps={{ name: fields.lastName.name }}
|
||||
labelProps={{ children: "Last Name" }}
|
||||
errors={fields.lastName.errors}
|
||||
/>
|
||||
</div>
|
||||
<Field
|
||||
inputProps={{ name: fields.email.name }}
|
||||
labelProps={{ children: "Email" }}
|
||||
|
|
@ -92,19 +106,17 @@ export default function Register() {
|
|||
I agree to the
|
||||
<Link
|
||||
to="/terms-of-service"
|
||||
className="text-primary-1 text-md hover:underline hover:underline-offset-4 mx-1"
|
||||
>
|
||||
className="text-primary-1 text-md hover:underline hover:underline-offset-4 mx-1">
|
||||
Terms of Service
|
||||
</Link>
|
||||
and
|
||||
<Link
|
||||
to="/privacy-policy"
|
||||
className="text-primary-1 text-md hover:underline hover:underline-offset-4 mx-1"
|
||||
>
|
||||
className="text-primary-1 text-md hover:underline hover:underline-offset-4 mx-1">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</span>
|
||||
)
|
||||
),
|
||||
}}
|
||||
errors={fields.termsOfService.errors}
|
||||
/>
|
||||
|
|
@ -113,8 +125,7 @@ export default function Register() {
|
|||
Already have an account?{" "}
|
||||
<Link
|
||||
to="/login"
|
||||
className="text-primary-1 text-md hover:underline hover:underline-offset-4"
|
||||
>
|
||||
className="text-primary-1 text-md hover:underline hover:underline-offset-4">
|
||||
Login here instead →
|
||||
</Link>
|
||||
</p>
|
||||
|
|
@ -132,8 +143,7 @@ export default function Register() {
|
|||
<Link to="https://discord.lumeweb.com">
|
||||
<Button
|
||||
variant={"link"}
|
||||
className="flex flex-row gap-x-2 text-input-placeholder"
|
||||
>
|
||||
className="flex flex-row gap-x-2 text-input-placeholder">
|
||||
<img className="h-5" src={discordLogoPng} alt="Discord Logo" />
|
||||
Connect with us
|
||||
</Button>
|
||||
|
|
@ -143,8 +153,7 @@ export default function Register() {
|
|||
<Link to="https://lumeweb.com">
|
||||
<Button
|
||||
variant={"link"}
|
||||
className="flex flex-row gap-x-2 text-input-placeholder"
|
||||
>
|
||||
className="flex flex-row gap-x-2 text-input-placeholder">
|
||||
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
|
||||
Connect with us
|
||||
</Button>
|
||||
|
|
@ -153,5 +162,5 @@ export default function Register() {
|
|||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue