fix: formatting

app/routes/reset-password.tsx

@@ -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 = () => {
-  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() {
   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>
-  )
+  );
 }