Plug forgot password page

Signed-off-by: Émile Ré <emile@getprobo.com>

apps/console/src/__generated__/iam/ForgotPasswordPageMutation.graphql.ts

@@ -0,0 +1,92 @@
+/**
+ * @generated SignedSource<<a089ede7865d3d5f828ac7df7d3a2286>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type ForgotPasswordInput = {
+  email: string;
+};
+export type ForgotPasswordPageMutation$variables = {
+  input: ForgotPasswordInput;
+};
+export type ForgotPasswordPageMutation$data = {
+  readonly forgotPassword: {
+    readonly success: boolean;
+  } | null | undefined;
+};
+export type ForgotPasswordPageMutation = {
+  response: ForgotPasswordPageMutation$data;
+  variables: ForgotPasswordPageMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "ForgotPasswordPayload",
+    "kind": "LinkedField",
+    "name": "forgotPassword",
+    "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": "ForgotPasswordPageMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "ForgotPasswordPageMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "bb493ef26d51e7d560857008669c2ec5",
+    "id": null,
+    "metadata": {},
+    "name": "ForgotPasswordPageMutation",
+    "operationKind": "mutation",
+    "text": "mutation ForgotPasswordPageMutation(\n  $input: ForgotPasswordInput!\n) {\n  forgotPassword(input: $input) {\n    success\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "de03243068e655c7f48b7e96e145a617";
+
+export default node;

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

@@ -1,132 +0,0 @@
-import { Link } from "react-router";
-import { Button, Field, useToast } from "@probo/ui";
-import { useTranslate } from "@probo/i18n";
-import { z } from "zod";
-import { useFormWithSchema } from "/hooks/useFormWithSchema";
-import { usePageTitle } from "@probo/hooks";
-import { useState } from "react";
-
-const schema = z.object({
-  email: z.string().email(),
-});
-
-export default function ForgotPasswordPage() {
-  const { __ } = useTranslate();
-  const { toast } = useToast();
-  const [isSubmitted, setIsSubmitted] = useState(false);
-  const { register, handleSubmit, formState } = useFormWithSchema(schema, {
-    defaultValues: {
-      email: "",
-    },
-  });
-
-  const onSubmit = handleSubmit(async (data) => {
-    const response = await fetch("/connect/forget-password", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      credentials: "include",
-      body: JSON.stringify(data),
-    });
-
-    if (!response.ok) {
-      const errorData = await response.json().catch(() => ({}));
-      toast({
-        title: __("Request failed"),
-        description:
-          errorData.message || __("Failed to send reset instructions"),
-        variant: "error",
-      });
-      return;
-    }
-
-    toast({
-      title: __("Success"),
-      description: __("Password reset instructions sent to your email"),
-      variant: "success",
-    });
-    setIsSubmitted(true);
-  });
-
-  usePageTitle(__("Forgot Password"));
-
-  if (isSubmitted) {
-    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">{__("Check your email")}</h1>
-          <p className="text-txt-tertiary">
-            {__("We've sent password reset instructions to your email address")}
-          </p>
-        </div>
-
-        <div className="text-center">
-          <p className="text-sm text-txt-tertiary">
-            {__("Didn't receive the email?")}{" "}
-            <button
-              onClick={() => setIsSubmitted(false)}
-              className="underline text-txt-primary hover:text-txt-secondary"
-            >
-              {__("Try again")}
-            </button>
-          </p>
-        </div>
-
-        <div className="text-center">
-          <p className="text-sm text-txt-tertiary">
-            {__("Remember your password?")}{" "}
-            <Link
-              to="/auth/login"
-              className="underline text-txt-primary hover:text-txt-secondary"
-            >
-              {__("Back to login")}
-            </Link>
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  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">{__("Forgot Password")}</h1>
-        <p className="text-txt-tertiary">
-          {__(
-            "Enter your email address and we'll send you instructions to reset your password"
-          )}
-        </p>
-      </div>
-
-      <form onSubmit={onSubmit} className="space-y-4">
-        <Field
-          label={__("Email")}
-          type="email"
-          placeholder={__("name@example.com")}
-          {...register("email")}
-          required
-          error={formState.errors.email?.message}
-        />
-
-        <Button type="submit" className="w-full" disabled={formState.isLoading}>
-          {formState.isLoading
-            ? __("Sending instructions...")
-            : __("Send reset instructions")}
-        </Button>
-      </form>
-
-      <div className="text-center">
-        <p className="text-sm text-txt-tertiary">
-          {__("Remember your password?")}{" "}
-          <Link
-            to="/auth/login"
-            className="underline text-txt-primary hover:text-txt-secondary"
-          >
-            {__("Back to login")}
-          </Link>
-        </p>
-      </div>
-    </div>
-  );
-}

apps/console/src/pages/iam/auth/ForgotPasswordPage.tsx

@@ -0,0 +1,142 @@
+import { usePageTitle } from "@probo/hooks";
+import { useTranslate } from "@probo/i18n";
+import { Button, Field, useToast } from "@probo/ui";
+import { useState } from "react";
+import { Link } from "react-router";
+import { useFormWithSchema } from "/hooks/useFormWithSchema";
+import z from "zod";
+import { graphql } from "relay-runtime";
+import { useMutation } from "react-relay";
+import type { ForgotPasswordPageMutation } from "/__generated__/iam/ForgotPasswordPageMutation.graphql";
+
+const sendInstructionsMutation = graphql`
+  mutation ForgotPasswordPageMutation($input: ForgotPasswordInput!) {
+    forgotPassword(input: $input) {
+      success
+    }
+  }
+`;
+
+const schema = z.object({
+  email: z.string().email(),
+});
+
+export default function ForgotPasswordPage() {
+  const { toast } = useToast();
+  const { __ } = useTranslate();
+
+  usePageTitle(__("Forgot Password"));
+
+  const [instructionsSent, setInstructionsSent] = useState<boolean>();
+  const { register, handleSubmit, formState } = useFormWithSchema(schema, {
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  const [sendInstructions] = useMutation<ForgotPasswordPageMutation>(
+    sendInstructionsMutation,
+  );
+
+  const onSubmit = handleSubmit(async ({ email }) => {
+    sendInstructions({
+      variables: {
+        input: { email },
+      },
+      onError: (e: Error) => {
+        toast({
+          title: __("Request failed"),
+          description: e.message || __("Failed to send reset instructions"),
+          variant: "error",
+        });
+      },
+      onCompleted: () => {
+        toast({
+          title: __("Success"),
+          description: __("Password reset instructions sent to your email"),
+          variant: "success",
+        });
+        setInstructionsSent(true);
+      },
+    });
+  });
+
+  return instructionsSent ? (
+    <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">{__("Check your email")}</h1>
+        <p className="text-txt-tertiary">
+          {__("We've sent password reset instructions to your email address")}
+        </p>
+      </div>
+
+      <div className="text-center">
+        <p className="text-sm text-txt-tertiary">
+          {__("Didn't receive the email?")}{" "}
+          <button
+            onClick={() => setInstructionsSent(false)}
+            className="underline text-txt-primary hover:text-txt-secondary"
+          >
+            {__("Try again")}
+          </button>
+        </p>
+      </div>
+
+      <div className="text-center">
+        <p className="text-sm text-txt-tertiary">
+          {__("Remember your password?")}{" "}
+          <Link
+            to="/auth/login"
+            className="underline text-txt-primary hover:text-txt-secondary"
+          >
+            {__("Back to login")}
+          </Link>
+        </p>
+      </div>
+    </div>
+  ) : (
+    <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">{__("Forgot Password")}</h1>
+        <p className="text-txt-tertiary">
+          {__(
+            "Enter your email address and we'll send you instructions to reset your password",
+          )}
+        </p>
+      </div>
+
+      <form onSubmit={onSubmit} className="space-y-4">
+        <Field
+          label={__("Email")}
+          type="email"
+          placeholder={__("name@example.com")}
+          {...register("email")}
+          required
+          error={formState.errors.email?.message}
+        />
+
+        <Button
+          type="submit"
+          className="w-full"
+          disabled={formState.isSubmitting}
+        >
+          {formState.isSubmitting
+            ? __("Sending instructions...")
+            : __("Send reset instructions")}
+        </Button>
+      </form>
+
+      <div className="text-center">
+        <p className="text-sm text-txt-tertiary">
+          {__("Remember your password?")}{" "}
+          <Link
+            to="/auth/login"
+            className="underline text-txt-primary hover:text-txt-secondary"
+          >
+            {__("Back to login")}
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

apps/console/src/routes.tsx

@@ -93,7 +93,7 @@ const routes = [
       },
       {
         path: "forgot-password",
-        Component: lazy(() => import("./pages/auth/ForgotPasswordPage")),
+        Component: lazy(() => import("./pages/iam/auth/ForgotPasswordPage")),
       },
       {
         path: "reset-password",