@vc-shell/framework 1.0.70 → 1.0.72

package/shared/components/change-password/change-password.vue

@@ -0,0 +1,167 @@
+<template>
+  <VcPopup
+    variant="small"
+    :title="$t('COMPONENTS.CHANGE_PASSWORD.TITLE')"
+    @close="$emit('close')"
+  >
+    <div class="tw-p-3">
+      <VcForm>
+        <Field
+          v-slot="{ field, errorMessage, errors }"
+          :label="$t('COMPONENTS.CHANGE_PASSWORD.CURRENT_PASSWORD.LABEL')"
+          name="current"
+          rules="required|min:6"
+          :model-value="form.currentPassword"
+        >
+          <VcInput
+            v-bind="field"
+            ref="passwordField"
+            v-model="form.currentPassword"
+            class="tw-mb-4 tw-mt-1"
+            :label="$t('COMPONENTS.CHANGE_PASSWORD.CURRENT_PASSWORD.LABEL')"
+            :placeholder="$t('COMPONENTS.CHANGE_PASSWORD.CURRENT_PASSWORD.PLACEHOLDER')"
+            type="password"
+            required
+            :error="!!errors.length"
+            :error-message="errorMessage"
+            @update:model-value="validate"
+          ></VcInput>
+        </Field>
+        <Field
+          v-slot="{ field, errorMessage, errors }"
+          :label="$t('COMPONENTS.CHANGE_PASSWORD.NEW_PASSWORD.LABEL')"
+          name="new_pass"
+          rules="required|min:6"
+          :model-value="form.password"
+        >
+          <VcInput
+            v-bind="field"
+            ref="newPasswordField"
+            v-model="form.password"
+            class="tw-mb-4 tw-mt-1"
+            :label="$t('COMPONENTS.CHANGE_PASSWORD.NEW_PASSWORD.LABEL')"
+            :placeholder="$t('COMPONENTS.CHANGE_PASSWORD.NEW_PASSWORD.PLACEHOLDER')"
+            type="password"
+            required
+            :error="!!errors.length"
+            :error-message="errorMessage"
+            @update:model-value="validate"
+          ></VcInput>
+        </Field>
+        <Field
+          v-slot="{ field, errorMessage, errors }"
+          :label="$t('COMPONENTS.CHANGE_PASSWORD.CONFIRM_PASSWORD.LABEL')"
+          name="confirm_pass"
+          rules="required|min:6"
+          :model-value="form.confirmPassword"
+        >
+          <VcInput
+            v-bind="field"
+            ref="confirmPasswordField"
+            v-model="form.confirmPassword"
+            class="tw-mb-4"
+            :label="$t('COMPONENTS.CHANGE_PASSWORD.CONFIRM_PASSWORD.LABEL')"
+            :placeholder="$t('COMPONENTS.CHANGE_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
+            type="password"
+            required
+            :error="!!errors.length"
+            :error-message="errorMessage"
+            @update:model-value="validate"
+          ></VcInput>
+        </Field>
+        <div class="tw-flex tw-justify-center tw-items-center tw-pt-2">
+          <span
+            v-if="$isDesktop.value"
+            class="tw-grow tw-basis-0"
+          ></span>
+          <VcButton
+            :outline="true"
+            class="tw-mr-3"
+            @click="$emit('close')"
+          >
+            {{ $t("COMPONENTS.CHANGE_PASSWORD.CANCEL") }}
+          </VcButton>
+          <VcButton
+            :disabled="loading || !form.isValid || isDisabled"
+            @click="changePassword"
+          >
+            {{ $t("COMPONENTS.CHANGE_PASSWORD.SAVE") }}
+          </VcButton>
+        </div>
+
+        <VcHint
+          v-for="(err, i) in form.errors"
+          :key="i"
+          class="tw-mt-3 !tw-text-[#f14e4e]"
+        >
+          <!-- TODO: stylizing-->
+          {{
+            (err as IIdentityError).code ? $t(`COMPONENTS.CHANGE_PASSWORD.ERRORS.${(err as IIdentityError).code}`) : err
+          }}
+        </VcHint>
+      </VcForm>
+    </div>
+  </VcPopup>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, reactive, computed } from "vue";
+import { useIsFormValid, Field, useIsFormDirty, useForm } from "vee-validate";
+import { VcInput, VcHint, VcButton, VcPopup, VcForm } from "./../../../ui/components";
+import { IIdentityError } from "./../../../core/api";
+import { useUser } from "./../../../core/composables/useUser";
+
+interface IChangePassForm {
+  isValid: boolean;
+  errors: IIdentityError[] | string[];
+  currentPassword: string;
+  password: string;
+  confirmPassword: string;
+}
+
+interface Emits {
+  (event: "close"): void;
+}
+
+const emit = defineEmits<Emits>();
+const { changeUserPassword, loading, validatePassword } = useUser();
+useForm({ validateOnMount: false });
+const isValid = useIsFormValid();
+const isDirty = useIsFormDirty();
+const form = reactive<IChangePassForm>({
+  isValid: false,
+  errors: [],
+  currentPassword: "",
+  password: "",
+  confirmPassword: "",
+});
+
+const isDisabled = computed(() => {
+  return !isDirty.value || !isValid.value;
+});
+
+async function changePassword() {
+  const result = await changeUserPassword(form.currentPassword, form.password);
+  if (result.succeeded) {
+    emit("close");
+  } else {
+    form.errors = result.errors;
+    form.isValid = form.errors.length == 0;
+  }
+}
+
+function validate() {
+  nextTick(async () => {
+    if (form.password || form.confirmPassword) {
+      form.errors = (await validatePassword(form.password)).errors;
+      if (form.confirmPassword !== form.password) {
+        (form.errors as IIdentityError[]).push({ code: "Repeat-password" });
+      }
+      if (form.confirmPassword === form.currentPassword && form.password === form.currentPassword) {
+        (form.errors as IIdentityError[]).push({ code: "Equal-passwords" });
+      }
+      form.isValid = form.errors.length == 0;
+    }
+  });
+}
+</script>

