Add user invitation system

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

apps/console/src/App.tsx

@@ -42,6 +42,9 @@ 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 ConfirmInvitationPage = lazy(
+  () => import("./pages/ConfirmInvitationPage")
+);
 const CreateOrganizationPage = lazy(
   () => import("./pages/CreateOrganizationPage")
 );
@@ -303,6 +306,16 @@ function App() {
                         </Suspense>
                       }
                     />
+                    <Route
+                      path="confirm-invitation"
+                      element={
+                        <Suspense>
+                          <VisitorErrorBoundaryWithLocation>
+                            <ConfirmInvitationPage />
+                          </VisitorErrorBoundaryWithLocation>
+                        </Suspense>
+                      }
+                    />
                   </Route>
 
                   <Route

apps/console/src/pages/ConfirmInvitationPage.tsx

@@ -0,0 +1,222 @@
+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 { ConfirmInvitationPageMutation } from "./__generated__/ConfirmInvitationPageMutation.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 ConfirmInvitationMutation = graphql`
+  mutation ConfirmInvitationPageMutation($input: ConfirmInvitationInput!) {
+    confirmInvitation(input: $input) {
+      success
+    }
+  }
+`;
+
+export default function ConfirmInvitationPage() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isConfirmed, setIsConfirmed] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [token, setToken] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+  const [confirmPassword, setConfirmPassword] = useState<string>("");
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const [commitMutation] = useMutation<ConfirmInvitationPageMutation>(
+    ConfirmInvitationMutation
+  );
+
+  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;
+    }
+
+    if (!password) {
+      setError("Please enter a password");
+      setIsLoading(false);
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      setIsLoading(false);
+      return;
+    }
+
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters long");
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      commitMutation({
+        variables: {
+          input: {
+            token: token.trim(),
+            password: password,
+          },
+        },
+        onCompleted: (response, errors: PayloadError[] | null) => {
+          if (errors) {
+            throw new Error(
+              errors[0]?.message || "Failed to confirm invitation"
+            );
+          }
+
+          setIsConfirmed(true);
+          toast({
+            title: "Success",
+            description: "Your invitation has been confirmed successfully",
+          });
+
+          setIsLoading(false);
+        },
+        onError: (err) => {
+          setError(
+            err.message || "Failed to confirm invitation. Please try again."
+          );
+          setIsLoading(false);
+        },
+      });
+    } catch (error) {
+      setError(
+        error instanceof Error
+          ? error.message
+          : "Failed to confirm invitation. Please try again."
+      );
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>Confirm Invitation - 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">
+              Invitation Confirmation
+            </CardTitle>
+            <CardDescription className="text-center">
+              Complete your account setup to join the organization
+            </CardDescription>
+          </CardHeader>
+
+          <CardContent>
+            {isConfirmed ? (
+              <div className="space-y-4 text-center">
+                <p className="text-green-600 dark:text-green-400">
+                  Your invitation 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">Invitation Token</Label>
+                  <Input
+                    id="token"
+                    type="text"
+                    value={token}
+                    onChange={(e) => setToken(e.target.value)}
+                    placeholder="Enter your invitation 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>
+
+                <div className="space-y-2">
+                  <Label htmlFor="password">Password</Label>
+                  <Input
+                    id="password"
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="Create a password"
+                    disabled={isLoading}
+                    required
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="confirmPassword">Confirm Password</Label>
+                  <Input
+                    id="confirmPassword"
+                    type="password"
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    placeholder="Confirm your password"
+                    disabled={isLoading}
+                    required
+                  />
+                </div>
+
+                <Button type="submit" className="w-full" disabled={isLoading}>
+                  {isLoading ? "Confirming..." : "Complete Registration"}
+                </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/SettingsPage.tsx

@@ -37,6 +37,7 @@ import {
 } from "@/components/ui/dialog";
 import type { SettingsPageQuery as SettingsPageQueryType } from "./__generated__/SettingsPageQuery.graphql";
 import type { SettingsPageUpdateOrganizationMutation as SettingsPageUpdateOrganizationMutationType } from "./__generated__/SettingsPageUpdateOrganizationMutation.graphql";
+import type { SettingsPageInviteUserMutation as SettingsPageInviteUserMutationType } from "./__generated__/SettingsPageInviteUserMutation.graphql";
 
 const settingsPageQuery = graphql`
   query SettingsPageQuery($organizationID: ID!) {
@@ -74,6 +75,14 @@ const updateOrganizationMutation = graphql`
   }
 `;
 
+const inviteUserMutation = graphql`
+  mutation SettingsPageInviteUserMutation($input: InviteUserInput!) {
+    inviteUser(input: $input) {
+      success
+    }
+  }
+`;
+
 function SettingsPageContent({
   queryRef,
 }: {
@@ -88,7 +97,9 @@ function SettingsPageContent({
   const [isEditNameOpen, setIsEditNameOpen] = useState(false);
   const [isInviteOpen, setIsInviteOpen] = useState(false);
   const [inviteEmail, setInviteEmail] = useState("");
+  const [inviteFullName, setInviteFullName] = useState("");
   const [inviteRole, setInviteRole] = useState("Member");
+  const [isInviting, setIsInviting] = useState(false);
   const [organizationName, setOrganizationName] = useState(
     organization.name || ""
   );
@@ -99,6 +110,9 @@ function SettingsPageContent({
       updateOrganizationMutation
     );
 
+  const [inviteUser] =
+    useMutation<SettingsPageInviteUserMutationType>(inviteUserMutation);
+
   const handleUpdateName = () => {
     updateOrganization({
       variables: {
@@ -169,16 +183,54 @@ function SettingsPageContent({
   };
 
   const handleInviteMember = () => {
-    // This is a placeholder for the actual invite functionality
-    // In a real implementation, we would use a GraphQL mutation to invite the user
-    // For now, we just show a toast message and close the dialog
-    toast({
-      title: "Invitation sent",
-      description: `An invitation has been sent to ${inviteEmail}`,
-      variant: "default",
+    if (!inviteEmail || !inviteFullName) {
+      toast({
+        title: "Missing information",
+        description:
+          "Please provide both email and full name for the invitation",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsInviting(true);
+
+    inviteUser({
+      variables: {
+        input: {
+          organizationId: organization.id,
+          email: inviteEmail,
+          fullName: inviteFullName,
+        },
+      },
+      onCompleted: (response) => {
+        setIsInviting(false);
+        if (response.inviteUser?.success) {
+          toast({
+            title: "Invitation sent",
+            description: `An invitation has been sent to ${inviteEmail}`,
+            variant: "default",
+          });
+          setIsInviteOpen(false);
+          setInviteEmail("");
+          setInviteFullName("");
+        } else {
+          toast({
+            title: "Error sending invitation",
+            description: "The invitation could not be sent. Please try again.",
+            variant: "destructive",
+          });
+        }
+      },
+      onError: (error) => {
+        setIsInviting(false);
+        toast({
+          title: "Error sending invitation",
+          description: error.message,
+          variant: "destructive",
+        });
+      },
     });
-    setIsInviteOpen(false);
-    setInviteEmail("");
   };
 
   return (
@@ -388,24 +440,23 @@ function SettingsPageContent({
               />
             </div>
             <div className="space-y-2">
-              <Label htmlFor="role">Role</Label>
-              <select
-                id="role"
-                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                value={inviteRole}
-                onChange={(e) => setInviteRole(e.target.value)}
-              >
-                <option value="Admin">Admin</option>
-                <option value="Member">Member</option>
-                <option value="Viewer">Viewer</option>
-              </select>
+              <Label htmlFor="fullName">Full Name</Label>
+              <Input
+                id="fullName"
+                type="text"
+                value={inviteFullName}
+                onChange={(e) => setInviteFullName(e.target.value)}
+                placeholder="Enter full name"
+              />
             </div>
           </div>
           <DialogFooter>
             <Button variant="outline" onClick={() => setIsInviteOpen(false)}>
               Cancel
             </Button>
-            <Button onClick={handleInviteMember}>Send Invitation</Button>
+            <Button onClick={handleInviteMember} disabled={isInviting}>
+              {isInviting ? "Sending..." : "Send Invitation"}
+            </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>

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

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

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

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