From ea60446c037ec7afd5d74f5ffdf2a30c20287004 Mon Sep 17 00:00:00 2001 From: Soni Jay Date: Fri, 9 Jan 2026 18:51:43 +0530 Subject: [PATCH] WEB-560 Fix version information below to the login button (#2974) --- src/app/login/login.component.html | 23 +++++- src/app/login/login.component.scss | 128 +++++++++++++---------------- src/app/login/login.component.ts | 52 +++++++++++- 3 files changed, 130 insertions(+), 73 deletions(-) diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 0e5d037bf..44f4253a2 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -36,7 +36,6 @@ - @@ -89,6 +88,28 @@ } + +
+ + + + + + + + + + + + + + + + + + +
+
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss index d113a6748..42b070913 100644 --- a/src/app/login/login.component.scss +++ b/src/app/login/login.component.scss @@ -1,3 +1,44 @@ +// Version Info Table +.login-version-table { + width: 100%; + max-width: 350px; + margin: 0 auto; + border-collapse: collapse; + font-size: 0.95rem; + background: none; +} + +.login-version-table td { + padding: 0.4rem 0.7rem; + text-align: left; + vertical-align: middle; +} + +.version-label { + font-weight: 500; + color: var(--md-sys-color-on-surface-variant, #44474e); + width: 50%; +} + +.version-value { + font-weight: 400; + color: var(--md-sys-color-on-surface, #1a1c1e); + width: 50%; + word-break: break-all; +} + +// Responsive +@media (width <= 768px) { + .login-version-table { + font-size: 0.85rem; + max-width: 100%; + } + + .login-version-table td { + padding: 0.3rem 0.4rem; + } +} + /** * Modern Material Design 3 Login Component Styles */ @@ -358,6 +399,15 @@ flex-shrink: 0; } +// ===== Version Info Section ===== +.login-version-info { + margin-bottom: 1rem; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + // ===== Resources Section ===== .resources-section { margin-top: auto; @@ -511,76 +561,6 @@ } } -// ===== Dark Theme Support ===== -:host-context(.dark-theme) { - .login-wrapper { - background: #1a1c1e; - } - - .login-panel { - background: #1a1c1e; - } - - .login-card { - background: #1a1c1e; - box-shadow: - 0 1px 2px #0000004d, - 0 2px 6px #0003, - 0 8px 24px #0000004d; - } - - .logo-image { - max-width: 20rem; - padding: 0; - margin: 0; - height: 63px; - content: url('../../assets/images/white-mifos.png'); - } - - .welcome-text { - color: var(--md-sys-color-on-surface, #e2e2e5); - } - - .welcome-subtitle { - color: var(--md-sys-color-on-surface-variant, #c4c6d0); - } - - .resources-divider { - &::before { - background: var(--md-sys-color-outline-variant, #44474e); - } - - .divider-text { - background: var(--md-sys-color-surface-container-low, #2c2f36); - color: var(--md-sys-color-on-surface, #e2e2e5); - } - } - - .resource-button { - color: var(--md-sys-color-primary, #5ba2ec); - - &:hover { - background: #5ba2ec1f; - } - } - - // Header controls dark theme - .login-header { - ::ng-deep mifosx-theme-toggle { - button { - color: var(--md-sys-color-on-surface, #e2e2e5); - - &:hover { - background: #5ba2ec1f; - color: var(--md-sys-color-primary, #5ba2ec); - } - } - } - - // Language selector and server selector dark theme styles are handled by the components themselves - } -} - // ===== Responsive Design ===== // Tablet @@ -709,6 +689,14 @@ margin-bottom: 0.75rem; } + .login-version-info { + margin-bottom: 0.75rem; + width: 100%; + justify-content: center; + align-items: center; + font-size: 0.85rem; + } + .login-footer { flex-direction: column; align-items: center; diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index 57247da85..5d9d67663 100644 --- a/src/app/login/login.component.ts +++ b/src/app/login/login.component.ts @@ -3,7 +3,19 @@ import { Component, OnInit, OnDestroy, inject } from '@angular/core'; import { Router } from '@angular/router'; /** rxjs Imports */ + import { Subscription } from 'rxjs'; +import { take } from 'rxjs/operators'; +/** + * Interface for version information. + */ +export interface VersionInfo { + tenant?: string; + mifos?: string; + fineract?: { + version?: string; + }; +} /** Custom Models */ import { Alert } from '../core/alert/alert.model'; @@ -23,11 +35,12 @@ import { LoginFormComponent } from './login-form/login-form.component'; import { ResetPasswordComponent } from './reset-password/reset-password.component'; import { TwoFactorAuthenticationComponent } from './two-factor-authentication/two-factor-authentication.component'; import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu'; -import { FooterComponent } from '../shared/footer/footer.component'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; import { M3IconComponent } from '../shared/m3-ui/m3-icon/m3-icon.component'; +import { VersionService } from '../system/version.service'; + /** * Login component. */ @@ -45,7 +58,6 @@ import { M3IconComponent } from '../shared/m3-ui/m3-icon/m3-icon.component'; ResetPasswordComponent, TwoFactorAuthenticationComponent, MatMenuTrigger, - FooterComponent, FaIconComponent, MatMenu, MatMenuItem, @@ -58,8 +70,15 @@ export class LoginComponent implements OnInit, OnDestroy { private themingService = inject(ThemingService); private router = inject(Router); + private versionService = inject(VersionService); + public environment = environment; + /** Version info for display */ + versions: VersionInfo = {}; + /** Server info for display */ + server: string = ''; + /** True if password requires a reset. */ resetPassword = false; /** True if user requires two factor authentication. */ @@ -103,6 +122,35 @@ export class LoginComponent implements OnInit, OnDestroy { this.updateLogo(); } }); + + // Load version info for table + this.versionService + .getBackendInfo() + .pipe(take(1)) + .subscribe( + (info: any) => { + this.versions = { + tenant: this.settingsService.tenantIdentifier, + mifos: info?.mifos || info?.mifosX || info?.mifos_x || info?.version || environment.version, + fineract: + typeof info?.fineract === 'object' && info?.fineract !== null + ? { version: info.fineract.version } + : typeof info?.fineract === 'string' + ? { version: info.fineract } + : info?.fineractX || info?.fineract_x + ? { version: info.fineractX || info.fineract_x } + : { version: info?.git?.build?.version } + }; + }, + () => { + this.versions = { + tenant: this.settingsService.tenantIdentifier, + mifos: environment.version, + fineract: { version: '' } + }; + } + ); + this.server = this.settingsService.server; } /**