WEB-560 Fix version information below to the login button (#2974)
This commit is contained in:
Soni Jay
@@ -36,7 +36,6 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<mifosx-footer variant="compact"></mifosx-footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -89,6 +88,28 @@
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Version Info Table -->
|
||||
<div class="login-version-info">
|
||||
<table class="login-version-table">
|
||||
<tr>
|
||||
<td class="version-label">Tenant</td>
|
||||
<td class="version-value">{{ versions?.tenant || 'Default' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="version-label">Mifos® WebApp</td>
|
||||
<td class="version-value">{{ versions?.mifos }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="version-label">Apache Fineract®</td>
|
||||
<td class="version-value">{{ versions?.fineract?.version }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="version-label">Server</td>
|
||||
<td class="version-value">{{ server }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Resources Links -->
|
||||
<div class="resources-section">
|
||||
<div class="resources-divider">
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user