From c1cacdfb6d3393b8e82d3b2dd0ffae25e4c2adeb Mon Sep 17 00:00:00 2001 From: Shubham Kumar Date: Sat, 31 Jan 2026 18:47:43 +0530 Subject: [PATCH] WEB-563 feat(login): modernize login UI with Material Design 3 and production mode (#3061) improve improve improve --- docker-compose.yml | 2 + env.sample | 4 + .../login-form/login-form.component.html | 7 - .../login-form/login-form.component.scss | 61 +-- src/app/login/login.component.html | 162 ++++---- src/app/login/login.component.scss | 369 +++++++++++------- src/app/login/login.component.ts | 8 + .../server-selector.component.html | 4 +- .../server-selector.component.scss | 24 +- .../tenant-selector.component.html | 2 +- src/assets/translations/cs-CS.json | 1 + src/assets/translations/de-DE.json | 1 + src/assets/translations/en-US.json | 1 + src/assets/translations/es-CL.json | 1 + src/assets/translations/es-MX.json | 1 + src/assets/translations/fr-FR.json | 1 + src/assets/translations/it-IT.json | 1 + src/assets/translations/ko-KO.json | 1 + src/assets/translations/lt-LT.json | 1 + src/assets/translations/lv-LV.json | 1 + src/assets/translations/ne-NE.json | 2 +- src/assets/translations/pt-PT.json | 2 +- src/assets/translations/sw-SW.json | 1 + src/environments/environment.prod.ts | 2 + src/environments/environment.ts | 4 +- src/typings.d.ts | 2 + 26 files changed, 383 insertions(+), 283 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 5f0bb0086..f27604bf0 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -25,3 +25,5 @@ services: - MIFOS_SESSION_IDLE_TIMEOUT=300000 - MIFOS_PRELOAD_CLIENTS=true - MIFOS_DEFAULT_CHAR_DELIMITER=, + # Production mode - set to true for minimal hero with only branding + - MIFOS_PRODUCTION_MODE=false diff --git a/env.sample b/env.sample index d4bdbc488..d99940839 100644 --- a/env.sample +++ b/env.sample @@ -41,3 +41,7 @@ MIFOS_HTTP_CACHE_ENABLED=true # Hide client data information (set to true to mask client names) MIFOS_COMPLIANCE_HIDE_CLIENT_DATA=false + +# Production mode - when true, shows minimal hero with only branding at bottom +# Set to true for financial institutions that want a clean, professional look +MIFOS_PRODUCTION_MODE=false diff --git a/src/app/login/login-form/login-form.component.html b/src/app/login/login-form/login-form.component.html index f4d808035..64b6c3103 100644 --- a/src/app/login/login-form/login-form.component.html +++ b/src/app/login/login-form/login-form.component.html @@ -80,13 +80,6 @@ } - - -
- - {{ 'labels.links.Forgot Password?' | translate }} - -
} diff --git a/src/app/login/login-form/login-form.component.scss b/src/app/login/login-form/login-form.component.scss index abfe94326..e8e7f2d89 100644 --- a/src/app/login/login-form/login-form.component.scss +++ b/src/app/login/login-form/login-form.component.scss @@ -21,7 +21,7 @@ #login-form { display: flex; flex-direction: column; - gap: 0.25rem; + gap: 0.5rem; animation: slide-in 0.4s ease-out; flex: 1; } @@ -71,7 +71,7 @@ } .mat-mdc-form-field-icon-prefix { - padding-right: 0.75rem; + padding: 0 0.75rem 0 0.5rem; color: var(--md-sys-color-on-surface-variant, #44474e); fa-icon { @@ -122,7 +122,8 @@ font-size: 1rem; font-weight: 400; color: var(--md-sys-color-on-surface, #1a1c1e); - padding: 0.875rem 0.75rem; + padding: 0.875rem 0; + margin-left: 0; &::placeholder { color: var(--md-sys-color-on-surface-variant, #44474e); @@ -134,11 +135,12 @@ .mat-mdc-floating-label { font-size: 1rem; color: var(--md-sys-color-on-surface-variant, #44474e); + left: 0 !important; } // Prefix icon .mat-mdc-form-field-icon-prefix { - padding-right: 0.75rem; + padding: 0 0.75rem 0 0.5rem; color: var(--md-sys-color-on-surface-variant, #44474e); fa-icon { @@ -147,6 +149,11 @@ } } + // Form field infix - align label with input + .mat-mdc-form-field-infix { + padding-left: 0; + } + // Suffix button (password toggle) .mat-mdc-form-field-icon-suffix { button { @@ -216,33 +223,6 @@ } } -// ===== Login Actions ===== -.login-actions { - display: flex; - justify-content: center; - margin-top: 0.5rem; -} - -.forgot-password-link { - font-size: 0.875rem; - color: var(--md-sys-color-primary, #1074b9); - text-decoration: none; - font-weight: 500; - padding: 0.5rem 1rem; - border-radius: 20px; - transition: all 0.2s ease; - - &:hover { - background: #1074b914; - text-decoration: underline; - } - - &:focus { - outline: 2px solid var(--md-sys-color-primary, #1074b9); - outline-offset: 2px; - } -} - // ===== OIDC Login ===== .oidc-login-container { width: 100%; @@ -370,14 +350,6 @@ } } - .forgot-password-link { - color: var(--md-sys-color-primary, #5ba2ec); - - &:hover { - background: #5ba2ec1f; - } - } - .oidc-description { color: var(--md-sys-color-on-surface-variant, #c4c6d0); } @@ -444,7 +416,7 @@ } .mat-mdc-form-field-icon-prefix { - padding-right: 0.5rem; + padding: 0 0.5rem 0 0.35rem; } } } @@ -454,15 +426,6 @@ margin-top: 0.4rem; } - .login-actions { - margin-top: 0.4rem; - } - - .forgot-password-link { - font-size: 0.8125rem; - padding: 0.35rem 0.65rem; - } - .oidc-actions { flex-direction: column; diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 8d8c0f5e2..27a661d11 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -8,41 +8,55 @@
-
+
-
-

