@vc-shell/framework 1.1.25 → 1.1.27

package/shared/pages/InvitePage/components/invite/Invite.vue

@@ -1,216 +1,217 @@
-<template>
-  <div class="vc-invite-page">
-    <VcLoading
-      v-if="loading"
-      active
-    ></VcLoading>
-
-    <VcLoginForm
-      :logo="customization.logo"
-      :background="background"
-      :title="t('INVITATION.TITLE')"
-    >
-      <VcForm>
-        <VcInput
-          class="vc-invite-page__input"
-          :label="t('INVITATION.FIELDS.EMAIL.LABEL')"
-          :model-value="userName"
-          name="username"
-          disabled
-        ></VcInput>
-
-        <Field
-          v-slot="{ field, errorMessage, handleChange, errors }"
-          :label="t('INVITATION.FIELDS.PASSWORD.LABEL')"
-          :model-value="form.password"
-          rules="required"
-          name="password"
-        >
-          <VcInput
-            v-bind="field"
-            ref="passwordField"
-            v-model="form.password"
-            class="vc-invite-page__input"
-            :label="t('INVITATION.FIELDS.PASSWORD.LABEL')"
-            :placeholder="t('INVITATION.FIELDS.PASSWORD.PLACEHOLDER')"
-            type="password"
-            :disabled="!form.tokenIsValid"
-            :error="!!errors.length"
-            :error-message="errorMessage"
-            required
-            @update:model-value="
-              (e) => {
-                handleChange(e);
-                validate();
-              }
-            "
-          ></VcInput>
-        </Field>
-
-        <Field
-          v-slot="{ field, errorMessage, handleChange, errors }"
-          :label="t('INVITATION.FIELDS.CONFIRM_PASSWORD.LABEL')"
-          :model-value="form.confirmPassword"
-          rules="required"
-          name="confirm_password"
-        >
-          <VcInput
-            v-bind="field"
-            ref="confirmPasswordField"
-            v-model="form.confirmPassword"
-            class="vc-invite-page__input--small"
-            :label="t('INVITATION.FIELDS.CONFIRM_PASSWORD.LABEL')"
-            :placeholder="t('INVITATION.FIELDS.CONFIRM_PASSWORD.PLACEHOLDER')"
-            :disabled="!form.tokenIsValid"
-            type="password"
-            :error="!!errors.length"
-            :error-message="errorMessage"
-            required
-            @update:model-value="
-              (e) => {
-                handleChange(e);
-                validate();
-              }
-            "
-            @keyup.enter="acceptInvitation"
-          ></VcInput>
-        </Field>
-
-        <div class="vc-invite-page__button-container">
-          <span
-            v-if="$isDesktop.value"
-            class="vc-invite-page__spacer"
-          ></span>
-          <vc-button
-            :disabled="loading || !form.isValid || !form.tokenIsValid"
-            @click="acceptInvitation"
-          >
-            {{ t("INVITATION.ACCEPT_INVITATION") }}
-          </vc-button>
-        </div>
-
-        <VcHint
-          v-for="error in form.errors"
-          :key="error"
-          class="vc-invite-page__hint"
-          style="color: #f14e4e"
-        >
-          <!-- TODO: stylizing-->
-          {{ t(`INVITATION.ERRORS.${error}`) }}
-        </VcHint>
-      </VcForm>
-    </VcLoginForm>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { reactive, onMounted, computed } from "vue";
-import { useRouter } from "vue-router";
-import { useIsFormValid, Field, useIsFormDirty, useForm } from "vee-validate";
-import { useUser, useSettings } from "./../../../../../core/composables";
-import { useI18n } from "vue-i18n";
-
-useForm({ validateOnMount: false });
-
-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 } = useUser();
-const router = useRouter();
-const { t } = useI18n({ useScope: "global" });
-const isFormValid = useIsFormValid();
-const isDirty = useIsFormDirty();
-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: "",
-});
-
-const isDisabled = computed(() => {
-  return !isDirty.value || !isFormValid.value;
-});
-
-onMounted(async () => {
-  form.tokenIsValid = await validateToken(props.userId, props.token);
-  if (!form.tokenIsValid) {
-    form.errors.push("Invalid-token");
-  }
-});
-
-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.confirmPassword !== form.password) {
-      form.errors.push("Repeat-password");
-    }
-    form.isValid = form.errors.length == 0 && !isDisabled.value;
-  }
-};
-
-const acceptInvitation = async () => {
-  const result = await resetPasswordByToken(props.userId, form.password, props.token);
-  if (result.succeeded) {
-    const result = await signIn(props.userName, form.password);
-    if (result.succeeded) {
-      router.push("/");
-    } else {
-      // form.errors = [result.errorCode as string];
-    }
-  } else {
-    form.errors = result.errors as string[];
-  }
-};
-
-const customization = computed(() => {
-  return {
-    logo: !customizationLoading.value ? uiSettings.value?.logo || props.logo : "",
-  };
-});
-</script>
-
-<style lang="scss">
-.vc-invite-page {
-  @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-m-0;
-}
-
-.vc-invite-page__input {
-  @apply tw-mb-4 tw-mt-1;
-}
-
-.vc-invite-page__input--small {
-  @apply tw-mb-4;
-}
-
-.vc-invite-page__button-container {
-  @apply tw-flex tw-justify-center tw-items-center tw-pt-2;
-}
-
-.vc-invite-page__spacer {
-  @apply tw-grow tw-basis-0;
-}
-
-.vc-invite-page__hint {
-  @apply tw-mt-3;
-}
-</style>
+<template>
+  <div class="vc-invite-page">
+    <VcLoading
+      v-if="loading"
+      active
+    ></VcLoading>
+
+    <VcLoginForm
+      :logo="customization.logo"
+      :background="background"
+      :title="t('INVITATION.TITLE')"
+    >
+      <VcForm>
+        <VcInput
+          class="vc-invite-page__input"
+          :label="t('INVITATION.FIELDS.EMAIL.LABEL')"
+          :model-value="userName"
+          name="username"
+          disabled
+        ></VcInput>
+
+        <Field
+          v-slot="{ field, errorMessage, handleChange, errors }"
+          :label="t('INVITATION.FIELDS.PASSWORD.LABEL')"
+          :model-value="form.password"
+          rules="required"
+          name="password"
+        >
+          <VcInput
+            v-bind="field"
+            ref="passwordField"
+            v-model="form.password"
+            class="vc-invite-page__input"
+            :label="t('INVITATION.FIELDS.PASSWORD.LABEL')"
+            :placeholder="t('INVITATION.FIELDS.PASSWORD.PLACEHOLDER')"
+            type="password"
+            :disabled="!form.tokenIsValid"
+            :error="!!errors.length"
+            :error-message="errorMessage"
+            required
+            @update:model-value="
+              (e) => {
+                handleChange(e);
+                validate();
+              }
+            "
+          ></VcInput>
+        </Field>
+
+        <Field
+          v-slot="{ field, errorMessage, handleChange, errors }"
+          :label="t('INVITATION.FIELDS.CONFIRM_PASSWORD.LABEL')"
+          :model-value="form.confirmPassword"
+          rules="required"
+          name="confirm_password"
+        >
+          <VcInput
+            v-bind="field"
+            ref="confirmPasswordField"
+            v-model="form.confirmPassword"
+            class="vc-invite-page__input--small"
+            :label="t('INVITATION.FIELDS.CONFIRM_PASSWORD.LABEL')"
+            :placeholder="t('INVITATION.FIELDS.CONFIRM_PASSWORD.PLACEHOLDER')"
+            :disabled="!form.tokenIsValid"
+            type="password"
+            :error="!!errors.length"
+            :error-message="errorMessage"
+            required
+            @update:model-value="
+              (e) => {
+                handleChange(e);
+                validate();
+              }
+            "
+            @keyup.enter="acceptInvitation"
+          ></VcInput>
+        </Field>
+
+        <div class="vc-invite-page__button-container">
+          <span
+            v-if="$isDesktop.value"
+            class="vc-invite-page__spacer"
+          ></span>
+          <vc-button
+            :disabled="loading || !form.isValid || !form.tokenIsValid"
+            @click="acceptInvitation"
+          >
+            {{ t("INVITATION.ACCEPT_INVITATION") }}
+          </vc-button>
+        </div>
+
+        <VcHint
+          v-for="error in form.errors"
+          :key="error"
+          class="vc-invite-page__hint"
+          style="color: #f14e4e"
+        >
+          <!-- TODO: stylizing-->
+          {{ t(`INVITATION.ERRORS.${error}`) }}
+        </VcHint>
+      </VcForm>
+    </VcLoginForm>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, onMounted, computed } from "vue";
+import { useRouter } from "vue-router";
+import { useIsFormValid, Field, useIsFormDirty, useForm } from "vee-validate";
+import { useSettings } from "./../../../../../core/composables";
+import { useI18n } from "vue-i18n";
+import { useUserManagement } from "./../../../../../core/composables/useUserManagement";
+
+useForm({ validateOnMount: false });
+
+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 isFormValid = useIsFormValid();
+const isDirty = useIsFormDirty();
+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: "",
+});
+
+const isDisabled = computed(() => {
+  return !isDirty.value || !isFormValid.value;
+});
+
+onMounted(async () => {
+  form.tokenIsValid = await validateToken(props.userId, props.token);
+  if (!form.tokenIsValid) {
+    form.errors.push("Invalid-token");
+  }
+});
+
+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.confirmPassword !== form.password) {
+      form.errors.push("Repeat-password");
+    }
+    form.isValid = form.errors.length == 0 && !isDisabled.value;
+  }
+};
+
+const acceptInvitation = async () => {
+  const result = await resetPasswordByToken(props.userId, form.password, props.token);
+  if (result.succeeded) {
+    const result = await signIn(props.userName, form.password);
+    if (result.succeeded) {
+      router.push("/");
+    } else {
+      // form.errors = [result.errorCode as string];
+    }
+  } else {
+    form.errors = result.errors as string[];
+  }
+};
+
+const customization = computed(() => {
+  return {
+    logo: !customizationLoading.value ? uiSettings.value?.logo || props.logo : "",
+  };
+});
+</script>
+
+<style lang="scss">
+.vc-invite-page {
+  @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-m-0;
+}
+
+.vc-invite-page__input {
+  @apply tw-mb-4 tw-mt-1;
+}
+
+.vc-invite-page__input--small {
+  @apply tw-mb-4;
+}
+
+.vc-invite-page__button-container {
+  @apply tw-flex tw-justify-center tw-items-center tw-pt-2;
+}
+
+.vc-invite-page__spacer {
+  @apply tw-grow tw-basis-0;
+}
+
+.vc-invite-page__hint {
+  @apply tw-mt-3;
+}
+</style>

