@jskit-ai/users-web 0.1.4

package/src/client/composables/accountSettingsAvatarUploadRuntime.js

@@ -0,0 +1,241 @@
+import Uppy from "@uppy/core";
+import Dashboard from "@uppy/dashboard";
+import ImageEditor from "@uppy/image-editor";
+import Compressor from "@uppy/compressor";
+import XHRUpload from "@uppy/xhr-upload";
+import "@uppy/core/css/style.min.css";
+import "@uppy/dashboard/css/style.min.css";
+import "@uppy/image-editor/css/style.min.css";
+import { resolveFieldErrors } from "@jskit-ai/http-runtime/client";
+import { usersWebHttpClient } from "../lib/httpClient.js";
+import {
+  AVATAR_ALLOWED_MIME_TYPES,
+  AVATAR_MAX_UPLOAD_BYTES
+} from "./accountSettingsRuntimeConstants.js";
+
+function parseUploadResponse(xhr) {
+  if (!xhr.responseText) {
+    return {};
+  }
+
+  try {
+    return JSON.parse(xhr.responseText);
+  } catch {
+    return {};
+  }
+}
+
+function stopImageEditor(uppy) {
+  const imageEditor = uppy.getPlugin("ImageEditor");
+  if (imageEditor && typeof imageEditor.stop === "function") {
+    imageEditor.stop();
+  }
+}
+
+function createAccountSettingsAvatarUploadRuntime({
+  queryClient,
+  sessionQueryKey,
+  accountSettingsQueryKey,
+  selectedAvatarFileName,
+  applySettingsData,
+  reportAccountFeedback
+} = {}) {
+  let avatarUppy = null;
+
+  async function resolveCsrfToken() {
+    const sessionPayload = await queryClient.fetchQuery({
+      queryKey: sessionQueryKey,
+      queryFn: () =>
+        usersWebHttpClient.request("/api/session", {
+          method: "GET"
+        }),
+      staleTime: 60_000
+    });
+
+    const csrfToken = String(sessionPayload?.csrfToken || "");
+    if (!csrfToken) {
+      throw new Error("Unable to prepare secure avatar upload request.");
+    }
+
+    return csrfToken;
+  }
+
+  function setup() {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    if (avatarUppy) {
+      return;
+    }
+
+    const uppy = new Uppy({
+      autoProceed: false,
+      restrictions: {
+        maxNumberOfFiles: 1,
+        allowedFileTypes: [...AVATAR_ALLOWED_MIME_TYPES],
+        maxFileSize: AVATAR_MAX_UPLOAD_BYTES
+      }
+    });
+
+    uppy.use(Dashboard, {
+      inline: false,
+      closeAfterFinish: false,
+      showProgressDetails: true,
+      proudlyDisplayPoweredByUppy: false,
+      hideUploadButton: false,
+      doneButtonHandler: () => {
+        const dashboard = uppy.getPlugin("Dashboard");
+        if (dashboard && typeof dashboard.closeModal === "function") {
+          dashboard.closeModal();
+        }
+      },
+      note: `Accepted: ${AVATAR_ALLOWED_MIME_TYPES.join(", ")}, max ${Math.floor(AVATAR_MAX_UPLOAD_BYTES / (1024 * 1024))}MB`
+    });
+
+    uppy.use(ImageEditor, {
+      quality: 0.9
+    });
+
+    uppy.use(Compressor, {
+      quality: 0.84,
+      limit: 1
+    });
+
+    uppy.use(XHRUpload, {
+      endpoint: "/api/settings/profile/avatar",
+      method: "POST",
+      formData: true,
+      fieldName: "avatar",
+      withCredentials: true,
+      onBeforeRequest: async (xhr) => {
+        const csrfToken = await resolveCsrfToken();
+        xhr.setRequestHeader("csrf-token", csrfToken);
+      },
+      getResponseData: parseUploadResponse
+    });
+
+    uppy.on("file-added", (file) => {
+      selectedAvatarFileName.value = String(file?.name || "");
+    });
+
+    uppy.on("file-removed", () => {
+      selectedAvatarFileName.value = "";
+    });
+
+    uppy.on("file-editor:complete", (file) => {
+      selectedAvatarFileName.value = String(file?.name || selectedAvatarFileName.value || "");
+      stopImageEditor(uppy);
+    });
+
+    uppy.on("file-editor:cancel", () => {
+      stopImageEditor(uppy);
+    });
+
+    uppy.on("dashboard:modal-closed", () => {
+      stopImageEditor(uppy);
+    });
+
+    uppy.on("upload-success", (_file, response) => {
+      const data = response?.body;
+      if (!data || typeof data !== "object") {
+        reportAccountFeedback({
+          message: "Avatar uploaded, but the response payload was invalid.",
+          severity: "error",
+          channel: "banner",
+          dedupeKey: "users-web.account-settings-runtime:avatar-upload-invalid-response"
+        });
+        return;
+      }
+
+      applySettingsData(data);
+      queryClient.setQueryData(accountSettingsQueryKey, data);
+
+      const dashboard = uppy.getPlugin("Dashboard");
+      if (dashboard && typeof dashboard.closeModal === "function") {
+        dashboard.closeModal();
+      }
+
+      reportAccountFeedback({
+        message: "Avatar uploaded.",
+        severity: "success",
+        channel: "snackbar",
+        dedupeKey: "users-web.account-settings-runtime:avatar-uploaded"
+      });
+      selectedAvatarFileName.value = "";
+    });
+
+    uppy.on("upload-error", (_file, error, response) => {
+      const body = response?.body && typeof response.body === "object" ? response.body : {};
+      const fieldErrors = resolveFieldErrors(body);
+
+      reportAccountFeedback({
+        message: String(fieldErrors.avatar || body?.error || error?.message || "Unable to upload avatar."),
+        severity: "error",
+        channel: "banner",
+        dedupeKey: "users-web.account-settings-runtime:avatar-upload-error"
+      });
+    });
+
+    uppy.on("restriction-failed", (_file, error) => {
+      reportAccountFeedback({
+        message: String(error?.message || "Selected avatar file does not meet upload restrictions."),
+        severity: "error",
+        channel: "banner",
+        dedupeKey: "users-web.account-settings-runtime:avatar-upload-restriction"
+      });
+    });
+
+    uppy.on("complete", (result) => {
+      const successfulCount = Array.isArray(result?.successful) ? result.successful.length : 0;
+      if (successfulCount <= 0) {
+        return;
+      }
+
+      try {
+        uppy.clear();
+      } catch {
+        // Upload succeeded; ignore clear timing issues.
+      }
+    });
+
+    avatarUppy = uppy;
+  }
+
+  function openEditor() {
+    setup();
+
+    const uppy = avatarUppy;
+    if (!uppy) {
+      reportAccountFeedback({
+        message: "Avatar editor is unavailable in this environment.",
+        severity: "error",
+        channel: "banner",
+        dedupeKey: "users-web.account-settings-runtime:avatar-editor-unavailable"
+      });
+      return;
+    }
+
+    const dashboard = uppy.getPlugin("Dashboard");
+    if (dashboard && typeof dashboard.openModal === "function") {
+      dashboard.openModal();
+    }
+  }
+
+  function destroy() {
+    if (!avatarUppy) {
+      return;
+    }
+
+    avatarUppy.destroy();
+    avatarUppy = null;
+  }
+
+  return Object.freeze({
+    destroy,
+    openEditor,
+    setup
+  });
+}
+
+export { createAccountSettingsAvatarUploadRuntime };

