@vc-shell/framework 1.0.70 → 1.0.71

package/shared/pages/LoginPage/plugin.ts

@@ -0,0 +1,17 @@
+import { App } from "vue";
+import { createModule } from "./../../../core/plugins";
+import * as components from "./components";
+import * as locales from "./locales";
+import { CommonPageComposables } from "./../../../typings";
+
+export const LoginPage = {
+  install(app: App, config: CommonPageComposables) {
+    // Register components
+    createModule(components, locales).install(app);
+
+    if (config) {
+      app.config.globalProperties.commonPageComposables = config;
+      app.provide("commonPageComposables", config);
+    }
+  },
+};

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

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

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

@@ -0,0 +1,166 @@
+<template>
+  <div class="vc-app tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-m-0 vc-theme_light">
+    <VcLoading
+      v-if="loading"
+      active
+    ></VcLoading>
+
+    <VcLoginForm
+      logo="/assets/logo-white.svg"
+      background="/assets/background.jpg"
+      :title="$t('PASSWORDRESET.TITLE')"
+    >
+      <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 tw-mt-1"
+            :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-4"
+            :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"
+          >
+          </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>
+          <vc-button
+            :disabled="disableButton"
+            @click="resetPassword"
+          >
+            {{ $t("PASSWORDRESET.SAVE_PASSWORD") }}
+          </vc-button>
+        </div>
+
+        <VcHint
+          v-for="error in form.errors"
+          :key="error"
+          class="tw-mt-3 !tw-text-[#f14e4e]"
+        >
+          <!-- TODO: stylizing-->
+          {{ $t(`PASSWORDRESET.ERRORS.${error}`) }}
+        </VcHint>
+      </VcForm>
+    </VcLoginForm>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, onMounted, computed } from "vue";
+import { useRouter } from "vue-router";
+import { Field, useForm } from "vee-validate";
+import { useUser } from "./../../../../../core/composables";
+
+const props = defineProps({
+  userId: {
+    type: String,
+    default: undefined,
+  },
+  userName: {
+    type: String,
+    default: undefined,
+  },
+  token: {
+    type: String,
+    default: undefined,
+  },
+});
+const { validateToken, validatePassword, resetPasswordByToken, signIn, loading } = useUser();
+const router = useRouter();
+const { validate: veeValidate } = useForm({ validateOnMount: false });
+
+const form = reactive({
+  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);
+    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 result = await signIn(props.userName, form.password);
+      if (result.succeeded) {
+        router.push("/");
+      } else {
+        form.errors = [result.errorCode];
+      }
+    } else {
+      form.errors = result.errors;
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,3 @@
+import _ResetPassword from "./ResetPassword.vue";
+
+export const ResetPassword = _ResetPassword as typeof _ResetPassword;

package/shared/pages/ResetPasswordPage/index.ts

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

package/shared/pages/ResetPasswordPage/locales/en.json

@@ -0,0 +1,28 @@
+{
+  "PASSWORDRESET": {
+    "TITLE": "Password reset",
+    "FIELDS": {
+      "PASSWORD": {
+        "LABEL": "New password",
+        "PLACEHOLDER": "Enter password"
+      },
+      "CONFIRM_PASSWORD": {
+        "LABEL": "Confirm password",
+        "PLACEHOLDER": "Confirm password"
+      }
+    },
+    "SAVE_PASSWORD": "Save",
+    "ERRORS": {
+      "Repeat-password": "Passwords are not same",
+      "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",
+      "recentPasswordUsed": "You have used this password in the past. Choose another one."
+    }
+  }
+}

package/shared/pages/ResetPasswordPage/locales/index.ts

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

package/shared/pages/index.ts

@@ -0,0 +1,12 @@
+import { CommonPageComposables } from "./../../typings";
+
+// Declare globally
+declare module "@vue/runtime-core" {
+  export interface ComponentCustomProperties {
+    CommonPageComposables: CommonPageComposables;
+  }
+}
+
+export * from "./InvitePage";
+export * from "./LoginPage";
+export * from "./ResetPasswordPage";

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

@@ -1,20 +1,12 @@
 <template>
   <button
-    class="vc-button"
-    :class="[
-      `vc-button_${variant}`,
-      {
-        'vc-button_small': small,
-        'vc-button_outline': outline,
-        'vc-button_selected': selected,
-      },
-    ]"
+    :class="buttonClass"
     :disabled="disabled"
     @click="onClick"
   >
     <VcIcon
       v-if="icon"
