@vc-shell/framework 1.2.4-beta.7 → 2.0.0-alpha.0

package/shared/pages/ResetPasswordPage/components/reset-password/ResetPassword.vue

@@ -1,176 +0,0 @@
-<template>
-  <VcAuthLayout
-    :logo="customization.logo"
-    :background="background"
-    :title="t('PASSWORDRESET.TITLE')"
-    :subtitle="t('PASSWORDRESET.SUBTITLE')"
-  >
-    <VcLoading
-      v-if="loading"
-      active
-    />
-
-    <VcForm>
-      <Field
-        v-slot="{ field, errorMessage, handleChange, errors }"
-        :label="t('PASSWORDRESET.FIELDS.PASSWORD.LABEL')"
-        name="password"
-        :model-value="form.password"
-        rules="required"
-      >
-        <VcInput
-          v-bind="field"
-          ref="passwordField"
-          v-model="form.password"
-          class="tw-mb-4"
-          :label="t('PASSWORDRESET.FIELDS.PASSWORD.LABEL')"
-          :placeholder="t('PASSWORDRESET.FIELDS.PASSWORD.PLACEHOLDER')"
-          type="password"
-          :disabled="!form.tokenIsValid"
-          required
-          :error="!!errors.length"
-          :error-message="errorMessage"
-          @update:model-value="
-            (e) => {
-              handleChange(e);
-              validate();
-            }
-          "
-        />
-      </Field>
-
-      <Field
-        v-slot="{ field, errorMessage, handleChange, errors }"
-        :label="t('PASSWORDRESET.FIELDS.CONFIRM_PASSWORD.LABEL')"
-        name="confirm_password"
-        :model-value="form.confirmPassword"
-        rules="required"
-      >
-        <VcInput
-          v-bind="field"
-          ref="confirmPasswordField"
-          v-model="form.confirmPassword"
-          class="tw-mb-6"
-          :label="t('PASSWORDRESET.FIELDS.CONFIRM_PASSWORD.LABEL')"
-          :placeholder="t('PASSWORDRESET.FIELDS.CONFIRM_PASSWORD.PLACEHOLDER')"
-          :disabled="!form.tokenIsValid"
-          type="password"
-          required
-          :error="!!errors.length"
-          :error-message="errorMessage"
-          @update:model-value="
-            (e) => {
-              handleChange(e);
-              validate();
-            }
-          "
-          @keyup.enter="resetPassword"
-        />
-      </Field>
-
-      <VcButton
-        variant="primary"
-        class="tw-w-full"
-        :disabled="disableButton"
-        :loading="loading"
-        @click="resetPassword"
-      >
-        {{ t("PASSWORDRESET.SAVE_PASSWORD") }}
-      </VcButton>
-
-      <VcHint
-        v-for="error in form.errors"
-        :key="error"
-        class="tw-mt-3 tw-text-danger-500"
-      >
-        {{ t(`PASSWORDRESET.ERRORS.${error}`) }}
-      </VcHint>
-    </VcForm>
-  </VcAuthLayout>
-</template>
-
-<script lang="ts" setup>
-import { reactive, onMounted, computed } from "vue";
-import { useRouter } from "vue-router";
-import { Field, useForm } from "vee-validate";
-import { useSettings } from "@core/composables";
-import { useI18n } from "vue-i18n";
-import { useUserManagement } from "@core/composables/useUserManagement";
-
-const props = withDefaults(
-  defineProps<{
-    userId: string;
-    userName: string;
-    token: string;
-    logo: string;
-    background: string;
-  }>(),
-  {
-    background: "/assets/background.jpg",
-    logo: "/assets/logo-white.svg",
-  },
-);
-
-const { validateToken, validatePassword, resetPasswordByToken, signIn, loading } = useUserManagement();
-const router = useRouter();
-const { t } = useI18n({ useScope: "global" });
-const { validate: veeValidate } = useForm({ validateOnMount: false });
-const { uiSettings, loading: customizationLoading } = useSettings();
-
-const form = reactive<{
-  isValid: boolean;
-  tokenIsValid: boolean;
-  errors: string[];
-  password: string;
-  confirmPassword: string;
-}>({
-  isValid: false,
-  tokenIsValid: false,
-  errors: [],
-  password: "",
-  confirmPassword: "",
-});
-
-onMounted(async () => {
-  form.tokenIsValid = await validateToken(props.userId, props.token);
-  if (!form.tokenIsValid) {
-    form.errors.push("Invalid-token");
-  }
-});
-
-const disableButton = computed(() => {
-  return loading.value || !form.password || !form.confirmPassword || (!form.isValid && form.tokenIsValid);
-});
-
-const validate = async () => {
-  if (form.tokenIsValid) {
-    const errors = (await validatePassword(form.password)).errors;
-    form.errors = errors?.map((x) => x.code) as string[];
-    if (form.confirmPassword !== form.password) {
-      form.errors.push("Repeat-password");
-    }
-    form.isValid = form.errors.length == 0;
-  }
-};
-
-const resetPassword = async () => {
-  const { valid } = await veeValidate();
-  if (valid) {
-    const result = await resetPasswordByToken(props.userId, form.password, props.token);
-    if (result.succeeded) {
-      const loginResult = await signIn(props.userName, form.password);
-      if (loginResult.succeeded) {
-        router.push("/");
-      } else {
-        form.errors = ("error" in loginResult && [loginResult.error as string]) || [];
-      }
-    } else {
-      form.errors = result.errors as string[];
-    }
-  }
-};
-
-const customization = computed(() => ({
-  logo: !customizationLoading.value ? uiSettings.value?.logo || props.logo : "",
-}));
-</script>