package/src/client/composables/accountSettingsInvitesRuntime.js

@@ -0,0 +1,88 @@
+import { resolveErrorStatusCode } from "../support/runtimeNormalization.js";
+
+function createAccountSettingsInvitesRuntime({
+  invitesAvailable,
+  isResolvingInvite,
+  inviteAction,
+  redeemInviteModel,
+  redeemInviteCommand,
+  pendingInvites,
+  pendingInvitesModel,
+  pendingInvitesView,
+  openWorkspace,
+  reportAccountFeedback
+} = {}) {
+  async function respondToInvite(invite, decision) {
+    if (!invitesAvailable.value) {
+      return;
+    }
+
+    const token = String(invite?.token || "").trim();
+    const normalizedDecision = String(decision || "").trim().toLowerCase();
+    if (!token || (normalizedDecision !== "accept" && normalizedDecision !== "refuse")) {
+      return;
+    }
+    if (isResolvingInvite.value) {
+      return;
+    }
+
+    inviteAction.value = {
+      token,
+      decision: normalizedDecision
+    };
+    redeemInviteModel.token = token;
+    redeemInviteModel.decision = normalizedDecision;
+
+    try {
+      await redeemInviteCommand.run();
+      pendingInvitesModel.pendingInvites = pendingInvites.value.filter((entry) => entry.token !== token);
+      await pendingInvitesView.refresh();
+
+      if (normalizedDecision === "accept") {
+        const nextWorkspaceSlug = String(invite?.workspaceSlug || "").trim();
+        if (nextWorkspaceSlug) {
+          await openWorkspace(nextWorkspaceSlug);
+          return;
+        }
+      }
+
+      reportAccountFeedback({
+        message: normalizedDecision === "accept" ? "Invitation accepted." : "Invitation refused.",
+        severity: "success",
+        channel: "snackbar",
+        dedupeKey: `users-web.account-settings-runtime:invite-${normalizedDecision}:${token}`
+      });
+    } catch (error) {
+      const statusCode = resolveErrorStatusCode(error);
+      const fallbackMessage = normalizedDecision === "accept"
+        ? "Unable to accept invitation."
+        : "Unable to refuse invitation.";
+      reportAccountFeedback({
+        message: statusCode === 404
+          ? "Invitation no longer exists."
+          : String(error?.message || fallbackMessage),
+        severity: "error",
+        channel: "banner",
+        dedupeKey: `users-web.account-settings-runtime:invite-${normalizedDecision}-error:${token}`
+      });
+    } finally {
+      inviteAction.value = {
+        token: "",
+        decision: ""
+      };
+      redeemInviteModel.token = "";
+      redeemInviteModel.decision = "";
+    }
+  }
+
+  return Object.freeze({
+    accept(invite) {
+      return respondToInvite(invite, "accept");
+    },
+    refuse(invite) {
+      return respondToInvite(invite, "refuse");
+    }
+  });
+}
+
+export { createAccountSettingsInvitesRuntime };

