niteshandClaude Sonnet 5
733d9d22b2
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>
77 lines
2.4 KiB
HTML
77 lines
2.4 KiB
HTML
<!--
|
|
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="cotp-block" [class.cotp-block--verified]="verified">
|
|
<div class="cotp-block__header">
|
|
<span class="cotp-block__label">{{ label }}</span>
|
|
<span class="cotp-block__target">{{ maskedDestination }}</span>
|
|
</div>
|
|
|
|
@if (verified) {
|
|
<div class="cotp-block__verified">
|
|
<fa-icon icon="check-circle"></fa-icon>
|
|
<span>Verified</span>
|
|
</div>
|
|
} @else if (!otpSent) {
|
|
<button type="button" class="cotp-btn cotp-btn--primary" (click)="sendOtp()" [disabled]="sending || !destination">
|
|
@if (sending) {
|
|
<mat-progress-spinner diameter="16" mode="indeterminate"></mat-progress-spinner>
|
|
<span>Sending…</span>
|
|
} @else {
|
|
<fa-icon icon="paper-plane"></fa-icon>
|
|
<span>Send OTP</span>
|
|
}
|
|
</button>
|
|
} @else {
|
|
<div class="cotp-otp">
|
|
@for (i of digitIndexes; track i) {
|
|
<input
|
|
#digitBox
|
|
type="text"
|
|
inputmode="numeric"
|
|
maxlength="1"
|
|
class="cotp-otp__box"
|
|
[value]="digitControls[i].value"
|
|
[attr.autocomplete]="i === 0 ? 'one-time-code' : 'off'"
|
|
(input)="onDigitInput(i, $any($event.target).value)"
|
|
(keydown)="onDigitKeydown(i, $event)"
|
|
(paste)="onDigitPaste($event)"
|
|
/>
|
|
}
|
|
</div>
|
|
|
|
<div class="cotp-block__actions">
|
|
<button
|
|
type="button"
|
|
class="cotp-btn cotp-btn--primary"
|
|
(click)="verifyOtp()"
|
|
[disabled]="!codeValid || verifying"
|
|
>
|
|
@if (verifying) {
|
|
<mat-progress-spinner diameter="16" mode="indeterminate"></mat-progress-spinner>
|
|
<span>Verifying…</span>
|
|
} @else {
|
|
<fa-icon icon="check-circle"></fa-icon>
|
|
<span>Verify</span>
|
|
}
|
|
</button>
|
|
<button type="button" class="cotp-btn cotp-btn--ghost" (click)="resendOtp()" [disabled]="resendCountdown > 0">
|
|
<fa-icon icon="redo"></fa-icon>
|
|
<span>{{ resendCountdown > 0 ? 'Resend (' + resendCountdown + 's)' : 'Resend OTP' }}</span>
|
|
</button>
|
|
</div>
|
|
}
|
|
|
|
@if (errorMessage) {
|
|
<div class="cotp-error">
|
|
<fa-icon icon="exclamation-circle"></fa-icon>
|
|
{{ errorMessage }}
|
|
</div>
|
|
}
|
|
</div>
|