@vc-shell/framework 1.1.0-alpha.1 → 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

@@ -81,6 +81,16 @@
 
         <ExternalProviders :providers="loginProviders" />
       </div>
+
+      <!-- Extensions after form -->
+      <template
+        v-for="extension in afterLoginFormExtensions"
+        :key="extension.id"
+      >
+        <div class="vc-login-page__extension">
+          <component :is="extension.component" />
+        </div>
+      </template>
     </template>
     <template v-else>
       <template v-if="!forgotPasswordRequestSent">
@@ -144,7 +154,6 @@
     <VcHint
       v-if="!signInResult.succeeded"
       class="vc-login-page__error-hint"
-      style="color: #f14e4e"
     >
       <!-- TODO: stylizing-->
       {{ signInResult.error }}
@@ -152,7 +161,6 @@
     <VcHint
       v-if="!requestPassResult.succeeded"
       class="vc-login-page__error-hint"
-      style="color: #f14e4e"
     >
       <!-- TODO: stylizing-->
       {{ requestPassResult.error }}
@@ -162,7 +170,7 @@
 
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { ref, reactive, computed, onMounted, Ref } from "vue";
+import { ref, reactive, computed, onMounted, Ref, inject } from "vue";
 import { useRouter } from "vue-router";
 import { useIsFormValid, Field, useIsFormDirty, useForm } from "vee-validate";
 import { useSettings, useUser } from "./../../../../../core/composables";
@@ -171,6 +179,7 @@ import { ExternalSignInProviderInfo, SignInResult } from "./../../../../../core/
 import { useI18n } from "vue-i18n";
 import { default as ExternalProviders } from "./../../../../../shared/components/sign-in/external-providers.vue";
 import { useExternalProvider } from "./../../../../../shared/components/sign-in/useExternalProvider";
+import { Extension, ExtensionPoint, extensionsHelperSymbol } from "./../../../../../core/plugins";
 
 type ForgotPasswordFunc = (args: { loginOrEmail: string }) => Promise<void>;
 
@@ -203,6 +212,12 @@ const loadingForgotPassword = ref(false);
 const loginProviders = ref<ExternalSignInProviderInfo[]>();
 let forgotPassword: ForgotPasswordFunc;
 
+const extensionsHelper = inject(extensionsHelperSymbol);
+
+const afterLoginFormExtensions = computed(
+  (): ExtensionPoint[] => (extensionsHelper?.getOutboundExtensions("login-after-form") as ExtensionPoint[]) || [],
+);
+
 if (props.composable && typeof props.composable === "function") {
   useLogin = props.composable;
 
@@ -251,6 +266,10 @@ const login = async () => {
         localStorage.removeItem("redirectAfterLogin");
         await router.push(redirectTo);
       } else {
+        signInResult.value.error = "The login or password is incorrect.";
+        form.password = "";
+        validateField("password");
+
         if (signInResult.value.status) {
           if (signInResult.value.status === 401) {
             signInResult.value.error = "The login or password is incorrect.";
@@ -296,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 {
@@ -320,6 +339,10 @@ console.debug("Init login-page");
     @apply tw-w-28;
   }
 
+  &__extension {
+    @apply tw-mt-6 tw-pt-6 tw-border-t tw-border-t-[color:var(--login-separator)] tw-flex tw-justify-center;
+  }
+
   &__separator {
     @apply tw-mt-4;
   }

package/shared/pages/LoginPage/components/login/README.md

@@ -0,0 +1,52 @@
+# Login Component Extension Guide
+
+The Login component can be extended through the dynamic modules system. This guide explains how to add custom functionality to the login page.
+
+## Extension Points
+
+Currently, the Login component supports the following extension points:
+
+- `login-after-form` - Allows adding content after the login form
+
+## How to Add Extensions
+
+### 1. Create Your Extension Component
+
+First, create your custom component:
+```vue
+<!-- MyLoginExtension.vue -->
+<template>
+<div class="my-login-extension">
+<!-- Your custom content -->
+</div>
+</template>
+<script lang="ts" setup>
+// Your component logic
+</script>
+```
+
+### 2. Register Extension in Your Module
+
+In your module's entry point, register the extension:
+
+```typescript
+import MyLoginExtension from './components/MyLoginExtension.vue';
+export default {
+  install(app) {
+  // Module installation logic
+  },
+extensions: {
+    'login-after-form': [{id: 'MyLoginExtension', component: MyLoginExtensionComponent}]
+  }
+}
+```
+
+## Extension Points Details
+
+### login-after-form
+
+This extension point appears after the login form and before any error messages. Extensions will be rendered with:
+- A horizontal separator line above
+- Centered alignment
+- Proper spacing from the login form
+

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