feat(users): OTP delivery method picker on user creation + post-login agreement
Create User dialog now has a mandatory Email/Mobile OTP delivery method picker (styled as a pill toggle) alongside the existing fields. Adds a new post-login agreement acceptance dialog: right after the existing 2FA flow (TwoFactorAuthenticationComponent) succeeds, or immediately after login for users without 2FA, the user must accept the bank's current agreement/disclaimer at least once before reaching the app. Also adds a "Manage User Agreement" admin screen (System section) to publish versioned agreement text without a code deploy. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
@@ -281,12 +281,8 @@ export class AuthenticationService {
|
||||
message: 'Your password has expired, please reset your password!'
|
||||
});
|
||||
} else {
|
||||
this.setCredentials(credentials);
|
||||
this.alertService.alert({
|
||||
type: 'Authentication Success',
|
||||
message: `${credentials.username} successfully logged in!`
|
||||
});
|
||||
delete this.credentials;
|
||||
this.credentials = credentials;
|
||||
this.finalizeLogin();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -546,16 +542,60 @@ export class AuthenticationService {
|
||||
message: 'Your password has expired, please reset your password!'
|
||||
});
|
||||
} else {
|
||||
this.setCredentials(this.credentials);
|
||||
this.alertService.alert({
|
||||
type: 'Authentication Success',
|
||||
message: `${this.credentials.username} successfully logged in!`
|
||||
});
|
||||
delete this.credentials;
|
||||
this.storage.setItem(this.twoFactorAuthenticationTokenStorageKey, JSON.stringify(response));
|
||||
this.finalizeLogin();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Runs after primary login (and 2FA, if the account has it enrolled) succeeds. Every user must
|
||||
* accept the bank's current agreement/disclaimer at least once — checks that here and either
|
||||
* finishes the login immediately (already accepted, or nothing published yet) or fires an alert
|
||||
* so `login.component.ts` can show the accept dialog.
|
||||
*/
|
||||
private finalizeLogin(): void {
|
||||
this.http.get<{ accepted: boolean }>('/useragreements/active/status').subscribe({
|
||||
next: (status) => {
|
||||
if (status?.accepted) {
|
||||
this.completeAuthentication();
|
||||
} else {
|
||||
this.alertService.alert({
|
||||
type: 'Agreement Acceptance Required',
|
||||
message: 'Please review and accept the agreement to continue.'
|
||||
});
|
||||
}
|
||||
},
|
||||
// Don't let an agreement-status hiccup block login entirely.
|
||||
error: () => this.completeAuthentication()
|
||||
});
|
||||
}
|
||||
|
||||
/** Finishes the login: persists credentials and fires the existing 'Authentication Success' alert. */
|
||||
private completeAuthentication(): void {
|
||||
this.setCredentials(this.credentials);
|
||||
this.alertService.alert({
|
||||
type: 'Authentication Success',
|
||||
message: `${this.credentials.username} successfully logged in!`
|
||||
});
|
||||
delete this.credentials;
|
||||
}
|
||||
|
||||
/** Fetches the active agreement's text for display, when the current user hasn't accepted it yet. */
|
||||
getAgreementStatus(): Observable<{
|
||||
accepted: boolean;
|
||||
id?: number;
|
||||
version?: number;
|
||||
title?: string;
|
||||
body?: string;
|
||||
}> {
|
||||
return this.http.get<any>('/useragreements/active/status');
|
||||
}
|
||||
|
||||
/** Records the current user's acceptance of the active agreement, then finishes the login. */
|
||||
acceptActiveAgreement(): Observable<void> {
|
||||
return this.http.post<any>('/useragreements/active/accept', {}).pipe(map(() => this.completeAuthentication()));
|
||||
}
|
||||
|
||||
/**
|
||||
* Resets the user's password and authenticates the user.
|
||||
* @param {any} passwordDetails New password.
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="aga-card">
|
||||
<div class="aga-icon">
|
||||
<fa-icon icon="file-signature"></fa-icon>
|
||||
</div>
|
||||
|
||||
<h2 class="aga-title">Terms & Agreement</h2>
|
||||
<p class="aga-sub">
|
||||
@if (loading) {
|
||||
Loading the agreement…
|
||||
} @else if (loadErrorMessage) {
|
||||
We couldn't load the agreement.
|
||||
} @else {
|
||||
Please read the agreement below before continuing.
|
||||
}
|
||||
</p>
|
||||
|
||||
@if (loading) {
|
||||
<div class="aga-loading">
|
||||
<mat-spinner diameter="32"></mat-spinner>
|
||||
</div>
|
||||
} @else if (loadErrorMessage) {
|
||||
<div class="aga-error">
|
||||
<fa-icon icon="exclamation-circle"></fa-icon>
|
||||
{{ loadErrorMessage }}
|
||||
</div>
|
||||
<button type="button" class="aga-btn aga-btn--ghost" (click)="loadAgreement()">
|
||||
<fa-icon icon="sync-alt"></fa-icon>
|
||||
<span>Try Again</span>
|
||||
</button>
|
||||
} @else {
|
||||
<div class="aga-agreement">
|
||||
<h3 class="aga-agreement__title">{{ agreementTitle }}</h3>
|
||||
<div class="aga-agreement__body">{{ agreementBody }}</div>
|
||||
</div>
|
||||
|
||||
<label class="aga-check">
|
||||
<input type="checkbox" [checked]="accepted" (change)="toggleAccepted()" />
|
||||
<span>I have read and agree to the above</span>
|
||||
</label>
|
||||
|
||||
@if (submitErrorMessage) {
|
||||
<div class="aga-error">
|
||||
<fa-icon icon="exclamation-circle"></fa-icon>
|
||||
{{ submitErrorMessage }}
|
||||
</div>
|
||||
}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="aga-btn aga-btn--primary"
|
||||
[disabled]="!accepted || submitting"
|
||||
(click)="acceptAndContinue()"
|
||||
>
|
||||
@if (submitting) {
|
||||
<mat-spinner diameter="20"></mat-spinner>
|
||||
<span>Submitting…</span>
|
||||
} @else {
|
||||
<fa-icon icon="check-circle"></fa-icon>
|
||||
<span>Accept & Continue</span>
|
||||
}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
@@ -0,0 +1,221 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
animation: aga-fade 0.4s ease-out;
|
||||
}
|
||||
|
||||
.aga-card {
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
padding: 20px 24px 24px;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(180deg, rgb(255 255 255 / 7%) 0%, rgb(255 255 255 / 4%) 100%);
|
||||
border: 1px solid rgb(255 255 255 / 14%);
|
||||
backdrop-filter: blur(12px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
box-shadow:
|
||||
0 30px 60px rgb(0 0 0 / 35%),
|
||||
0 10px 24px rgb(0 0 0 / 22%),
|
||||
inset 0 1px 0 rgb(255 255 255 / 8%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.aga-icon {
|
||||
align-self: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
||||
color: #fff;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26px;
|
||||
box-shadow:
|
||||
0 10px 28px rgb(37 99 235 / 45%),
|
||||
0 0 0 1px rgb(255 255 255 / 10%),
|
||||
inset 0 1px 0 rgb(255 255 255 / 25%);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.aga-title {
|
||||
margin: 0 0 6px;
|
||||
text-align: center;
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.aga-sub {
|
||||
margin: 0 0 18px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: rgb(255 255 255 / 65%);
|
||||
}
|
||||
|
||||
.aga-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.aga-agreement {
|
||||
max-height: 260px;
|
||||
overflow-y: auto;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 12px;
|
||||
background: rgb(255 255 255 / 5%);
|
||||
border: 1px solid rgb(255 255 255 / 10%);
|
||||
|
||||
&__title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&__body {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: rgb(255 255 255 / 78%);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.aga-check {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
color: rgb(255 255 255 / 80%);
|
||||
cursor: pointer;
|
||||
|
||||
// stylelint-disable-next-line selector-no-qualifying-type
|
||||
input[type='checkbox'] {
|
||||
margin-top: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
accent-color: #2563eb;
|
||||
}
|
||||
}
|
||||
|
||||
.aga-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 10px;
|
||||
background: rgb(239 68 68 / 14%);
|
||||
border: 1px solid rgb(239 68 68 / 35%);
|
||||
color: #fecaca;
|
||||
font-size: 12.5px;
|
||||
|
||||
fa-icon {
|
||||
font-size: 13px;
|
||||
color: #fca5a5;
|
||||
}
|
||||
}
|
||||
|
||||
.aga-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.3px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 0.18s,
|
||||
box-shadow 0.18s,
|
||||
transform 0.18s,
|
||||
opacity 0.18s;
|
||||
border: 1px solid transparent;
|
||||
|
||||
fa-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 60%, #1e3a8a 100%);
|
||||
color: #fff;
|
||||
box-shadow:
|
||||
0 10px 24px rgb(37 99 235 / 38%),
|
||||
0 0 0 1px rgb(255 255 255 / 6%),
|
||||
inset 0 1px 0 rgb(255 255 255 / 22%);
|
||||
|
||||
fa-icon {
|
||||
filter: drop-shadow(0 1px 2px rgb(0 0 0 / 25%));
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
background: linear-gradient(135deg, #4f8ff7 0%, #2563eb 60%, #1e3a8a 100%);
|
||||
box-shadow:
|
||||
0 14px 28px rgb(37 99 235 / 48%),
|
||||
0 0 0 1px rgb(255 255 255 / 8%),
|
||||
inset 0 1px 0 rgb(255 255 255 / 26%);
|
||||
}
|
||||
}
|
||||
|
||||
&--ghost {
|
||||
background: transparent;
|
||||
color: rgb(255 255 255 / 80%);
|
||||
border-color: rgb(255 255 255 / 18%);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: rgb(255 255 255 / 8%);
|
||||
color: #fff;
|
||||
border-color: rgb(255 255 255 / 30%);
|
||||
}
|
||||
}
|
||||
|
||||
mat-spinner ::ng-deep circle {
|
||||
stroke: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes aga-fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 480px) {
|
||||
.aga-card {
|
||||
padding: 18px 16px 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { MatDialogRef } from '@angular/material/dialog';
|
||||
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
|
||||
/** rxjs Imports */
|
||||
import { finalize } from 'rxjs/operators';
|
||||
|
||||
/** Custom Services */
|
||||
import { AuthenticationService } from '../../core/authentication/authentication.service';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/**
|
||||
* Shown right after a successful login (OTP included, if the account has it enrolled) when the
|
||||
* signed-in user hasn't yet accepted the bank's current agreement/disclaimer. Non-dismissable —
|
||||
* mirrors TwoFactorAuthenticationComponent's dialog posture.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-agreement-accept',
|
||||
templateUrl: './agreement-accept.component.html',
|
||||
styleUrls: ['./agreement-accept.component.scss'],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
MatProgressSpinner,
|
||||
FaIconComponent
|
||||
]
|
||||
})
|
||||
export class AgreementAcceptComponent implements OnInit {
|
||||
private authenticationService = inject(AuthenticationService);
|
||||
public dialogRef = inject(MatDialogRef<AgreementAcceptComponent>);
|
||||
|
||||
loading = true;
|
||||
loadErrorMessage = '';
|
||||
|
||||
agreementTitle = '';
|
||||
agreementBody = '';
|
||||
accepted = false;
|
||||
|
||||
submitting = false;
|
||||
submitErrorMessage = '';
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadAgreement();
|
||||
}
|
||||
|
||||
loadAgreement(): void {
|
||||
this.loading = true;
|
||||
this.loadErrorMessage = '';
|
||||
this.authenticationService
|
||||
.getAgreementStatus()
|
||||
.pipe(finalize(() => (this.loading = false)))
|
||||
.subscribe({
|
||||
next: (status) => {
|
||||
this.agreementTitle = status?.title || '';
|
||||
this.agreementBody = status?.body || '';
|
||||
},
|
||||
error: (err) => {
|
||||
this.loadErrorMessage =
|
||||
err?.error?.defaultUserMessage || err?.error?.message || 'Could not load the agreement.';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
toggleAccepted(): void {
|
||||
this.accepted = !this.accepted;
|
||||
}
|
||||
|
||||
acceptAndContinue(): void {
|
||||
if (!this.accepted || this.submitting) return;
|
||||
this.submitErrorMessage = '';
|
||||
this.submitting = true;
|
||||
this.authenticationService
|
||||
.acceptActiveAgreement()
|
||||
.pipe(finalize(() => (this.submitting = false)))
|
||||
.subscribe({
|
||||
error: (err) => {
|
||||
this.submitErrorMessage =
|
||||
err?.error?.defaultUserMessage || err?.error?.message || 'Could not record your acceptance.';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -247,13 +247,13 @@
|
||||
</div>
|
||||
|
||||
<!-- Login Forms -->
|
||||
@if (!resetPassword && !twoFactorAuthenticationRequired) {
|
||||
@if (!resetPassword && !twoFactorAuthenticationRequired && !agreementAcceptanceRequired) {
|
||||
<mifosx-login-form></mifosx-login-form>
|
||||
}
|
||||
@if (resetPassword) {
|
||||
<mifosx-reset-password></mifosx-reset-password>
|
||||
}
|
||||
<!-- 2FA opens as a non-dismissable dialog from login.component.ts -->
|
||||
<!-- 2FA and the post-login agreement dialog open as non-dismissable dialogs from login.component.ts -->
|
||||
|
||||
<div class="right-footer">RBI Licensed · PCI-DSS Compliant · ISO 27001 Certified</div>
|
||||
</div>
|
||||
|
||||
@@ -43,6 +43,7 @@ import { TenantSelectorComponent } from '../shared/tenant-selector/tenant-select
|
||||
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 { AgreementAcceptComponent } from './agreement-accept/agreement-accept.component';
|
||||
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
|
||||
import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
@@ -85,6 +86,7 @@ import { AuthenticationService } from '../core/authentication/authentication.ser
|
||||
LoginFormComponent,
|
||||
ResetPasswordComponent,
|
||||
TwoFactorAuthenticationComponent,
|
||||
AgreementAcceptComponent,
|
||||
MatMenuTrigger,
|
||||
FaIconComponent,
|
||||
MatMenu,
|
||||
@@ -220,6 +222,7 @@ export class LoginComponent implements OnInit, OnDestroy {
|
||||
private themingService = inject(ThemingService);
|
||||
private dialog = inject(MatDialog);
|
||||
private twoFactorDialogRef: MatDialogRef<TwoFactorAuthenticationComponent> | null = null;
|
||||
private agreementAcceptDialogRef: MatDialogRef<AgreementAcceptComponent> | null = null;
|
||||
private router = inject(Router);
|
||||
private authService = inject(AuthenticationService);
|
||||
|
||||
@@ -245,6 +248,8 @@ export class LoginComponent implements OnInit, OnDestroy {
|
||||
resetPassword = false;
|
||||
/** True if user requires two factor authentication. */
|
||||
twoFactorAuthenticationRequired = false;
|
||||
/** True if the signed-in user still needs to accept the current agreement/disclaimer. */
|
||||
agreementAcceptanceRequired = false;
|
||||
/** Subscription to alerts. */
|
||||
alert$: Subscription;
|
||||
logoPath = 'assets/images/cbsnexora-logo.png';
|
||||
@@ -275,16 +280,24 @@ export class LoginComponent implements OnInit, OnDestroy {
|
||||
const alertType = alertEvent.type;
|
||||
if (alertType === 'Password Expired') {
|
||||
this.twoFactorAuthenticationRequired = false;
|
||||
this.agreementAcceptanceRequired = false;
|
||||
this.closeTwoFactorDialog();
|
||||
this.closeAgreementAcceptDialog();
|
||||
this.resetPassword = true;
|
||||
} else if (alertType === 'Two Factor Authentication Required') {
|
||||
this.resetPassword = false;
|
||||
this.twoFactorAuthenticationRequired = true;
|
||||
this.openTwoFactorDialog();
|
||||
} else if (alertType === 'Agreement Acceptance Required') {
|
||||
this.resetPassword = false;
|
||||
this.agreementAcceptanceRequired = true;
|
||||
this.openAgreementAcceptDialog();
|
||||
} else if (alertType === 'Authentication Success') {
|
||||
this.resetPassword = false;
|
||||
this.twoFactorAuthenticationRequired = false;
|
||||
this.agreementAcceptanceRequired = false;
|
||||
this.closeTwoFactorDialog();
|
||||
this.closeAgreementAcceptDialog();
|
||||
// Cashier users go directly to the full-screen transaction entry dashboard
|
||||
const destination = this.authService.isCashierUser() ? ['/cashier/transaction-entry'] : ['/'];
|
||||
this.router.navigate(destination, { replaceUrl: true });
|
||||
@@ -334,6 +347,7 @@ export class LoginComponent implements OnInit, OnDestroy {
|
||||
this.theme$.unsubscribe();
|
||||
}
|
||||
this.closeTwoFactorDialog();
|
||||
this.closeAgreementAcceptDialog();
|
||||
clearInterval(this.slideTimer);
|
||||
}
|
||||
|
||||
@@ -361,6 +375,30 @@ export class LoginComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
/** Open the post-login agreement acceptance dialog as a non-dismissable modal */
|
||||
private openAgreementAcceptDialog(): void {
|
||||
if (this.agreementAcceptDialogRef) return;
|
||||
this.agreementAcceptDialogRef = this.dialog.open(AgreementAcceptComponent, {
|
||||
width: '460px',
|
||||
maxWidth: '95vw',
|
||||
panelClass: 'tfa-dialog-panel',
|
||||
backdropClass: 'tfa-dialog-backdrop',
|
||||
disableClose: true,
|
||||
autoFocus: 'first-tabbable',
|
||||
restoreFocus: true
|
||||
});
|
||||
this.agreementAcceptDialogRef.afterClosed().subscribe(() => {
|
||||
this.agreementAcceptDialogRef = null;
|
||||
});
|
||||
}
|
||||
|
||||
private closeAgreementAcceptDialog(): void {
|
||||
if (this.agreementAcceptDialogRef) {
|
||||
this.agreementAcceptDialogRef.close();
|
||||
this.agreementAcceptDialogRef = null;
|
||||
}
|
||||
}
|
||||
|
||||
goToSlide(index: number): void {
|
||||
this.currentSlide = index;
|
||||
this.restartSlider();
|
||||
|
||||
@@ -0,0 +1,126 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<div class="ua-page">
|
||||
<!-- LEFT CONTENT COLUMN -->
|
||||
<div class="ua-content">
|
||||
<!-- HERO -->
|
||||
<header class="hero">
|
||||
<div class="hero-text">
|
||||
<div class="eyebrow">COMPLIANCE · CONFIGURATION</div>
|
||||
<h1 class="hero-title">Manage user agreement</h1>
|
||||
<p class="hero-sub">
|
||||
Publish versioned agreement / warning text that new users must read and accept on their first login.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="hero-add-btn"
|
||||
(click)="openAdd()"
|
||||
aria-label="Publish new version"
|
||||
*mifosxHasPermission="'CREATE_USERAGREEMENT'"
|
||||
>
|
||||
<mat-icon>add</mat-icon>
|
||||
Publish new version
|
||||
</button>
|
||||
</header>
|
||||
|
||||
@if (loading) {
|
||||
<div class="ua-loading">
|
||||
<mat-icon>hourglass_empty</mat-icon>
|
||||
Loading…
|
||||
</div>
|
||||
} @else if (agreements.length === 0) {
|
||||
<div class="ua-empty">
|
||||
<mat-icon>description</mat-icon>
|
||||
No agreement has been published yet.
|
||||
</div>
|
||||
} @else {
|
||||
<section class="ua-section">
|
||||
<div class="ua-table">
|
||||
<div class="ua-row ua-row--head">
|
||||
<span class="ua-col ua-col--version">Version</span>
|
||||
<span class="ua-col ua-col--title">Title</span>
|
||||
<span class="ua-col ua-col--author">Published by</span>
|
||||
<span class="ua-col ua-col--date">Published on</span>
|
||||
<span class="ua-col ua-col--status">Status</span>
|
||||
</div>
|
||||
@for (item of agreements; track item.id) {
|
||||
<div class="ua-row">
|
||||
<span class="ua-col ua-col--version">v{{ item.version }}</span>
|
||||
<span class="ua-col ua-col--title" [title]="item.title">{{ item.title }}</span>
|
||||
<span class="ua-col ua-col--author">{{ item.createdByUsername || '—' }}</span>
|
||||
<span class="ua-col ua-col--date">{{ item.createdOn || '—' }}</span>
|
||||
<span class="ua-col ua-col--status">
|
||||
<span class="status-pill" [class.is-active]="isActive(item)" [class.is-inactive]="!isActive(item)">
|
||||
<span class="status-dot"></span>{{ isActive(item) ? 'Active' : 'Superseded' }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- DRAWER BACKDROP -->
|
||||
<div class="drawer-backdrop" *ngIf="drawerOpen" (click)="closeDrawer()"></div>
|
||||
|
||||
<!-- RIGHT DRAWER -->
|
||||
<aside
|
||||
class="drawer"
|
||||
[class.open]="drawerOpen"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Publish new agreement version"
|
||||
>
|
||||
<div class="drawer-head">
|
||||
<div>
|
||||
<h3 class="drawer-title">Publish new version</h3>
|
||||
<p class="drawer-sub">This will supersede the current active agreement once published.</p>
|
||||
</div>
|
||||
<button class="icon-btn close-btn" (click)="closeDrawer()" aria-label="Close"><mat-icon>close</mat-icon></button>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="drawerOpen">
|
||||
<form class="drawer-form" (ngSubmit)="confirmPublish()">
|
||||
<!-- Title -->
|
||||
<div class="field">
|
||||
<label class="field-label" for="titleInput">Title</label>
|
||||
<input
|
||||
id="titleInput"
|
||||
class="text-input"
|
||||
type="text"
|
||||
placeholder="e.g. Acceptable Use Policy v3"
|
||||
[(ngModel)]="model.title"
|
||||
name="title"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="field">
|
||||
<label class="field-label" for="bodyInput">Agreement text</label>
|
||||
<textarea
|
||||
id="bodyInput"
|
||||
class="text-area"
|
||||
rows="10"
|
||||
placeholder="Full agreement / warning text shown to the user…"
|
||||
[(ngModel)]="model.body"
|
||||
name="body"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="drawer-actions">
|
||||
<button type="button" class="btn btn-cancel" (click)="closeDrawer()">Cancel</button>
|
||||
<button type="submit" class="btn btn-save" [disabled]="!formValid || saving">
|
||||
{{ saving ? 'Publishing…' : 'Publish' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</aside>
|
||||
</div>
|
||||
@@ -0,0 +1,439 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
:host {
|
||||
/* Colors — matches denomination-master's palette for visual consistency across /system */
|
||||
--bg-page: #faf8f4;
|
||||
--bg-card: #fff;
|
||||
--bg-soft: #f2ede0;
|
||||
--border: #ece6d8;
|
||||
--border-strong: #e5e0d6;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #5f5c57;
|
||||
--text-muted: #8a867f;
|
||||
--accent-dark: #1a1a1a;
|
||||
--accent-eyebrow: #0f4f3c;
|
||||
--status-active-bg: #e8f3e8;
|
||||
--status-active-text: #1f6f3d;
|
||||
--status-inactive-bg: #f4ede0;
|
||||
--status-inactive-text: #8a6a2e;
|
||||
--r-sm: 8px;
|
||||
--r-md: 10px;
|
||||
--r-lg: 14px;
|
||||
--r-xl: 16px;
|
||||
--r-pill: 999px;
|
||||
|
||||
display: block;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
sans-serif;
|
||||
color: var(--text-primary);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.ua-page {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
background: var(--bg-page);
|
||||
padding: 36px 40px;
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
.ua-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ---------- HERO ---------- */
|
||||
.hero {
|
||||
margin-bottom: 32px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.hero-add-btn {
|
||||
flex: 0 0 auto;
|
||||
align-self: flex-start;
|
||||
width: auto;
|
||||
height: 38px;
|
||||
margin-top: 4px;
|
||||
padding: 0 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
white-space: nowrap;
|
||||
border: none;
|
||||
border-radius: var(--r-pill);
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #1f7a4d 0%, #0f4f3c 100%);
|
||||
box-shadow: 0 4px 14px -4px rgb(15 79 60 / 45%);
|
||||
transition:
|
||||
transform 0.15s ease,
|
||||
box-shadow 0.15s ease,
|
||||
filter 0.15s ease;
|
||||
}
|
||||
|
||||
.hero-add-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 22px -6px rgb(15 79 60 / 55%);
|
||||
filter: brightness(1.06);
|
||||
}
|
||||
|
||||
.hero-add-btn mat-icon {
|
||||
font-size: 17px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--accent-eyebrow);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 34px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 12px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-size: 15px;
|
||||
color: var(--text-secondary);
|
||||
max-width: 560px;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ---------- LOADING / EMPTY ---------- */
|
||||
.ua-loading,
|
||||
.ua-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 40px;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-xl);
|
||||
}
|
||||
|
||||
/* ---------- TABLE ---------- */
|
||||
.ua-section {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-xl);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ua-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ua-row {
|
||||
display: grid;
|
||||
grid-template-columns: 90px 2fr 1fr 1fr 130px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&--head {
|
||||
background: var(--bg-soft);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
.ua-col {
|
||||
min-width: 0;
|
||||
font-size: 13.5px;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&--version {
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
&--title {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&--author,
|
||||
&--date {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 3px 9px;
|
||||
border-radius: var(--r-pill);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.status-pill.is-active {
|
||||
background: var(--status-active-bg);
|
||||
color: var(--status-active-text);
|
||||
}
|
||||
|
||||
.status-pill.is-inactive {
|
||||
background: var(--status-inactive-bg);
|
||||
color: var(--status-inactive-text);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: currentcolor;
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* ---------- DRAWER ---------- */
|
||||
.drawer-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgb(26 26 26 / 18%);
|
||||
z-index: 1000;
|
||||
animation: fade-in 0.18s ease;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 460px;
|
||||
background: var(--bg-card);
|
||||
border-left: 1px solid var(--border);
|
||||
padding: 32px 28px;
|
||||
box-shadow: -20px 0 40px -20px rgb(0 0 0 / 18%);
|
||||
overflow-y: auto;
|
||||
z-index: 1001;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.drawer.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.drawer-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.drawer-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.drawer-sub {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-page);
|
||||
color: var(--text-secondary);
|
||||
border-radius: var(--r-sm);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition:
|
||||
background 0.12s ease,
|
||||
color 0.12s ease;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
background: var(--bg-soft);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.icon-btn mat-icon {
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.drawer-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.text-input,
|
||||
.text-area {
|
||||
box-sizing: border-box;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--r-md);
|
||||
background: var(--bg-page);
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.text-input {
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
padding: 12px 14px;
|
||||
resize: vertical;
|
||||
min-height: 160px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.text-input:focus,
|
||||
.text-area:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-dark);
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.text-input::placeholder,
|
||||
.text-area::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* drawer actions */
|
||||
.drawer-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 42px;
|
||||
padding: 0 18px;
|
||||
border-radius: var(--r-pill);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-strong);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
background: var(--accent-dark);
|
||||
border: 1px solid var(--accent-dark);
|
||||
color: var(--bg-page);
|
||||
}
|
||||
|
||||
.btn-save:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ---------- RESPONSIVE ---------- */
|
||||
@media (width <= 1100px) {
|
||||
.drawer {
|
||||
width: min(460px, 90vw);
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 820px) {
|
||||
.hero {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ua-row {
|
||||
grid-template-columns: 70px 2fr 1fr 110px;
|
||||
}
|
||||
|
||||
.ua-col--author {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
import { Component, OnInit, HostListener, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { forkJoin } from 'rxjs';
|
||||
import { UserAgreementService, UserAgreement } from './user-agreement.service';
|
||||
import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
|
||||
import { HasPermissionDirective } from 'app/directives/has-permission/has-permission.directive';
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-manage-user-agreement',
|
||||
templateUrl: './manage-user-agreement.component.html',
|
||||
styleUrls: ['./manage-user-agreement.component.scss'],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
MatDialogModule,
|
||||
MatSnackBarModule,
|
||||
MatIconModule,
|
||||
HasPermissionDirective
|
||||
]
|
||||
})
|
||||
export class ManageUserAgreementComponent implements OnInit {
|
||||
private service = inject(UserAgreementService);
|
||||
private dialog = inject(MatDialog);
|
||||
private snackBar = inject(MatSnackBar);
|
||||
|
||||
agreements: UserAgreement[] = [];
|
||||
activeId: number | null = null;
|
||||
loading = true;
|
||||
|
||||
drawerOpen = false;
|
||||
saving = false;
|
||||
|
||||
model = {
|
||||
title: '',
|
||||
body: ''
|
||||
};
|
||||
|
||||
ngOnInit(): void {
|
||||
this.load();
|
||||
}
|
||||
|
||||
load(): void {
|
||||
this.loading = true;
|
||||
forkJoin({
|
||||
all: this.service.getAll(),
|
||||
active: this.service.getActive()
|
||||
}).subscribe({
|
||||
next: ({ all, active }) => {
|
||||
this.agreements = (all || []).slice().sort((a, b) => b.version - a.version);
|
||||
this.activeId = active?.id ?? null;
|
||||
this.loading = false;
|
||||
},
|
||||
error: () => {
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
isActive(item: UserAgreement): boolean {
|
||||
return item.isActive === true || (this.activeId != null && item.id === this.activeId);
|
||||
}
|
||||
|
||||
// ---- drawer ----
|
||||
openAdd(): void {
|
||||
this.model = { title: '', body: '' };
|
||||
this.drawerOpen = true;
|
||||
}
|
||||
|
||||
closeDrawer(): void {
|
||||
if (this.saving) return;
|
||||
this.drawerOpen = false;
|
||||
}
|
||||
|
||||
get formValid(): boolean {
|
||||
return this.model.title.trim().length > 0 && this.model.body.trim().length > 0;
|
||||
}
|
||||
|
||||
@HostListener('document:keydown.escape')
|
||||
onEsc(): void {
|
||||
if (this.drawerOpen) this.closeDrawer();
|
||||
}
|
||||
|
||||
/** Publishing deactivates whatever is currently active — confirm before doing it. */
|
||||
confirmPublish(): void {
|
||||
if (!this.formValid || this.saving) return;
|
||||
const ref = this.dialog.open(ConfirmationDialogComponent, {
|
||||
data: {
|
||||
heading: 'Publish New Agreement',
|
||||
dialogContext:
|
||||
'Publishing this version will immediately supersede the current active agreement — every ' +
|
||||
'new first-login user will be shown this version instead. Continue?',
|
||||
type: 'warn'
|
||||
}
|
||||
});
|
||||
ref.afterClosed().subscribe((response: any) => {
|
||||
if (!response?.confirm) return;
|
||||
this.publish();
|
||||
});
|
||||
}
|
||||
|
||||
private publish(): void {
|
||||
this.saving = true;
|
||||
this.service
|
||||
.create({
|
||||
title: this.model.title.trim(),
|
||||
body: this.model.body
|
||||
})
|
||||
.subscribe({
|
||||
next: () => {
|
||||
this.snackBar.open('Agreement published', 'Close', { duration: 3000 });
|
||||
this.saving = false;
|
||||
this.drawerOpen = false;
|
||||
this.load();
|
||||
},
|
||||
error: (err: any) => {
|
||||
this.saving = false;
|
||||
const message =
|
||||
err?.error?.defaultUserMessage || err?.error?.errors?.[0]?.defaultUserMessage || 'Could not publish.';
|
||||
this.snackBar.open(message, 'Close', { duration: 5000 });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
/** A single published version of the bank's user agreement/warning text. */
|
||||
export interface UserAgreement {
|
||||
id: number;
|
||||
version: number;
|
||||
title: string;
|
||||
body: string;
|
||||
isActive?: boolean;
|
||||
createdByUsername?: string;
|
||||
createdOn?: string | number[];
|
||||
}
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class UserAgreementService {
|
||||
private http = inject(HttpClient);
|
||||
|
||||
/** List all published versions, newest first. */
|
||||
getAll(): Observable<UserAgreement[]> {
|
||||
return this.http.get<UserAgreement[]>('/useragreements');
|
||||
}
|
||||
|
||||
/** The currently-active version — the one new users must accept. */
|
||||
getActive(): Observable<UserAgreement> {
|
||||
return this.http.get<UserAgreement>('/useragreements/active');
|
||||
}
|
||||
|
||||
/** Publish a new version. The backend deactivates the previous active row automatically. */
|
||||
create(data: { title: string; body: string }): Observable<{ resourceId: number }> {
|
||||
return this.http.post<{ resourceId: number }>('/useragreements', data);
|
||||
}
|
||||
}
|
||||
@@ -57,6 +57,7 @@ import { SystemComponent } from './system.component';
|
||||
import { SystemInformationComponent } from './system-information/system-information.component';
|
||||
import { AboutUsComponent } from './about-us/about-us.component';
|
||||
import { DenominationMasterComponent } from './denomination-master/denomination-master.component';
|
||||
import { ManageUserAgreementComponent } from './manage-user-agreement/manage-user-agreement.component';
|
||||
|
||||
/** Custom Resolvers */
|
||||
import { AccountNumberPreferencesResolver } from './account-number-preferences/account-number-preferences.resolver';
|
||||
@@ -625,6 +626,16 @@ const routes: Routes = [
|
||||
component: DenominationMasterComponent
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'user-agreement',
|
||||
data: { title: 'Manage User Agreement', breadcrumb: 'Manage User Agreement' },
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
component: ManageUserAgreementComponent
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -218,6 +218,20 @@
|
||||
<i class="fas fa-chevron-right sys-card__arrow"></i>
|
||||
</a>
|
||||
|
||||
<!-- Manage User Agreement -->
|
||||
<a class="sys-card" [routerLink]="['user-agreement']" *mifosxHasPermission="'READ_USERAGREEMENT'">
|
||||
<div class="sys-card__icon sys-card__icon--emerald">
|
||||
<i class="fas fa-file-contract"></i>
|
||||
</div>
|
||||
<div class="sys-card__body">
|
||||
<h3 class="sys-card__title">{{ 'labels.heading.Manage User Agreement' | translate }}</h3>
|
||||
<p class="sys-card__desc">
|
||||
{{ 'labels.text.Publish versioned agreement text new users must accept on first login' | translate }}
|
||||
</p>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right sys-card__arrow"></i>
|
||||
</a>
|
||||
|
||||
<!-- System Information -->
|
||||
<a class="sys-card" [routerLink]="['system-information']">
|
||||
<div class="sys-card__icon sys-card__icon--teal">
|
||||
|
||||
@@ -124,6 +124,19 @@
|
||||
<mat-error>Enter a valid <strong>10-digit mobile number</strong></mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<div class="cu-checkbox-row cu-field--full">
|
||||
<div>
|
||||
<label class="cu-radio-label">OTP Delivery Method *</label>
|
||||
<mat-radio-group formControlName="otpDeliveryMethod">
|
||||
<mat-radio-button value="EMAIL">Email</mat-radio-button>
|
||||
<mat-radio-button value="SMS">Mobile</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
@if (userForm.controls.otpDeliveryMethod.hasError('required')) {
|
||||
<mat-error>Choose how this user will receive their first-login OTP.</mat-error>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -166,6 +166,14 @@ $gray-900: #202124;
|
||||
}
|
||||
}
|
||||
|
||||
.cu-radio-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: $gray-700;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.cu-error {
|
||||
grid-column: 1 / -1;
|
||||
color: #dc2626;
|
||||
|
||||
@@ -29,6 +29,7 @@ import { ConfigurationWizardService } from 'app/configuration-wizard/configurati
|
||||
import { ContinueSetupDialogComponent } from 'app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component';
|
||||
import { MatCheckbox } from '@angular/material/checkbox';
|
||||
import { MatIcon } from '@angular/material/icon';
|
||||
import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/**
|
||||
@@ -41,7 +42,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
MatCheckbox,
|
||||
MatIcon
|
||||
MatIcon,
|
||||
MatRadioGroup,
|
||||
MatRadioButton
|
||||
]
|
||||
})
|
||||
export class CreateUserComponent implements OnInit, AfterViewInit {
|
||||
@@ -142,6 +145,10 @@ export class CreateUserComponent implements OnInit, AfterViewInit {
|
||||
roles: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
otpDeliveryMethod: [
|
||||
'',
|
||||
Validators.required
|
||||
]
|
||||
},
|
||||
{ validator: confirmPasswordValidator }
|
||||
|
||||
@@ -72,6 +72,27 @@
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (!isEdit) {
|
||||
<div class="ufd-field">
|
||||
<label>OTP Delivery Method *</label>
|
||||
<div class="ufd-otp-methods" role="radiogroup" aria-label="OTP Delivery Method">
|
||||
<label class="ufd-otp-method" [class.is-selected]="form.value.otpDeliveryMethod === 'EMAIL'">
|
||||
<input type="radio" formControlName="otpDeliveryMethod" value="EMAIL" />
|
||||
<fa-icon icon="envelope"></fa-icon>
|
||||
<span>Email</span>
|
||||
</label>
|
||||
<label class="ufd-otp-method" [class.is-selected]="form.value.otpDeliveryMethod === 'SMS'">
|
||||
<input type="radio" formControlName="otpDeliveryMethod" value="SMS" />
|
||||
<fa-icon icon="mobile-alt"></fa-icon>
|
||||
<span>Mobile</span>
|
||||
</label>
|
||||
</div>
|
||||
@if (form.get('otpDeliveryMethod')?.touched && form.get('otpDeliveryMethod')?.errors?.['required']) {
|
||||
<div class="ufd-err">Choose how this user will receive their OTP.</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Office mapping -->
|
||||
|
||||
@@ -126,6 +126,12 @@ $purple: #7c3aed;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px 14px;
|
||||
|
||||
// A field placed right after the grid (e.g. OTP Delivery Method, which spans full width
|
||||
// and isn't part of the 2-column layout) needs its own breathing room above it.
|
||||
+ .ufd-field {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.ufd-field {
|
||||
@@ -268,6 +274,57 @@ $purple: #7c3aed;
|
||||
}
|
||||
}
|
||||
|
||||
.ufd-otp-methods {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ufd-otp-method {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #cbd5e1;
|
||||
background: #fff;
|
||||
border-radius: 999px;
|
||||
color: #475569;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.12s;
|
||||
|
||||
fa-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line selector-no-qualifying-type
|
||||
input[type='radio'] {
|
||||
// Visually hidden but still focusable/clickable for accessibility - the pill itself
|
||||
// carries the selected state via .is-selected, matching .ufd-role's pattern.
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #94a3b8;
|
||||
color: $navy;
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
background: rgb(30 136 229 / 12%);
|
||||
border-color: $blue;
|
||||
color: $blue-d;
|
||||
|
||||
fa-icon {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ufd-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -160,7 +160,11 @@ export class UserFormDialogComponent implements OnInit {
|
||||
Validators.required
|
||||
],
|
||||
passwordNeverExpires: [false],
|
||||
sendPasswordToEmail: [true]
|
||||
sendPasswordToEmail: [true],
|
||||
otpDeliveryMethod: [
|
||||
'',
|
||||
Validators.required
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
@@ -174,6 +178,9 @@ export class UserFormDialogComponent implements OnInit {
|
||||
const selectedRoleIds = (u?.selectedRoles || []).map((r: any) => r.id);
|
||||
// Edit mode never asks about password — strip those controls.
|
||||
this.form.removeControl('sendPasswordToEmail');
|
||||
// OTP delivery method is a create-only concept (first-login gate) — changing an
|
||||
// existing user's channel post-creation is out of scope for this phase.
|
||||
this.form.removeControl('otpDeliveryMethod');
|
||||
this.form.patchValue({
|
||||
username: u.username,
|
||||
firstname: u.firstname,
|
||||
|
||||
Reference in New Issue
Block a user