feat(ui): add invite link generation for team members

Introduced an option to generate an invite link instead of sending an email.

Updated MemberInvite.vue to support toggling between email invite and link
invite.

Implemented Vuex state management for storing the generated invitation link.

Added new Vuex actions and mutations for handling link generation.

Refactored the invite logic to separate email and link invitation flows.

Enhanced UI to display and copy the generated invite link.

Updated unit tests to validate both email and link invitation workflows.

Author: luannmoreira

ui/src/api/client/api.ts

@@ -70,33 +70,68 @@
         <v-card-title class="text-center">
           Invite Member
         </v-card-title>
+        <v-window v-model="formWindow">
+          <v-window-item value="form-1">
+            <v-card-text>
+              <p
+                class="mb-4"
+                v-if="envVariables.isCloud"
+              >
+                If this email isn't associated with an existing account, we'll send an email to sign-up.
+              </p>
 
-        <v-card-text>
-          <p
-            class="text-caption text-grey-lighten-4 mb-1"
-            v-if="envVariables.isCloud"
-          >
-            If this email isn't associated with an existing account, we'll send an email to sign-up.
-          </p>
-          <v-text-field
-            v-model="email"
-            label="Email"
-            :error-messages="emailError"
-            required
-            data-test="email-text"
-          />
-        </v-card-text>
-
-        <v-card-text class="mt-n10">
-          <v-select
-            v-model="selectedRole"
-            :items="items"
-            label="Role"
-            :error-messages="selectedRoleError"
-            required
-            data-test="role-select"
-          />
-        </v-card-text>
+              <v-text-field
+                v-model="email"
+                label="Email"
+                :error-messages="emailError"
+                required
+                data-test="email-text"
+              />
+            </v-card-text>
+
+            <v-card-text class="mt-n10">
+              <v-select
+                v-model="selectedRole"
+                :items="items"
+                label="Role"
+                :error-messages="selectedRoleError"
+                required
+                data-test="role-select"
+              />
+
+              <v-checkbox
+                v-model="getInvitationCheckbox"
+                label="Get the invite link instead of sending an e-mail"
+                hide-details
+                data-test="link-request-checkbox"
+              />
+            </v-card-text>
+          </v-window-item>
+          <v-window-item value="form-2">
+            <v-card-text>
+              <p class="mb-4">
+                Share this link with the person you want to invite. They can use it to join your namespace.
+              </p>
+              <p class="mb-4"><strong>Note:</strong> This link is only valid for the email address you entered earlier.
+              </p>
+              <v-text-field
+                v-model="invitationLink"
+                @click="copyText(invitationLink)"
+                @keypress="copyText(invitationLink)"
+                readonly
+                active
+                density="compact"
+                append-icon="mdi-content-copy"
+                label="Invitation Link"
+                data-test="invitation-link"
+              />
+              <p class="text-caption text-grey-darken-1">
+                The invitation link remains valid for 7 days, if the link does not work, ensure the invite has not expired.
+              </p>
+            </v-card-text>
+          </v-window-item>
+
+        </v-window>
 
         <v-card-actions>
           <v-spacer />
@@ -108,18 +143,20 @@
           <v-btn
             color="primary"
             data-test="invite-btn"
-            @click="addMember()"
+            @click="getInvitationCheckbox ? generateLinkInvite() : sendEmailInvite()"
+            :disabled="!email || !selectedRole || !!emailError || formWindow === 'form-2'"
           >
             Invite
           </v-btn>
+
         </v-card-actions>
       </v-card>
     </v-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { useField } from "vee-validate";
 import * as yup from "yup";
 import axios, { AxiosError } from "axios";
@@ -128,6 +165,7 @@ import hasPermission from "@/utils/permission";
 import { useStore } from "@/store";
 import { actions, authorizer } from "@/authorizer";
 import {
+  INotificationsCopy,
   INotificationsError,
   INotificationsSuccess,
 } from "@/interfaces/INotifications";
@@ -139,6 +177,9 @@ const items = ["administrator", "operator", "observer"];
 const emit = defineEmits(["update"]);
 const store = useStore();
 const dialog = ref(false);