package/shared/pages/ResetPasswordPage/components/reset-password/index.ts

@@ -1,3 +0,0 @@
-import _ResetPassword from "@shared/pages/ResetPasswordPage/components/reset-password/ResetPassword.vue";
-
-export const ResetPassword = _ResetPassword as typeof _ResetPassword;

package/shared/pages/ResetPasswordPage/components/reset-password/reset-password.stories.ts

@@ -1,64 +0,0 @@
-import { onUnmounted } from "vue";
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import ResetPassword from "./ResetPassword.vue";
-import { useUserManagement } from "@core/composables/useUserManagement";
-import { mockPlatformApiFetch, patchUserManagement } from "@shared/pages/_storybook-helpers";
-
-const meta = {
-  title: "Shared/Pages/ResetPassword",
-  component: ResetPassword,
-  tags: ["autodocs"],
-  decorators: [
-    () => ({
-      setup() {
-        mockPlatformApiFetch();
-        patchUserManagement();
-      },
-      template: "<story />",
-    }),
-  ],
-  args: {
-    userId: "mock-user-id",
-    userName: "john@example.com",
-    token: "mock-reset-token",
-  },
-  parameters: {
-    layout: "fullscreen",
-    docs: {
-      description: {
-        component:
-          "Reset password page reached via email link. Validates token on mount, then allows setting a new password with confirmation. Auto-signs in on success.",
-      },
-    },
-  },
-} satisfies Meta<typeof ResetPassword>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithCustomBackground: Story = {
-  args: {
-    background: "https://images.unsplash.com/photo-1557683316-973673baf926?w=1920&q=80",
-  },
-};
-
-export const InvalidToken: Story = {
-  args: {
-    token: "expired-token",
-  },
-  decorators: [
-    () => ({
-      setup() {
-        const userManagement = useUserManagement();
-        const orig = userManagement.validateToken;
-        userManagement.validateToken = async () => false;
-        onUnmounted(() => {
-          userManagement.validateToken = orig;
-        });
-      },
-      template: "<story />",
-    }),
-  ],
-};

package/shared/pages/ResetPasswordPage/index.ts

@@ -1 +0,0 @@
-export * from "@shared/pages/ResetPasswordPage/components";

package/shared/pages/ResetPasswordPage/plugin.ts

@@ -1,4 +0,0 @@
-import { createModule } from "@core/plugins";
-import * as components from "@shared/pages/ResetPasswordPage/components";
-
-export const ResetPasswordPage = createModule(components);

package/shared/pages/_storybook-helpers.ts