package/shared/pages/LoginPage/components/login/Login.vue

@@ -173,7 +173,8 @@
 import { ref, reactive, computed, onMounted, Ref, inject } from "vue";
 import { useRouter } from "vue-router";
 import { useIsFormValid, Field, useIsFormDirty, useForm } from "vee-validate";
-import { useSettings, useUser } from "./../../../../../core/composables";
+import { useSettings } from "./../../../../../core/composables";
+import { useUserManagement } from "./../../../../../core/composables/useUserManagement";
 import { RequestPasswordResult } from "./../../../../../core/types";
 import { ExternalSignInProviderInfo, SignInResult } from "./../../../../../core/api/platform";
 import { useI18n } from "vue-i18n";
@@ -201,7 +202,7 @@ let useLogin;
 const signInResult = ref({ succeeded: true }) as Ref<SignInResult & { status?: number; error?: any }>;
 const requestPassResult = ref<RequestPasswordResult>({ succeeded: true });
 const forgotPasswordRequestSent = ref(false);
-const { signIn, loading, user } = useUser();
+const { signIn, loading, user } = useUserManagement();
 const { getProviders } = useExternalProvider();
 
 const isLogin = ref(true);

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

@@ -100,8 +100,9 @@
 import { reactive, onMounted, computed } from "vue";
 import { useRouter } from "vue-router";
 import { Field, useForm } from "vee-validate";
