fix: formatting

This commit is contained in:
Juan Di Toro 2024-03-14 16:41:48 +01:00
parent 5f97e8c7d8
commit a1e73b8ed8
1 changed files with 30 additions and 29 deletions

View File

@ -1,31 +1,36 @@
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 } from "~/components/forms" import { Field } 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";
export const meta: MetaFunction = () => { export const meta: MetaFunction = () => {
return [{ title: "Sign Up" }] return [{ title: "Sign Up" }];
} };
const RecoverPasswordSchema = z const RecoverPasswordSchema = z.object({
.object({ email: z.string().email(),
email: z.string().email(), });
})
export default function RecoverPassword() { export default function RecoverPassword() {
const [form, fields] = useForm({ const [form, fields] = useForm({
id: "sign-up", id: "sign-up",
constraint: getZodConstraint(RecoverPasswordSchema), constraint: getZodConstraint(RecoverPasswordSchema),
onValidate({ formData }) { onValidate({ formData }) {
return parseWithZod(formData, { schema: RecoverPasswordSchema }) return parseWithZod(formData, { schema: RecoverPasswordSchema });
} },
}) });
// TODO: another detail is the reset password has no screen to either accept a new pass or
// just say an email has been sent.. if i were to generate a pass for them. imho i think
// a screen that just says a password reset email has been sent would be good, then a separate
// route to accept the reset token and send that to the api when would then trigger a new email
// with the pass.
return ( return (
<div className="p-10 h-screen relative"> <div className="p-10 h-screen relative">
@ -34,8 +39,7 @@ export default function RecoverPassword() {
</header> </header>
<form <form
className="w-full p-2 max-w-md space-y-4 mt-12 bg-background" 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"> <span className="!mb-12 space-y-2">
<h2 className="text-3xl font-bold">Reset your password</h2> <h2 className="text-3xl font-bold">Reset your password</h2>
</span> </span>
@ -48,8 +52,7 @@ export default function RecoverPassword() {
<p className="text-input-placeholder w-full text-left"> <p className="text-input-placeholder w-full text-left">
<Link <Link
to="/login" 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">
>
Back to Login Back to Login
</Link> </Link>
</p> </p>
@ -67,8 +70,7 @@ export default function RecoverPassword() {
<Link to="https://discord.lumeweb.com"> <Link to="https://discord.lumeweb.com">
<Button <Button
variant={"link"} 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" /> <img className="h-5" src={discordLogoPng} alt="Discord Logo" />
Connect with us Connect with us
</Button> </Button>
@ -78,8 +80,7 @@ export default function RecoverPassword() {
<Link to="https://lumeweb.com"> <Link to="https://lumeweb.com">
<Button <Button
variant={"link"} 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" /> <img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
Connect with us Connect with us
</Button> </Button>
@ -88,5 +89,5 @@ export default function RecoverPassword() {
</ul> </ul>
</footer> </footer>
</div> </div>
) );
} }