Fix sign up and accept invite

Signed-off-by: Émile Ré <nemile.re@gmail.com>

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

@@ -0,0 +1,118 @@
+/**
+ * @generated SignedSource<<8c8ece60966bd2f39668d4ee4459ae86>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type AcceptInvitationInput = {
+  invitationId: string;
+};
+export type InvitationCardMutation$variables = {
+  input: AcceptInvitationInput;
+};
+export type InvitationCardMutation$data = {
+  readonly acceptInvitation: {
+    readonly membershipEdge: {
+      readonly node: {
+        readonly id: string;
+      };
+    };
+  } | null | undefined;
+};
+export type InvitationCardMutation = {
+  response: InvitationCardMutation$data;
+  variables: InvitationCardMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "AcceptInvitationPayload",
+    "kind": "LinkedField",
+    "name": "acceptInvitation",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "MembershipEdge",
+        "kind": "LinkedField",
+        "name": "membershipEdge",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "Membership",
+            "kind": "LinkedField",
+            "name": "node",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "id",
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "InvitationCardMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "InvitationCardMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "592fad5ce23af0f457d7e0ccf5f7123f",
+    "id": null,
+    "metadata": {},
+    "name": "InvitationCardMutation",
+    "operationKind": "mutation",
+    "text": "mutation InvitationCardMutation(\n  $input: AcceptInvitationInput!\n) {\n  acceptInvitation(input: $input) {\n    membershipEdge {\n      node {\n        id\n      }\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "00a20b1db5dd8e98838c8c9659560bb9";
+
+export default node;

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

@@ -0,0 +1,107 @@
+/**
+ * @generated SignedSource<<59df18257cc2bae52aefd576c20f03cf>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type SignUpFromInvitationInput = {
+  fullName: string;
+  password: string;
+  token: string;
+};
+export type SignUpFromInvitationPageMutation$variables = {
+  input: SignUpFromInvitationInput;
+};
+export type SignUpFromInvitationPageMutation$data = {
+  readonly signUpFromInvitation: {
+    readonly identity: {
+      readonly id: string;
+    } | null | undefined;
+  } | null | undefined;
+};
+export type SignUpFromInvitationPageMutation = {
+  response: SignUpFromInvitationPageMutation$data;
+  variables: SignUpFromInvitationPageMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "SignUpFromInvitationPayload",
+    "kind": "LinkedField",
+    "name": "signUpFromInvitation",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "Identity",
+        "kind": "LinkedField",
+        "name": "identity",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "id",
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "SignUpFromInvitationPageMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "SignUpFromInvitationPageMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "9bdca3bd56cb86a2e9c0627379f7f58f",
+    "id": null,
+    "metadata": {},
+    "name": "SignUpFromInvitationPageMutation",
+    "operationKind": "mutation",
+    "text": "mutation SignUpFromInvitationPageMutation(\n  $input: SignUpFromInvitationInput!\n) {\n  signUpFromInvitation(input: $input) {\n    identity {\n      id\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "418fe53fbdc92e4ce5d2256062f08322";
+
+export default node;

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

@@ -0,0 +1,107 @@
+/**
+ * @generated SignedSource<<450f7808784d82c4ee82e21f72c57465>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type SignUpInput = {
+  email: string;
+  fullName: string;
+  password: string;
+};
+export type SignUpPageMutation$variables = {
+  input: SignUpInput;
+};
+export type SignUpPageMutation$data = {
+  readonly signUp: {
+    readonly identity: {
+      readonly id: string;
+    } | null | undefined;
+  } | null | undefined;
+};
+export type SignUpPageMutation = {
+  response: SignUpPageMutation$data;
+  variables: SignUpPageMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "SignUpPayload",
+    "kind": "LinkedField",
+    "name": "signUp",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "Identity",
+        "kind": "LinkedField",
+        "name": "identity",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "id",
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "SignUpPageMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "SignUpPageMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "266f2f87a14a72bb166348ae9142a885",
+    "id": null,
+    "metadata": {},
+    "name": "SignUpPageMutation",
+    "operationKind": "mutation",
+    "text": "mutation SignUpPageMutation(\n  $input: SignUpInput!\n) {\n  signUp(input: $input) {\n    identity {\n      id\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "b8ec213c1c715d5a7fbfa5896047785d";
+
+export default node;

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

@@ -1,45 +1,51 @@
-import { Link, useNavigate, useSearchParams } 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 { useEffect } from "react";
+import { useTranslate } from "@probo/i18n";
+import { Button, Field, useToast } from "@probo/ui";
+import { Link, useNavigate, useSearchParams } from "react-router";
+import z from "zod";
+import { useFormWithSchema } from "/hooks/useFormWithSchema";
+import { graphql } from "relay-runtime";
+import { useMutation } from "react-relay";
+
+const signUpFromIvitationMutation = graphql`
+  mutation SignUpFromInvitationPageMutation(
+    $input: SignUpFromInvitationInput!
+  ) {
+    signUpFromInvitation(input: $input) {
+      identity {
+        id
+      }
+    }
+  }
+`;
 
 const schema = z.object({
-  fullName: z.string().min(2),
   password: z.string().min(8),
+  fullName: z.string().min(2),
 });
 
-export default function SignupFromInvitationPage() {
+type FormData = z.infer<typeof schema>;
+
+export default function SignUpFromInvitationPage() {
   const { __ } = useTranslate();
-  const navigate = useNavigate();
   const { toast } = useToast();
+  const navigate = useNavigate();
   const [searchParams] = useSearchParams();
+  const fullNameFromParams = searchParams.get("fullName") || "";
 
-  const { register, handleSubmit, formState, reset } = useFormWithSchema(
-    schema,
-    {
-      defaultValues: {
-        fullName: "",
-        password: "",
-      },
-    }
-  );
+  usePageTitle(__("Sign up"));
 
-  useEffect(() => {
-    const fullNameFromParams = searchParams.get("fullName") || "";
-    if (fullNameFromParams) {
-      reset({
-        fullName: fullNameFromParams,
-        password: "",
-      });
-    }
-  }, [searchParams, reset]);
+  const { register, handleSubmit, formState } = useFormWithSchema(schema, {
+    defaultValues: {
+      password: "",
+      fullName: fullNameFromParams,
+    },
+  });
 
-  const onSubmit = handleSubmit(async (data) => {
+  const [signUpFromInvitation] = useMutation(signUpFromIvitationMutation);
+
+  const onSubmit = (data: FormData) => {
     const token = searchParams.get("token");
-
     if (!token) {
       toast({
         title: __("Signup failed"),
@@ -49,40 +55,33 @@ export default function SignupFromInvitationPage() {
       return;
     }
 
-    const response = await fetch("/connect/signup-from-invitation", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
+    signUpFromInvitation({
+      variables: {
+        input: {
+          token,
+          password: data.password,
+          fullName: data.fullName,
+        },
+      },
+      onCompleted: () => {
+        toast({
+          title: __("Success"),
+          description: __(
+            "Account created successfully. Please accept your invitation to join the organization.",
+          ),
+          variant: "success",
+        });
+        navigate("/", { replace: true });
+      },
+      onError: (errorData) => {
+        toast({
+          title: __("Signup failed"),
+          description: errorData.message || __("Signup failed"),
+          variant: "error",
+        });
       },
-      credentials: "include",
-      body: JSON.stringify({
-        token: token,
-        password: data.password,
-        fullName: data.fullName,
-      }),
     });
-
-    if (!response.ok) {
-      const errorData = await response.json().catch(() => ({}));
-      toast({
-        title: __("Signup failed"),
-        description: errorData.message || __("Signup failed"),
-        variant: "error",
-      });
-      return;
-    }
-
-    toast({
-      title: __("Success"),
-      description: __(
-        "Account created successfully. Please accept your invitation to join the organization."
-      ),
-      variant: "success",
-    });
-    navigate("/", { replace: true });
-  });
-
-  usePageTitle(__("Create your account"));
+  };
 
   return (
     <div className="space-y-6 w-full max-w-md mx-auto">
@@ -93,7 +92,7 @@ export default function SignupFromInvitationPage() {
         </p>
       </div>
 
-      <form onSubmit={onSubmit} className="space-y-4">
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
         <Field
           label={__("Full Name")}
           type="text"

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

@@ -1,9 +1,21 @@
-import { Link, useNavigate } 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 { useTranslate } from "@probo/i18n";
+import { Button, Field, useToast } from "@probo/ui";
+import { Link, useNavigate } from "react-router";
+import z from "zod";
+import { useFormWithSchema } from "/hooks/useFormWithSchema";
+import { graphql } from "relay-runtime";
+import { useMutation } from "react-relay";
+
+const signUpMutation = graphql`
+  mutation SignUpPageMutation($input: SignUpInput!) {
+    signUp(input: $input) {
+      identity {
+        id
+      }
+    }
+  }
+`;
 
 const schema = z.object({
   email: z.string().email(),
@@ -11,10 +23,15 @@ const schema = z.object({
   fullName: z.string().min(2),
 });
 
-export default function RegisterPage() {
+type FormData = z.infer<typeof schema>;
+
+export default function SignUpPage() {
   const { __ } = useTranslate();
-  const navigate = useNavigate();
   const { toast } = useToast();
+  const navigate = useNavigate();
+
+  usePageTitle(__("Sign up"));
+
   const { register, handleSubmit, formState } = useFormWithSchema(schema, {
     defaultValues: {
       email: "",
@@ -23,36 +40,32 @@ export default function RegisterPage() {
     },
   });
 
-  const onSubmit = handleSubmit(async (data) => {
-    const response = await fetch("/connect/register", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
+  const [signUp] = useMutation(signUpMutation);
+
+  const onSubmit = (data: FormData) => {
+    signUp({
+      variables: {
+        email: data.email,
+        password: data.password,
+        fullName: data.fullName,
+      },
+      onCompleted: () => {
+        toast({
+          title: __("Success"),
+          description: __("Account created successfully"),
+          variant: "success",
+        });
+        navigate("/", { replace: true });
+      },
+      onError: (errorData) => {
+        toast({
+          title: __("Registration failed"),
+          description: errorData.message || __("Registration failed"),
+          variant: "error",
+        });
       },
-      credentials: "include",
-      body: JSON.stringify(data),
     });
-
-    // Registration failed
-    if (!response.ok) {
-      const errorData = await response.json().catch(() => ({}));
-      toast({
-        title: __("Registration failed"),
-        description: errorData.message || __("Registration failed"),
-        variant: "error",
-      });
-      return;
-    }
-
-    toast({
-      title: __("Success"),
-      description: __("Account created successfully"),
-      variant: "success",
-    });
-    navigate("/", { replace: true });
-  });
-
-  usePageTitle(__("Sign up"));
+  };
 
   return (
     <div className="space-y-6 w-full max-w-md mx-auto">
@@ -63,7 +76,7 @@ export default function RegisterPage() {
         </p>
       </div>
 
-      <form onSubmit={onSubmit} className="space-y-4">
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
         <Field
           label={__("Full Name")}
           type="text"

apps/console/src/pages/iam/memberships/MembershipsPage.tsx

@@ -11,6 +11,7 @@ import { useMemo, useState } from "react";
 import { InvitationCard } from "./_components/InvitationCard";
 import { MembershipCard } from "./_components/MembershipCard";
 import type { MembershipsPageQuery } from "/__generated__/iam/MembershipsPageQuery.graphql";
+import { usePageTitle } from "@probo/hooks";
 
 export const membershipsPageQuery = graphql`
   query MembershipsPageQuery {
@@ -48,6 +49,8 @@ export function MembershipsPage(props: {
   const { __ } = useTranslate();
   const [search, setSearch] = useState("");
 
+  usePageTitle(__("Select an organization"));
+
   const { queryRef } = props;
   const {
     viewer: {
@@ -78,12 +81,7 @@ export function MembershipsPage(props: {
                 {__("Pending invitations")}
               </h2>
               {invitations.map(({ node }) => (
-                <InvitationCard
-                  key={node.id}
-                  fKey={node}
-                  // onAccept={handleAcceptInvitation}
-                  // isAccepting={isAccepting}
-                />
+                <InvitationCard key={node.id} fKey={node} />
               ))}
             </div>
           )}

apps/console/src/pages/iam/memberships/_components/InvitationCard.tsx

@@ -1,9 +1,10 @@
 import { formatDate } from "@probo/helpers";
 import { useTranslate } from "@probo/i18n";
-import { Card } from "@probo/ui";
+import { Button, Card } from "@probo/ui";
 import { graphql } from "relay-runtime";
-import { useFragment } from "react-relay";
+import { useFragment, useMutation } from "react-relay";
 import type { InvitationCardFragment$key } from "/__generated__/iam/InvitationCardFragment.graphql";
+import { useNavigate } from "react-router";
 
 const fragment = graphql`
   fragment InvitationCardFragment on Invitation {
@@ -17,19 +18,49 @@ const fragment = graphql`
   }
 `;
 
+const acceptMutation = graphql`
+  mutation InvitationCardMutation($input: AcceptInvitationInput!) {
+    acceptInvitation(input: $input) {
+      membershipEdge {
+        node {
+          id
+        }
+      }
+    }
+  }
+`;
+
 interface InvitationCardProps {
   fKey: InvitationCardFragment$key;
-  // onAccept: (invitationId: string, organizationId: string) => void;
-  // isAccepting: boolean;
 }
 
 export function InvitationCard(props: InvitationCardProps) {
   const { fKey } = props;
 
+  const navigate = useNavigate();
   const { __ } = useTranslate();
 
   const invitation = useFragment<InvitationCardFragment$key>(fragment, fKey);
 
+  const [acceptInvitation, isAccepting] = useMutation(acceptMutation);
+
+  const handleAccept = () => {
+    acceptInvitation({
+      variables: {
+        input: {
+          invitationId: invitation.id,
+        },
+      },
+      onCompleted: () => {
+        navigate(`/organizations/${invitation.organization.id}`);
+      },
+      onError: (err) => {
+        console.error("Failed to accept invitation:", err);
+        alert(__("Failed to accept invitation"));
+      },
+    });
+  };
+
   return (
     <Card padded className="w-full">
       <div className="flex items-start justify-between gap-4">
@@ -44,12 +75,9 @@ export function InvitationCard(props: InvitationCardProps) {
             {__("Invited on")} {formatDate(invitation.createdAt)}
           </p>
         </div>
-        {/* <Button
-          onClick={() => onAccept(invitation.id, invitation.organization.id)}
-          disabled={isAccepting}
-        >
+        <Button onClick={handleAccept} disabled={isAccepting}>
           {isAccepting ? __("Accepting...") : __("Accept invitation")}
-        </Button> */}
+        </Button>
       </div>
     </Card>
   );

apps/console/src/routes.tsx

@@ -69,7 +69,7 @@ const routes = [
       },
       {
         path: "register",
-        Component: lazy(() => import("./pages/auth/RegisterPage")),
+        Component: lazy(() => import("./pages/iam/auth/SignUpPage")),
       },
       // {
       //   path: "confirm-email",
@@ -77,7 +77,9 @@ const routes = [
       // },
       {
         path: "signup-from-invitation",
-        Component: lazy(() => import("./pages/auth/SignupFromInvitationPage")),
+        Component: lazy(
+          () => import("./pages/iam/auth/SignUpFromInvitationPage"),
+        ),
       },
       {
         path: "forgot-password",