package/src/client/composables/accountSettingsRuntimeConstants.js

@@ -0,0 +1,77 @@
+const AVATAR_ALLOWED_MIME_TYPES = Object.freeze(["image/jpeg", "image/png", "image/webp"]);
+const AVATAR_MAX_UPLOAD_BYTES = 5 * 1024 * 1024;
+const AVATAR_DEFAULT_SIZE = 64;
+
+const THEME_OPTIONS = Object.freeze([
+  { title: "System", value: "system" },
+  { title: "Light", value: "light" },
+  { title: "Dark", value: "dark" }
+]);
+
+const LOCALE_OPTIONS = Object.freeze([
+  { title: "English (US)", value: "en-US" },
+  { title: "English (UK)", value: "en-GB" },
+  { title: "Italian", value: "it-IT" },
+  { title: "Spanish", value: "es-ES" }
+]);
+
+const DATE_FORMAT_OPTIONS = Object.freeze([
+  { title: "System", value: "system" },
+  { title: "MM/DD/YYYY", value: "mdy" },
+  { title: "DD/MM/YYYY", value: "dmy" },
+  { title: "YYYY-MM-DD", value: "ymd" }
+]);
+
+const NUMBER_FORMAT_OPTIONS = Object.freeze([
+  { title: "System", value: "system" },
+  { title: "1,234.56", value: "comma-dot" },
+  { title: "1.234,56", value: "dot-comma" },
+  { title: "1 234,56", value: "space-comma" }
+]);
+
+const CURRENCY_OPTIONS = Object.freeze(["USD", "EUR", "GBP", "AUD", "JPY"]);
+
+const TIME_ZONE_OPTIONS = Object.freeze([
+  "UTC",
+  "America/New_York",
+  "America/Chicago",
+  "America/Denver",
+  "America/Los_Angeles",
+  "Europe/London",
+  "Europe/Rome",
+  "Asia/Tokyo",
+  "Australia/Sydney"
+]);
+
+const AVATAR_SIZE_OPTIONS = Object.freeze([32, 40, 48, 56, 64, 72, 80, 96, 112, 128]);
+
+const ACCOUNT_SETTINGS_DEFAULTS = Object.freeze({
+  preferences: {
+    theme: "system",
+    locale: "en-US",
+    timeZone: "UTC",
+    dateFormat: "system",
+    numberFormat: "system",
+    currencyCode: "USD",
+    avatarSize: AVATAR_DEFAULT_SIZE
+  },
+  notifications: {
+    productUpdates: true,
+    accountActivity: true,
+    securityAlerts: true
+  }
+});
+
+export {
+  ACCOUNT_SETTINGS_DEFAULTS,
+  AVATAR_ALLOWED_MIME_TYPES,
+  AVATAR_DEFAULT_SIZE,
+  AVATAR_MAX_UPLOAD_BYTES,
+  AVATAR_SIZE_OPTIONS,
+  CURRENCY_OPTIONS,
+  DATE_FORMAT_OPTIONS,
+  LOCALE_OPTIONS,
+  NUMBER_FORMAT_OPTIONS,
+  THEME_OPTIONS,
+  TIME_ZONE_OPTIONS
+};

