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>

src/app/system/manage-user-agreement/manage-user-agreement.component.html

@@ -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>

src/app/system/manage-user-agreement/manage-user-agreement.component.scss

@@ -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;
+  }
+}

src/app/system/manage-user-agreement/manage-user-agreement.component.ts

@@ -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 });
+        }
+      });
+  }
+}

src/app/system/manage-user-agreement/user-agreement.service.ts

@@ -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);
+  }
+}

src/app/system/system-routing.module.ts

@@ -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
+            }
+          ]
         }
       ]
     }

src/app/system/system.component.html

@@ -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">