From a61fe195ee4cea7d09b37d9d9481f28d49a365b3 Mon Sep 17 00:00:00 2001
From: Juan Di Toro <ditorojuanf@gmail.com>
Date: Fri, 22 Mar 2024 14:04:22 +0100
Subject: [PATCH] fix: closes #8

---
 app/routes/login.otp.tsx | 69 +++++++++++++++++++++++++++++++
 app/routes/login.tsx     | 87 +++++-----------------------------------
 2 files changed, 79 insertions(+), 77 deletions(-)
 create mode 100644 app/routes/login.otp.tsx

diff --git a/app/routes/login.otp.tsx b/app/routes/login.otp.tsx
new file mode 100644
index 0000000..0002c40
--- /dev/null
+++ b/app/routes/login.otp.tsx
@@ -0,0 +1,69 @@
+import { getFormProps, useForm } from "@conform-to/react";
+import { getZodConstraint, parseWithZod } from "@conform-to/zod";
+import { useGo, useIsAuthenticated, useParsed } from "@refinedev/core";
+import { Link } from "@remix-run/react";
+import { useEffect } from "react";
+import { z } from "zod";
+import { Field } from "~/components/forms";
+import { Button } from "~/components/ui/button";
+import type { LoginParams } from "./login";
+
+const OtpSchema = z.object({
+  otp: z.string().length(6, { message: "OTP must be 6 characters" }),
+});
+
+export default function OtpForm() {
+  const { isLoading: isAuthLoading, data: authData } = useIsAuthenticated();
+  const go = useGo();
+  const parsed = useParsed<LoginParams>();
+  // TODO: Add support for resending the OTP
+  const [form, fields] = useForm({
+    id: "otp",
+    constraint: getZodConstraint(OtpSchema),
+    onValidate({ formData }) {
+      return parseWithZod(formData, { schema: OtpSchema });
+    },
+    shouldValidate: "onSubmit",
+  });
+  const valid = true;
+  const to = parsed.params?.to ?? "/dashboard";
+
+  useEffect(() => {
+    if (!isAuthLoading) {
+      if (authData?.authenticated && valid) {
+        go({ to, type: "push" });
+      }
+    }
+  }, [isAuthLoading, authData, to, go]);
+
+  return (
+    <form
+      className="w-full p-2 max-w-md mt-12 bg-background"
+      {...getFormProps(form)}>
+      <span className="block !mb-8 space-y-2">
+        <h2 className="text-3xl font-bold">Check your inbox</h2>
+        <p className="text-input-placeholder">
+          We will need the six digit confirmation code you received in your
+          email in order to verify your account and get started. Didn’t receive
+          a code?{" "}
+          <Button type="button" variant={"link"} className="text-md h-0">
+            Resend now →
+          </Button>
+        </p>
+      </span>
+      <Field
+        inputProps={{ name: fields.otp.name }}
+        labelProps={{ children: "Confirmation Code" }}
+        errors={fields.otp.errors}
+      />
+      <Button className="w-full h-14">Verify</Button>
+      <p className="text-input-placeholder w-full text-left">
+        <Link
+          to="/login"
+          className="text-primary-1 text-md hover:underline hover:underline-offset-4">
+          ← Back to Login
+        </Link>
+      </p>
+    </form>
+  );
+}
diff --git a/app/routes/login.tsx b/app/routes/login.tsx
index b87b001..8c4a480 100644
--- a/app/routes/login.tsx
+++ b/app/routes/login.tsx
@@ -1,5 +1,5 @@
 import type { MetaFunction } from "@remix-run/node";
-import { Link, useLocation } from "@remix-run/react";
+import { Link } from "@remix-run/react";
 import { z } from "zod";
 import { Button } from "~/components/ui/button";
 import logoPng from "~/images/lume-logo.png?url";
@@ -11,7 +11,6 @@ import { getFormProps, useForm } from "@conform-to/react";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
 import {
   useGo,
-  useIsAuthenticated,
   useLogin,
   useParsed,
 } from "@refinedev/core";
@@ -25,30 +24,11 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-type LoginParams = {
+export type LoginParams = {
   to: string;
 };
 
 export default function Login() {
-  const location = useLocation();
-  const { isLoading: isAuthLoading, data: authData } = useIsAuthenticated();
-  const hash = location.hash;
-  const go = useGo();
-  const parsed = useParsed<LoginParams>();
-
-  useEffect(() => {
-    if (!isAuthLoading) {
-      if (authData?.authenticated) {
-        let to = "/dashboard";
-        if (parsed.params?.to) {
-          to = parsed.params.to;
-        }
-
-        go({ to, type: "push" });
-      }
-    }
-  }, [isAuthLoading, authData, parsed, go]);
-
   return (
     <div className="p-10 h-screen relative">
       <header>
@@ -62,8 +42,7 @@ export default function Login() {
         />
       </div>
 
-      {hash === "" && <LoginForm />}
-      {hash === "#otp" && <OtpForm />}
+      <LoginForm />
 
       <footer className="my-5">
         <ul className="flex flex-row">
@@ -101,6 +80,7 @@ const LoginSchema = z.object({
 
 const LoginForm = () => {
   const login = useLogin<AuthFormRequest>();
+  const go = useGo();
   const parsed = useParsed<LoginParams>();
   const [form, fields] = useForm({
     id: "login",
@@ -124,6 +104,12 @@ const LoginForm = () => {
     },
   });
 
+  useEffect(() => {
+    if (form.status === "success") {
+      go({ to: "/login/otp", type: "push" });
+    }
+  }, [form.status, go]);
+
   return (
     <form
       className="w-full p-2 max-w-md space-y-3 mt-12 bg-background"
@@ -161,56 +147,3 @@ const LoginForm = () => {
     </form>
   );
 };
-
-const OtpSchema = z.object({
-  otp: z.string().length(6, { message: "OTP must be 6 characters" }),
-});
-
-const OtpForm = () => {
-  // TODO: Add support for resending the OTP
-  const [form, fields] = useForm({
-    id: "otp",
-    constraint: getZodConstraint(OtpSchema),
-    onValidate({ formData }) {
-      return parseWithZod(formData, { schema: OtpSchema });
-    },
-    shouldValidate: "onSubmit",
-  });
-  const valid = false; // TODO: some sort of logic to verify user is on OTP state validly
-
-  if (!valid) {
-    location.hash = "";
-    return null;
-  }
-
-  return (
-    <form
-      className="w-full p-2 max-w-md mt-12 bg-background"
-      {...getFormProps(form)}>
-      <span className="block !mb-8 space-y-2">
-        <h2 className="text-3xl font-bold">Check your inbox</h2>
-        <p className="text-input-placeholder">
-          We will need the six digit confirmation code you received in your
-          email in order to verify your account and get started. Didn’t receive
-          a code?{" "}
-          <Button type="button" variant={"link"} className="text-md h-0">
-            Resend now →
-          </Button>
-        </p>
-      </span>
-      <Field
-        inputProps={{ name: fields.otp.name }}
-        labelProps={{ children: "Confirmation Code" }}
-        errors={fields.otp.errors}
-      />
-      <Button className="w-full h-14">Verify</Button>
-      <p className="text-input-placeholder w-full text-left">
-        <Link
-          to="/login"
-          className="text-primary-1 text-md hover:underline hover:underline-offset-4">
-          ← Back to Login
-        </Link>
-      </p>
-    </form>
-  );
-};