package/src/client/composables/accountSettingsRuntimeHelpers.js

@@ -0,0 +1,75 @@
+import { ACCOUNT_SETTINGS_DEFAULTS } from "./accountSettingsRuntimeConstants.js";
+import {
+  normalizeReturnToPath as normalizeSharedReturnToPath,
+  resolveAllowedOriginsFromPlacementContext
+} from "@jskit-ai/kernel/shared/support";
+import { normalizeRecord } from "../support/runtimeNormalization.js";
+
+function normalizeReturnToPath(value, { fallback = "/", accountSettingsPath = "/account", allowedOrigins = [] } = {}) {
+  return normalizeSharedReturnToPath(value, {
+    fallback,
+    allowedOrigins,
+    blockedPathnames: [accountSettingsPath],
+    pickFirstArrayValue: true
+  });
+}
+
+function resolveAllowedReturnToOrigins(contextValue = null) {
+  return resolveAllowedOriginsFromPlacementContext(contextValue);
+}
+
+function normalizeSettingsPayload(value) {
+  return normalizeRecord(value);
+}
+
+function normalizePendingInvite(entry) {
+  if (!entry || typeof entry !== "object") {
+    return null;
+  }
+
+  const id = Number(entry.id);
+  const workspaceId = Number(entry.workspaceId);
+  if (!Number.isInteger(id) || id < 1 || !Number.isInteger(workspaceId) || workspaceId < 1) {
+    return null;
+  }
+
+  const workspaceSlug = String(entry.workspaceSlug || "").trim();
+  if (!workspaceSlug) {
+    return null;
+  }
+
+  const token = String(entry.token || "").trim();
+  if (!token) {
+    return null;
+  }
+
+  return {
+    id,
+    token,
+    workspaceId,
+    workspaceSlug,
+    workspaceName: String(entry.workspaceName || workspaceSlug).trim() || workspaceSlug,
+    workspaceAvatarUrl: String(entry.workspaceAvatarUrl || "").trim(),
+    roleId: String(entry.roleId || "member").trim().toLowerCase() || "member",
+    status: String(entry.status || "pending").trim().toLowerCase() || "pending",
+    expiresAt: String(entry.expiresAt || "").trim()
+  };
+}
+
+function normalizeAvatarSize(value) {
+  const numeric = Number(value);
+  if (!Number.isInteger(numeric)) {
+    return ACCOUNT_SETTINGS_DEFAULTS.preferences.avatarSize;
+  }
+
+  const clamped = Math.min(128, Math.max(32, numeric));
+  return clamped;
+}
+
+export {
+  resolveAllowedReturnToOrigins,
+  normalizeAvatarSize,
+  normalizePendingInvite,
+  normalizeReturnToPath,
+  normalizeSettingsPayload
+};

package/src/client/composables/errorMessageHelpers.js

@@ -0,0 +1,66 @@
+function normalizeErrorStatus(error) {
+  if (error == null || typeof error !== "object") {
+    return null;
+  }
+
+  const hasStatus = Object.prototype.hasOwnProperty.call(error, "status");
+  const hasStatusCode = Object.prototype.hasOwnProperty.call(error, "statusCode");
+  if (!hasStatus && !hasStatusCode) {
+    return null;
+  }
+
+  const status = Number(hasStatus ? error.status : error.statusCode);
+  return Number.isInteger(status) ? status : null;
+}
+
+function isGenericTransportMessage(error) {
+  const normalizedMessage = String(error?.message || "").trim();
+  if (!normalizedMessage) {
+    return false;
+  }
+
+  const status = normalizeErrorStatus(error);
+  if (status === 0) {
+    return true;
+  }
+
+  return status != null && status >= 400 && normalizedMessage === `Request failed with status ${status}.`;
+}
+
+function toQueryErrorMessage(error, fallbackMessage = "", defaultMessage = "Request failed.") {
+  if (!error) {
+    return "";
+  }
+
+  const normalizedFallback = String(fallbackMessage || "").trim();
+  const normalizedMessage = String(error?.message || "").trim();
+  if (normalizedMessage && !isGenericTransportMessage(error)) {
+    return normalizedMessage;
+  }
+  if (normalizedFallback) {
+    return normalizedFallback;
+  }
+  if (normalizedMessage) {
+    return normalizedMessage;
+  }
+  return String(defaultMessage || "Request failed.").trim();
+}
+
+function toUiErrorMessage(error, fallbackMessage = "", defaultMessage = "Request failed.") {
+  const normalizedFallback = String(fallbackMessage || "").trim();
+  if (normalizedFallback) {
+    return normalizedFallback;
+  }
+
+  const normalizedMessage = String(error?.message || "").trim();
+  if (normalizedMessage) {
+    return normalizedMessage;
+  }
+
+  return String(defaultMessage || "Request failed.").trim();
+}
+
+export {
+  toQueryErrorMessage,
+  toUiErrorMessage
+};

package/src/client/composables/internal/useOperationScope.js