-import { useUser, useSettings } from "./../../../../../core/composables";
+import { useSettings } from "./../../../../../core/composables";
 import { useI18n } from "vue-i18n";
+import { useUserManagement } from "./../../../../../core/composables/useUserManagement";
 
 const props = withDefaults(
   defineProps<{
@@ -117,7 +118,7 @@ const props = withDefaults(
   },
 );
 
-const { validateToken, validatePassword, resetPasswordByToken, signIn, loading } = useUser();
+const { validateToken, validatePassword, resetPasswordByToken, signIn, loading } = useUserManagement();
 const router = useRouter();
 const { t } = useI18n({ useScope: "global" });
 const { validate: veeValidate } = useForm({ validateOnMount: false });

package/ui/components/atoms/vc-widget/vc-widget.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="vc-widget"
-    :data-widget-id="widgetName"
+    :data-widget-id="actualWidgetId"
     :data-widget-name="title"
     :class="[
       { 'vc-widget--expanded': isExpanded },
@@ -38,7 +38,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, getCurrentInstance } from "vue";
+import { computed, getCurrentInstance, useAttrs } from "vue";
 import { VcIcon } from "./../vc-icon";
 import { useWidgets } from "../../../../core/composables";
 
@@ -57,15 +57,22 @@ const emit = defineEmits<{
 }>();
 
 const instance = getCurrentInstance();
-
+const attrs = useAttrs();
 const widgetService = useWidgets();
 
