app/routes/account_.verify.tsx

@@ -1,102 +0,0 @@
-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>
-  )
-}

app/routes/verify.tsx

@@ -0,0 +1,97 @@
+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>
+  );
+}

package.json

@@ -17,7 +17,7 @@
     "@conform-to/zod": "^1.0.2",
     "@fontsource-variable/manrope": "^5.0.19",
     "@radix-ui/react-accordion": "^1.1.2",
-    "@lumeweb/portal-sdk": "0.0.0-20240326204600",
+    "@lumeweb/portal-sdk": "0.0.0-20240326154759",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",