@jskit-ai/users-web 0.1.4

package/src/client/components/MembersAdminClientElement.vue

@@ -0,0 +1,404 @@
+<template>
+  <section class="members-admin-client-element">
+    <v-row>
+      <v-col cols="12" lg="5">
+        <v-card rounded="lg" elevation="1" border data-testid="members-admin-invite-card">
+          <v-card-item>
+            <v-card-title class="text-subtitle-1">Invite people</v-card-title>
+            <v-card-subtitle>Send workspace invites with a role.</v-card-subtitle>
+          </v-card-item>
+          <v-divider />
+          <v-card-text>
+            <template v-if="showWorkspaceInviteLoadingSkeleton">
+              <v-skeleton-loader type="text@2, paragraph, button" class="mb-3" />
+            </template>
+            <template v-else>
+              <v-progress-linear v-if="showWorkspaceInviteRefreshingIndicator" indeterminate class="mb-3" />
+              <p
+                v-if="workspaceInvitePolicyLoaded && !workspaceInvitesAvailable"
+                class="text-body-2 text-medium-emphasis mb-3"
+              >
+                Invites are disabled by app policy or role manifest.
+              </p>
+              <p
+                v-else-if="workspaceInvitePolicyLoaded && !workspaceInvitesEnabled"
+                class="text-body-2 text-medium-emphasis mb-3"
+              >
+                Invites are currently off for this workspace.
+              </p>
+
+              <p v-if="!canInviteMembers" class="text-body-2 text-medium-emphasis mb-3">
+                You do not have permission to send invites.
+              </p>
+
+              <template v-else-if="canShowInviteForm">
+                <v-form @submit.prevent="onSubmitInvite" novalidate>
+                  <v-text-field
+                    v-model="inviteForm.email"
+                    label="Email"
+                    variant="outlined"
+                    density="comfortable"
+                    type="email"
+                    autocomplete="email"
+                    :disabled="isCreatingInvite || showWorkspaceInviteRefreshingIndicator"
+                    class="mb-3"
+                  />
+                  <v-select
+                    v-model="inviteForm.roleId"
+                    label="Role"
+                    :items="inviteRoleOptions"
+                    item-title="title"
+                    item-value="value"
+                    variant="outlined"
+                    density="comfortable"
+                    :disabled="isCreatingInvite || showWorkspaceInviteRefreshingIndicator"
+                    class="mb-3"
+                  />
+                  <v-btn
+                    type="submit"
+                    color="primary"
+                    :loading="isCreatingInvite"
+                    :disabled="showWorkspaceInviteRefreshingIndicator"
+                  >
+                    Send invite
+                  </v-btn>
+                </v-form>
+              </template>
+            </template>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" lg="7">
+        <v-card rounded="lg" elevation="1" border data-testid="members-admin-members-card">
+          <v-card-item>
+            <v-card-title class="text-subtitle-1">Team</v-card-title>
+            <v-card-subtitle>Members and pending invites.</v-card-subtitle>
+          </v-card-item>
+          <v-divider />
+          <v-card-text>
+            <template v-if="showMembersLoadingSkeleton">
+              <v-skeleton-loader type="text@2, list-item-avatar-two-line@3" class="mb-3" />
+              <v-divider class="mb-3" />
+              <v-skeleton-loader type="text, list-item-two-line@2" />
+            </template>
+            <template v-else>
+              <v-progress-linear v-if="showMembersRefreshingIndicator" indeterminate class="mb-3" />
+              <p v-if="!canViewMembers" class="text-body-2 text-medium-emphasis mb-0">
+                You do not have permission to view members.
+              </p>
+
+              <template v-else>
+                <div class="text-caption text-medium-emphasis mb-2">Members</div>
+                <v-list density="comfortable" class="pa-0 mb-3">
+                  <v-list-item v-for="member in memberRows" :key="member.userId" class="px-0">
+                    <template #title>
+                      <div class="d-flex align-center ga-2">
+                        <span>{{ member.displayName || member.email }}</span>
+                        <v-chip v-if="showOwnerChip(member)" size="x-small" label color="secondary">Owner</v-chip>
+                      </div>
+                    </template>
+                    <template #subtitle>
+                      {{ member.email }}
+                    </template>
+
+                    <template #append>
+                      <div class="d-flex align-center ga-2">
+                        <v-select
+                          v-model="member.roleId"
+                          :items="memberRoleOptions"
+                          item-title="title"
+                          item-value="value"
+                          density="compact"
+                          variant="outlined"
+                          hide-details
+                          class="member-role-select"
+                          :disabled="showMembersRefreshingIndicator || isMemberRoleLocked(member)"
+                          @update:model-value="(value) => onMemberRoleUpdate(member, value)"
+                        />
+                        <v-btn
+                          variant="text"
+                          color="error"
+                          :disabled="showMembersRefreshingIndicator || isMemberRemoveLocked(member)"
+                          :loading="isRemoveMemberLoading(member.userId)"
+                          @click="onRemoveMember(member)"
+                        >
+                          Remove
+                        </v-btn>
+                      </div>
+                    </template>
+                  </v-list-item>
+                </v-list>
+
+                <v-divider class="mb-3" />
+
+                <div class="text-caption text-medium-emphasis mb-2">Pending invites</div>
+                <v-list density="comfortable" class="pa-0">
+                  <v-list-item v-for="invite in inviteRows" :key="invite.id" class="px-0">
+                    <template #title>
+                      {{ invite.email }}
+                    </template>
+                    <template #subtitle>
+                      Role: {{ invite.roleId }} • expires {{ formatDateTime(invite.expiresAt) }}
+                    </template>
+                    <template #append>
+                      <v-btn
+                        v-if="canRevokeInvites"
+                        variant="text"
+                        color="error"
+                        :disabled="showMembersRefreshingIndicator"
+                        :loading="isRevokeInviteLoading(invite.id)"
+                        @click="onRevokeInvite(invite.id)"
+                      >
+                        Revoke
+                      </v-btn>
+                    </template>
+                  </v-list-item>
+                  <p v-if="inviteRows.length < 1" class="text-body-2 text-medium-emphasis mb-0">No pending invites.</p>
+                </v-list>
+              </template>
+            </template>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </section>
+</template>
+
+<script setup>
+import { computed, toRefs, unref } from "vue";
+import { requireBoolean, requireFunction, requireRecord } from "../support/contractGuards.js";
+
+const props = defineProps({
+  forms: {
+    type: Object,
+    required: true
+  },
+  options: {
+    type: Object,
+    required: true
+  },
+  collections: {
+    type: Object,
+    required: true
+  },
+  permissions: {
+    type: Object,
+    required: true
+  },
+  revokeInviteId: {
+    type: Number,
+    required: true
+  },
+  removeMemberUserId: {
+    type: Number,
+    required: true
+  },
+  status: {
+    type: Object,
+    required: true
+  },
+  actions: {
+    type: Object,
+    required: true
+  }
+});
+
+requireRecord(props.forms, "forms", "MembersAdminClientElement");
+requireRecord(props.options, "options", "MembersAdminClientElement");
+requireRecord(props.collections, "collections", "MembersAdminClientElement");
+requireRecord(props.permissions, "permissions", "MembersAdminClientElement");
+requireRecord(props.status, "status", "MembersAdminClientElement");
+requireRecord(props.actions, "actions", "MembersAdminClientElement");
+
+const {
+  forms,
+  options,
+  collections,
+  permissions,
+  revokeInviteId,
+  removeMemberUserId,
+  status,
+  actions
+} = toRefs(props);
+
+const actionHandlers = Object.freeze({
+  submitInvite: requireFunction(actions.value.submitInvite, "actions.submitInvite", "MembersAdminClientElement"),
+  submitRevokeInvite: requireFunction(
+    actions.value.submitRevokeInvite,
+    "actions.submitRevokeInvite",
+    "MembersAdminClientElement"
+  ),
+  submitMemberRoleUpdate: requireFunction(
+    actions.value.submitMemberRoleUpdate,
+    "actions.submitMemberRoleUpdate",
+    "MembersAdminClientElement"
+  ),
+  submitRemoveMember: requireFunction(
+    actions.value.submitRemoveMember,
+    "actions.submitRemoveMember",
+    "MembersAdminClientElement"
+  )
+});
+
+const inviteForm = computed(() => requireRecord(forms.value.invite, "forms.invite", "MembersAdminClientElement"));
+const workspaceForm = computed(() =>
+  requireRecord(forms.value.workspace, "forms.workspace", "MembersAdminClientElement")
+);
+
+const memberRows = computed(() => {
+  const source = collections.value.members;
+  return Array.isArray(unref(source)) ? unref(source) : [];
+});
+
+const inviteRows = computed(() => {
+  const source = collections.value.invites;
+  return Array.isArray(unref(source)) ? unref(source) : [];
+});
+
+const inviteRoleOptions = computed(() => {
+  const source = options.value.inviteRoleOptions;
+  return Array.isArray(unref(source)) ? unref(source) : [];
+});
+
+const memberRoleOptions = computed(() => {
+  const source = options.value.memberRoleOptions;
+  return Array.isArray(unref(source)) ? unref(source) : [];
+});
+
+const canViewMembers = computed(() => Boolean(unref(permissions.value.canViewMembers)));
+const canInviteMembers = computed(() => Boolean(unref(permissions.value.canInviteMembers)));
+const canManageMembers = computed(() => Boolean(unref(permissions.value.canManageMembers)));
+const canRevokeInvites = computed(() => Boolean(unref(permissions.value.canRevokeInvites)));
+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 workspaceInvitePolicyLoaded = computed(() =>
+  requireBoolean(status.value.hasLoadedWorkspaceSettings, "status.hasLoadedWorkspaceSettings", "MembersAdminClientElement")
+);
+const workspaceInvitePolicyRefreshing = computed(() =>
+  requireBoolean(
+    status.value.isRefreshingWorkspaceSettings,
+    "status.isRefreshingWorkspaceSettings",
+    "MembersAdminClientElement"
+  )
+);
+const membersListLoaded = computed(() =>
+  requireBoolean(status.value.hasLoadedMembersList, "status.hasLoadedMembersList", "MembersAdminClientElement")
+);
+const membersListRefreshing = computed(() =>
+  requireBoolean(status.value.isRefreshingMembersList, "status.isRefreshingMembersList", "MembersAdminClientElement")
+);
+const inviteListLoaded = computed(() =>
+  requireBoolean(status.value.hasLoadedInviteList, "status.hasLoadedInviteList", "MembersAdminClientElement")
+);
+const inviteListRefreshing = computed(() =>
+  requireBoolean(status.value.isRefreshingInviteList, "status.isRefreshingInviteList", "MembersAdminClientElement")
+);
+
+const showWorkspaceInviteLoadingSkeleton = computed(
+  () => canInviteMembers.value && !workspaceInvitePolicyLoaded.value
+);
+const showWorkspaceInviteRefreshingIndicator = computed(
+  () => canInviteMembers.value && workspaceInvitePolicyLoaded.value && workspaceInvitePolicyRefreshing.value
+);
+
+const showMembersLoadingSkeleton = computed(
+  () =>
+    canViewMembers.value &&
+    (!membersListLoaded.value || !inviteListLoaded.value)
+);
+const showMembersRefreshingIndicator = computed(
+  () =>
+    canViewMembers.value &&
+    membersListLoaded.value &&
+    inviteListLoaded.value &&
+    (membersListRefreshing.value || inviteListRefreshing.value)
+);
+
+const workspaceInvitesAvailable = computed(() => Boolean(unref(workspaceForm.value.invitesAvailable)));
+const workspaceInvitesEnabled = computed(() => Boolean(unref(workspaceForm.value.invitesEnabled)));
+
+const canShowInviteForm = computed(
+  () => canInviteMembers.value && workspaceInvitesAvailable.value && workspaceInvitesEnabled.value
+);
+
+function formatDateTime(value) {
+  if (typeof options.value.formatDateTime === "function") {
+    return options.value.formatDateTime(value);
+  }
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return "unknown";
+  }
+
+  return date.toLocaleString();
+}
+
+function showOwnerChip(member) {
+  return Boolean(member?.isOwner);
+}
+
+function isMemberRoleLocked(member) {
+  if (!canManageMembers.value) {
+    return true;
+  }
+
+  return Boolean(member?.isOwner);
+}
+
+function isMemberRemoveLocked(member) {
+  if (!canManageMembers.value) {
+    return true;
+  }
+
+  return Boolean(member?.isOwner);
+}
+
+function isRevokeInviteLoading(inviteId) {
+  return isRevokingInvite.value && revokeInviteId.value === Number(inviteId || 0);
+}
+
+function isRemoveMemberLoading(memberUserId) {
+  return isRemovingMember.value && removeMemberUserId.value === Number(memberUserId || 0);
+}
+
+async function onSubmitInvite() {
+  if (!canShowInviteForm.value) {
+    return;
+  }
+
+  await actionHandlers.submitInvite();
+}
+
+async function onRevokeInvite(inviteId) {
+  if (!canRevokeInvites.value) {
+    return;
+  }
+
+  await actionHandlers.submitRevokeInvite(inviteId);
+}
+
+async function onMemberRoleUpdate(member, roleId) {
+  if (isMemberRoleLocked(member)) {
+    return;
+  }
+
+  await actionHandlers.submitMemberRoleUpdate(member, roleId);
+}
+
+async function onRemoveMember(member) {
+  if (isMemberRemoveLocked(member)) {
+    return;
+  }
+
+  await actionHandlers.submitRemoveMember(member);
+}
+</script>
+
+<style scoped>
+.member-role-select {
+  width: 160px;
+}
+</style>

