@vc-shell/framework 1.0.340 → 1.1.0-alpha.2

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

@@ -1,218 +1,218 @@
-<template>
-  <div class="vc-reset-password-page">
-    <VcLoading
-      v-if="loading"
-      active
-    ></VcLoading>
-
-    <VcLoginForm
-      :logo="customization.logo"
-      :background="background"
-      :title="t('PASSWORDRESET.TITLE')"
-      class="vc-reset-password-page__login-form"
-    >
-      <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="vc-reset-password-page__input"
-            :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="vc-reset-password-page__input-small"
-            :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="vc-reset-password-page__button-container">
-          <span
-            v-if="$isDesktop.value"
-            class="vc-reset-password-page__spacer"
-          ></span>
-          <vc-button
-            :disabled="disableButton"
-            class="vc-reset-password-page__submit-button"
-            @click="resetPassword"
-          >
-            {{ t("PASSWORDRESET.SAVE_PASSWORD") }}
-          </vc-button>
-        </div>
-
-        <VcHint
-          v-for="error in form.errors"
-          :key="error"
-          class="vc-reset-password-page__error-hint"
-          style="color: #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, useSettings } from "./../../../../../core/composables";
-import { useI18n } from "vue-i18n";
-
-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 { 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(() => {
-  return {
-    logo: !customizationLoading.value ? uiSettings.value?.logo || props.logo : "",
-  };
-});
-</script>
-
-<style lang="scss">
-:root {
-  --reset-password-error-color: var(--base-error-color, var(--danger-500));
-}
-
-.vc-reset-password-page {
-  @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-m-0;
-}
-
-.vc-reset-password-page__input {
-  @apply tw-mb-4 tw-mt-1;
-}
-
-.vc-reset-password-page__input-small {
-  @apply tw-mb-4;
-}
-
-.vc-reset-password-page__button-container {
-  @apply tw-flex tw-justify-center tw-items-center tw-pt-2;
-}
-
-.vc-reset-password-page__spacer {
-  @apply tw-grow tw-basis-0;
-}
-
-.vc-reset-password-page__submit-button {
-  @apply tw-w-28;
-}
-
-.vc-reset-password-page__error-hint {
-  @apply tw-mt-3 tw-text-[color:var(--reset-password-error-color)] #{!important};
-}
-</style>
+<template>
+  <div class="vc-reset-password-page">
+    <VcLoading
+      v-if="loading"
+      active
+    ></VcLoading>
+
+    <VcLoginForm
+      :logo="customization.logo"
+      :background="background"
+      :title="t('PASSWORDRESET.TITLE')"
+      class="vc-reset-password-page__login-form"
+    >
+      <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="vc-reset-password-page__input"
+            :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="vc-reset-password-page__input-small"
+            :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="vc-reset-password-page__button-container">
+          <span
+            v-if="$isDesktop.value"
+            class="vc-reset-password-page__spacer"
+          ></span>
+          <vc-button
+            :disabled="disableButton"
+            class="vc-reset-password-page__submit-button"
+            @click="resetPassword"
+          >
+            {{ t("PASSWORDRESET.SAVE_PASSWORD") }}
+          </vc-button>
+        </div>
+
+        <VcHint
+          v-for="error in form.errors"
+          :key="error"
+          class="vc-reset-password-page__error-hint"
+          style="color: #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, useSettings } from "./../../../../../core/composables";
+import { useI18n } from "vue-i18n";
+
+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 { 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(() => {
+  return {
+    logo: !customizationLoading.value ? uiSettings.value?.logo || props.logo : "",
+  };
+});
+</script>
+
+<style lang="scss">
+:root {
+  --reset-password-error-color: var(--base-error-color, var(--danger-500));
+}
+
+.vc-reset-password-page {
+  @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-m-0;
+}
+
+.vc-reset-password-page__input {
+  @apply tw-mb-4 tw-mt-1;
+}
+
+.vc-reset-password-page__input-small {
+  @apply tw-mb-4;
+}
+
+.vc-reset-password-page__button-container {
+  @apply tw-flex tw-justify-center tw-items-center tw-pt-2;
+}
+
+.vc-reset-password-page__spacer {
+  @apply tw-grow tw-basis-0;
+}
+
+.vc-reset-password-page__submit-button {
+  @apply tw-w-28;
+}
+
+.vc-reset-password-page__error-hint {
+  @apply tw-mt-3 tw-text-[color:var(--reset-password-error-color)] #{!important};
+}
+</style>

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

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

package/shared/pages/ResetPasswordPage/index.ts

@@ -1 +1 @@
-export * from "./components";
+export * from "./components";

package/shared/pages/ResetPasswordPage/plugin.ts

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

package/shared/pages/index.ts

@@ -1,4 +1,4 @@
-export * from "./InvitePage";
-export * from "./LoginPage";
-export * from "./ResetPasswordPage";
-export * from "./ChangePasswordPage";
+export * from "./InvitePage";
+export * from "./LoginPage";
+export * from "./ResetPasswordPage";
+export * from "./ChangePasswordPage";

package/shared/pages/plugin.ts

@@ -1,4 +1,4 @@
-export * from "./InvitePage/plugin";
-export * from "./LoginPage/plugin";
-export * from "./ResetPasswordPage/plugin";
-export * from "./ChangePasswordPage/plugin";
+export * from "./InvitePage/plugin";
+export * from "./LoginPage/plugin";
+export * from "./ResetPasswordPage/plugin";
+export * from "./ChangePasswordPage/plugin";

package/shared/utilities/assets.ts

@@ -1,42 +1,42 @@
-const fileThumbnails = [
-  { image: "fas fa-file-pdf", extensions: ["pdf"] },
-  { image: "fas fa-file-word", extensions: ["doc", "docx"] },
-  { image: "fas fa-file-excel", extensions: ["xls", "xlsx"] },
-  { image: "fas fa-file-powerpoint", extensions: ["ppt", "pptx"] },
-  { image: "fas fa-file-csv", extensions: ["csv"] },
-  { image: "fas fa-file-archive", extensions: ["zip"] },
-  { image: "fas fa-file-music", extensions: ["mp3", "aac"] },
-  { image: "fas fa-file-video", 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 "fas fa-file";
-  return (
-    fileThumbnails.find((thumb) => thumb.extensions.some((ext) => ext === getExtension(name)))?.image || "fas fa-file"
-  );
-}
-
-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 };
+const fileThumbnails = [
+  { image: "fas fa-file-pdf", extensions: ["pdf"] },
+  { image: "fas fa-file-word", extensions: ["doc", "docx"] },
+  { image: "fas fa-file-excel", extensions: ["xls", "xlsx"] },
+  { image: "fas fa-file-powerpoint", extensions: ["ppt", "pptx"] },
+  { image: "fas fa-file-csv", extensions: ["csv"] },
+  { image: "fas fa-file-archive", extensions: ["zip"] },
+  { image: "fas fa-file-music", extensions: ["mp3", "aac"] },
+  { image: "fas fa-file-video", 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 "fas fa-file";
+  return (
+    fileThumbnails.find((thumb) => thumb.extensions.some((ext) => ext === getExtension(name)))?.image || "fas fa-file"
+  );
+}
+
+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/vueUtils.ts

@@ -1,50 +1,50 @@
-/* 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;
-};
+/* 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;
+};