@@ -1,71 +0,0 @@
-import { defineComponent, onUnmounted } from "vue";
-import { useRouter } from "vue-router";
-import { useUserManagement } from "@core/composables/useUserManagement";
-import { IdentityResult, SecurityResult, SignInResult } from "@core/api/platform";
-
-/**
- * Intercepts window.fetch for platform API endpoints that don't exist in Storybook.
- * Returns safe empty responses so composables like useSettings don't throw.
- */
-export function mockPlatformApiFetch() {
-  const originalFetch = window.fetch;
-
-  window.fetch = async function (input: RequestInfo | URL, init?: RequestInit) {
-    const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
-
-    // useSettings → GET /api/platform/settings/ui/customization
-    if (url.includes("/api/platform/settings/ui/customization")) {
-      return new Response(JSON.stringify({ defaultValue: null }), {
-        status: 200,
-        headers: { "Content-Type": "application/json" },
-      });
-    }
-
-    return originalFetch.call(window, input, init);
-  } as typeof fetch;
-
-  onUnmounted(() => {
-    window.fetch = originalFetch;
-  });
-}
-
-/**
- * Patches useUserManagement methods with safe no-op/success stubs
- * and ensures auth-related routes exist for router.push() calls.
- */
-export function patchUserManagement() {
-  const userManagement = useUserManagement();
-  const router = useRouter();
-
-  const originals = {
-    signIn: userManagement.signIn,
-    signOut: userManagement.signOut,
-    validateToken: userManagement.validateToken,
-    validatePassword: userManagement.validatePassword,
-    resetPasswordByToken: userManagement.resetPasswordByToken,
-    requestPasswordReset: userManagement.requestPasswordReset,
-    changeUserPassword: userManagement.changeUserPassword,
-  };
-
-  userManagement.signIn = async () => new SignInResult({ succeeded: true });
-  userManagement.signOut = async () => {};
-  userManagement.validateToken = async () => true;
-  userManagement.validatePassword = async () => new IdentityResult({ succeeded: true, errors: [] });
-  userManagement.resetPasswordByToken = async () => new SecurityResult({ succeeded: true, errors: [] });
-  userManagement.requestPasswordReset = async () => ({ succeeded: true });
-  userManagement.changeUserPassword = async () => new SecurityResult({ succeeded: true, errors: [] });
-
-  for (const name of ["Login", "ForgotPassword", "ChangePassword"] as const) {
-    if (!router.hasRoute(name)) {
-      router.addRoute({
-        name,
-        path: `/${name.toLowerCase()}`,
-        component: defineComponent({ template: "<div />" }),
-      });
-    }
-  }
-
-  onUnmounted(() => {
-    Object.assign(userManagement, originals);
-  });
-}

package/shared/pages/index.ts

@@ -1,5 +0,0 @@
-export * from "@shared/pages/InvitePage";
-export * from "@shared/pages/LoginPage";
-export * from "@shared/pages/ForgotPasswordPage";
-export * from "@shared/pages/ResetPasswordPage";
-export * from "@shared/pages/ChangePasswordPage";

package/shared/pages/plugin.ts

@@ -1,5 +0,0 @@
-export * from "@shared/pages/InvitePage/plugin";
-export * from "@shared/pages/LoginPage/plugin";
-export * from "@shared/pages/ForgotPasswordPage/plugin";
-export * from "@shared/pages/ResetPasswordPage/plugin";
-export * from "@shared/pages/ChangePasswordPage/plugin";

package/shared/utilities/assets.ts

@@ -1,43 +0,0 @@
-const fileThumbnails = [
-  { image: "bi-filetype-pdf", extensions: ["pdf"] },
-  { image: "bi-filetype-doc", extensions: ["doc", "docx"] },
-  { image: "bi-filetype-xls", extensions: ["xls", "xlsx"] },
-  { image: "bi-filetype-ppt", extensions: ["ppt", "pptx"] },
-  { image: "bi-filetype-csv", extensions: ["csv"] },
-  { image: "bi-file-zip", extensions: ["zip"] },
-  { image: "bi-file-music", extensions: ["mp3", "aac"] },
-  { image: "bi-file-play", extensions: ["mp4", "avi"] },
-];
-
-const imageExtensions = new Set(["png", "jpg", "jpeg", "svg", "gif"]);
-
-function getExtension(fileName: string) {
-  return fileName.split(".").pop()?.toLowerCase();
-}
-
-function isImage(name: string | undefined) {
-  if (!name) return false;
-  return imageExtensions.has(getExtension(name) ?? "");
-}
-
-function getFileThumbnail(name: string | undefined) {
-  if (!name) return "bi-file-earmark";
-  return (
-    fileThumbnails.find((thumb) => thumb.extensions.some((ext) => ext === getExtension(name)))?.image ||
-    "bi-file-earmark"
-  );
-}
-
-function readableSize(bytes: number | undefined, decimals = 2) {
-  if (!bytes) return "0 Bytes";
-
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ["Bytes", "KB", "MB", "GB"];
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
-}
-
-export { isImage, getFileThumbnail, readableSize };

package/shared/utilities/colorUtils.ts

@@ -1,64 +0,0 @@
-import { createLogger } from "@core/utilities";
-
-const logger = createLogger("color-utils");
-
-/**
- * Convert CSS color name to hex code using Canvas API
- * @param colorName - CSS color name (e.g., "red", "blue", "lime")
- * @returns Hex code or null if not found
- */
-export function convertColorNameToHex(colorName: string): string | null {
-  if (!colorName || typeof colorName !== "string") {
-    return null;
-  }
-
-  try {
-    // Create temporary canvas to use browser's color parsing
-    const canvas = document.createElement("canvas");
-    canvas.width = 1;
-    canvas.height = 1;
-    const ctx = canvas.getContext("2d");
-
-    if (!ctx) return null;
-
-    // Try to set the color
-    ctx.fillStyle = colorName.trim();
-
-    // If browser doesn't recognize it, fillStyle stays as default
-    if (ctx.fillStyle === "#000000" && colorName.trim().toLowerCase() !== "black") {
-      return null;
-    }
-
-    return ctx.fillStyle; // Returns hex format
-  } catch (error) {
-    logger.warn("Error converting color name to hex:", error);
-    return null;
-  }
-}
-
-/**
- * Check if a string is a valid hex color
- * @param value - String to check
- * @returns True if valid hex color
- */
-export function isValidHexColor(value: string): boolean {
-  if (!value || typeof value !== "string") {
-    return false;
-  }
-
-  const normalizedValue = value.startsWith("#") ? value : `#${value}`;
-  return /^#[0-9A-Fa-f]{6}$/.test(normalizedValue);
-}
-
-/**
- * Normalize hex color format (ensure it starts with #)
- * @param hex - Hex color code
- * @returns Normalized hex color
- */
-export function normalizeHexColor(hex: string): string {
-  if (!hex || typeof hex !== "string") {
-    return "";
-  }
-
-  return hex.startsWith("#") ? hex : `#${hex}`;
-}

package/shared/utilities/formatBadgeCount.test.ts

@@ -1,25 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { formatBadgeCount } from "@shared/utilities/formatBadgeCount";
-
-describe("formatBadgeCount", () => {
-  it("returns undefined for undefined input", () => {
-    expect(formatBadgeCount(undefined)).toBeUndefined();
-  });
-
-  it("returns string for numbers <= 99", () => {
-    expect(formatBadgeCount(0)).toBe("0");
-    expect(formatBadgeCount(42)).toBe("42");
-    expect(formatBadgeCount(99)).toBe("99");
-  });
-
-  it("returns '99+' for numbers > 99", () => {
-    expect(formatBadgeCount(100)).toBe("99+");
-    expect(formatBadgeCount(999)).toBe("99+");
-  });
-
-  it("handles string input", () => {
-    expect(formatBadgeCount("5")).toBe("5");
-    expect(formatBadgeCount("100")).toBe("99+");
-    expect(formatBadgeCount("abc")).toBe("abc");
-  });
-});

package/shared/utilities/formatBadgeCount.ts

