From c61e5550b81f982ea8576f025b33e054b3fa5db3 Mon Sep 17 00:00:00 2001
From: Derrick Hammer <derrick@derrickhammer.com>
Date: Tue, 26 Mar 2024 16:41:57 -0400
Subject: [PATCH] refactor: wire up verify email, change route, and make it
 authenticated

---
 app/routes/account_.verify.tsx | 102 +++++++++++++++++++++++++++++++++
 app/routes/verify.tsx          |  97 -------------------------------
 2 files changed, 102 insertions(+), 97 deletions(-)
 create mode 100644 app/routes/account_.verify.tsx
 delete mode 100644 app/routes/verify.tsx

diff --git a/app/routes/account_.verify.tsx b/app/routes/account_.verify.tsx
new file mode 100644
index 0000000..693ccda
--- /dev/null
+++ b/app/routes/account_.verify.tsx
@@ -0,0 +1,102 @@
+import type {MetaFunction} from "@remix-run/node";
+import {useSearchParams} from "@remix-run/react";
+import {Button} from "~/components/ui/button.js";
+import logoPng from "~/images/lume-logo.png?url";
+import lumeBgPng from "~/images/lume-bg-image.png?url";
+import {Authenticated, HttpError, useGetIdentity, useGo, useNotification} from "@refinedev/core";
+import {useEffect} from "react";
+import {useMutation, useQuery} from "@tanstack/react-query";
+import {useSdk} from "~/components/lib/sdk-context.js";
+import {Identity} from "~/data/auth-provider.js";
+
+export const meta: MetaFunction = () => {
+  return [{ title: "Verify Email" }];
+};
+
+export default function Verify() {
+  return (
+      <Authenticated v3LegacyAuthProviderCompatible key={""}>
+        <VerifyAuthenticated />
+      </Authenticated>
+  );
+}
+
+function VerifyAuthenticated() {
+    const go = useGo();
+    const {open} = useNotification();
+    const [searchParams] = useSearchParams();
+    const token = searchParams.get("token");
+    const sdk = useSdk();
+    const user = useGetIdentity<Identity>();
+
+    const exchangeToken = useQuery({
+        queryKey: ["exchange-token", token],
+        retry: false,
+        queryFn: async () => {
+            const ret= await sdk.account!().verifyEmail({
+                email: user.data?.email as string,
+                token: token!,
+            })
+
+            if (ret instanceof Error) {
+                return Promise.reject(ret)
+            }
+
+            return ret
+        },
+    });
+
+    const verifyAgain = useMutation({
+        mutationFn: () => {
+            return sdk.account!().requestEmailVerification()
+        },
+        onMutate() {
+            open?.({
+                type: "success",
+                message: "Email sent",
+                description: "Please check your email inbox and click the link",
+            })
+        }
+    });
+
+    useEffect(() => {
+        if (exchangeToken.isSuccess) {
+            go({ to: "/dashboard" });
+        }
+    }, [go, exchangeToken.isSuccess]);
+
+    return (
+      <div className="p-10 h-screen relative">
+          <header>
+              <img src={logoPng} alt="Lume logo" className="h-10"/>
+          </header>
+          <main className="flex flex-col items-center justify-center h-full">
+              <h1 className="text-2xl">
+                  {exchangeToken.isLoading
+                      ? "Verifying your email." : null}
+
+                  {exchangeToken.isSuccess && !exchangeToken.isLoading ? "Your email has been verified" : null}
+                  {exchangeToken.isError && !exchangeToken.isLoading ? "Something went wrong, please try again" : null}
+              </h1>
+              {exchangeToken.isError ? (
+                  <div>
+                      <p className="opacity-60">{exchangeToken.error.message}</p>
+                      <Button onClick={() => {
+                          verifyAgain.mutate()
+                      }}>
+                          Send verification email again
+                      </Button>
+                  </div>
+              ) : null}
+              {exchangeToken.isSuccess ? <p className="opacity-60">Redirecting to your dashboard</p> : null}
+          </main>
+          <div className="fixed inset-0 -z-10 overflow-clip">
+              <img
+                  src={lumeBgPng}
+                  alt="Lume background"
+                  className="absolute top-0 left-0 right-0 object-cover z-[-1]"
+              />
+          </div>
+      </div>
+  )
+}
diff --git a/app/routes/verify.tsx b/app/routes/verify.tsx
deleted file mode 100644
index 0571b24..0000000
--- a/app/routes/verify.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import type { MetaFunction } from "@remix-run/node";
-import { Link, useSearchParams } 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 { ToastAction } from "~/components/ui/toast";
-import { useGo, useNotification } from "@refinedev/core";
-import { useEffect } from "react";
-import { useMutation, useQuery } from "@tanstack/react-query";
-
-export const meta: MetaFunction = () => {
-  return [{ title: "Verify Email" }];
-};
-
-export default function Verify() {
-  const go = useGo();
-  const {open} = useNotification();
-  const [searchParams] = useSearchParams();
-  const token = searchParams.get("token");
-
-  const exchangeToken = useQuery({
-    queryKey: ["exchange-token", token],
-    queryFn: () => {
-      // TODO: api call to exchange token goes here
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve(true);
-        }, 5000);
-      });
-    },
-  });
-
-  const verifyAgain = useMutation({
-    mutationFn: () => {
-      // TODO: api call to verify again goes here
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve(true);
-        }, 5000);
-      });
-    },
-    onMutate() {
-        open?.({
-            type: "success",
-            message: "Email sent",
-            description: "Please check your email inbox and click the link",
-        })
-    }
-  });
-
-  useEffect(() => {
-    if (exchangeToken.isSuccess) {
-        go({ to: "/dashboard" });
-    }
-  }, [go, exchangeToken.isSuccess]);
-
-  return (
-    <div className="p-10 h-screen relative">
-      <header>
-        <img src={logoPng} alt="Lume logo" className="h-10" />
-      </header>
-      <main className="flex flex-col items-center justify-center h-full">
-        <h1 className="text-2xl">
-          {exchangeToken.isLoading
-            ? "Verifying your email." : null}
-
-         {exchangeToken.isSuccess && !exchangeToken.isLoading ? "Your email has been verified" : null}
-         {exchangeToken.isError && !exchangeToken.isLoading ? "Something went wrong, please try again" : null}
-        </h1>
-        {exchangeToken.isError ? (
-            <div>
-                <p className="opacity-60">{exchangeToken.error.message}</p>
-                <Button onClick={() => {
-                    verifyAgain.mutate()
-                }}>
-                    Send verification email again
-                </Button>
-            </div>
-        ) : null}
-        {exchangeToken.isSuccess ? <p className="opacity-60">Redirecting to your dashboard</p> : null}
-      </main>
-      <div className="fixed inset-0 -z-10 overflow-clip">
-        <img
-          src={lumeBgPng}
-          alt="Lume background"
-          className="absolute top-0 left-0 right-0 object-cover z-[-1]"
-        />
-      </div>
-    </div>
-  );
-}