fix: formatting
This commit is contained in:
parent
5f97e8c7d8
commit
a1e73b8ed8
|
@ -1,31 +1,36 @@
|
|||
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 } 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 } 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 RecoverPasswordSchema = z
|
||||
.object({
|
||||
email: z.string().email(),
|
||||
})
|
||||
const RecoverPasswordSchema = z.object({
|
||||
email: z.string().email(),
|
||||
});
|
||||
export default function RecoverPassword() {
|
||||
const [form, fields] = useForm({
|
||||
id: "sign-up",
|
||||
constraint: getZodConstraint(RecoverPasswordSchema),
|
||||
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 (
|
||||
<div className="p-10 h-screen relative">
|
||||
|
@ -34,8 +39,7 @@ export default function RecoverPassword() {
|
|||
</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">Reset your password</h2>
|
||||
</span>
|
||||
|
@ -48,8 +52,7 @@ export default function RecoverPassword() {
|
|||
<p className="text-input-placeholder w-full text-left">
|
||||
<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">
|
||||
← Back to Login
|
||||
</Link>
|
||||
</p>
|
||||
|
@ -67,8 +70,7 @@ export default function RecoverPassword() {
|
|||
<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>
|
||||
|
@ -78,8 +80,7 @@ export default function RecoverPassword() {
|
|||
<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>
|
||||
|
@ -88,5 +89,5 @@ export default function RecoverPassword() {
|
|||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue