@vc-shell/framework 1.0.341 → 1.1.0-alpha.10

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

@@ -1,216 +1,216 @@
-<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 { 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>

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

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

package/shared/pages/InvitePage/index.ts

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

package/shared/pages/InvitePage/plugin.ts

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

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

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

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

@@ -154,7 +154,6 @@
     <VcHint
       v-if="!signInResult.succeeded"
       class="vc-login-page__error-hint"
-      style="color: #f14e4e"
     >
       <!-- TODO: stylizing-->
       {{ signInResult.error }}
@@ -162,7 +161,6 @@
     <VcHint
       v-if="!requestPassResult.succeeded"
       class="vc-login-page__error-hint"
-      style="color: #f14e4e"
     >
       <!-- TODO: stylizing-->
       {{ requestPassResult.error }}
@@ -317,7 +315,7 @@ console.debug("Init login-page");
 :root {
   --login-separator: var(--secondary-200);
   --login-separator-text: var(--primary-300);
-  --login-error: var(--base-error-color, var(--danger-500));
+  --login-error: var(--danger-500);
 }
 
 .vc-login-page {

package/shared/pages/LoginPage/components/login/index.ts

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

package/shared/pages/LoginPage/index.ts

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

package/shared/pages/LoginPage/plugin.ts

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

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

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

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

@@ -185,7 +185,7 @@ const customization = computed(() => {
 
 <style lang="scss">
 :root {
-  --reset-password-error-color: var(--base-error-color, var(--danger-500));
+  --reset-password-error-color: var(--danger-500);
 }
 
 .vc-reset-password-page {

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 };