Merge pull request #236 from devforth/loginPageInjection

feat: add overInputs injection point to login page

Author: ivictbor

adminforth/commands/createCustomComponent/configUpdater.js

@@ -254,7 +254,7 @@ export async function updateResourceConfig(resourceId, columnName, fieldType, co
 }
 
 
-export async function injectLoginComponent(indexFilePath, componentPath) {
+export async function injectLoginComponent(indexFilePath, componentPath, injectionType) {
     console.log(chalk.dim(`Reading file: ${indexFilePath}`));
     const content = await fs.readFile(indexFilePath, 'utf-8');
     const ast = recast.parse(content, {
@@ -263,6 +263,7 @@ export async function injectLoginComponent(indexFilePath, componentPath) {
 
     let updated = false;
     let injectionLine = null;
+    let targetProperty = null;
 
     recast.visit(ast, {
       visitNewExpression(path) {
@@ -293,20 +294,23 @@ export async function injectLoginComponent(indexFilePath, componentPath) {
           const loginPageInjections = getOrCreateProp(customization, 'loginPageInjections');
           if (!n.ObjectExpression.check(loginPageInjections)) return false;
 
-          let underInputsProp = loginPageInjections.properties.find(
-            p => n.ObjectProperty.check(p) && n.Identifier.check(p.key) && p.key.name === 'underInputs'
+          // Determine target property based on injection type
+          targetProperty = injectionType === 'beforeLogin' ? 'panelHeader' : 'underInputs';
+          
+          let targetProp = loginPageInjections.properties.find(
+            p => n.ObjectProperty.check(p) && n.Identifier.check(p.key) && p.key.name === targetProperty
           );
 
-          if (underInputsProp) {
-            const currentVal = underInputsProp.value;
-            injectionLine = underInputsProp.loc?.start.line ?? null;
+          if (targetProp) {
+            const currentVal = targetProp.value;
+            injectionLine = targetProp.loc?.start.line ?? null;
             if (n.StringLiteral.check(currentVal)) {
               if (currentVal.value !== componentPath) {
-                underInputsProp.value = b.arrayExpression([
+                targetProp.value = b.arrayExpression([
                   b.stringLiteral(currentVal.value),
                   b.stringLiteral(componentPath),
                 ]);
-                console.log(chalk.dim(`Converted 'underInputs' to array with existing + new path.`));
+                console.log(chalk.dim(`Converted '${targetProperty}' to array with existing + new path.`));
               } else {
                 console.log(chalk.dim(`Component path already present as string. Skipping.`));
               }
@@ -316,26 +320,26 @@ export async function injectLoginComponent(indexFilePath, componentPath) {
               );
               if (!exists) {
                 currentVal.elements.push(b.stringLiteral(componentPath));
-                console.log(chalk.dim(`Appended new component path to existing 'underInputs' array.`));
+                console.log(chalk.dim(`Appended new component path to existing '${targetProperty}' array.`));
               } else {
                 console.log(chalk.dim(`Component path already present in array. Skipping.`));
               }
             } else {
-              console.warn(chalk.yellow(`⚠️ 'underInputs' is not a string or array. Skipping.`));
+              console.warn(chalk.yellow(`⚠️ '${targetProperty}' is not a string or array. Skipping.`));
               return false;
             }
           } else {
             const newProperty = b.objectProperty(
-                b.identifier('underInputs'), 
-                b.stringLiteral(componentPath)
-              );
-              
-              if (newProperty.loc) {
-                console.log(chalk.dim(`Adding 'underInputs' at line: ${newProperty.loc.start.line}`));
-              }
-              
-              loginPageInjections.properties.push(newProperty);
-              console.log(chalk.dim(`Added 'underInputs': ${componentPath}`));
+              b.identifier(targetProperty), 
+              b.stringLiteral(componentPath)
+            );
+            
+            if (newProperty.loc) {
+              console.log(chalk.dim(`Adding '${targetProperty}' at line: ${newProperty.loc.start.line}`));
+            }
+            
+            loginPageInjections.properties.push(newProperty);
+            console.log(chalk.dim(`Added '${targetProperty}': ${componentPath}`));
           }
 
           updated = true;
@@ -353,7 +357,7 @@ export async function injectLoginComponent(indexFilePath, componentPath) {
     await fs.writeFile(indexFilePath, outputCode, 'utf-8');
     console.log(
       chalk.green(
-        `✅ Successfully updated CRUD injection in resource file: ${indexFilePath}` +
+        `✅ Successfully updated login ${targetProperty} injection in: ${indexFilePath}` +
         (injectionLine !== null ? `:${injectionLine}` : '')
       )
     );

adminforth/commands/createCustomComponent/fileGenerator.js

@@ -129,7 +129,7 @@ export async function generateLoginOrGlobalComponentFile(componentFileName, inje
     const __filename = fileURLToPath(import.meta.url);
     const __dirname = path.dirname(__filename);
     let templatePath;
-    if (injectionType === 'afterLogin') {
+    if (injectionType === 'afterLogin' || injectionType === 'beforeLogin') {
       templatePath = path.join(__dirname, 'templates', 'login', `${injectionType}.vue.hbs`);
     } else {
       templatePath = path.join(__dirname, 'templates', 'global', `${injectionType}.vue.hbs`);

adminforth/commands/createCustomComponent/main.js

@@ -257,6 +257,7 @@ async function handleLoginPageInjectionCreation(config) {
   const injectionType = await select({
     message: 'Select injection type:',
     choices: [
+      { name: 'Before Login and password inputs', value: 'beforeLogin' },
       { name: 'After Login and password inputs', value: 'afterLogin' },
       { name: '🔙 BACK', value: '__BACK__' },
     ],
@@ -287,7 +288,7 @@ async function handleLoginPageInjectionCreation(config) {
       console.log(chalk.dim(`Component generation successful: ${absoluteComponentPath}`));
       const configFilePath = path.resolve(process.cwd(), 'index.ts');
       console.log(chalk.dim(`Injecting component: ${configFilePath}, ${componentFileName}`));
-      await injectLoginComponent(configFilePath, `@@/${componentFileName}`);
+      await injectLoginComponent(configFilePath, `@@/${componentFileName}`, injectionType);
 
       console.log(
         chalk.bold.greenBright('You can now open the component in your IDE:'),

adminforth/commands/createCustomComponent/templates/login/beforeLogin.vue.hbs

@@ -0,0 +1,18 @@
+<template>
+  <div class="text-center text-gray-500 text-sm mt-4">
+    Login Page Text
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+
+const props = defineProps<{
+  reason: String
+}>();
+
+onMounted(() => {
+  // Logic on mount if needed
+});
+</script>
+

adminforth/documentation/docs/tutorial/03-Customization/08-pageInjections.md

@@ -141,9 +141,9 @@ Here is how it looks:
 
 You can also inject custom components to the login page. 
 
-`loginPageInjections.underInputs` allows to add one or more panels under the login form inputs:
+`loginPageInjections.underInputs` and `loginPageInjections.panelHeader` allows to add one or more panels under or over the login form inputs:
 
-![login Page Injections underInputs](<Group 2 (1).png>)
+![login Page Injections underInputs](<loginPageInjection.png>)
 
 For example:
 
@@ -172,6 +172,38 @@ Now create file `CustomLoginFooter.vue` in the `custom` folder of your project:
 </template>
 ```
 
+Also you can add `panelHeader`
+
+```ts title="/index.ts"
+
+new AdminForth({
+  ...
+  customization: {
+    loginPageInjections: {
+      underInputs: '@@/CustomLoginFooter.vue',
+//diff-add
+      panelHeader: '@@/CustomLoginHeader.vue',
+    }
+    ...
+  }
+
+  ...
+})
+```
+
+Now create file `CustomLoginHeader.vue` in the `custom` folder of your project:
+
+```html title="./custom/CustomLoginHeader.vue"
+<template>
+    <div class="flex items-center justify-center gap-2">
+        <div class="text-2xl text-black dark:text-white font-bold">
+          AdminForth
+        </div>
+    </div>
+</template>
+```
+
+
 
 ## List view page injections shrinking: thin enough to shrink?
 

adminforth/documentation/docs/tutorial/03-Customization/loginPageInjection.png

@@ -115,10 +115,11 @@ export default class ConfigValidator implements IConfigValidator {
 
     const loginPageInjections: AdminForthConfigCustomization['loginPageInjections'] = {
       underInputs: [],
+      panelHeader: [],
     };
 
     if (this.inputConfig.customization?.loginPageInjections) {
-      const ALLOWED_LOGIN_INJECTIONS = ['underInputs']
+      const ALLOWED_LOGIN_INJECTIONS = ['underInputs', 'panelHeader']
       Object.keys(this.inputConfig.customization.loginPageInjections).forEach((injection) => {
         if (ALLOWED_LOGIN_INJECTIONS.includes(injection)) {
           loginPageInjections[injection] = this.validateAndListifyInjectionNew(this.inputConfig.customization.loginPageInjections, injection, errors);

adminforth/modules/configValidator.ts

@@ -30,7 +30,16 @@
             <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black" >
                 <!-- Modal header -->
                 <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
-                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+
+                    <div v-if="coreStore?.config?.loginPageInjections?.panelHeader.length > 0">
+                      <component 
+                        v-for="(c, index) in coreStore?.config?.loginPageInjections?.panelHeader || []"
+                        :key="index"
+                        :is="getCustomComponent(c)"
+                        :meta="c.meta"
+                      />
+                    </div>
+                    <h3 v-else class="text-xl font-semibold text-gray-900 dark:text-white">
                       {{ $t('Sign in to') }} {{ coreStore.config?.brandName }}
                     </h3>
                 </div>

adminforth/spa/src/views/LoginView.vue

@@ -747,6 +747,7 @@ interface AdminForthInputConfigCustomization {
    */
   loginPageInjections?: {
     underInputs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+    panelHeader?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
   }
 
   /**
@@ -1054,6 +1055,7 @@ export interface AdminForthConfigCustomization extends Omit<AdminForthInputConfi
 
   loginPageInjections: {
     underInputs: Array<AdminForthComponentDeclarationFull>,
+    panelHeader: Array<AdminForthComponentDeclarationFull>,
   },
 
   globalInjections: {

adminforth/types/Back.ts

@@ -1060,6 +1060,7 @@ export interface AdminForthConfigForFrontend {
   loginPromptHTML?: string,
   loginPageInjections: {
     underInputs: Array<AdminForthComponentDeclaration>,
+    panelHeader: Array<AdminForthComponentDeclaration>,
   },
   rememberMeDays: number,
   showBrandNameInSidebar: boolean,