+const getInvitationCheckbox = ref(false);
+const invitationLink = computed(() => store.getters["namespaces/getInvitationLink"]);
+const formWindow = ref("form-1");
 
 const {
   value: email,
@@ -152,7 +193,6 @@ const {
 const {
   value: selectedRole,
   errorMessage: selectedRoleError,
-  setErrors: setSelectedRoleError,
   resetField: resetSelectedRole,
 } = useField<string>("selectedRole", yup.string().required(), {
   initialValue: "",
@@ -170,20 +210,6 @@ const hasAuthorization = () => {
   return false;
 };
 
-const hasErrors = () => {
-  if (selectedRole.value === "") {
-    setSelectedRoleError("Select a role");
-    return true;
-  }
-
-  if (email.value === "") {
-    setEmailError("This field is required");
-    return true;
-  }
-
-  return false;
-};
-
 const getAvatar = (index: number) => multiavatar(`${Math.floor(Math.random() * (Number.MAX_SAFE_INTEGER - index + 1)) + index}`);
 
 const resetFields = () => {
@@ -194,51 +220,82 @@ const resetFields = () => {
 const close = () => {
   resetFields();
   dialog.value = false;
+  formWindow.value = "form-1";
 };
 
 const update = () => {
   emit("update");
   close();
 };
 
-const addMember = async () => {
-  if (!hasErrors()) {
-    try {
-      await store.dispatch("namespaces/addUser", {
-        email: email.value,
-        tenant_id: store.getters["auth/tenant"],
-        role: selectedRole.value,
-      });
-
-      store.dispatch(
-        "snackbar/showSnackbarSuccessAction",
-        INotificationsSuccess.namespaceNewMember,
-      );
-      update();
-      resetFields();
-    } catch (error: unknown) {
-      store.dispatch(
-        "snackbar/showSnackbarErrorAction",
-        INotificationsError.namespaceNewMember,
-      );
-      if (axios.isAxiosError(error)) {
-        const axiosError = error as AxiosError;
-        switch (axiosError.response?.status) {
-          case 409:
-            setEmailError("This user is already a member of this namespace.");
-            break;
-          case 404:
-            setEmailError("This user does not exist.");
-            break;
-          default:
-            handleError(error);
-        }
-      }
+const copyText = (value: string | undefined) => {
+  if (value) {
+    navigator.clipboard.writeText(value);
+    store.dispatch("snackbar/showSnackbarCopy", INotificationsCopy.invitationLink);
+  }
+};
+
+const handleInviteError = (error: unknown) => {
+  store.dispatch(
+    "snackbar/showSnackbarErrorAction",
+    INotificationsError.namespaceNewMember,
+  );
+
+  if (axios.isAxiosError(error)) {
+    const axiosError = error as AxiosError;
+    switch (axiosError.response?.status) {
+      case 409:
+        setEmailError("This user is already a member of this namespace.");
+        break;
+      case 404:
+        setEmailError("This user does not exist.");
+        break;
+      default:
+        handleError(error);
     }
   }
 };
 
-defineExpose({ emailError });
+const generateLinkInvite = async () => {
+  try {
+    await store.dispatch("namespaces/generateInvitationLink", {
+      email: email.value,
+      tenant_id: store.getters["auth/tenant"],
+      role: selectedRole.value,
+    });
+
+    store.dispatch(
+      "snackbar/showSnackbarSuccessAction",
+      INotificationsSuccess.namespaceNewMember,
+    );
+
+    formWindow.value = "form-2";
+  } catch (error) {
+    handleInviteError(error);
+  }
+};
+
+const sendEmailInvite = async () => {
+  try {
+    await store.dispatch("namespaces/sendEmailInvitation", {
+      email: email.value,
+      tenant_id: store.getters["auth/tenant"],
+      role: selectedRole.value,
+    });
+
+    store.dispatch(
+      "snackbar/showSnackbarSuccessAction",
+      INotificationsSuccess.namespaceNewMember,
+    );
+
+    update();
+    resetFields();
+  } catch (error) {
+    handleInviteError(error);
+  }
+};
+
+defineExpose({ emailError, formWindow, invitationLink });
 </script>
 
 <style lang="scss" scoped>

ui/src/components/Team/Member/MemberInvite.vue

@@ -126,5 +126,6 @@ export enum INotificationsCopy {
   recoveryCodes = "Recovery Codes",
   tenantId = "Tenant ID",
   copyKey = "API Key",
-  connector = "Connector host"
+  connector = "Connector host",
+  invitationLink = "Invitation Link"
 }

ui/src/interfaces/INotifications.ts

@@ -19,7 +19,12 @@ export const putNamespace = async (data: INamespaceResponse) => namespacesApi.ed
   },
 });
 
-export const addUserToNamespace = async (data: INamespaceResponse) => namespacesApi.addNamespaceMember(data.tenant_id, {
+export const sendNamespaceLink = async (data: INamespaceResponse) => namespacesApi.addNamespaceMember(data.tenant_id, {
+  email: data.email,
+  role: data.role,
+});
+
+export const generateNamespaceLink = async (data: INamespaceResponse) => namespacesApi.generateInvitationLink(data.tenant_id, {
   email: data.email,
   role: data.role,
 });

ui/src/store/api/namespaces.ts

@@ -13,6 +13,7 @@ export interface NamespacesState {
   numberNamespaces: number;
   owner: boolean;
   userStatus: string;
+  invitationLink: string;
 }
 
 export const namespaces: Module<NamespacesState, State> = {
@@ -26,6 +27,7 @@ export const namespaces: Module<NamespacesState, State> = {
     numberNamespaces: 0,
     owner: false,
     userStatus: "",
+    invitationLink: "",
   },
 
   getters: {
@@ -35,6 +37,7 @@ export const namespaces: Module<NamespacesState, State> = {
     owner: (state) => state.owner,
     billing: (state) => state.billing,
     getUserStatus: (state) => state.userStatus,
+    getInvitationLink: (state) => state.invitationLink,
   },
 
   mutations: {
@@ -81,6 +84,10 @@ export const namespaces: Module<NamespacesState, State> = {
     setOwnerStatus: (state, status) => {
       state.owner = status;
     },
+
+    setInvitationLink: (state, link) => {
+      state.invitationLink = link;
+    },
   },
 
   actions: {
@@ -127,8 +134,23 @@ export const namespaces: Module<NamespacesState, State> = {
       }
     },
 
-    addUser: async (context, data) => {
-      await apiNamespace.addUserToNamespace(data);
+    sendEmailInvitation: async (context, data) => {
+      try {
+        await apiNamespace.sendNamespaceLink(data);
+      } catch (error) {
+        console.error(error);
+        throw error;
+      }
+    },
+
+    generateInvitationLink: async (context, data) => {
+      try {
+        const res = await apiNamespace.generateNamespaceLink(data);
+        context.commit("setInvitationLink", res.data.link);
+      } catch (error) {
+        console.error(error);
+        throw error;
+      }
     },
 
     editUser: async (context, data) => {