package/shared/components/change-password/index.ts

@@ -0,0 +1,10 @@
+import _ChangePassword from "./change-password.vue";
+
+export const ChangePassword = _ChangePassword as typeof _ChangePassword;
+
+// Declare globally
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    ChangePassword: typeof ChangePassword;
+  }
+}

package/shared/components/index.ts

@@ -0,0 +1,8 @@
+export * from "./app-switcher";
+export * from "./blade-navigation";
+export * from "./notifications";
+export * from "./error-interceptor";
+export * from "./popup-handler";
+export * from "./change-password";
+export * from "./language-selector";
+export * from "./user-dropdown-button";

package/shared/components/language-selector/index.ts

@@ -0,0 +1,10 @@
+import _LanguageSelector from "./language-selector.vue";
+
+export const LanguageSelector = _LanguageSelector as typeof _LanguageSelector;
+
+// Declare globally
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    LanguageSelector: typeof LanguageSelector;
+  }
+}

package/shared/components/language-selector/language-selector.vue

@@ -0,0 +1,60 @@
+<template>
+  <div
+    v-on-click-outside="
+      () => {
+        isDropActive = false;
+      }
+    "
+    class="tw-relative"
+    :title="title"
+    @click.stop="isDropActive = !isDropActive"
+  >
+    <div
+      :class="[
+        {
+          'tw-shadow-[0_-6px_6px_white,1px_1px_22px_rgba(126,142,157,0.2)] [clip-path:inset(0px_-20px_0px_-20px)] tw-bg-white tw-z-[10000]':
+            isDropActive,
+        },
+        'tw-relative tw-h-full tw-flex tw-items-center tw-justify-center tw-w-[var(--app-bar-button-width)] tw-border-l tw-border-solid tw-border-l-[color:var(--app-bar-button-border-color)] tw-cursor-pointer tw-text-[color:var(--app-bar-button-color)] tw-bg-[color:var(--app-bar-button-background-color)]  tw-transition-[color]  tw-duration-200 hover:tw-text-[color:var(--app-bar-button-color-hover)] hover:tw-bg-[color:var(--app-bar-button-background-color-hover)]',
+      ]"
+    >
+      <VcIcon
+        icon="fas fa-globe"
+        size="xl"
+      ></VcIcon>
+    </div>
+    <div
+      v-if="isDropActive"
+      class="tw-absolute tw-right-0 tw-top-[var(--app-bar-height)] tw-bg-white tw-shadow-[0_-6px_6px_white,1px_1px_22px_rgba(126,142,157,0.2)] tw-w-min tw-z-[10000]"
+    >
+      <div
+        v-for="(lang, i) in languageItems"
+        :key="i"
+        class="tw-p-3 tw-text-lg tw-text-black tw-border-l tw-border-solid tw-border-l-[#eef0f2] tw-border-b tw-border-b-[#eef0f2] tw-white tw-cursor-pointer hover:tw-bg-[#eff7fc]"
+        @click="lang.hasOwnProperty('clickHandler') && lang.clickHandler(lang.lang)"
+      >
+        {{ lang.title }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcIcon } from "./../../../ui/components";
+import { ref } from "vue";
+import { vOnClickOutside } from "@vueuse/components";
+
+export interface Props {
+  title: string;
+  value: string;
+  languageItems: { lang: string; title: string; clickHandler: (lang: string) => void }[];
+}
+
+withDefaults(defineProps<Props>(), {
+  title: "",
+  value: "",
+  languageItems: () => [],
+});
+
+const isDropActive = ref(false);
+</script>