-      class="vc-button__icon"
+      :class="['vc-button__icon', iconClass]"
       :icon="icon"
       :size="small ? 'xs' : 's'"
     ></VcIcon>
@@ -28,14 +20,18 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
 import { VcIcon } from "./../vc-icon";
 export interface Props {
-  icon?: string | undefined;
-  variant?: "primary" | "secondary" | "special" | "danger" | "widget" | "onlytext";
-  disabled?: boolean | undefined;
-  small?: boolean | undefined;
-  outline?: boolean | undefined;
-  selected?: boolean | undefined;
+  icon?: string;
+  iconClass?: string;
+  variant?: "primary" | "warning" | "danger";
+  disabled?: boolean;
+  small?: boolean;
+  outline?: boolean;
+  selected?: boolean;
+  text?: boolean;
+  raised?: boolean;
 }
 
 export interface Emits {
@@ -51,6 +47,20 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+const buttonClass = computed(() => {
+  return [
+    "vc-button",
+    {
+      [`vc-button-${props.variant}`]: props.variant,
+      "vc-button_small": props.small,
+      "vc-button_outline": props.outline,
+      "vc-button_selected": props.selected,
+      "vc-button_text": props.text,
+      "vc-button_raised": props.raised,
+    },
+  ];
+});
+
 function onClick(e: Event): void {
   if (!props.disabled) {
     e.preventDefault();
@@ -61,146 +71,102 @@ function onClick(e: Event): void {
 
 <style lang="scss">
 :root {
-  --button-primary-background-color: #41afe6;
-  --button-primary-background-color-hover: #319ed4;
-  --button-primary-background-color-active: #319ed4;
-  --button-primary-background-color-disabled: #a9ddf6;
-
-  --button-primary-text-color: #ffffff;
-  --button-primary-text-color-hover: #ffffff;
-  --button-primary-text-color-active: #ffffff;
-  --button-primary-text-color-disabled: #ffffff;
-
-  --button-secondary-background-color: #ffffff;
-  --button-secondary-background-color-hover: #ffffff;
-  --button-secondary-background-color-active: #ffffff;
-  --button-secondary-background-color-disabled: #ffffff;
-
-  --button-secondary-border-color: #43b0e6;
-  --button-secondary-border-color-hover: #319ed4;
-  --button-secondary-border-color-active: #319ed4;
-  --button-secondary-border-color-disabled: #a9ddf6;
-
-  --button-secondary-text-color: #43b0e6;
-  --button-secondary-text-color-hover: #319ed4;
-  --button-secondary-text-color-active: #319ed4;
-  --button-secondary-text-color-disabled: #a9ddf6;
-
-  --button-special-background-color: #f89406;
-  --button-special-background-color-hover: #eb8b03;
-  --button-special-background-color-active: #eb8b03;
-  --button-special-background-color-disabled: #fed498;
-
-  --button-danger-background-color: #ff4a4a;
-  --button-danger-background-color-hover: #d73a3a;
-  --button-danger-background-color-active: #d73a3a;
-  --button-danger-background-color-disabled: #ff5e5e;
-
-  --button-special-text-color: #ffffff;
-  --button-special-text-color-hover: #ffffff;
-  --button-special-text-color-active: #ffffff;
-  --button-special-text-color-disabled: #ffffff;
-
-  --button-widget-background-color: #ffffff;
-  --button-widget-background-color-hover: #f2faff;
-  --button-widget-background-color-active: #eaf6ff;
-  --button-widget-background-color-disabled: #fafafa;
-
-  --button-widget-border-color: #eaedf3;
-  --button-widget-border-color-hover: #d3e2ec;
-  --button-widget-border-color-active: #deecf4;
+  --button-primary-background-color: 65, 175, 230;
+  --button-primary-background-color-hover: 49, 158, 212;
+  --button-primary-background-color-disabled: 169, 221, 246;
+  --button-primary-text-color: 255, 255, 255;
+  --button-primary-text-color-outlined: var(--button-primary-background-color);
+  --button-primary-text-color-hover: var(--button-primary-background-color-hover);
+
+  --button-warning-background-color: 248, 148, 6;
+  --button-warning-background-color-hover: 235, 139, 3;
+  --button-warning-background-color-disabled: 254, 212, 152;
+  --button-warning-text-color: 255, 255, 255;
+  --button-warning-text-color-outlined: var(--button-warning-background-color);
+  --button-warning-text-color-hover: var(--button-warning-background-color-hover);
+
+  --button-danger-background-color: 255, 74, 74;
+  --button-danger-background-color-hover: 215, 58, 58;
+  --button-danger-background-color-disabled: 255, 94, 94;
+  --button-danger-text-color: 255, 255, 255;
+  --button-danger-text-color-outlined: var(--button-danger-background-color);
+  --button-danger-text-color-hover: var(--button-danger-background-color-hover);
 
   --button-border-radius: 3px;
-  --button-padding: 14px;
-  --button-padding-small: 12px;
+  --button-padding-hor: 14px;
+  --button-padding-hor-small: 14px;
+  --button-padding-vert: 10px;
+  --button-padding-vert-small: 2px;
+
   --button-height: 36px;
   --button-height-small: 28px;
 }
 
-$variants: primary, secondary, special, danger, widget;
+$variants: primary, warning, danger;
 
 .vc-button {
-  @apply tw-inline-flex tw-items-center tw-font-medium tw-text-sm tw-cursor-pointer tw-box-border tw-transition  tw-duration-200 tw-rounded-[var(--button-border-radius)] tw-px-[var(--button-padding)] tw-h-[var(--button-height)];
-
   &__icon + &__title {
-    @apply tw-ml-2;
+    @apply tw-ml-2 tw-text-left;
   }
 
   @each $variant in $variants {
-    &_#{$variant} {
-      @apply tw-bg-[color:var(--button-#{$variant}-background-color)]
-      tw-text-left
-      tw-text-[color:var(--button-#{$variant}-text-color)]
-      tw-border tw-border-solid tw-border-[color:var(--button-#{$variant}-background-color)]
-      hover:tw-bg-[color:var(--button-#{$variant}-background-color-hover)]
-      hover:tw-text-[color:var(--button-#{$variant}-text-color-hover)]
-      hover:tw-border-[color:var(--button-#{$variant}-background-color-hover)]
-      focus:tw-bg-[color:var(--button-#{$variant}-background-color-active)]
-      focus:tw-text-[color:var(--button-#{$variant}-text-color-active)]
-      focus:tw-bg-[color:var(--button-#{$variant}-background-color-active)]
+    &.vc-button-#{$variant} {
+      @apply tw-inline-flex tw-items-center tw-font-medium tw-text-sm tw-cursor-pointer tw-box-border tw-transition tw-duration-200
+      tw-rounded-[var(--button-border-radius)] tw-px-[var(--button-padding-hor)] tw-py-[var(--button-padding-vert)]
+      tw-min-h-[var(--button-height)]
+      tw-bg-[color:rgb(var(--button-#{$variant}-background-color))]
+      tw-flex tw-justify-center
+      tw-text-[color:rgb(var(--button-#{$variant}-text-color))]
+      hover:tw-bg-[color:rgb(var(--button-#{$variant}-background-color-hover))]
+      focus:tw-bg-[color:rgb(var(--button-#{$variant}-background-color-hover))]
       disabled:tw-cursor-not-allowed
-      disabled:tw-bg-[color:var(--button-#{$variant}-background-color-disabled)]
-      disabled:tw-text-[color:var(--button-#{$variant}-text-color-disabled)]
-      disabled:tw-border-[color:var(--button-#{$variant}-background-color-disabled)];
-    }
-  }
-
-  &_widget {
-    @apply tw-h-auto tw-border-[color:var(--button-widget-border-color)]
-    tw-shadow-[1px_4px_10px_rgba(197,206,214,0.24)]
-    tw-rounded-[4px]
-    tw-p-[15px]
-    hover:tw-bg-[color:var(--button-widget-background-color-hover)]
-    focus:tw-bg-[color:var(--button-widget-background-color-active)]
-    focus:tw-border-[color:var(--button-widget-border-color-active)]
-    disabled:tw-cursor-not-allowed
-    disabled:tw-bg-[color:var(--button-widget-background-color-disabled)]
-    disabled:tw-border-[color:var(--button-widget-background-color-disabled)];
-
-    .vc-button__icon {
-      @apply tw-text-[30px] tw-text-[color:#a9bfd2];
-    }
-  }
-
-  &_small {
-    @apply tw-h-[var(--button-height-small)]
-      tw-px-[var(--button-padding-small)]
-      tw-font-normal
-      tw-text-xs;
-
-    .vc-button__icon + .vc-button__title {
-      @apply tw-ml-1;
-    }
-  }
-
-  &_outline {
-    @apply tw-bg-transparent
-    tw-text-[color:var(--button-secondary-text-color)]
-    tw-border-[color:var(--button-secondary-border-color)]
-    hover:tw-text-[color:var(--button-secondary-text-color-hover)]
-    hover:tw-border-[color:var(--button-secondary-border-color-hover)]
-    hover:tw-bg-transparent
-    focus:tw-text-[color:var(--button-secondary-text-color-hover)]
-    focus:tw-border-[color:var(--button-secondary-border-color-active)]
-    focus:tw-bg-transparent
-    disabled:tw-cursor-not-allowed
-    disabled:tw-text-[color:var(--button-secondary-text-color-disabled)]
-    disabled:tw-border-[color:var(--button-secondary-border-color-disabled)]
-    disabled:tw-bg-transparent;
-  }
-
-  &_onlytext {
-    @apply tw-text-[color:var(--button-secondary-text-color)]
-    tw-p-0 tw-border-none tw-bg-transparent tw-h-auto
-    hover:tw-bg-transparent
-    hover:tw-text-[color:var(--button-secondary-text-color-hover)]
-    focus:tw-bg-transparent
-    focus:tw-text-[color:var(--button-secondary-text-color-hover)];
-  }
-
-  &_selected {
-    &.vc-button_widget {
-      @apply tw-bg-[color:var(--button-widget-background-color-hover)];
+      disabled:tw-bg-[color:rgb(var(--button-#{$variant}-background-color-disabled))];
+
+      &.vc-button_small {
+        @apply tw-py-[var(--button-padding-vert-small)] tw-min-h-[var(--button-height-small)] tw-px-[var(--button-padding-hor-small)] tw-font-normal tw-text-xs;
+
+        .vc-button__icon + .vc-button__title {
+          @apply tw-ml-1;
+        }
+      }
+
+      &.vc-button_outline {
+        @apply tw-bg-transparent tw-border tw-border-[color:rgb(var(--button-#{$variant}-background-color))]
+        tw-text-[color:rgb(var(--button-#{$variant}-text-color-outlined))]
+        hover:tw-text-[color:rgb(var(--button-#{$variant}-text-color-hover))]
+        hover:tw-bg-transparent
+        hover:tw-border-[color:rgb(var(--button-#{$variant}-background-color-hover))]
+        disabled:tw-text-[color:rgba(var(--button-#{$variant}-text-color-hover),0.5)]
+        disabled:tw-border-[color:rgba(var(--button-#{$variant}-background-color),0.5)]
+        disabled:tw-bg-transparent;
+      }
+
+      &.vc-button_text {
+        @apply tw-border-none tw-bg-transparent tw-p-0 tw-min-h-0
+        tw-text-[color:rgb(var(--button-#{$variant}-background-color))]
+        hover:tw-text-[color:rgb(var(--button-#{$variant}-background-color-hover))]
+        focus:tw-text-[color:rgb(var(--button-#{$variant}-background-color-hover))]
+        disabled:tw-text-[color:rgba(var(--button-#{$variant}-background-color),0.5)];
+      }
+
+      &.vc-button_raised {
+        @apply tw-shadow-[1px_4px_10px_rgba(197,206,214,0.24)] tw-px-[var(--button-padding-hor)] tw-py-[var(--button-padding-vert)];
+
+        &.vc-button_text:not(:disabled) {
+          &:hover,
+          &:focus {
+            @apply tw-bg-[color:rgba(var(--button-#{$variant}-background-color-hover),0.07)];
+          }
+        }
+      }
+
+      &.vc-button_selected {
+        @apply tw-bg-[color:rgb(var(--button-#{$variant}-background-color-hover))];
+
+        &.vc-button_text {
+          @apply tw-bg-[color:rgba(var(--button-#{$variant}-background-color-hover),0.07)];
+        }
+      }
     }
   }
 }

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tw-relative tw-flex tw-items-center tw-content-between tw-h-[var(--app-bar-height)] tw-bg-[color:var(--app-bar-background-color)] tw-pl-4"
+    class="tw-relative tw-flex tw-items-center tw-content-between tw-h-[var(--app-bar-height)] tw-bg-[color:var(--app-bar-background-color)] tw-px-4"
   >
     <slot name="appSwitcher"></slot>
 

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue

@@ -10,7 +10,7 @@
           :is-active="isExactActive"
           :children="children"
           :sticky="sticky"
-          :icon="icon as string"
+          :icon="icon"
           :title="title"
           @on-click="onMenuItemClick"
         />
@@ -20,7 +20,7 @@
       <vc-app-menu-link
         :children="children"
         :sticky="sticky"
-        :icon="icon as string"
+        :icon="icon"
         :title="title"
         @on-click="onMenuItemClick"
       />
@@ -70,7 +70,7 @@ export interface Props {
   sticky?: boolean;
   isVisible?: boolean;
   component?: BladeConstructor;
-  icon?: string | (() => string);
+  icon?: string;
   title?: string;
   children?: BladeMenu[];
 }
@@ -94,7 +94,6 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const route = useRoute();
-
 const emit = defineEmits<Emits>();
 
 const isOpened = ref(false);

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

@@ -56,16 +56,9 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, getCurrentInstance, markRaw } from "vue";
-import { BladeMenu, IBladeToolbar } from "../../../../core/types";
-
-export default defineComponent({
-  inheritAttrs: false,
-});
-</script>
-
 <script lang="ts" setup>
+import { getCurrentInstance, markRaw } from "vue";
+import { BladeMenu, IBladeToolbar } from "../../../../core/types";
 import VcAppBar from "./_internal/vc-app-bar/vc-app-bar.vue";
 import VcAppMenu from "./_internal/vc-app-menu/vc-app-menu.vue";
 import { BladePageComponent, IBladeRef, useBladeNavigation } from "./../../../../shared";
@@ -90,6 +83,10 @@ export interface Emits {
   (event: "logo:click"): void;
 }
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 withDefaults(defineProps<Props>(), {
   pages: () => [],
   menuItems: () => [],

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue

@@ -47,15 +47,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, computed, nextTick } from "vue";
-
-export default defineComponent({
-  inheritAttrs: false,
-});
-</script>
-
 <script lang="ts" setup>
+import { ref, computed, nextTick } from "vue";
 import { VcIcon } from "./../../../../../../";
 import { offset, computePosition, ComputePositionReturn } from "@floating-ui/vue";
 import { IBladeDropdownItem } from "./../../../../../../../../core/types";
@@ -74,6 +67,10 @@ export interface Emits {
   (event: "click"): void;
 }
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   isExpanded: true,