@vc-shell/framework 1.0.70 → 1.0.72

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

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