@vc-shell/framework 1.0.337 → 1.0.339

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.0.337",
+  "version": "1.0.339",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -59,9 +59,9 @@
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
-    "@vc-shell/api-client-generator": "^1.0.337",
-    "@vc-shell/config-generator": "^1.0.337",
-    "@vc-shell/ts-config": "^1.0.337",
+    "@vc-shell/api-client-generator": "^1.0.339",
+    "@vc-shell/config-generator": "^1.0.339",
+    "@vc-shell/ts-config": "^1.0.339",
     "@vitejs/plugin-vue": "5.0.3",
     "cypress-signalr-mock": "^1.5.0",
     "sass": "^1.69.6",

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">
@@ -162,7 +172,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 +181,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 +214,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;
 
@@ -320,6 +337,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
+