feat: add option to disable background blend mode for login image

Author: SerVitasik

adminforth/documentation/docs/tutorial/03-Customization/01-branding.md

@@ -169,4 +169,18 @@ auth: {
 `loginBackgroundPosition` accepts values:
 
 - `over` - image will be over the whole login page with cover mode
-- `1/2`(default), `3/4`, `2/5`, `3/5` etc. - image will be in the left side of the login page with cover mode
+- `1/2`(default), `3/4`, `2/5`, `3/5` etc. - image will be in the left side of the login page with cover mode
+
+### Disabling background blend mode
+
+When using `loginBackgroundPosition: 'over'`, AdminForth applies a background blend mode by default to ensure text readability over the background image. If you want to disable this blend mode and display the background image without any overlay effects, you can add:
+
+```ts title='./index.ts'
+auth: {
+  ...
+  loginBackgroundImage: '@@/photo-1516501312919-d0cb0b7b60b8.jpeg',
+  loginBackgroundPosition: 'over',
+//diff-add
+  removeBackgroundBlendMode: true,
+}
+```

adminforth/modules/restApi.ts

@@ -215,6 +215,7 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
           usernameFieldName: usernameColumn.label,
           loginBackgroundImage: this.adminforth.config.auth.loginBackgroundImage,
           loginBackgroundPosition: this.adminforth.config.auth.loginBackgroundPosition,
+          removeBackgroundBlendMode: this.adminforth.config.auth.removeBackgroundBlendMode,
           title: this.adminforth.config.customization?.title,
           demoCredentials: this.adminforth.config.auth.demoCredentials,
           loginPromptHTML: await tr(this.adminforth.config.auth.loginPromptHTML, 'system.loginPromptHTML'),
@@ -297,6 +298,7 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
           usernameFieldName: usernameColumn.label,
           loginBackgroundImage: this.adminforth.config.auth.loginBackgroundImage,
           loginBackgroundPosition: this.adminforth.config.auth.loginBackgroundPosition,
+          removeBackgroundBlendMode: this.adminforth.config.auth.removeBackgroundBlendMode,
           title: this.adminforth.config.customization?.title,
           demoCredentials: this.adminforth.config.auth.demoCredentials,
           loginPromptHTML: await tr(this.adminforth.config.auth.loginPromptHTML, 'system.loginPromptHTML'),

adminforth/spa/src/spa_types/core.ts

@@ -34,6 +34,7 @@ export type CoreConfig = {
         passwordHashField: string,
         loginBackgroundImage: string,
         loginBackgroundPosition: string,
+        removeBackgroundBlendMode: boolean,
         userFullnameField: string,
     },
     emptyFieldPlaceholder?: {

adminforth/spa/src/views/LoginView.vue

@@ -4,6 +4,7 @@
       'background-image': 'url(' + loadFile(coreStore.config?.loginBackgroundImage) + ')',
       'background-size': 'cover',
       'background-position': 'center',
+      'background-blend-mode': coreStore.config?.removeBackgroundBlendMode ? 'normal' : 'darken'
     }: {}"
   >
 

adminforth/types/Back.ts

@@ -940,6 +940,13 @@ export interface AdminForthInputConfig {
        */
       loginBackgroundPosition?: 'over' | '1/2' | '1/3' | '2/3' | '3/4' | '2/5' | '3/5',
 
+      /**
+       * If true, background blend mode will be removed from login background image when position is 'over'
+       * 
+       * Default: false
+       */
+      removeBackgroundBlendMode?: boolean,
+
       /**
        * Function or functions  which will be called before user try to login.
        * Each function will resive User object as an argument

adminforth/types/Common.ts

@@ -1055,6 +1055,7 @@ export interface AdminForthConfigForFrontend {
   usernameFieldName: string,
   loginBackgroundImage: string,
   loginBackgroundPosition: string,
+  removeBackgroundBlendMode: boolean,
   title?: string,
   demoCredentials?: string,
   loginPromptHTML?: string,