WEB-511 Update login page logo to use tenant-specific branding (#2926)

Author: EmanuelCR03

env.sample

@@ -13,6 +13,9 @@ FINERACT_PLATFORM_TENANT_IDENTIFIER=default
 # Tenant Identifiers list delimited by comma
 FINERACT_PLATFORM_TENANTS_IDENTIFIER=default
 
+# Tenant Logo URL - supports external URLs (e.g., https://example.com/logo.png) or local paths. Leave empty to use default tenant-specific logos
+TENANT_LOGO_URL=
+
 MIFOS_DEFAULT_LANGUAGE=en-US
 
 MIFOS_SUPPORTED_LANGUAGES=cs-CS,de-DE,en-US,es-MX,fr-FR,it-IT,ko-KO,lt-LT,lv-LV,ne-NE,pt-PT

src/app/login/login.component.html

@@ -50,7 +50,7 @@ <h1 class="mat-display-1 cover-title">{{ 'APP_NAME' | translate }}</h1>
 
     <!-- Logo with Organization Name -->
     <div class="layout-row align-center-center flex-auto">
-      <img src="assets/images/mifos_lg-logo.png" alt="{{ 'APP_NAME' | translate }} Logo" class="img-container" />
+      <img [src]="logoPath" (error)="onLogoError()" alt="{{ 'APP_NAME' | translate }} Logo" class="img-container" />
     </div>
 
     <!-- Form Section -->

src/app/login/login.component.ts

@@ -65,11 +65,13 @@ export class LoginComponent implements OnInit, OnDestroy {
   twoFactorAuthenticationRequired = false;
   /** Subscription to alerts. */
   alert$: Subscription;
+  logoPath = 'assets/images/default_home.png';
 
   /**
    * Subscribes to alert event of alert service.
    */
   ngOnInit() {
+    this.updateLogo();
     this.alert$ = this.alertService.alertEvent.subscribe((alertEvent: Alert) => {
       const alertType = alertEvent.type;
       if (alertType === 'Password Expired') {
@@ -82,6 +84,8 @@ export class LoginComponent implements OnInit, OnDestroy {
         this.resetPassword = false;
         this.twoFactorAuthenticationRequired = false;
         this.router.navigate(['/'], { replaceUrl: true });
+      } else if (alertType === 'Tenant Changed') {
+        this.updateLogo();
       }
     });
   }
@@ -112,4 +116,21 @@ export class LoginComponent implements OnInit, OnDestroy {
   allowServerSwitch(): boolean {
     return environment.allowServerSwitch === 'false' ? false : true;
   }
+
+  updateLogo(): void {
+    if (environment.tenantLogoUrl && environment.tenantLogoUrl.trim() !== '') {
+      this.logoPath = environment.tenantLogoUrl;
+      return;
+    }
+    const tenant = this.settingsService.tenantIdentifier;
+    if (tenant && tenant !== 'default') {
+      this.logoPath = `assets/images/${tenant}_home.png`;
+    } else {
+      this.logoPath = 'assets/images/default_home.png';
+    }
+  }
+
+  onLogoError(): void {
+    this.logoPath = 'assets/images/default_home.png';
+  }
 }

src/app/shared/tenant-selector/tenant-selector.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
+import { AlertService } from 'app/core/alert/alert.service';
 import { MatFormField, MatPrefix, MatLabel } from '@angular/material/form-field';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -17,6 +18,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 })
 export class TenantSelectorComponent implements OnInit {
   private settingsService = inject(SettingsService);
+  private alertService = inject(AlertService);
 
   /** Tenant selector form control. */
   tenantSelector = new UntypedFormControl();
@@ -40,6 +42,7 @@ export class TenantSelectorComponent implements OnInit {
 
   setTenantIdentifier(): void {
     this.settingsService.setTenantIdentifier(this.tenantSelector.value);
+    this.alertService.alert({ type: 'Tenant Changed', message: this.tenantSelector.value });
   }
 
   allowSelection(): boolean {

src/assets/env.js

@@ -12,6 +12,8 @@
   window["env"]["fineractPlatformTenantId"]  = '';
   window["env"]["fineractPlatformTenantIds"]  = '';
 
+  window['env']['tenantLogoUrl'] = '';
+
   // Language Environment variables
   window["env"]["defaultLanguage"] = '';
   window["env"]["supportedLanguages"] = '';

src/assets/env.template.js

@@ -12,6 +12,8 @@
   window['env']['fineractPlatformTenantId'] = '$FINERACT_PLATFORM_TENANT_IDENTIFIER';
   window['env']['fineractPlatformTenantIds'] = '$FINERACT_PLATFORM_TENANTS_IDENTIFIER';
 
+  window['env']['tenantLogoUrl'] = '$TENANT_LOGO_URL';
+  
   // Language Environment variables
   window['env']['defaultLanguage'] = '$MIFOS_DEFAULT_LANGUAGE';
   window['env']['supportedLanguages'] = '$MIFOS_SUPPORTED_LANGUAGES';

src/environments/environment.prod.ts

@@ -52,6 +52,7 @@ export const environment = {
 
   displayBackEndInfo: loadedEnv['displayBackEndInfo'] || 'true',
   displayTenantSelector: loadedEnv['displayTenantSelector'] || 'true',
+  tenantLogoUrl: loadedEnv['tenantLogoUrl'] || 'assets/images/mifos_lg-logo.png',
   // Time in seconds, default 60 seconds
   waitTimeForNotifications: loadedEnv['waitTimeForNotifications'] || 60,
   // Time in seconds, default 30 seconds

src/environments/environment.ts

@@ -56,6 +56,7 @@ export const environment = {
 
   displayBackEndInfo: loadedEnv.displayBackEndInfo || 'true',
   displayTenantSelector: loadedEnv.displayTenantSelector || 'true',
+  tenantLogoUrl: loadedEnv.tenantLogoUrl || 'assets/images/mifos_lg-logo.png',
   // Time in seconds, default 60 seconds
   waitTimeForNotifications: loadedEnv.waitTimeForNotifications || 60,
   // Time in seconds, default 30 seconds

src/theme/_dark_content.scss

@@ -271,7 +271,8 @@ body.dark-theme {
 
   // Home page logo styling for dark mode
   mifosx-home {
-    [src*='mifos_lg-logo.png'] {
+    [src*='mifos_lg-logo.png'],
+    [src$='_home.png'] {
       content: url('../assets/images/white-mifos.png');
     }
   }