diff --git a/app/routes/reset-password.tsx b/app/routes/reset-password.tsx index 94d3c80..15dc865 100644 --- a/app/routes/reset-password.tsx +++ b/app/routes/reset-password.tsx @@ -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 (
@@ -34,8 +39,7 @@ export default function RecoverPassword() {
+ {...getFormProps(form)}>

Reset your password

@@ -48,8 +52,7 @@ export default function RecoverPassword() {

+ className="text-primary-1 text-md hover:underline hover:underline-offset-4"> ← Back to Login

@@ -67,8 +70,7 @@ export default function RecoverPassword() { @@ -78,8 +80,7 @@ export default function RecoverPassword() { @@ -88,5 +89,5 @@ export default function RecoverPassword() {
- ) + ); }