package/shared/components/notifications/core/notification.ts

@@ -1,5 +1,5 @@
 import { mergeProps } from "vue";
-import { NotificationOptions } from "../types";
+import { InternalNotificationOptions, NotificationOptions } from "../types";
 import { useContainer } from "../composables";
 
 const {
@@ -18,7 +18,7 @@ function checkPending(limit?: number) {
   return limitCount > 0 && visibleCount + pending.items.length >= limitCount;
 }
 
-function resolvePending(options: NotificationOptions) {
+function resolvePending(options: InternalNotificationOptions) {
   if (checkPending(options.limit)) {
     pending.items.push({
       notificationId: options.notificationId,
@@ -27,7 +27,7 @@ function resolvePending(options: NotificationOptions) {
   }
 }
 
-function showNotification(content: string, options: NotificationOptions) {
+function showNotification(content: string, options: InternalNotificationOptions) {
   options = mergeProps(defaultOptions as Record<string, unknown>, options as Record<string, unknown>);
 
   if (

package/shared/components/notifications/types/index.ts

@@ -7,10 +7,13 @@ export interface NotificationOptions {
   content?: string;
   notificationId?: number | string;
   type?: NotificationType;
-  closeNotification?(): void;
   onOpen?: <T>(payload: T) => void;
   onClose?: <T>(payload: T) => void;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   payload?: string | Record<string, any>;
   updateId?: string | number;
 }
+
+export interface InternalNotificationOptions extends NotificationOptions {
+  closeNotification?(): void;
+}

package/shared/components/user-dropdown-button/index.ts

@@ -0,0 +1,10 @@
+import _UserDropdownButton from "./user-dropdown-button.vue";
+
+export const UserDropdownButton = _UserDropdownButton as typeof _UserDropdownButton;
+
+// Declare globally
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    UserDropdownButton: typeof UserDropdownButton;
+  }
+}

package/shared/components/user-dropdown-button/user-dropdown-button.vue

@@ -0,0 +1,124 @@
+<template>
+  <div
+    v-on-click-outside="onClose"
+    class="user-dropdown-button"
+    :class="{
+      'user-dropdown-button_active': accountMenuVisible,
+      'user-dropdown-button_no-pointer': $isMobile.value,
+    }"
+    @click.stop="toggleAccountMenuVisible"
+  >
+    <div
+      class="user-dropdown-button__avatar"
+      :style="{ 'background-image': `url(${avatar})` }"
+    ></div>
+    <div class="tw-grow tw-basis-0 tw-ml-3 tw-overflow-hidden">
+      <div class="user-dropdown-button__name tw-truncate">
+        {{ name }}
+      </div>
+      <div class="user-dropdown-button__role">
+        {{ role }}
+      </div>
+    </div>
+    <div
+      v-if="menuItems && menuItems.length"
+      class="user-dropdown-button__chevron"
+    >
+      <VcIcon
+        icon="fas fa-chevron-down"
+        size="xl"
+      ></VcIcon>
+    </div>
+    <div
+      v-if="menuItems && accountMenuVisible"
+      class="user-dropdown-button__menu"
+      @click.stop="accountMenuVisible = false"
+    >
+      <div
+        v-for="(item, i) in menuItems"
+        :key="`menu_item_${i}`"
+        class="user-dropdown-button__menu-item"
+        @click="item.hasOwnProperty('clickHandler') ? item.clickHandler() : null"
+      >
+        {{ item.title }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { vOnClickOutside } from "@vueuse/components";
+import { BladeMenu } from "./../../../core/types";
+
+export interface Props {
+  avatar: string;
+  name: string;
+  role: string;
+  menuItems?: BladeMenu[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  menuItems: () => [],
+});
+
+const accountMenuVisible = ref(false);
+
+const toggleAccountMenuVisible = () => {
+  if (props.menuItems && props.menuItems.length) {
+    accountMenuVisible.value = !accountMenuVisible.value;
+  }
+};
+
+const onClose = () => {
+  accountMenuVisible.value = false;
+};
+</script>
+
+<style lang="scss">
+.user-dropdown-button {
+  @apply tw-w-[240px] tw-border-l tw-border-solid tw-border-l-[color:var(--app-bar-divider-color)] tw-px-4 tw-cursor-pointer
+    tw-relative tw-flex tw-justify-between tw-items-center tw-h-full;
+
+  &_no-pointer {
+    @apply tw-cursor-default;
+  }
+
+  &:hover,
+  &_active {
+    @apply tw-bg-[color:var(--app-bar-toolbar-icon-background-hover)];
+  }
+
+  &__avatar {
+    @apply tw-rounded-full tw-overflow-hidden tw-w-[34px] tw-h-[34px] tw-bg-[color:var(--app-bar-account-info-role-color)]
+      tw-bg-cover tw-bg-center tw-shrink-0;
+  }
+
+  &__name {
+    @apply tw-text-base tw-text-[color:var(--app-bar-account-info-name-color)];
+  }
+
+  &__role {
+    @apply tw-text-base tw-text-[color:var(--app-bar-account-info-role-color)];
+  }
+
+  &__chevron {
+    @apply tw-text-[#7e8e9d] [transition:transform_0.2s_ease] [transition:color_0.2s_ease];
+  }
+
+  &:hover &__chevron {
+    @apply tw-text-[color:#34414f];
+  }
+
+  &_active &__chevron {
+    @apply -tw-scale-y-100;
+  }
+
+  &__menu {
+    @apply tw-absolute -tw-left-px tw-right-0 tw-top-[var(--app-bar-height)] tw-bg-white tw-z-[10000] tw-shadow-[0_-6px_6px_white,1px_1px_22px_rgba(126,142,157,0.2)];
+
+    &-item {
+      @apply tw-p-3 tw-text-lg tw-text-black tw-border-l tw-border-solid tw-border-l-[#eef0f2] tw-border-b tw-border-b-[#eef0f2] tw-bg-white hover:tw-bg-[#eff7fc];
+    }
+  }
+}
+</style>

package/shared/index.ts

@@ -4,9 +4,18 @@ import { VcAppSwitcherComponent } from "./components/app-switcher";
 import { VcBladeNavigationComponent } from "./components/blade-navigation";
 import { AssetsManagerModule } from "./modules/assets-manager";
 import { VcPopupHandler } from "./components/popup-handler";
+import * as locales from "./locales";
+import { i18n } from "./../core/plugins";
 
 export const SharedModule = {
   install(app: App): void {
+    // Load locales
+    if (locales) {
+      Object.entries(locales).forEach(([key, message]) => {
+        i18n.global.mergeLocaleMessage(key, message);
+      });
+    }
+
     app
       .use(AssetsDetailsModule)
       .use(AssetsManagerModule)
@@ -16,11 +25,6 @@ export const SharedModule = {
   },
 };
 
-export * from "./modules/assets";
-export * from "./modules/assets-manager";
-
-export * from "./components/app-switcher";
-export * from "./components/blade-navigation";
-export * from "./components/notifications";
-export * from "./components/error-interceptor";
-export * from "./components/popup-handler";
+export * from "./modules";
+export * from "./components";
+export * from "./pages";

package/shared/locales/en.json

@@ -0,0 +1,35 @@
+{
+  "COMPONENTS": {
+    "CHANGE_PASSWORD": {
+      "TITLE": "Change password",
+      "CURRENT_PASSWORD": {
+        "LABEL": "Current password",
+        "PLACEHOLDER": "Enter password"
+      },
+      "NEW_PASSWORD": {
+        "LABEL": "New password",
+        "PLACEHOLDER": "Enter password"
+      },
+      "CONFIRM_PASSWORD": {
+        "LABEL": "Confirm password",
+        "PLACEHOLDER": "Confirm password"
+      },
+      "CANCEL": "Cancel",
+      "SAVE": "Update",
+      "ERRORS": {
+        "Repeat-password": "Passwords are not same",
+        "Equal-passwords": "The new password must not match the old one",
+        "Invalid-token": "Token is invalid or expired",
+        "Password-too-weak": "New password does not comply one or more password security policies:",
+        "PasswordTooShort": "Passwords too short",
+        "PasswordRequiresUniqueChars": "Passwords must use different characters",
+        "PasswordRequiresLower": "Passwords must have at least one lowercase ('a'-'z')",
+        "PasswordRequiresUpper": "Passwords must have at least one uppercase ('A'-'Z')",
+        "PasswordRequiresDigit": "Passwords must have at least one digit ('0'-'9')",
+        "PasswordRequiresNonAlphanumeric": "Passwords must have at least one non alphanumeric character",
+        "Incorrect password.": "You entered an incorrect password",
+        "You have used this password in the past. Choose another one.": "You have used this password in the past. Choose another one."
+      }
+    }
+  }
+}

package/shared/locales/index.ts

@@ -0,0 +1,2 @@
+import * as en from "./en.json";
+export { en };

package/shared/modules/assets/components/assets-details/assets-details.vue

@@ -9,12 +9,6 @@
     @expand="$emit('expand:blade')"
     @collapse="$emit('collapse:blade')"
   >
-    <template
-      v-if="$slots['error']"
-      #error
-    >
-      <slot name="error"></slot>
-    </template>
     <!-- Blade contents -->
     <div class="tw-flex tw-grow-1 tw-border-t tw-border-solid tw-border-t-[#eaedf3]">
       <div class="assets-details__content tw-grow tw-basis-0 tw-w-full">
@@ -62,7 +56,7 @@
                           icon="far fa-copy"
                           size="m"
                           class="tw-ml-2"
-                          variant="onlytext"
+                          text
                           title="Copy link"
                           @click="copyLink(defaultAsset.url)"
                         ></VcButton>

package/shared/modules/assets-manager/components/assets-manager/assets-manager.vue

@@ -9,12 +9,6 @@
     @expand="$emit('expand:blade')"
     @collapse="$emit('collapse:blade')"
   >
-    <template
-      v-if="$slots['error']"
-      #error
-    >
-      <slot name="error"></slot>
-    </template>
     <div
       class="tw-relative tw-h-full"
       @dragover.prevent.stop="dragOver"

package/shared/modules/index.ts

@@ -0,0 +1,2 @@
+export * from "./assets";
+export * from "./assets-manager";

package/shared/pages/InvitePage/components/index.ts

@@ -0,0 +1 @@
+export * from "./invite";