-const widgetName = instance?.parent?.type.__name;
+// Get widgetId from attributes passed by the parent container
+const actualWidgetId = computed(() => (attrs.widgetId || attrs["widget-id"]) as string | undefined);
 
 function onClick() {
   if (!props.disabled) {
-    if (widgetName && instance?.parent?.exposed) {
-      widgetService.setActiveWidget(instance?.parent?.exposed);
+    // Use the actualWidgetId from attrs
+    if (actualWidgetId.value && instance?.parent?.exposed) {
+      widgetService.setActiveWidget({
+        exposed: instance.parent.exposed,
+        widgetId: actualWidgetId.value,
+      });
+    } else if (!actualWidgetId.value) {
+      console.warn("VcWidget: widgetId is missing from attrs. Widget activation might not work as expected.");
     }
     emit("click");
   }

package/ui/components/molecules/vc-input-dropdown/vc-input-dropdown.stories.ts

@@ -273,8 +273,6 @@ const meta = {
     docs: {
       description: {
         component: `
-### VcInputDropdown Component
-
 The VcInputDropdown component combines an input field with a dropdown selection in a unified interface.
 This creates a powerful and flexible control ideal for scenarios where users need to both input a value
 and select a category, unit, or format for that value.

package/ui/components/molecules/vc-input-dropdown/vc-input-dropdown.vue

@@ -58,6 +58,13 @@
               </button>
             </template>
           </slot>
+          <VcButton
+            icon="material-keyboard_arrow_down"
+            icon-size="s"
+            text
+            icon-class="vc-input-dropdown__toggle-button-icon"
+            @click.stop.prevent="toggleHandler"
+          ></VcButton>
           <slot
             v-if="$slots['append-inner']"
             name="append-inner"
@@ -281,5 +288,9 @@ defineEmits<Emits>();
   &__toggle-button {
     @apply tw-text-[color:var(--input-dropdown-toggle-color)] tw-not-italic tw-font-medium tw-text-sm tw-cursor-pointer;
   }
+
+  &__toggle-button-icon {
+    @apply tw-text-[color:var(--input-dropdown-toggle-color)];
+  }
 }
 </style>

package/ui/components/organisms/vc-app/vc-app.vue

@@ -67,7 +67,7 @@
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { inject, provide, useAttrs, watch, ref, onUnmounted, computed } from "vue";
+import { inject, provide, watch, ref, onUnmounted, computed } from "vue";
 import VcAppBar from "./_internal/vc-app-bar/vc-app-bar.vue";
 import VcAppMenu from "./_internal/vc-app-menu/vc-app-menu.vue";
 import {
@@ -78,7 +78,7 @@ import {
   NotificationDropdown,
   BladeRoutesRecord,
 } from "./../../../../shared/components";
-import { provideAppBarWidget, provideWidgetService, useNotifications, useUser } from "../../../../core/composables";
+import { provideAppBarWidget, useNotifications } from "../../../../core/composables";
 import { useRoute, useRouter } from "vue-router";
 import { watchOnce } from "@vueuse/core";
 import { MenuItem } from "../../../../core/types";
@@ -94,6 +94,7 @@ import { DynamicModulesKey } from "../../../../injection-keys";
 import { provideMenuService } from "../../../../core/composables/useMenuService";
 import { BellIcon } from "../../atoms/vc-icon/icons";
 import { provideAppBarMobileButtonsService } from "../../../../core/composables/useAppBarMobileButtons";
+import { useUserManagement } from "../../../../core/composables/useUserManagement";
 
 export interface Props {
   isReady: boolean;
@@ -134,7 +135,7 @@ const { appsList, switchApp, getApps } = useAppSwitcher();
 
 const { loadFromHistory, notifications, markAllAsRead } = useNotifications();
 const route = useRoute();
-const { isAuthenticated } = useUser();
+const { isAuthenticated } = useUserManagement();
 
 const routes = router.getRoutes();
 

package/ui/components/organisms/vc-blade/_internal/vc-blade-widget-container/_internal/vc-widget-container-desktop.vue

@@ -6,6 +6,7 @@
         v-for="widget in displayedItems"
         :key="widget.id"
         v-bind="widget.props || {}"
+        :widget-id="widget.id"
         v-on="widget.events || {}"
       />
 
@@ -34,6 +35,7 @@
             class="tw-p-3 tw-w-full"
             v-bind="item.props || {}"
             horizontal
+            :widget-id="item.id"
             v-on="item.events || {}"
           />
         </template>
@@ -54,7 +56,6 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const normalizedBladeId = computed(() => props.bladeId?.toLowerCase() || "");
 const showToolbar = ref(false);
 
 const displayedItems = computed(() => props.widgets.slice(0, 3));

package/ui/components/organisms/vc-blade/_internal/vc-blade-widget-container/_internal/vc-widget-container-mobile.vue

@@ -13,6 +13,7 @@
         :key="widget.id"
         v-bind="widget.props || {}"
         :data-item-key="widget.id"
+        :widget-id="widget.id"
         v-on="widget.events || {}"
       />
 
@@ -42,6 +43,7 @@
             class="tw-p-3 tw-w-full"
             v-bind="item.props || {}"
             horizontal
+            :widget-id="item.id"
             v-on="item.events || {}"
           />
         </template>