{{ 'APP_NAME' | translate }}

-

- {{ 'labels.text.A' | translate }} - {{ 'labels.text.global community' | translate }} - {{ 'labels.text.elimination of poverty' | translate }} -

-
-
- - {{ 'labels.heading.Secure & Reliable' | translate }} + + @if (!productionMode) { +
+

{{ 'APP_NAME' | translate }}

+

+ {{ 'labels.text.A' | translate }} + {{ 'labels.text.global community' | translate }} + {{ 'labels.text.elimination of poverty' | translate }} +

+
+
+ + {{ 'labels.heading.Secure & Reliable' | translate }} +
+
+ + {{ 'labels.heading.Community Driven' | translate }} +
+
+ + {{ 'labels.heading.Global Impact' | translate }} +
-
- - {{ 'labels.heading.Community Driven' | translate }} -
-
- - {{ 'labels.heading.Global Impact' | translate }} +
+ + {{ 'labels.text.Mifos Initiative' | translate }} + + + + {{ 'labels.text.Get involved' | translate }} + +
-
- - {{ 'labels.text.Mifos Initiative' | translate }} - - - - {{ 'labels.text.Get involved' | translate }} - - + } + + @if (productionMode) { +
+

{{ 'APP_NAME' | translate }}

-
+ }
@@ -69,7 +83,6 @@ } @else { {{ 'APP_NAME' | translate }} Logo } -

{{ 'labels.heading.Welcome to Mifos' | translate }}

