@jskit-ai/workspaces-web 0.1.82 → 0.1.84

package/package.descriptor.mjs

@@ -1,10 +1,11 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/workspaces-web",
-  version: "0.1.82",
+  version: "0.1.84",
   kind: "runtime",
   description: "Workspace web module: workspace selector, tools widget, workspace surfaces, members UI, and settings hosts.",
   dependsOn: [
+    "@jskit-ai/auth-web",
     "@jskit-ai/workspaces-core",
     "@jskit-ai/users-web"
   ],
@@ -41,6 +42,10 @@ export default Object.freeze({
           subpath: "./client/components/AccountSettingsInvitesSection",
           summary: "Exports the default account invites section component used by multihoming installs."
         },
+        {
+          subpath: "./client/components/WorkspaceInviteLanding",
+          summary: "Exports the default public workspace invite landing component."
+        },
         {
           subpath: "./client/providers/WorkspacesWebClientProvider",
           summary: "Exports workspaces-web client provider class."
@@ -227,8 +232,9 @@ export default Object.freeze({
   mutations: {
     dependencies: {
       runtime: {
-        "@jskit-ai/workspaces-core": "0.1.81",
-        "@jskit-ai/users-web": "0.1.120"
+        "@jskit-ai/auth-web": "0.1.108",
+        "@jskit-ai/workspaces-core": "0.1.83",
+        "@jskit-ai/users-web": "0.1.122"
       },
       dev: {}
     },
@@ -256,6 +262,13 @@ export default Object.freeze({
         category: "workspaces-web",
         id: "users-web-main-component-account-settings-invites-section"
       },
+      {
+        from: "templates/src/pages/invite/[token].vue",
+        to: "src/pages/invite/[token].vue",
+        reason: "Install public workspace invite acceptance route scaffold.",
+        category: "workspaces-web",
+        id: "workspaces-web-page-public-invite"
+      },
       {
         from: "templates/src/components/WorkspaceNotFoundCard.vue",
         to: "src/components/WorkspaceNotFoundCard.vue",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/workspaces-web",
-  "version": "0.1.82",
+  "version": "0.1.84",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -8,18 +8,20 @@
   "exports": {
     "./client": "./src/client/index.js",
     "./client/components/AccountSettingsInvitesSection": "./src/client/components/AccountSettingsInvitesSection.vue",
+    "./client/components/WorkspaceInviteLanding": "./src/client/components/WorkspaceInviteLanding.vue",
     "./client/providers/WorkspacesWebClientProvider": "./src/client/providers/WorkspacesWebClientProvider.js",
     "./client/components/WorkspaceMembersClientElement": "./src/client/components/WorkspaceMembersClientElement.vue",
     "./client/composables/useWorkspaceRouteContext": "./src/client/composables/useWorkspaceRouteContext.js"
   },
   "dependencies": {
     "@mdi/js": "^7.4.47",
-    "@jskit-ai/http-runtime": "0.1.104",
-    "@jskit-ai/kernel": "0.1.106",
-    "@jskit-ai/shell-web": "0.1.105",
-    "@jskit-ai/users-core": "0.1.115",
-    "@jskit-ai/users-web": "0.1.120",
-    "@jskit-ai/workspaces-core": "0.1.81"
+    "@jskit-ai/auth-web": "0.1.108",
+    "@jskit-ai/http-runtime": "0.1.106",
+    "@jskit-ai/kernel": "0.1.108",
+    "@jskit-ai/shell-web": "0.1.107",
+    "@jskit-ai/users-core": "0.1.117",
+    "@jskit-ai/users-web": "0.1.122",
+    "@jskit-ai/workspaces-core": "0.1.83"
   },
   "peerDependencies": {
     "@tanstack/vue-query": "^5.90.5",

package/src/client/components/MembersAdminClientElement.vue

@@ -63,6 +63,31 @@
                     Send invite
                   </v-btn>
                 </v-form>
+
+                <div v-if="hasCreatedInviteUrl" class="invite-link-panel mt-4">
+                  <v-divider class="mb-4" />
+                  <p class="text-caption text-medium-emphasis mb-2">{{ inviteLinkStatusText }}</p>
+                  <div class="invite-link-row">
+                    <v-text-field
+                      :model-value="createdInviteUrl"
+                      label="Invite link"
+                      variant="outlined"
+                      density="compact"
+                      readonly
+                      hide-details
+                      class="invite-link-field"
+                    />
+                    <v-btn
+                      color="primary"
+                      variant="tonal"
+                      :prepend-icon="mdiContentCopy"
+                      :loading="isCopyingInviteLink"
+                      @click="onCopyInviteLink"
+                    >
+                      Copy
+                    </v-btn>
+                  </div>
+                </div>
               </template>
             </template>
           </v-card-text>
@@ -167,6 +192,7 @@
 
 <script setup>
 import { computed, toRefs, unref } from "vue";
+import { mdiContentCopy } from "@mdi/js";
 import { formatDateTime as formatKernelDateTime } from "@jskit-ai/kernel/shared/support";
 import { normalizeRecordId } from "@jskit-ai/kernel/shared/support/normalize";
 import { requireBoolean, requireFunction, requireRecord } from "@jskit-ai/users-web/client/support/contractGuards";
@@ -226,6 +252,11 @@ const {
 
 const actionHandlers = Object.freeze({
   submitInvite: requireFunction(actions.value.submitInvite, "actions.submitInvite", "MembersAdminClientElement"),
+  copyCreatedInviteLink: requireFunction(
+    actions.value.copyCreatedInviteLink,
+    "actions.copyCreatedInviteLink",
+    "MembersAdminClientElement"
+  ),
   submitRevokeInvite: requireFunction(
     actions.value.submitRevokeInvite,
     "actions.submitRevokeInvite",
@@ -275,6 +306,11 @@ const canRevokeInvites = computed(() => Boolean(unref(permissions.value.canRevok
 const isCreatingInvite = computed(() => Boolean(unref(status.value.isCreatingInvite)));
 const isRevokingInvite = computed(() => Boolean(unref(status.value.isRevokingInvite)));
 const isRemovingMember = computed(() => Boolean(unref(status.value.isRemovingMember)));
+const isCopyingInviteLink = computed(() => Boolean(unref(status.value.isCopyingInviteLink)));
+const createdInviteUrl = computed(() => String(unref(status.value.createdInviteUrl) || "").trim());
+const createdInviteDeliveryStatus = computed(() =>
+  String(unref(status.value.createdInviteDeliveryStatus) || "").trim().toLowerCase()
+);
 const workspaceInvitePolicyLoaded = computed(() =>
   requireBoolean(status.value.hasLoadedWorkspaceSettings, "status.hasLoadedWorkspaceSettings", "MembersAdminClientElement")
 );
@@ -324,6 +360,18 @@ const workspaceInvitesEnabled = computed(() => Boolean(unref(workspaceForm.value
 const canShowInviteForm = computed(
   () => canInviteMembers.value && workspaceInvitesAvailable.value && workspaceInvitesEnabled.value
 );
+const hasCreatedInviteUrl = computed(() => Boolean(createdInviteUrl.value));
+const inviteLinkStatusText = computed(() => {
+  if (createdInviteDeliveryStatus.value === "sent") {
+    return "Invite sent. The link remains available here.";
+  }
+
+  if (createdInviteDeliveryStatus.value === "failed") {
+    return "Email delivery failed. Copy this link to share the invite.";
+  }
+
+  return "Copy this link to share the invite.";
+});
 
 function formatDateTime(value) {
   if (typeof options.value.formatDateTime === "function") {
@@ -368,6 +416,14 @@ async function onSubmitInvite() {
   await actionHandlers.submitInvite();
 }
 
+async function onCopyInviteLink() {
+  if (!hasCreatedInviteUrl.value) {
+    return;
+  }
+
+  await actionHandlers.copyCreatedInviteLink();
+}
+
 async function onRevokeInvite(inviteId) {
   if (!canRevokeInvites.value) {
     return;
@@ -397,4 +453,16 @@ async function onRemoveMember(member) {
 .member-role-select {
   width: 160px;
 }
+
+.invite-link-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.invite-link-field {
+  flex: 1 1 260px;
+  min-width: 0;
+}
 </style>

package/src/client/components/WorkspaceInviteLanding.vue

@@ -0,0 +1,257 @@
+<template>
+  <main class="workspace-invite-landing">
+    <v-container class="workspace-invite-landing__container">
+      <v-sheet class="workspace-invite-landing__panel" border rounded="lg">
+        <div v-if="isLoading" class="workspace-invite-landing__state">
+          <v-progress-circular color="primary" indeterminate />
+        </div>
+
+        <div v-else-if="loadError" class="workspace-invite-landing__state">
+          <h1 class="workspace-invite-landing__title">Invitation unavailable</h1>
+          <p class="text-body-2 text-medium-emphasis mb-5">{{ loadError }}</p>
+          <v-btn color="primary" variant="tonal" :loading="isRefreshing" @click="refreshInvite">Retry</v-btn>
+        </div>
+
+        <div v-else-if="isTerminal" class="workspace-invite-landing__state">
+          <h1 class="workspace-invite-landing__title">{{ terminalTitle }}</h1>
+          <p class="text-body-2 text-medium-emphasis mb-0">{{ terminalMessage }}</p>
+        </div>
+
+        <div v-else class="workspace-invite-landing__content">
+          <div class="workspace-invite-landing__header">
+            <v-avatar v-if="workspaceAvatarUrl" size="48" :image="workspaceAvatarUrl" />
+            <v-avatar v-else size="48" color="primary" variant="tonal">
+              {{ workspaceInitial }}
+            </v-avatar>
+            <div>
+              <h1 class="workspace-invite-landing__title">{{ workspaceName }}</h1>
+              <p class="text-body-2 text-medium-emphasis mb-0">
+                Invitation for {{ inviteEmailLabel }}
+              </p>
+            </div>
+          </div>
+
+          <v-alert v-if="emailMismatch" type="warning" variant="tonal" class="mb-5">
+            Sign in with {{ inviteEmailLabel }} to accept this invitation.
+          </v-alert>
+
+          <div v-if="!isAuthenticated" class="workspace-invite-landing__actions">
+            <v-btn color="primary" :href="registerUrl">Create account</v-btn>
+            <v-btn variant="outlined" color="secondary" :href="loginUrl">Sign in</v-btn>
+          </div>
+
+          <div v-else class="workspace-invite-landing__actions">
+            <v-btn
+              color="primary"
+              :disabled="emailMismatch || isRedeeming"
+              :loading="isRedeeming"
+              @click="acceptInvite"
+            >
+              Accept invitation
+            </v-btn>
+          </div>
+
+          <p v-if="redeemError" class="text-body-2 text-error mb-0">{{ redeemError }}</p>
+        </div>
+      </v-sheet>
+    </v-container>
+  </main>
+</template>
+
+<script setup>
+import { computed, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useAuthStore } from "@jskit-ai/auth-web/client";
+import { useEndpointResource } from "@jskit-ai/users-web/client/composables/useEndpointResource";
+import {
+  WORKSPACE_INVITATION_RESOLVE_TRANSPORT,
+  WORKSPACE_INVITE_REDEEM_TRANSPORT
+} from "@jskit-ai/workspaces-core/shared/jsonApiTransports";
+import { workspacesWebHttpClient } from "../lib/httpClient.js";
+
+const route = useRoute();
+const router = useRouter();
+const authStore = useAuthStore();
+
+const token = computed(() => {
+  const value = route.params?.token || route.query?.token || "";
+  return String(Array.isArray(value) ? value[0] : value).trim();
+});
+const invitePath = computed(() => `/invite/${encodeURIComponent(token.value)}`);
+const inviteQuery = computed(() => ({ token: token.value }));
+
+const inviteResource = useEndpointResource({
+  queryKey: computed(() => ["workspaces-web", "invite-landing", token.value]),
+  path: "/api/workspace/invitations/resolve",
+  enabled: computed(() => Boolean(token.value)),
+  client: workspacesWebHttpClient,
+  readQuery: inviteQuery,
+  transport: WORKSPACE_INVITATION_RESOLVE_TRANSPORT,
+  fallbackLoadError: "Unable to load invitation."
+});
+
+const redeemResource = useEndpointResource({
+  queryKey: computed(() => ["workspaces-web", "invite-landing", "redeem", token.value]),
+  path: "/api/workspace/invitations/redeem",
+  enabled: false,
+  client: workspacesWebHttpClient,
+  writeMethod: "POST",
+  transport: WORKSPACE_INVITE_REDEEM_TRANSPORT,
+  fallbackSaveError: "Unable to accept invitation."
+});
+
+const invite = computed(() => inviteResource.data.value || {});
+const workspace = computed(() => invite.value.workspace || {});
+const status = computed(() => String(invite.value.status || "").trim().toLowerCase());
+const isAuthenticated = computed(() => authStore.authenticated === true);
+const authEmail = computed(() => String(authStore.authState?.email || "").trim().toLowerCase());
+const inviteEmail = computed(() => String(invite.value.email || "").trim().toLowerCase());
+const inviteEmailLabel = computed(() => invite.value.maskedEmail || inviteEmail.value || "the invited email");
+const workspaceName = computed(() => String(workspace.value.name || "Workspace invitation").trim());
+const workspaceAvatarUrl = computed(() => String(workspace.value.avatarUrl || "").trim());
+const workspaceInitial = computed(() => workspaceName.value.slice(0, 1).toUpperCase() || "W");
+const isLoading = computed(() => Boolean(inviteResource.isLoading.value));
+const isRefreshing = computed(() => Boolean(inviteResource.isFetching.value));
+const loadError = computed(() => inviteResource.loadError.value);
+const isRedeeming = computed(() => Boolean(redeemResource.isSaving.value));
+const redeemError = computed(() => redeemResource.saveError.value);
+const isTerminal = computed(() => ["expired", "accepted", "revoked", "not_found"].includes(status.value));
+const emailMismatch = computed(() =>
+  Boolean(isAuthenticated.value && inviteEmail.value && authEmail.value && inviteEmail.value !== authEmail.value)
+);
+const terminalTitle = computed(() => {
+  if (status.value === "expired") {
+    return "Invitation expired";
+  }
+  if (status.value === "accepted") {
+    return "Invitation already accepted";
+  }
+  if (status.value === "revoked") {
+    return "Invitation revoked";
+  }
+  return "Invitation unavailable";
+});
+const terminalMessage = computed(() => {
+  if (status.value === "expired") {
+    return "Ask a workspace admin to send a new invitation.";
+  }
+  if (status.value === "accepted") {
+    return "This invitation has already been used.";
+  }
+  if (status.value === "revoked") {
+    return "This invitation is no longer active.";
+  }
+  return "The invitation link is invalid or no longer exists.";
+});
+const loginUrl = computed(() => buildAuthUrl("login"));
+const registerUrl = computed(() => buildAuthUrl("register"));
+
+function buildAuthUrl(mode) {
+  const params = new URLSearchParams({
+    mode,
+    returnTo: invitePath.value,
+    invitationToken: token.value
+  });
+  if (inviteEmail.value) {
+    params.set("email", inviteEmail.value);
+  }
+  return `/auth/login?${params.toString()}`;
+}
+
+async function refreshInvite() {
+  await inviteResource.reload();
+}
+
+async function acceptInvite() {
+  if (!token.value || emailMismatch.value || isRedeeming.value) {
+    return;
+  }
+
+  await redeemResource.save({
+    token: token.value,
+    decision: "accept"
+  });
+  await authStore.refresh();
+  const workspaceSlug = String(workspace.value.slug || "").trim();
+  if (workspaceSlug) {
+    await router.replace(`/w/${encodeURIComponent(workspaceSlug)}`);
+    return;
+  }
+  await refreshInvite();
+}
+
+onMounted(() => {
+  void authStore.refresh();
+});
+</script>
+
+<style scoped>
+.workspace-invite-landing {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  background: rgb(var(--v-theme-surface));
+}
+
+.workspace-invite-landing__container {
+  max-width: 560px;
+}
+
+.workspace-invite-landing__panel {
+  padding: 28px;
+  border-radius: 8px;
+}
+
+.workspace-invite-landing__state {
+  min-height: 180px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.workspace-invite-landing__content {
+  display: grid;
+  gap: 20px;
+}
+
+.workspace-invite-landing__header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.workspace-invite-landing__title {
+  font-size: 1.35rem;
+  line-height: 1.25;
+  font-weight: 650;
+  margin: 0 0 4px;
+}
+
+.workspace-invite-landing__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+@media (max-width: 600px) {
+  .workspace-invite-landing {
+    align-items: stretch;
+  }
+
+  .workspace-invite-landing__container {
+    padding: 0;
+  }
+
+  .workspace-invite-landing__panel {
+    min-height: 100vh;
+    border-radius: 0;
+    border-inline: 0;
+    padding: 24px;
+  }
+
+  .workspace-invite-landing__actions > * {
+    flex: 1 1 100%;
+  }
+}
+</style>

package/src/client/components/WorkspaceMembersClientElement.vue

@@ -80,6 +80,9 @@ const membersFeedback = useUiFeedback();
 const teamFeedback = useUiFeedback();
 const revokeInviteId = ref("");
 const removeMemberUserId = ref("");
+const createdInviteUrl = ref("");
+const createdInviteDeliveryStatus = ref("");
+const isCopyingInviteLink = ref(false);
 
 const { route, currentSurfaceId, workspaceSlugFromRoute } = useWorkspaceRouteContext();
 const usersPaths = usePaths();
@@ -166,6 +169,8 @@ function resetViewState() {
   clearRoleOptions();
   revokeInviteId.value = "";
   removeMemberUserId.value = "";
+  createdInviteUrl.value = "";
+  createdInviteDeliveryStatus.value = "";
 }
 
 function toRoleTitle(roleSid) {
@@ -340,14 +345,14 @@ const inviteCreateCommand = useCommand({
   runPermissions: ["workspace.members.invite"],
   writeMethod: "POST",
   transport: WORKSPACE_INVITE_CREATE_TRANSPORT,
-  fallbackRunError: "Unable to send invite.",
+  fallbackRunError: "Unable to create invite.",
+  suppressSuccessMessage: true,
   buildRawPayload: () => ({
     email: forms.invite.email,
     roleSid: forms.invite.roleSid
   }),
   messages: {
-    success: "Invite sent.",
-    error: "Unable to send invite."
+    error: "Unable to create invite."
   }
 });
 
@@ -416,6 +421,9 @@ const status = computed(() => {
     isCreatingInvite: Boolean(inviteCreateCommand.isRunning),
     isRevokingInvite: Boolean(revokeInviteCommand.isRunning),
     isRemovingMember: Boolean(memberRemoveCommand.isRunning),
+    isCopyingInviteLink: Boolean(isCopyingInviteLink.value),
+    createdInviteUrl: createdInviteUrl.value,
+    createdInviteDeliveryStatus: createdInviteDeliveryStatus.value,
     hasLoadedWorkspaceSettings: !canInviteMembers.value || !workspaceSettingsView.isLoading,
     hasLoadedMembersList: !canViewMembers.value || !workspaceMembersList.isInitialLoading,
     hasLoadedInviteList: !canViewMembers.value || !workspaceInvitesList.isInitialLoading,
@@ -470,6 +478,7 @@ async function refreshLoad() {
 
 const actions = Object.freeze({
   submitInvite,
+  copyCreatedInviteLink,
   submitRevokeInvite,
   submitMemberRoleUpdate,
   submitRemoveMember
@@ -579,17 +588,53 @@ async function submitInvite() {
   }
 
   inviteFeedback.clear();
+  createdInviteUrl.value = "";
+  createdInviteDeliveryStatus.value = "";
 
   try {
-    await inviteCreateCommand.run();
+    const result = await inviteCreateCommand.run();
+    const delivery = result?.inviteDelivery && typeof result.inviteDelivery === "object"
+      ? result.inviteDelivery
+      : {};
+    createdInviteUrl.value = String(result?.inviteUrl || "").trim();
+    createdInviteDeliveryStatus.value = String(delivery.status || "").trim().toLowerCase();
     forms.invite.email = "";
     await Promise.all([
       workspaceInvitesList.reload(),
       workspaceRolesView.refresh()
     ]);
-    inviteFeedback.success("Invite sent.");
+    if (createdInviteDeliveryStatus.value === "sent") {
+      inviteFeedback.success("Invite sent.");
+    } else if (createdInviteDeliveryStatus.value === "failed") {
+      inviteFeedback.success("Invite created, but email delivery failed. Copy the invite link to share it.");
+    } else {
+      inviteFeedback.success("Invite created. Copy the invite link to share it.");
+    }
   } catch (error) {
-    inviteFeedback.error(error, "Unable to send invite.");
+    inviteFeedback.error(error, "Unable to create invite.");
+  }
+}
+
+async function copyCreatedInviteLink() {
+  const inviteUrl = String(createdInviteUrl.value || "").trim();
+  if (!inviteUrl || isCopyingInviteLink.value) {
+    return;
+  }
+
+  isCopyingInviteLink.value = true;
+  try {
+    const clipboard = globalThis?.navigator?.clipboard;
+    if (!clipboard || typeof clipboard.writeText !== "function") {
+      inviteFeedback.success("Invite link ready to copy.");
+      return;
+    }
+
+    await clipboard.writeText(inviteUrl);
+    inviteFeedback.success("Invite link copied.");
+  } catch (error) {
+    inviteFeedback.error(error, "Unable to copy invite link.");
+  } finally {
+    isCopyingInviteLink.value = false;
   }
 }
 

package/src/client/index.js

@@ -4,4 +4,5 @@ const clientProviders = Object.freeze([WorkspacesWebClientProvider]);
 
 export { WorkspacesWebClientProvider } from "./providers/WorkspacesWebClientProvider.js";
 export { default as WorkspaceMembersClientElement } from "./components/WorkspaceMembersClientElement.vue";
+export { default as WorkspaceInviteLanding } from "./components/WorkspaceInviteLanding.vue";
 export { clientProviders };

package/templates/src/pages/invite/[token].vue

@@ -0,0 +1,7 @@
+<template>
+  <WorkspaceInviteLanding />
+</template>
+
+<script setup>
+import WorkspaceInviteLanding from "@jskit-ai/workspaces-web/client/components/WorkspaceInviteLanding";
+</script>

package/test/exportsContract.test.js

@@ -16,6 +16,7 @@ test("workspaces-web exports are explicit and aligned with production usage", ()
     requiredExports: [
       "./client",
       "./client/components/AccountSettingsInvitesSection",
+      "./client/components/WorkspaceInviteLanding",
       "./client/providers/WorkspacesWebClientProvider",
       "./client/composables/useWorkspaceRouteContext"
     ]

package/test/settingsPlacementContract.test.js

@@ -105,6 +105,27 @@ test("workspaces-web installs an app-owned account invites section wrapper", asy
   });
 });
 
+test("workspaces-web installs a public workspace invite route scaffold", async () => {
+  const source = await readFile(
+    path.join(PACKAGE_DIR, "templates", "src", "pages", "invite", "[token].vue"),
+    "utf8"
+  );
+
+  assert.doesNotMatch(source, /\bfetch\s*\(/);
+  assert.match(
+    source,
+    /@jskit-ai\/workspaces-web\/client\/components\/WorkspaceInviteLanding/
+  );
+  assert.match(source, /<WorkspaceInviteLanding \/>/);
+  assert.deepEqual(findFileMutation("workspaces-web-page-public-invite"), {
+    from: "templates/src/pages/invite/[token].vue",
+    to: "src/pages/invite/[token].vue",
+    reason: "Install public workspace invite acceptance route scaffold.",
+    category: "workspaces-web",
+    id: "workspaces-web-page-public-invite"
+  });
+});
+
 test("workspaces-web settings components use direct panels instead of card scaffolds", async () => {
   for (const relativePath of [
     path.join("templates", "src", "components", "WorkspaceNotFoundCard.vue"),