Add email confirmation

Signed-off-by: gearnode <bryan@frimin.fr>

apps/console/src/App.tsx

@@ -40,6 +40,7 @@ const ControlOverviewPage = lazy(() => import("./pages/ControlOverviewPage"));
 const PeopleOverviewPage = lazy(() => import("./pages/PeopleOverviewPage"));
 const LoginPage = lazy(() => import("./pages/LoginPage"));
 const RegisterPage = lazy(() => import("./pages/RegisterPage"));
+const ConfirmEmailPage = lazy(() => import("./pages/ConfirmEmailPage"));
 const CreateOrganizationPage = lazy(
   () => import("./pages/CreateOrganizationPage")
 );
@@ -103,6 +104,26 @@ function App() {
                     />
                   </Route>
 
+                  <Route
+                    path="/confirm-email"
+                    element={
+                      <ErrorBoundaryWithLocation>
+                        <AuthLayout />
+                      </ErrorBoundaryWithLocation>
+                    }
+                  >
+                    <Route
+                      index
+                      element={
+                        <Suspense>
+                          <ErrorBoundaryWithLocation>
+                            <ConfirmEmailPage />
+                          </ErrorBoundaryWithLocation>
+                        </Suspense>
+                      }
+                    />
+                  </Route>
+
                   <Route
                     path="/"
                     element={

apps/console/src/pages/ConfirmEmailPage.tsx

@@ -0,0 +1,170 @@
+import { useState, useEffect } from "react";
+import { useLocation, useNavigate } from "react-router";
+import { Helmet } from "react-helmet-async";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/hooks/use-toast";
+import { Link } from "react-router";
+import { useMutation } from "react-relay";
+import { graphql } from "relay-runtime";
+import { PayloadError } from "relay-runtime";
+import { ConfirmEmailPageMutation } from "./__generated__/ConfirmEmailPageMutation.graphql";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+const ConfirmEmailMutation = graphql`
+  mutation ConfirmEmailPageMutation($input: ConfirmEmailInput!) {
+    confirmEmail(input: $input) {
+      success
+    }
+  }
+`;
+
+export default function ConfirmEmailPage() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isConfirmed, setIsConfirmed] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [token, setToken] = useState<string>("");
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const [commitMutation] =
+    useMutation<ConfirmEmailPageMutation>(ConfirmEmailMutation);
+
+  useEffect(() => {
+    // Extract token from URL and prefill the form
+    const searchParams = new URLSearchParams(location.search);
+    const urlToken = searchParams.get("token");
+
+    if (urlToken) {
+      setToken(urlToken);
+    }
+  }, [location.search]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+
+    if (!token.trim()) {
+      setError("Please enter a confirmation token");
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      commitMutation({
+        variables: {
+          input: {
+            token: token.trim(),
+          },
+        },
+        onCompleted: (response, errors: PayloadError[] | null) => {
+          if (errors) {
+            throw new Error(errors[0]?.message || "Failed to confirm email");
+          }
+
+          setIsConfirmed(true);
+          toast({
+            title: "Success",
+            description: "Your email has been confirmed successfully",
+          });
+
+          setIsLoading(false);
+        },
+        onError: (err) => {
+          setError(err.message || "Failed to confirm email. Please try again.");
+          setIsLoading(false);
+        },
+      });
+    } catch (error) {
+      setError(
+        error instanceof Error
+          ? error.message
+          : "Failed to confirm email. Please try again."
+      );
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>Confirm Email - Probo</title>
+      </Helmet>
+
+      <div className="flex flex-col items-center justify-center min-h-[70vh] p-4">
+        <Card className="w-full max-w-md">
+          <CardHeader>
+            <CardTitle className="text-2xl font-bold text-center">
+              Email Confirmation
+            </CardTitle>
+            <CardDescription className="text-center">
+              Confirm your email address to complete registration
+            </CardDescription>
+          </CardHeader>
+
+          <CardContent>
+            {isConfirmed ? (
+              <div className="space-y-4 text-center">
+                <p className="text-green-600 dark:text-green-400">
+                  Your email has been confirmed successfully!
+                </p>
+                <Button onClick={() => navigate("/login")} className="w-full">
+                  Proceed to Login
+                </Button>
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit} className="space-y-4">
+                {error && (
+                  <div className="p-3 text-sm text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400 rounded-md">
+                    {error}
+                  </div>
+                )}
+
+                <div className="space-y-2">
+                  <Label htmlFor="token">Confirmation Token</Label>
+                  <Input
+                    id="token"
+                    type="text"
+                    value={token}
+                    onChange={(e) => setToken(e.target.value)}
+                    placeholder="Enter your confirmation token"
+                    disabled={isLoading}
+                    required
+                  />
+                  <p className="text-xs text-gray-500 dark:text-gray-400">
+                    The token has been automatically filled from the URL if
+                    available
+                  </p>
+                </div>
+
+                <Button type="submit" className="w-full" disabled={isLoading}>
+                  {isLoading ? "Confirming..." : "Confirm Email"}
+                </Button>
+              </form>
+            )}
+          </CardContent>
+
+          <CardFooter className="flex justify-center">
+            {!isConfirmed && (
+              <Link
+                to="/login"
+                className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+              >
+                Back to Login
+              </Link>
+            )}
+          </CardFooter>
+        </Card>
+      </div>
+    </>
+  );
+}

apps/console/src/pages/__generated__/ConfirmEmailPageMutation.graphql.ts

@@ -0,0 +1,92 @@
+/**
+ * @generated SignedSource<<3de8e69abff0cf5f1000d93dde7a3031>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type ConfirmEmailInput = {
+  token: string;
+};
+export type ConfirmEmailPageMutation$variables = {
+  input: ConfirmEmailInput;
+};
+export type ConfirmEmailPageMutation$data = {
+  readonly confirmEmail: {
+    readonly success: boolean;
+  };
+};
+export type ConfirmEmailPageMutation = {
+  response: ConfirmEmailPageMutation$data;
+  variables: ConfirmEmailPageMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "ConfirmEmailPayload",
+    "kind": "LinkedField",
+    "name": "confirmEmail",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "success",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "ConfirmEmailPageMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "ConfirmEmailPageMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "b6bde3a559a4ecb70a519ffb7fa83330",
+    "id": null,
+    "metadata": {},
+    "name": "ConfirmEmailPageMutation",
+    "operationKind": "mutation",
+    "text": "mutation ConfirmEmailPageMutation(\n  $input: ConfirmEmailInput!\n) {\n  confirmEmail(input: $input) {\n    success\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "e7f442b5acc6d912bf272ca2f5dc1ef1";
+
+export default node;