@@ -95,61 +108,64 @@ }
- + - -
-
- {{ 'labels.links.Resources' | translate }} + + @if (!productionMode) { +
+
+ {{ 'labels.text.Powered by' | translate }} + {{ + 'labels.text.Mifos Initiative' | translate + }} +
+
+ + + +
-
- - - -
-
+ }
diff --git a/src/app/shared/server-selector/server-selector.component.scss b/src/app/shared/server-selector/server-selector.component.scss index ccb085d46..08964e6a5 100644 --- a/src/app/shared/server-selector/server-selector.component.scss +++ b/src/app/shared/server-selector/server-selector.component.scss @@ -142,12 +142,22 @@ // ===== Common Styles ===== .actions { display: flex; - align-items: center; - justify-content: space-evenly; -} + align-items: flex-start; + justify-content: space-between; + gap: 0.75rem; + padding: 0.75rem 1rem; -.ml { - margin-left: 10px; + .mat-mdc-form-field { + flex: 1; + margin-bottom: 0; + } + + button { + flex-shrink: 0; + height: 40px; + min-width: 60px; + margin-top: 4px; + } } .sticky { @@ -156,8 +166,10 @@ top: 0; // fix at the top background-color: var(--md-sys-color-surface-container, white); // don't see mat-option when scrolling box-shadow: 1px -2px 10px 0 rgb(0 0 0 / 10%); // shadow at the bottom + padding-bottom: 0.5rem; + margin-bottom: 0.5rem; } mat-form-field { - width: 96%; + width: 100%; } diff --git a/src/app/shared/tenant-selector/tenant-selector.component.html b/src/app/shared/tenant-selector/tenant-selector.component.html index 2af1a8fca..f37f6c801 100644 --- a/src/app/shared/tenant-selector/tenant-selector.component.html +++ b/src/app/shared/tenant-selector/tenant-selector.component.html @@ -10,7 +10,7 @@ @for (tenant of tenants; track tenant) { - {{ tenant }} + {{ tenant | titlecase }} } diff --git a/src/assets/translations/cs-CS.json b/src/assets/translations/cs-CS.json index 9879955db..8003bb022 100644 --- a/src/assets/translations/cs-CS.json +++ b/src/assets/translations/cs-CS.json @@ -3202,6 +3202,7 @@ "Manual journal entry transactions recorded in a journal": "Transakce ručního zápisu do deníku zaznamenané v deníku", "Message Gateway": "Brána zpráv", "Mifos Initiative": "Iniciativa Mifos®", + "Powered by": "Napájeno", "Mifos X data-tables allow the user to add custom fields": "Tabulky dat Mifos X umožňují uživateli přidat vlastní pole kromě vestavěných polí do profilu klienta, úvěrového/spořicího účtu, skupiny, centra nebo kanceláře.", "Migrate Opening Balances": "Migrujte úvodní zůstatky", "Modify Loans Account": "Upravit úvěrový účet", diff --git a/src/assets/translations/de-DE.json b/src/assets/translations/de-DE.json index 076b89cc7..456939145 100644 --- a/src/assets/translations/de-DE.json +++ b/src/assets/translations/de-DE.json @@ -3202,6 +3202,7 @@ "Manual journal entry transactions recorded in a journal": "Manuelle Journalbuchungstransaktionen, die in einem Journal aufgezeichnet werden", "Message Gateway": "Nachrichten-Gateway", "Mifos Initiative": "Mifos®-Initiative", + "Powered by": "Betrieben von", "Mifos X data-tables allow the user to add custom fields": "Mifos", "Migrate Opening Balances": "Migrate Öffnungsbilanzen", "Modify Loans Account": "Darlehenskonto ändern", diff --git a/src/assets/translations/en-US.json b/src/assets/translations/en-US.json index 746102914..012d3d5a5 100644 --- a/src/assets/translations/en-US.json +++ b/src/assets/translations/en-US.json @@ -3298,6 +3298,7 @@ "Manual journal entry transactions recorded in a journal": "Manual journal entry transactions recorded in a journal", "Message Gateway": "Message Gateway", "Mifos Initiative": "Mifos® Initiative", + "Powered by": "Powered by", "Mifos X data-tables allow the user to add custom fields": "Mifos X data-tables allow the user to add custom fields in addition to the built-in fields to a client profile, loan/saving account, group, center or an office.", "Migrate Opening Balances": "Migrate Opening Balances", "Modify Loans Account": "Modify Loans Account", diff --git a/src/assets/translations/es-CL.json b/src/assets/translations/es-CL.json index d1e144583..a2b6e55e3 100644 --- a/src/assets/translations/es-CL.json +++ b/src/assets/translations/es-CL.json @@ -3203,6 +3203,7 @@ "Manual journal entry transactions recorded in a journal": "Transacciones de asiento de diario manuales registradas en un diario", "Message Gateway": "Puerta de enlace de mensajes", "Mifos Initiative": "Iniciativa Mifos®", + "Powered by": "Impulsado por", "Mifos X data-tables allow the user to add custom fields": "Las tablas de datos de Mifos X permiten al usuario agregar campos personalizados además de los campos integrados a un perfil de cliente, cuenta de Crédito/ahorro, grupo, centro u oficina.", "Migrate Opening Balances": "Migrar saldos de apertura", "Modify Loans Account": "Modificar cuenta de Créditos", diff --git a/src/assets/translations/es-MX.json b/src/assets/translations/es-MX.json index 87c69a072..14f997d48 100644 --- a/src/assets/translations/es-MX.json +++ b/src/assets/translations/es-MX.json @@ -3206,6 +3206,7 @@ "Manual journal entry transactions recorded in a journal": "Transacciones de asiento de diario manuales registradas en un diario", "Message Gateway": "Puerta de enlace de mensajes", "Mifos Initiative": "Iniciativa Mifos®", + "Powered by": "Impulsado por", "Mifos X data-tables allow the user to add custom fields": "Las tablas de datos de Mifos X permiten al usuario agregar campos personalizados además de los campos integrados a un perfil de cliente, cuenta de Crédito/ahorro, grupo, centro u oficina.", "Migrate Opening Balances": "Migrar saldos de apertura", "Modify Loans Account": "Modificar cuenta de Créditos", diff --git a/src/assets/translations/fr-FR.json b/src/assets/translations/fr-FR.json index 7b5ac8d60..bcda4b67a 100644 --- a/src/assets/translations/fr-FR.json +++ b/src/assets/translations/fr-FR.json @@ -3201,6 +3201,7 @@ "Manual journal entry transactions recorded in a journal": "Opérations d'écriture de journal manuelle enregistrées dans un journal", "Message Gateway": "Passerelle de messages", "Mifos Initiative": "Initiative Mifos®", + "Powered by": "Alimenté par", "Mifos X data-tables allow the user to add custom fields": "Les tables de données Mifos X permettent à l'utilisateur d'ajouter des champs personnalisés en plus des champs intégrés à un profil client, un compte de prêt/épargne, un groupe, un centre ou un bureau.", "Migrate Opening Balances": "Migrer les soldes d'ouverture", "Modify Loans Account": "Modifier le compte de prêts", diff --git a/src/assets/translations/it-IT.json b/src/assets/translations/it-IT.json index 6c5f11b7b..3b9e371a9 100644 --- a/src/assets/translations/it-IT.json +++ b/src/assets/translations/it-IT.json @@ -3201,6 +3201,7 @@ "Manual journal entry transactions recorded in a journal": "Transazioni di registrazione a giornale manuali registrate in un giornale", "Message Gateway": "Portale dei messaggi", "Mifos Initiative": "Iniziativa Mifos®", + "Powered by": "Offerto da", "Mifos X data-tables allow the user to add custom fields": "Le tabelle dati di Mifos X consentono all'utente di aggiungere campi personalizzati oltre ai campi integrati al profilo cliente, conto di prestito/risparmio, gruppo, centro o ufficio.", "Migrate Opening Balances": "Migrare i saldi di apertura", "Modify Loans Account": "Modifica conto prestiti", diff --git a/src/assets/translations/ko-KO.json b/src/assets/translations/ko-KO.json index a89662221..d2161b32f 100644 --- a/src/assets/translations/ko-KO.json +++ b/src/assets/translations/ko-KO.json @@ -3202,6 +3202,7 @@ "Manual journal entry transactions recorded in a journal": "분개장에 기록된 수동 분개 거래", "Message Gateway": "메시지 게이트웨이", "Mifos Initiative": "Mifos® 이니셔티브", + "Powered by": "제공:", "Mifos X data-tables allow the user to add custom fields": "Mifos X 데이터 테이블을 사용하면 사용자는 클라이언트 프로필, 대출/저축 계좌, 그룹, 센터 또는 사무실에 기본 제공 필드 외에 사용자 정의 필드를 추가할 수 있습니다.", "Migrate Opening Balances": "개방 잔액을 마이그레이션합니다", "Modify Loans Account": "대출 계정 수정", diff --git a/src/assets/translations/lt-LT.json b/src/assets/translations/lt-LT.json index ef12d80b2..23721cd03 100644 --- a/src/assets/translations/lt-LT.json +++ b/src/assets/translations/lt-LT.json @@ -3202,6 +3202,7 @@ "Manual journal entry transactions recorded in a journal": "Neautomatinio žurnalo įrašymo operacijos, įrašytos į žurnalą", "Message Gateway": "Pranešimų vartai", "Mifos Initiative": "Mifos® iniciatyva", + "Powered by": "Varomas", "Mifos X data-tables allow the user to add custom fields": "„Mifos X“ duomenų lentelės leidžia vartotojui pridėti pasirinktinius laukus be įtaisytųjų laukų prie kliento profilio, paskolos / taupymo sąskaitos, grupės, centro ar biuro.", "Migrate Opening Balances": "Perkelkite atidarymo balansus", "Modify Loans Account": "Modifikuoti paskolų sąskaitą", diff --git a/src/assets/translations/lv-LV.json b/src/assets/translations/lv-LV.json index 2d7742436..16ab64dfd 100644 --- a/src/assets/translations/lv-LV.json +++ b/src/assets/translations/lv-LV.json @@ -3202,6 +3202,7 @@ "Manual journal entry transactions recorded in a journal": "Manuālā žurnāla ieraksta darījumi, kas ierakstīti žurnālā", "Message Gateway": "Ziņojumu vārteja", "Mifos Initiative": "Mifos® iniciatīva", + "Powered by": "Darbojas ar", "Mifos X data-tables allow the user to add custom fields": "Mifos X datu tabulas ļauj lietotājam papildus iebūvētajiem laukiem pievienot pielāgotus laukus klienta profilam, aizdevuma/uzkrājuma kontam, grupai, centram vai birojam.", "Migrate Opening Balances": "Migrēt atveres atlikumus", "Modify Loans Account": "Modificēt aizdevuma kontu", diff --git a/src/assets/translations/ne-NE.json b/src/assets/translations/ne-NE.json index 458e49d77..ac95b6192 100644 --- a/src/assets/translations/ne-NE.json +++ b/src/assets/translations/ne-NE.json @@ -885,7 +885,6 @@ "GreaterThan": "भन्दा ठुलो", "NotEqual": "बराबर छैन" }, - "heading": { "Account Linked Financial": "विभिन्न वित्तीय गतिविधिहरु संग जोडिएको खाताहरु को सूची। थप जान्नको लागि क्लिक गर्नुहोस्:", "Account Name": "खाताको नाम", @@ -3201,6 +3200,7 @@ "Manual journal entry transactions recorded in a journal": "जर्नलमा रेकर्ड गरिएको म्यानुअल जर्नल प्रविष्टि लेनदेन", "Message Gateway": "सन्देश गेटवे", "Mifos Initiative": "Mifos® पहल", + "Powered by": "द्वारा संचालित", "Mifos X data-tables allow the user to add custom fields": "Mifos X डाटा-टेबलहरूले प्रयोगकर्तालाई ग्राहक प्रोफाइल, ऋण/बचत खाता, समूह, केन्द्र वा कार्यालयमा निर्मित क्षेत्रहरू बाहेक अनुकूलन क्षेत्रहरू थप्न अनुमति दिन्छ।", "Migrate Opening Balances": "ओप्रवाहको ब्यालेन्स सारियो", "Modify Loans Account": "ऋण खाता परिमार्जन गर्नुहोस्", diff --git a/src/assets/translations/pt-PT.json b/src/assets/translations/pt-PT.json index b31aa1981..c6defb16d 100644 --- a/src/assets/translations/pt-PT.json +++ b/src/assets/translations/pt-PT.json @@ -975,7 +975,6 @@ "Create fixed deposit product": "Criar produto de depósito fixo", "Create loan product": "Criar produto de empréstimo", "Create recurring deposit product": "Crie um produto de depósito recorrente", - "Create share product": "Criar produto compartilhado", "Currency": "Moeda", "Currency Configuration": "Configuração de moeda", @@ -3202,6 +3201,7 @@ "Manual journal entry transactions recorded in a journal": "Transações de lançamento manual registradas em um diário", "Message Gateway": "Gateway de mensagens", "Mifos Initiative": "Iniciativa Mifos®", + "Powered by": "Desenvolvido por", "Mifos X data-tables allow the user to add custom fields": "As tabelas de dados Mifos X permitem ao usuário adicionar campos personalizados além dos campos integrados a um perfil de cliente, empréstimo/conta poupança, grupo, centro ou escritório.", "Migrate Opening Balances": "Migrar saldos de abertura", "Modify Loans Account": "Modificar conta de empréstimos", diff --git a/src/assets/translations/sw-SW.json b/src/assets/translations/sw-SW.json index 39cdadf44..9146ebdc1 100644 --- a/src/assets/translations/sw-SW.json +++ b/src/assets/translations/sw-SW.json @@ -3198,6 +3198,7 @@ "Manual journal entry transactions recorded in a journal": "Uingizaji wa shughuli za jarida kwa mikono iliyorekodiwa kwenye jarida", "Message Gateway": "Lango la Ujumbe", "Mifos Initiative": "Mpango wa Mifos®", + "Powered by": "Imeendeshwa na", "Mifos X data-tables allow the user to add custom fields": "Jedwali la data la Mifos X huruhusu mtumiaji kuongeza sehemu maalum pamoja na sehemu zilizojengewa ndani kwa wasifu wa mteja, akaunti ya mkopo/kuokoa, kikundi, kituo au ofisi.", "Migrate Opening Balances": "Kuhamia mizani ya ufunguzi", "Modify Loans Account": "Rekebisha Akaunti ya Mikopo", diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 78b936bed..ca48d01b2 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -60,6 +60,8 @@ export const environment = { displayBackEndInfo: loadedEnv['displayBackEndInfo'] || 'true', displayTenantSelector: loadedEnv['displayTenantSelector'] || 'true', + /** Production mode - when true, shows minimal hero with only branding at bottom */ + productionMode: loadedEnv['productionMode'] === 'true' || loadedEnv['productionMode'] === true || false, tenantLogoUrl: loadedEnv['tenantLogoUrl'] || 'assets/images/mifos_lg-logo.jpg', documentationBaseUrl: loadedEnv['documentationBaseUrl'] || 'https://mifosforge.jira.com/wiki', // Time in seconds, default 60 seconds diff --git a/src/environments/environment.ts b/src/environments/environment.ts index d91edf482..d87b02ea5 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -64,7 +64,9 @@ export const environment = { displayBackEndInfo: loadedEnv.displayBackEndInfo || 'true', displayTenantSelector: loadedEnv.displayTenantSelector || 'true', - tenantLogoUrl: loadedEnv.tenantLogoUrl || 'assets/images/mifos_lg-logo.jpg', + /** Production mode - when true, shows minimal hero with only branding at bottom */ + productionMode: loadedEnv.productionMode === 'true' || loadedEnv.productionMode === true || false, + tenantLogoUrl: loadedEnv.tenantLogoUrl || 'assets/images/default_home.png', documentationBaseUrl: loadedEnv.documentationBaseUrl || 'https://mifosforge.jira.com/wiki', // Time in seconds, default 60 seconds waitTimeForNotifications: loadedEnv.waitTimeForNotifications || 60, diff --git a/src/typings.d.ts b/src/typings.d.ts index b2e2edd64..cb2e8bc89 100644 --- a/src/typings.d.ts +++ b/src/typings.d.ts @@ -31,6 +31,8 @@ interface Window { defaultCharDelimiter?: string; displayBackEndInfo?: string; displayTenantSelector?: string; + /** Production mode - when true, shows minimal hero with only branding at bottom */ + productionMode?: string | boolean; waitTimeForNotifications?: number; waitTimeForCOBCatchUp?: number; sessionIdleTimeout?: number;