Add confirm email to the new ui

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/console/src/pages/auth/ConfirmEmailPage.tsx

@@ -0,0 +1,154 @@
+import { useState, useEffect } from "react";
+import { useLocation, useNavigate, Link } from "react-router";
+import { Button, Field, useToast } from "@probo/ui";
+import { useTranslate } from "@probo/i18n";
+import { useMutation } from "react-relay";
+import { graphql } from "relay-runtime";
+import type { PayloadError } from "relay-runtime";
+import { z } from "zod";
+import { useFormWithSchema } from "/hooks/useFormWithSchema";
+import { usePageTitle } from "@probo/hooks";
+import type { ConfirmEmailPageMutation } from "./__generated__/ConfirmEmailPageMutation.graphql";
+
+const ConfirmEmailMutation = graphql`
+  mutation ConfirmEmailPageMutation($input: ConfirmEmailInput!) {
+    confirmEmail(input: $input) {
+      success
+    }
+  }
+`;
+
+const confirmEmailSchema = z.object({
+  token: z.string().min(1, "Please enter a confirmation token"),
+});
+
+export default function ConfirmEmailPage() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isConfirmed, setIsConfirmed] = useState(false);
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { __ } = useTranslate();
+  const { toast } = useToast();
+  const [commitMutation] =
+    useMutation<ConfirmEmailPageMutation>(ConfirmEmailMutation);
+
+  const form = useFormWithSchema(confirmEmailSchema, {
+    defaultValues: {
+      token: "",
+    },
+  });
+
+  usePageTitle(__("Confirm Email"));
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+    const urlToken = searchParams.get("token");
+
+    if (urlToken) {
+      form.setValue("token", urlToken);
+    }
+  }, [location.search, form]);
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    setIsLoading(true);
+
+    try {
+      commitMutation({
+        variables: {
+          input: {
+            token: data.token.trim(),
+          },
+        },
+        onCompleted: (_response, errors: PayloadError[] | null) => {
+          if (errors) {
+            toast({
+              title: __("Error"),
+              description: errors[0]?.message || __("Failed to confirm email"),
+              variant: "error",
+            });
+            setIsLoading(false);
+            return;
+          }
+
+          setIsConfirmed(true);
+          toast({
+            title: __("Success"),
+            description: __("Your email has been confirmed successfully"),
+            variant: "success",
+          });
+          setIsLoading(false);
+        },
+        onError: (err) => {
+          toast({
+            title: __("Error"),
+            description: err.message || __("Failed to confirm email. Please try again."),
+            variant: "error",
+          });
+          setIsLoading(false);
+        },
+      });
+    } catch (error) {
+      toast({
+        title: __("Error"),
+        description: error instanceof Error ? error.message : __("Failed to confirm email. Please try again."),
+        variant: "error",
+      });
+      setIsLoading(false);
+    }
+  });
+
+  return (
+    <div className="space-y-6 w-full max-w-md mx-auto">
+      <div className="space-y-2 text-center">
+        <h1 className="text-3xl font-bold">{__("Email Confirmation")}</h1>
+        <p className="text-txt-tertiary">
+          {__("Confirm your email address to complete registration")}
+        </p>
+      </div>
+
+      {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("/auth/login")} className="w-full">
+            {__("Proceed to Login")}
+          </Button>
+        </div>
+      ) : (
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <Field
+            label={__("Confirmation Token")}
+            type="text"
+            placeholder={__("Enter your confirmation token")}
+            {...form.register("token")}
+            error={form.formState.errors.token?.message}
+            disabled={isLoading}
+            help={__("The token has been automatically filled from the URL if available")}
+          />
+
+          <Button
+            type="submit"
+            className="w-full"
+            disabled={isLoading}
+          >
+            {isLoading ? __("Confirming...") : __("Confirm Email")}
+          </Button>
+        </form>
+      )}
+
+      <div className="text-center">
+        {!isConfirmed && (
+          <p className="text-sm text-txt-tertiary">
+            <Link
+              to="/auth/login"
+              className="underline text-txt-primary hover:text-txt-secondary"
+            >
+              {__("Back to Login")}
+            </Link>
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

apps/console/src/pages/auth/__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;

apps/console/src/routes.tsx

@@ -62,6 +62,10 @@ const routes = [
         path: "register",
         Component: lazy(() => import("./pages/auth/RegisterPage")),
       },
+      {
+        path: "confirm-email",
+        Component: lazy(() => import("./pages/auth/ConfirmEmailPage")),
+      },
     ],
   },
   {

pkg/usrmgr/usrmgr.go

@@ -295,7 +295,7 @@ func (s Service) SignUp(
 	confirmationEmailUrl := url.URL{
 		Scheme: "https",
 		Host:   s.hostname,
-		Path:   "/confirm-email",
+		Path:   "/auth/confirm-email",
 		RawQuery: url.Values{
 			"token": []string{confirmationToken},
 		}.Encode(),