package/src/client/components/ProfileClientElement.vue

@@ -0,0 +1,242 @@
+<template>
+  <section :class="rootClasses" :data-testid="uiTestIds.root">
+    <v-card
+      class="profile-client-card"
+      :class="uiClasses.card"
+      :rounded="resolvedVariant.surface === 'plain' ? '0' : 'lg'"
+      :elevation="0"
+      :border="resolvedVariant.surface !== 'plain'"
+      :variant="resolvedVariant.surface === 'plain' ? 'text' : undefined"
+      :data-testid="uiTestIds.card"
+    >
+      <v-card-item v-if="resolvedFeatures.header">
+        <v-card-title class="text-subtitle-1">{{ copyText.title }}</v-card-title>
+      </v-card-item>
+      <v-divider v-if="resolvedFeatures.header" />
+      <v-card-text>
+        <slot name="form-before" :state="state" :actions="actions" />
+
+        <v-form @submit.prevent="onSubmitProfile" novalidate>
+          <v-row class="mb-2">
+            <v-col cols="12" md="4" class="d-flex flex-column align-center justify-center">
+              <v-avatar :size="state.preferencesForm.avatarSize" color="surface-variant" rounded="circle" class="mb-3">
+                <v-img v-if="state.profileAvatar.effectiveUrl" :src="state.profileAvatar.effectiveUrl" cover />
+                <span v-else class="text-h6">{{ state.profileInitials }}</span>
+              </v-avatar>
+              <div class="text-caption text-medium-emphasis">
+                {{ copyText.previewSizePrefix }} {{ state.preferencesForm.avatarSize }} {{ copyText.previewSizeSuffix }}
+              </div>
+            </v-col>
+            <v-col cols="12" md="8">
+              <div class="d-flex flex-wrap ga-2 mb-2">
+                <v-btn variant="tonal" color="secondary" :data-testid="uiTestIds.avatarReplaceButton" @click="onAvatarReplace">
+                  {{ copyText.replaceAvatar }}
+                </v-btn>
+                <v-btn
+                  v-if="resolvedFeatures.removeAvatar && state.profileAvatar.hasUploadedAvatar"
+                  variant="text"
+                  color="error"
+                  :data-testid="uiTestIds.avatarRemoveButton"
+                  :loading="state.avatarDeleteMutation.isPending.value"
+                  @click="onAvatarRemove"
+                >
+                  {{ copyText.removeAvatar }}
+                </v-btn>
+                <slot name="avatar-actions-extra" :state="state" :actions="actions" />
+              </div>
+              <div v-if="state.selectedAvatarFileName" class="text-caption text-medium-emphasis mb-2">
+                {{ copyText.selectedFilePrefix }} {{ state.selectedAvatarFileName }}
+              </div>
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="state.profileForm.displayName"
+                :label="copyText.displayName"
+                variant="outlined"
+                :density="resolvedVariant.density"
+                autocomplete="nickname"
+                :error-messages="state.profileFieldErrors.displayName ? [state.profileFieldErrors.displayName] : []"
+              />
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="state.profileForm.email"
+                :label="copyText.email"
+                variant="outlined"
+                :density="resolvedVariant.density"
+                readonly
+                :hint="copyText.emailHint"
+                persistent-hint
+              />
+            </v-col>
+          </v-row>
+          <v-btn type="submit" color="primary" :loading="state.profileMutation.isPending.value" :data-testid="uiTestIds.submitButton">
+            {{ copyText.saveProfile }}
+          </v-btn>
+
+          <slot name="form-after" :state="state" :actions="actions" />
+        </v-form>
+
+        <slot name="footer-extra" :state="state" :actions="actions" />
+      </v-card-text>
+    </v-card>
+  </section>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { createComponentInteractionEmitter } from "@jskit-ai/kernel/client";
+import {
+  normalizeObject,
+  normalizeOneOf
+} from "@jskit-ai/kernel/shared/support/normalize";
+
+const DEFAULT_COPY = Object.freeze({
+  title: "Profile",
+  previewSizePrefix: "Preview size:",
+  previewSizeSuffix: "px",
+  replaceAvatar: "Replace avatar",
+  removeAvatar: "Remove avatar",
+  selectedFilePrefix: "Selected file:",
+  displayName: "Display name",
+  email: "Email",
+  emailHint: "Managed by Supabase Auth",
+  saveProfile: "Save profile"
+});
+
+const props = defineProps({
+  state: {
+    type: Object,
+    required: true
+  },
+  actions: {
+    type: Object,
+    required: true
+  },
+  copy: {
+    type: Object,
+    default: () => ({})
+  },
+  variant: {
+    type: Object,
+    default: () => ({})
+  },
+  features: {
+    type: Object,
+    default: () => ({})
+  },
+  ui: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+const emit = defineEmits(["action:started", "action:succeeded", "action:failed", "interaction", "profile:submit", "avatar:replace", "avatar:remove"]);
+
+const state = props.state;
+const actions = props.actions;
+const {
+  emitInteraction,
+  invokeAction
+} = createComponentInteractionEmitter(emit);
+
+const copyText = computed(() => ({
+  ...DEFAULT_COPY,
+  ...normalizeObject(props.copy)
+}));
+
+const resolvedVariant = computed(() => {
+  const variant = normalizeObject(props.variant);
+  return {
+    layout: normalizeOneOf(variant.layout, ["compact", "comfortable"], "comfortable"),
+    surface: normalizeOneOf(variant.surface, ["plain", "carded"], "carded"),
+    density: normalizeOneOf(variant.density, ["compact", "comfortable"], "comfortable"),
+    tone: normalizeOneOf(variant.tone, ["neutral", "emphasized"], "neutral")
+  };
+});
+
+const resolvedFeatures = computed(() => {
+  const features = normalizeObject(props.features);
+  return {
+    header: features.header !== false,
+    removeAvatar: features.removeAvatar !== false
+  };
+});
+
+const uiClasses = computed(() => {
+  const classes = normalizeObject(normalizeObject(props.ui).classes);
+  return {
+    root: String(classes.root || "").trim(),
+    card: String(classes.card || "").trim()
+  };
+});
+
+const uiTestIds = computed(() => {
+  const testIds = normalizeObject(normalizeObject(props.ui).testIds);
+  return {
+    root: String(testIds.root || "profile-client-element"),
+    card: String(testIds.card || "profile-client-card"),
+    submitButton: String(testIds.submitButton || "profile-submit-button"),
+    avatarReplaceButton: String(testIds.avatarReplaceButton || "profile-avatar-replace-button"),
+    avatarRemoveButton: String(testIds.avatarRemoveButton || "profile-avatar-remove-button")
+  };
+});
+
+const rootClasses = computed(() => {
+  const classes = [
+    "profile-client-element",
+    `profile-client-element--layout-${resolvedVariant.value.layout}`,
+    `profile-client-element--surface-${resolvedVariant.value.surface}`,
+    `profile-client-element--density-${resolvedVariant.value.density}`,
+    `profile-client-element--tone-${resolvedVariant.value.tone}`
+  ];
+  if (uiClasses.value.root) {
+    classes.push(uiClasses.value.root);
+  }
+  return classes;
+});
+
+async function onSubmitProfile() {
+  const payload = {
+    displayName: String(state.profileForm?.displayName || "").trim()
+  };
+  emit("profile:submit", payload);
+  emitInteraction("profile:submit", payload);
+  await invokeAction("submitProfile", payload, actions.submitProfile);
+}
+
+async function onAvatarReplace() {
+  emit("avatar:replace", {});
+  emitInteraction("avatar:replace");
+  await invokeAction("openAvatarEditor", {}, actions.openAvatarEditor);
+}
+
+async function onAvatarRemove() {
+  emit("avatar:remove", {});
+  emitInteraction("avatar:remove");
+  await invokeAction("submitAvatarDelete", {}, actions.submitAvatarDelete);
+}
+</script>
+
+<style scoped>
+.profile-client-element--layout-compact :deep(.v-card-item),
+.profile-client-element--layout-compact :deep(.v-card-text) {
+  padding-block: 0.72rem;
+}
+
+.profile-client-element--surface-plain .profile-client-card {
+  box-shadow: none;
+  border-width: 0;
+}
+
+.profile-client-element--density-compact :deep(.v-field__input) {
+  min-height: 34px;
+}
+
+.profile-client-element--tone-emphasized :deep(.v-avatar) {
+  box-shadow: 0 0 0 2px rgba(var(--v-theme-primary), 0.18);
+}
+</style>

package/src/client/components/UsersProfileSurfaceSwitchMenuItem.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from "vue";
+import { useSurfaceRouteContext } from "../composables/useSurfaceRouteContext.js";
+import { resolveProfileSurfaceMenuLinks } from "../lib/profileSurfaceMenuLinks.js";
+
+const props = defineProps({
+  surface: {
+    type: String,
+    default: "*"
+  }
+});
+
+const { placementContext, currentSurfaceId } = useSurfaceRouteContext();
+
+const resolvedSurfaceId = computed(() => {
+  const explicitSurface = String(props.surface || "").trim().toLowerCase();
+  if (explicitSurface && explicitSurface !== "*") {
+    return explicitSurface;
+  }
+  return String(currentSurfaceId.value || "").trim().toLowerCase() || "*";
+});
+
+const resolvedLinks = computed(() => {
+  return resolveProfileSurfaceMenuLinks({
+    context: placementContext.value,
+    surface: resolvedSurfaceId.value
+  });
+});
+</script>
+
+<template>
+  <v-list-item
+    v-for="link in resolvedLinks"
+    :key="link.id"
+    :title="link.label"
+    :to="link.to"
+    :prepend-icon="link.icon"
+  />
+</template>