@@ -0,0 +1,144 @@
+import { computed, unref } from "vue";
+import { USERS_ROUTE_VISIBILITY_WORKSPACE } from "@jskit-ai/users-core/shared/support/usersVisibility";
+import { useScopeRuntime } from "../useScopeRuntime.js";
+import { useOperationRealtime } from "../useRealtimeQueryInvalidation.js";
+import {
+  normalizePermissions,
+  resolvePermissionAccess,
+  resolveEnabled,
+  resolveQueryKey
+} from "../scopeHelpers.js";
+
+function normalizePermissionSets(permissionSets = {}) {
+  const source = permissionSets && typeof permissionSets === "object" && !Array.isArray(permissionSets)
+    ? permissionSets
+    : {};
+  const normalized = {};
+
+  for (const [key, value] of Object.entries(source)) {
+    normalized[key] = normalizePermissions(value);
+  }
+
+  return normalized;
+}
+
+function hasAnyPermissions(permissionSets = {}) {
+  for (const list of Object.values(permissionSets)) {
+    if (Array.isArray(list) && list.length > 0) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function useOperationScope({
+  ownershipFilter = USERS_ROUTE_VISIBILITY_WORKSPACE,
+  surfaceId = "",
+  access = "auto",
+  placementSource = "users-web.operation",
+  apiSuffix = "",
+  model,
+  readEnabled = true,
+  queryKeyFactory = null,
+  permissionSets = {},
+  realtime = null
+} = {}) {
+  const normalizedPermissionSets = normalizePermissionSets(permissionSets);
+  const scopeRuntime = useScopeRuntime({
+    ownershipFilter,
+    surfaceId,
+    accessMode: access,
+    hasPermissionRequirements: hasAnyPermissions(normalizedPermissionSets),
+    placementSource
+  });
+  const normalizedOwnershipFilter = scopeRuntime.normalizedOwnershipFilter;
+  const routeContext = scopeRuntime.routeContext;
+  const workspaceSlugFromRoute = scopeRuntime.workspaceSlugFromRoute;
+  const hasRouteWorkspaceSlug = scopeRuntime.hasRouteWorkspaceSlug;
+  const accessRuntime = scopeRuntime.access;
+
+  const apiPath = computed(() =>
+    scopeRuntime.resolveApiPath(apiSuffix, {
+      model
+    })
+  );
+
+  const queryEnabled = computed(() =>
+    resolveEnabled(readEnabled, {
+      surfaceId: routeContext.currentSurfaceId.value,
+      workspaceSlug: workspaceSlugFromRoute.value,
+      ownershipFilter: normalizedOwnershipFilter,
+      model
+    })
+  );
+
+  const queryKey = computed(() =>
+    resolveQueryKey(queryKeyFactory, {
+      surfaceId: routeContext.currentSurfaceId.value,
+      workspaceSlug: workspaceSlugFromRoute.value,
+      ownershipFilter: normalizedOwnershipFilter
+    })
+  );
+  const realtimeBinding = useOperationRealtime({
+    realtime,
+    queryKey: typeof queryKeyFactory === "function" ? queryKey : null,
+    enabled: computed(() => hasRouteWorkspaceSlug.value && Boolean(apiPath.value))
+  });
+
+  function queryCanRun(accessGate = true) {
+    return computed(() =>
+      queryEnabled.value &&
+      hasRouteWorkspaceSlug.value &&
+      Boolean(apiPath.value) &&
+      Boolean(unref(accessGate))
+    );
+  }
+
+  function permissionGate(key = "") {
+    const list = normalizedPermissionSets[String(key || "")] || [];
+    return computed(() => resolvePermissionAccess(accessRuntime, list));
+  }
+
+  function loadError(baseError = "") {
+    return computed(() => {
+      if (scopeRuntime.workspaceRouteError.value) {
+        return scopeRuntime.workspaceRouteError.value;
+      }
+
+      const bootstrapError = String(accessRuntime.bootstrapError.value || "").trim();
+      if (bootstrapError) {
+        return bootstrapError;
+      }
+
+      if (baseError === undefined || baseError === null || baseError === "") {
+        return "";
+      }
+
+      return String(unref(baseError) || "").trim();
+    });
+  }
+
+  function isLoading(baseLoading = false) {
+    return computed(() => Boolean(unref(baseLoading)) || accessRuntime.isBootstrapping.value);
+  }
+
+  return Object.freeze({
+    scopeRuntime,
+    routeContext,
+    normalizedOwnershipFilter,
+    workspaceSlugFromRoute,
+    hasRouteWorkspaceSlug,
+    access: accessRuntime,
+    apiPath,
+    queryEnabled,
+    queryKey,
+    queryCanRun,
+    realtime: realtimeBinding,
+    permissionGate,
+    loadError,
+    isLoading
+  });
+}
+
+export { useOperationScope };