@@ -1,15 +0,0 @@
-/**
- * Formats a badge count value, truncating numbers > 99 to "99+".
- * Used by VcWidget and WidgetDropdownItem for consistent badge display.
- */
-export function formatBadgeCount(value: string | number | undefined): string | undefined {
-  if (value === undefined || value === null) return undefined;
-
-  const num = typeof value === "string" ? parseInt(value) : value;
-
-  if (!isNaN(num) && num > 99) {
-    return "99+";
-  }
-
-  return String(value);
-}

package/shared/utilities/index.ts

@@ -1,4 +0,0 @@
-export * from "@shared/utilities/assets";
-export * from "@shared/utilities/colorUtils";
-export * from "@shared/utilities/formatBadgeCount";
-export * from "@shared/utilities/vueUtils";

package/shared/utilities/vueUtils.ts

@@ -1,50 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/ban-types */
-
-import { ComponentPublicInstance, ComputedOptions, MethodOptions } from "vue";
-
-type RemoveOnVnodePrefix<T> = {
-  [K in keyof T as K extends `onVnode${string}`
-    ? never
-    : K extends `on${infer Event}`
-      ? Uncapitalize<`on${Event}`>
-      : K]: T[K];
-};
-
-type EmitsExtractor<T> = RemoveOnVnodePrefix<Pick<T, Extract<keyof T, `on${string}`>>>;
-
-export type ComponentProps<T> = T extends new () => { $props: infer P }
-  ? NonNullable<P>
-  : T extends (props: infer P, ...args: any) => any
-    ? P
-    : {};
-
-export type ComponentSlots<T> = T extends (...args: any) => any
-  ? ReturnType<T> extends { [x: string]: any; __ctx?: { [x: string]: any; slots: infer Slots } }
-    ? NonNullable<Slots>
-    : {}
-  : T extends new () => { $slots: infer S }
-    ? NonNullable<S>
-    : {};
-
-export type ComponentEmit<T> = T extends (...args: any) => any
-  ? ReturnType<T> extends { [x: string]: any; __ctx?: { [x: string]: any; props: infer Props } }
-    ? EmitsExtractor<Props>
-    : {}
-  : T extends new () => { $props: infer Props }
-    ? EmitsExtractor<Props>
-    : never;
-
-export type ComponentPublicInstanceConstructor<
-  T extends ComponentPublicInstance<Props, RawBindings, D, C, M> = ComponentPublicInstance<any>,
-  Props = any,
-  RawBindings = any,
-  D = any,
-  C extends ComputedOptions = ComputedOptions,
-  M extends MethodOptions = MethodOptions,
-> = {
-  __isFragment?: never;
-  __isTeleport?: never;
-  __isSuspense?: never;
-  new (...args: any[]): T;
-};

package/ui/components/atoms/index.ts

@@ -1,21 +0,0 @@
-export * from "@ui/components/atoms/vc-badge";
-export * from "@ui/components/atoms/vc-button";
-export * from "@ui/components/atoms/vc-card";
-export * from "@ui/components/atoms/vc-col";
-export * from "@ui/components/atoms/vc-container";
-export * from "@ui/components/atoms/vc-hint";
-export * from "@ui/components/atoms/vc-icon";
-export * from "@ui/components/atoms/vc-image";
-export * from "@ui/components/atoms/vc-label";
-export * from "@ui/components/atoms/vc-link";
-export * from "@ui/components/atoms/vc-loading";
-export * from "@ui/components/atoms/vc-progress";
-export * from "@ui/components/atoms/vc-row";
-export * from "@ui/components/atoms/vc-status";
-export * from "@ui/components/atoms/vc-status-icon";
-export * from "@ui/components/atoms/vc-video";
-export * from "@ui/components/atoms/vc-widget";
-export * from "@ui/components/atoms/vc-tooltip";
-export * from "@ui/components/atoms/vc-skeleton";
-export * from "@ui/components/atoms/vc-banner";
-export * from "@ui/components/atoms/vc-scrollable-container";

package/ui/components/atoms/vc-badge/index.ts

@@ -1 +0,0 @@
-export { default as VcBadge } from "@ui/components/atoms/vc-badge/vc-badge.vue";