feat(clients): dual-OTP contact-change verification, webcam signature capture, and client history tab
Frontend counterpart to the backend dual-OTP contact-change feature:
- New ContactOtpBlockComponent (6-box segmented OTP input) used up to 4x in
Edit Client (old/new mobile, old/new email — grouped under per-field
sub-headers) and once each for mobile/email in Create Client, gating
Save/Save & Next until every required box is verified.
- edit-client.component.ts: detects mobile/email/DOB changes against the
loaded snapshot using local-date comparison (not `.toISOString()`, which
false-triggers a day-shift in positive-UTC-offset timezones) and
trimmed/case-insensitive email comparison (autofill whitespace or re-typed
casing no longer reads as a change the masked preview can't explain).
- client-kyc-step.component.ts: new `invalidFieldLabels` getter names every
currently-invalid required KYC field, surfaced via the Save & Next tooltip
in both create-client and edit-client so a greyed-out button always
explains what's still missing instead of a generic message.
- CaptureImageDialogComponent generalized for both profile photo and
signature (photograph-a-paper-signature) capture:
- Frame aspect now matches the requested getUserMedia resolution
(4:3 profile / 16:9 signature) with object-fit: cover, eliminating the
pillarboxing (black bars) a mismatched box previously caused.
- Suppresses Chromium's auto-injected PiP/cast corner overlay icons.
- Frame height capped in vh (not just px) so the dialog fits short
viewports instead of pushing Cancel/Upload below the fold.
- upload-document-dialog.component.ts: generic Documents-tab upload now also
offers "Capture from Webcam" alongside Browse, reusing the same capture
dialog.
- New client History tab (reuses the existing Audit Trail data, scoped to
this client) and dataUrlToFile/dataUrlToBlob util for routing webcam
captures through the same upload pipelines as a picked file.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
@@ -0,0 +1,307 @@
|
||||
/**
|
||||
* 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,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
Input,
|
||||
OnChanges,
|
||||
OnDestroy,
|
||||
Output,
|
||||
QueryList,
|
||||
SimpleChanges,
|
||||
ViewChildren,
|
||||
inject
|
||||
} from '@angular/core';
|
||||
import { UntypedFormControl } from '@angular/forms';
|
||||
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/** Custom Services */
|
||||
import { ClientsService } from '../../clients.service';
|
||||
|
||||
/** Emitted every time this block's verification result changes — including a reset back
|
||||
* to `{ otpId: null, verified: false }` when the destination it was verifying no longer
|
||||
* matches (e.g. staff kept editing the mobile number after verifying an earlier value). */
|
||||
export interface ContactOtpState {
|
||||
otpId: number | null;
|
||||
verified: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Small presentational OTP-entry block reused up to four times inside the Edit Client
|
||||
* "Verify Contact Change" panel (old mobile / new mobile / old email / new email — see
|
||||
* `EditClientComponent`), and once each for mobile/email in the Create Client flow (see
|
||||
* `ClientGeneralStepComponent`). Renders as 6 individually-bordered digit boxes (one real
|
||||
* `<input>` each, auto-advancing focus) rather than the single-input/background-gradient trick
|
||||
* used elsewhere in this app — each box needs its own focus/border state, which a shared input
|
||||
* can't express.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-client-contact-otp-block',
|
||||
templateUrl: './contact-otp-block.component.html',
|
||||
styleUrls: ['./contact-otp-block.component.scss'],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
FaIconComponent,
|
||||
MatProgressSpinner
|
||||
]
|
||||
})
|
||||
export class ContactOtpBlockComponent implements OnChanges, OnDestroy {
|
||||
private clientsService = inject(ClientsService);
|
||||
|
||||
/** The 6 individual digit-box <input> elements, in order — used to move focus between them. */
|
||||
@ViewChildren('digitBox') digitBoxes: QueryList<ElementRef<HTMLInputElement>>;
|
||||
|
||||
/** One independent control per box — NOT a single 6-char string sliced up. Editing box 0
|
||||
* can never disturb box 3's value this way. (An earlier version kept one shared string and
|
||||
* rebuilt it via `chars.join('')` on every keystroke — `['', '2', '3'].join('') === '23'`
|
||||
* silently drops empty slots instead of preserving them as gaps, so deleting an early digit
|
||||
* collapsed/shifted every digit after it. Per-box controls sidestep that class of bug
|
||||
* entirely — there's no string to rebuild until the moment we actually submit.) */
|
||||
readonly digitControls: UntypedFormControl[] = Array.from({ length: 6 }, () => new UntypedFormControl(''));
|
||||
|
||||
/** Fixed-length array so the template can `*ngFor` over exactly 6 boxes. */
|
||||
readonly digitIndexes = [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5
|
||||
];
|
||||
|
||||
/** Client whose mobileNo/emailAddress is being changed. Omit this input entirely for the
|
||||
* CLIENT CREATION flow — there is no client id yet, so the block falls back to the
|
||||
* clientId-less creation-time OTP endpoints (`ClientsService.sendClientCreationContactOtp()` /
|
||||
* `verifyClientCreationContactOtp()`) instead of the edit-flow `/clients/{clientId}/...` ones. */
|
||||
@Input() clientId?: string;
|
||||
/** Which LincPay OTP channel to use. */
|
||||
@Input() channel: 'MOBILE' | 'EMAIL';
|
||||
/** Raw destination (old or new mobile number / email address) this block verifies. */
|
||||
@Input() destination = '';
|
||||
/** Display label, e.g. "Old Mobile Number" / "New Email Address". */
|
||||
@Input() label = '';
|
||||
|
||||
/** Fires whenever `{ otpId, verified }` changes — including resets. */
|
||||
@Output() stateChange = new EventEmitter<ContactOtpState>();
|
||||
|
||||
otpId: number | null = null;
|
||||
otpSent = false;
|
||||
verified = false;
|
||||
sending = false;
|
||||
verifying = false;
|
||||
errorMessage = '';
|
||||
resendCountdown = 0;
|
||||
private resendTimer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
/** The full 6-digit code, assembled fresh from the 6 independent box controls only when
|
||||
* actually needed (display never needs this — each box renders its own control's value). */
|
||||
get code(): string {
|
||||
return this.digitControls.map((c) => c.value || '').join('');
|
||||
}
|
||||
|
||||
get codeValid(): boolean {
|
||||
return /^\d{6}$/.test(this.code);
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
// If the value being verified changes after the fact (staff kept typing), any
|
||||
// previously-sent/verified OTP no longer applies to the current destination.
|
||||
if (changes['destination'] && !changes['destination'].firstChange && this.otpSent) {
|
||||
this.resetState();
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (this.resendTimer) {
|
||||
clearInterval(this.resendTimer);
|
||||
}
|
||||
}
|
||||
|
||||
/** Masks the destination so only a few characters are visible, mirroring the masking
|
||||
* convention already used on the login 2FA screen (`maskTarget()`). */
|
||||
get maskedDestination(): string {
|
||||
const value = this.destination || '';
|
||||
if (!value) {
|
||||
return '';
|
||||
}
|
||||
if (this.channel === 'MOBILE') {
|
||||
const digits = value.replace(/\D/g, '');
|
||||
if (digits.length <= 4) {
|
||||
return value;
|
||||
}
|
||||
return 'X'.repeat(digits.length - 4) + digits.slice(-4);
|
||||
}
|
||||
const at = value.indexOf('@');
|
||||
if (at <= 0) {
|
||||
return value;
|
||||
}
|
||||
const local = value.substring(0, at);
|
||||
const domain = value.substring(at);
|
||||
const visible = local.substring(0, Math.min(2, local.length));
|
||||
const hidden = 'X'.repeat(Math.max(0, local.length - visible.length));
|
||||
return visible + hidden + domain;
|
||||
}
|
||||
|
||||
sendOtp(): void {
|
||||
if (!this.destination || this.sending) {
|
||||
return;
|
||||
}
|
||||
this.sending = true;
|
||||
this.errorMessage = '';
|
||||
const request$ = this.clientId
|
||||
? this.clientsService.sendClientContactOtp(this.clientId, this.channel, this.destination)
|
||||
: this.clientsService.sendClientCreationContactOtp(this.channel, this.destination);
|
||||
request$.subscribe({
|
||||
next: (res: any) => {
|
||||
this.sending = false;
|
||||
this.otpId = res?.otpId ?? res?.resourceId ?? null;
|
||||
this.otpSent = true;
|
||||
this.clearAllDigits();
|
||||
this.startResendCountdown();
|
||||
// The 6 digit boxes only render once otpSent flips true — defer the focus call to the
|
||||
// next tick so they exist in the DOM (and in `digitBoxes`) by the time it runs.
|
||||
setTimeout(() => this.focusBox(0));
|
||||
if (this.otpId == null) {
|
||||
this.errorMessage = 'OTP sent, but no reference id was returned. Please contact support.';
|
||||
}
|
||||
},
|
||||
error: (err: any) => {
|
||||
this.sending = false;
|
||||
this.errorMessage = err?.error?.defaultUserMessage || err?.error?.message || 'Could not send OTP.';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Typing a digit in box `index`: this box's own control gets exactly that digit — every
|
||||
* other box's control is untouched, so there's nothing to shift or collapse. Moves focus to
|
||||
* the next box unless this was the last one. */
|
||||
onDigitInput(index: number, rawValue: string): void {
|
||||
const digit = (rawValue || '').replace(/\D/g, '').slice(-1);
|
||||
this.digitControls[index].setValue(digit);
|
||||
|
||||
if (digit && index < 5) {
|
||||
this.focusBox(index + 1);
|
||||
}
|
||||
}
|
||||
|
||||
/** Backspace in an empty box clears the PREVIOUS box and moves focus there, matching the
|
||||
* usual "segmented OTP input" keyboard feel — again, only ever touching one control at a
|
||||
* time. Arrow keys move focus without altering any box's value. */
|
||||
onDigitKeydown(index: number, event: KeyboardEvent): void {
|
||||
if (event.key === 'Backspace') {
|
||||
if (!this.digitControls[index].value && index > 0) {
|
||||
this.digitControls[index - 1].setValue('');
|
||||
this.focusBox(index - 1);
|
||||
event.preventDefault();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (event.key === 'ArrowLeft' && index > 0) {
|
||||
this.focusBox(index - 1);
|
||||
event.preventDefault();
|
||||
} else if (event.key === 'ArrowRight' && index < 5) {
|
||||
this.focusBox(index + 1);
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
/** Pasting a full code into any box fills all 6 boxes at once (one control per digit) and
|
||||
* focuses the last filled one. */
|
||||
onDigitPaste(event: ClipboardEvent): void {
|
||||
const pasted = event.clipboardData?.getData('text') || '';
|
||||
const digits = pasted.replace(/\D/g, '').slice(0, 6);
|
||||
if (!digits) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
digits.split('').forEach((d, i) => this.digitControls[i].setValue(d));
|
||||
for (let i = digits.length; i < 6; i++) {
|
||||
this.digitControls[i].setValue('');
|
||||
}
|
||||
this.focusBox(Math.min(digits.length, 6) - 1);
|
||||
}
|
||||
|
||||
private clearAllDigits(): void {
|
||||
this.digitControls.forEach((c) => c.setValue(''));
|
||||
}
|
||||
|
||||
private focusBox(index: number): void {
|
||||
const box = this.digitBoxes?.toArray()[index];
|
||||
box?.nativeElement.focus();
|
||||
}
|
||||
|
||||
resendOtp(): void {
|
||||
if (this.resendCountdown > 0 || this.sending) {
|
||||
return;
|
||||
}
|
||||
this.sendOtp();
|
||||
}
|
||||
|
||||
verifyOtp(): void {
|
||||
if (this.otpId == null || !this.codeValid || this.verifying) {
|
||||
this.digitControls.forEach((c) => c.markAsTouched());
|
||||
return;
|
||||
}
|
||||
this.verifying = true;
|
||||
this.errorMessage = '';
|
||||
const request$ = this.clientId
|
||||
? this.clientsService.verifyClientContactOtp(this.clientId, this.otpId, this.code)
|
||||
: this.clientsService.verifyClientCreationContactOtp(this.otpId, this.code);
|
||||
request$.subscribe({
|
||||
next: (res: any) => {
|
||||
this.verifying = false;
|
||||
// Defensive shape-tolerance: treat an explicit `verified: false` as failure,
|
||||
// anything else (2xx with `verified: true`, or no `verified` field at all) as success.
|
||||
const ok = res?.verified !== false;
|
||||
if (ok) {
|
||||
this.verified = true;
|
||||
this.stateChange.emit({ otpId: this.otpId, verified: true });
|
||||
} else {
|
||||
this.errorMessage = res?.message || 'Incorrect OTP — please try again.';
|
||||
}
|
||||
},
|
||||
error: (err: any) => {
|
||||
this.verifying = false;
|
||||
this.errorMessage = err?.error?.defaultUserMessage || err?.error?.message || 'OTP verification failed.';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private resetState(): void {
|
||||
this.otpId = null;
|
||||
this.otpSent = false;
|
||||
this.verified = false;
|
||||
this.errorMessage = '';
|
||||
this.clearAllDigits();
|
||||
if (this.resendTimer) {
|
||||
clearInterval(this.resendTimer);
|
||||
this.resendTimer = null;
|
||||
}
|
||||
this.resendCountdown = 0;
|
||||
this.stateChange.emit({ otpId: null, verified: false });
|
||||
}
|
||||
|
||||
private startResendCountdown(): void {
|
||||
this.resendCountdown = 30;
|
||||
if (this.resendTimer) {
|
||||
clearInterval(this.resendTimer);
|
||||
}
|
||||
this.resendTimer = setInterval(() => {
|
||||
this.resendCountdown--;
|
||||
if (this.resendCountdown <= 0 && this.resendTimer) {
|
||||
clearInterval(this.resendTimer);
|
||||
this.resendTimer = null;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user