@vc-shell/framework 1.0.70 → 1.0.71

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

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

@@ -0,0 +1,172 @@
+<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('INVITATION.TITLE')"
+    >
+      <VcForm>
+        <VcInput
+          class="tw-mb-4 tw-mt-1"
+          :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="tw-mb-4 tw-mt-1"
+            :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="tw-mb-4"
+            :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="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="loading || !form.isValid || !form.tokenIsValid"
+            @click="acceptInvitation"
+          >
+            {{ $t("INVITATION.ACCEPT_INVITATION") }}
+          </vc-button>
+        </div>
+
+        <VcHint
+          v-for="error in form.errors"
+          :key="error"
+          class="tw-mt-3"
+          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 } from "./../../../../../core/composables";
+
+useForm({ validateOnMount: false });
+
+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 isFormValid = useIsFormValid();
+const isDirty = useIsFormDirty();
+const form = reactive({
+  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);
+    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];
+    }
+  } else {
+    form.errors = result.errors;
+  }
+};
+</script>

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

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

package/shared/pages/InvitePage/index.ts

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

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

@@ -0,0 +1,31 @@
+{
+  "INVITATION": {
+    "TITLE": "New user activation",
+    "FIELDS": {
+      "EMAIL": {
+        "LABEL": "Email"
+      },
+      "PASSWORD": {
+        "LABEL": "New password",
+        "PLACEHOLDER": "Enter password"
+      },
+      "CONFIRM_PASSWORD": {
+        "LABEL": "Confirm password",
+        "PLACEHOLDER": "Confirm password"
+      }
+    },
+    "ACCEPT_INVITATION": "Activate",
+    "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/InvitePage/locales/index.ts

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

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

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

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

@@ -0,0 +1,283 @@
+<template>
+  <VcLoginForm
+    :logo="customization.logo"
+    :background="background"
+    :title="title"
+  >
+    <template v-if="isLogin">
+      <VcForm @submit.prevent="login">
+        <Field
+          v-slot="{ field, errorMessage, handleChange, errors }"
+          :label="$t('LOGIN.FIELDS.LOGIN.LABEL')"
+          name="username"
+          :model-value="form.username"
+          rules="required"
+        >
+          <VcInput
+            v-bind="field"
+            ref="loginField"
+            v-model="form.username"
+            class="tw-mb-4 tw-mt-1"
+            :label="$t('LOGIN.FIELDS.LOGIN.LABEL')"
+            :placeholder="$t('LOGIN.FIELDS.LOGIN.PLACEHOLDER')"
+            required
+            :error="!!errors.length"
+            :error-message="errorMessage"
+            @update:model-value="handleChange"
+          />
+        </Field>
+        <Field
+          v-slot="{ field, errorMessage, handleChange, errors }"
+          :label="$t('LOGIN.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"
+            :label="$t('LOGIN.FIELDS.PASSWORD.LABEL')"
+            :placeholder="$t('LOGIN.FIELDS.PASSWORD.PLACEHOLDER')"
+            type="password"
+            required
+            :error="!!errors.length"
+            :error-message="errorMessage"
+            @keyup.enter="login"
+            @update:model-value="handleChange"
+          />
+        </Field>
+
+        <div class="tw-flex tw-justify-end tw-items-center tw-pt-2">
+          <VcButton
+            text
+            type="button"
+            @click="togglePassRequest"
+          >
+            {{ $t("LOGIN.FORGOT_PASSWORD_BUTTON") }}
+          </VcButton>
+        </div>
+        <div class="tw-flex tw-justify-center tw-items-center tw-pt-2">
+          <vc-button
+            :disabled="loading || !isValid"
+            class="tw-w-28"
+            @click="login"
+          >
+            {{ $t("LOGIN.BUTTON") }}
+          </vc-button>
+        </div>
+      </VcForm>
+      <div
+        v-if="azureAdAuthAvailable && azureAdAuthCaption"
+        class="tw-mt-4"
+      >
+        <div
+          class="tw-flex tw-items-center tw-text-center tw-uppercase tw-text-[color:var(--separator-text)] before:tw-content-[''] before:tw-flex-1 before:tw-border-b before:tw-border-b-[color:var(--separator)] before:tw-mr-2 after:tw-content-[''] after:tw-flex-1 after:tw-border-b after:tw-border-b-[color:var(--separator)] after:tw-ml-2"
+        >
+          OR
+        </div>
+        <div class="tw-flex tw-justify-center tw-mt-4">
+          <VcButton
+            outline
+            @click="azureSignOn"
+            ><div class="tw-flex tw-flex-row tw-items-center">
+              <img
+                :src="AzureAdIcon"
+                alt="AzureAd"
+                class="tw-h-5 tw-mr-2"
+              />{{ azureAdAuthCaption }}
+            </div></VcButton
+          >
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <template v-if="!forgotPasswordRequestSent">
+        <VcForm @submit.prevent="forgot">
+          <Field
+            v-slot="{ field, errorMessage, handleChange, errors }"
+            :label="$t('LOGIN.FIELDS.FORGOT_PASSWORD.LABEL')"
+            name="loginOrEmail"
+            :model-value="forgotPasswordForm.loginOrEmail"
+            rules="required|email"
+          >
+            <VcInput
+              v-bind="field"
+              ref="forgotPasswordField"
+              v-model="forgotPasswordForm.loginOrEmail"
+              class="tw-mb-4 tw-mt-1"
+              :label="$t('LOGIN.FIELDS.FORGOT_PASSWORD.LABEL')"
+              :placeholder="$t('LOGIN.FIELDS.FORGOT_PASSWORD.PLACEHOLDER')"
+              :hint="$t('LOGIN.RESET_EMAIL_TEXT')"
+              required
+              :error="!!errors.length"
+              :error-message="errorMessage"
+              @update:model-value="handleChange"
+            ></VcInput>
+          </Field>
+          <div class="tw-flex tw-justify-between tw-items-center tw-pt-2">
+            <vc-button
+              text
+              type="button"
+              @click="togglePassRequest"
+            >
+              {{ $t("LOGIN.BACK_BUTTON") }}
+            </vc-button>
+            <vc-button
+              :disabled="loading || isDisabled"
+              @click="forgot"
+            >
+              {{ $t("LOGIN.FORGOT_BUTTON") }}
+            </vc-button>
+          </div>
+        </VcForm>
+      </template>
+
+      <template v-if="requestPassResult.succeeded && forgotPasswordRequestSent">
+        <div>{{ $t("LOGIN.RESET_EMAIL_SENT") }}</div>
+        <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="loading"
+            @click="togglePassRequest"
+          >
+            {{ $t("LOGIN.BUTTON_OK") }}
+          </vc-button>
+        </div>
+      </template>
+    </template>
+
+    <VcHint
+      v-if="!signInResult.succeeded"
+      class="tw-mt-3"
+      style="color: #f14e4e"
+    >
+      <!-- TODO: stylizing-->
+      {{ signInResult.error }}
+    </VcHint>
+    <VcHint
+      v-if="!requestPassResult.succeeded"
+      class="tw-mt-3"
+      style="color: #f14e4e"
+    >
+      <!-- TODO: stylizing-->
+      {{ requestPassResult.error }}
+    </VcHint>
+  </VcLoginForm>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed, onMounted, inject } from "vue";
+import { useRouter } from "vue-router";
+import { useIsFormValid, Field, useIsFormDirty, useForm } from "vee-validate";
+import { useSettings, useUser } from "./../../../../../core/composables";
+import { RequestPasswordResult, SignInResults } from "./../../../../../core/types";
+import { CommonPageComposables } from "typings";
+import { asyncComputed } from "@vueuse/core";
+import AzureAdIcon from "./../../../../../assets/img/AzureAd.svg";
+
+export interface Props {
+  logo: string;
+  background: string;
+  title: string;
+}
+
+const props = defineProps<Props>();
+
+const router = useRouter();
+
+useForm({ validateOnMount: false });
+const { getUiCustomizationSettings, uiSettings } = useSettings();
+const { useLogin } = inject<CommonPageComposables>("commonPageComposables");
+
+const signInResult = ref<SignInResults>({ succeeded: true });
+const requestPassResult = ref<RequestPasswordResult>({ succeeded: true });
+const forgotPasswordRequestSent = ref(false);
+const { signIn, loading, loadUser, externalSignIn, isAzureAdAuthAvailable, getAzureAdAuthCaption } = useUser();
+const { forgotPassword } = useLogin();
+const isLogin = ref(true);
+const isValid = useIsFormValid();
+const isDirty = useIsFormDirty();
+const customizationLoading = ref(false);
+
+onMounted(async () => {
+  try {
+    customizationLoading.value = true;
+    await getUiCustomizationSettings(import.meta.env.APP_PLATFORM_URL);
+  } finally {
+    customizationLoading.value = false;
+  }
+});
+
+const customization = computed(() => {
+  return (
+    !customizationLoading.value && {
+      logo: uiSettings.value?.logo || props.logo,
+    }
+  );
+});
+
+const isDisabled = computed(() => {
+  return !isDirty.value || !isValid.value;
+});
+
+const azureAdAuthAvailable = asyncComputed(async () => {
+  return await isAzureAdAuthAvailable();
+});
+const azureAdAuthCaption = asyncComputed(async () => {
+  return await getAzureAdAuthCaption();
+});
+
+const form = reactive({
+  username: "",
+  password: "",
+});
+
+const forgotPasswordForm = reactive({
+  loginOrEmail: "",
+});
+
+const login = async () => {
+  if (isValid.value) {
+    signInResult.value = await signIn(form.username, form.password);
+
+    if (signInResult.value.succeeded) {
+      router.push("/");
+    }
+  }
+};
+
+const forgot = async () => {
+  if (isValid.value) {
+    await forgotPassword({ loginOrEmail: forgotPasswordForm.loginOrEmail });
+    forgotPasswordRequestSent.value = true;
+  }
+};
+
+const togglePassRequest = () => {
+  isLogin.value = !isLogin.value;
+  if (isLogin.value) {
+    forgotPasswordRequestSent.value = false;
+    forgotPasswordForm.loginOrEmail = "";
+    requestPassResult.value.error = "";
+  }
+};
+
+const azureSignOn = async () => {
+  await externalSignIn("AzureAD", import.meta.env.BASE_URL);
+  await loadUser();
+};
+
+console.debug("Init login-page");
+</script>
+
+<style lang="scss">
+:root {
+  --separator: #d3dbe9;
+  --separator-text: #83a3be;
+}
+</style>

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

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

package/shared/pages/LoginPage/index.ts

@@ -0,0 +1,2 @@
+export * from "./plugin";
+export * from "./components";

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

@@ -0,0 +1,36 @@
+{
+  "LOGIN": {
+    "FIELDS": {
+      "LOGIN": {
+        "LABEL": "Username",
+        "PLACEHOLDER": "Enter your username"
+      },
+      "PASSWORD": {
+        "LABEL": "Password",
+        "PLACEHOLDER": "Enter your password"
+      },
+      "FORGOT_PASSWORD": {
+        "TITLE": "Forgot password",
+        "LABEL": "Email",
+        "PLACEHOLDER": "Please enter your email"
+      }
+    },
+    "FORGOT_PASSWORD_BUTTON": "Forgot your password?",
+    "BUTTON": "Log in",
+    "FORGOT_BUTTON": "Submit",
+    "BACK_BUTTON": "Back",
+    "BUTTON_OK": "Ok",
+    "RESET_EMAIL_TEXT": "We will send you an email with instructions on how to reset your password.",
+    "RESET_EMAIL_SENT": "Email with instructions has been sent to you."
+  },
+  "MENU": {
+    "DASHBOARD": "Home"
+  },
+  "TOOLBAR": {
+    "LOGIN": "Log In",
+    "SETTINGS": "Settings",
+    "HELP": "Help",
+    "NOTIFICATIONS": "Notifications",
+    "LANGUAGE": "Language selector"
+  }
+}

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

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