feat: MFA/2FA, OTP audit logs, KYC + client/user enhancements
- Access Control module: SMS/Email/TOTP/Hardware-token MFA factor management - OTP Audit Logs module under Admin menu (list + detail) with 401/403 handling - Two-factor authentication login flow updates - Client KYC, India address, family-members, ckyc, nominee enhancements - New shared KYC helpers (kyc-proof-types, kyc-upload-helper.service) - User create/edit/view enhancements - Shell navigation: OTP Audit Logs entry under real Admin menu
This commit is contained in:
Aditya
@@ -6,74 +6,149 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<p>
|
||||
<strong>{{ 'labels.text.Two Factor Authentication' | translate }}</strong>
|
||||
</p>
|
||||
<div class="tfa-card">
|
||||
<div class="tfa-icon">
|
||||
<fa-icon icon="shield-alt"></fa-icon>
|
||||
</div>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
<h2 class="tfa-title">{{ 'labels.text.Two Factor Authentication' | translate }}</h2>
|
||||
<p class="tfa-sub">
|
||||
@if (!otpRequested) {
|
||||
Choose how you want to receive your one-time passcode.
|
||||
} @else {
|
||||
Enter the 6-digit code we sent you to continue.
|
||||
}
|
||||
</p>
|
||||
|
||||
<!-- Select delivery method to receive OTP -->
|
||||
@if (!otpRequested) {
|
||||
<p>{{ 'labels.text.Please select a delivery method' | translate }}:</p>
|
||||
<!-- Step 1 — Pick a delivery method -->
|
||||
@if (!otpRequested) {
|
||||
<form class="tfa-form" [formGroup]="twoFactorAuthenticationDeliveryMethodForm" (ngSubmit)="requestOTP()">
|
||||
<div class="tfa-methods" formGroupName="">
|
||||
<mat-radio-group class="tfa-methods__group" formControlName="twoFactorAuthenticationDeliveryMethod">
|
||||
@for (method of twoFactorAuthenticationDeliveryMethods; track method.name) {
|
||||
<div
|
||||
class="tfa-method"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
[attr.aria-checked]="
|
||||
twoFactorAuthenticationDeliveryMethodForm.value.twoFactorAuthenticationDeliveryMethod === method
|
||||
"
|
||||
[class.is-selected]="
|
||||
twoFactorAuthenticationDeliveryMethodForm.value.twoFactorAuthenticationDeliveryMethod === method
|
||||
"
|
||||
(click)="selectDeliveryMethod(method)"
|
||||
(keydown.enter)="selectDeliveryMethod(method)"
|
||||
(keydown.space)="selectDeliveryMethod(method); $event.preventDefault()"
|
||||
>
|
||||
<mat-radio-button
|
||||
[value]="method"
|
||||
class="tfa-method__radio"
|
||||
(click)="$event.stopPropagation()"
|
||||
></mat-radio-button>
|
||||
<div class="tfa-method__icon">
|
||||
<fa-icon
|
||||
[icon]="
|
||||
(method.name | lowercase) === 'sms' || (method.name | lowercase) === 'mobile'
|
||||
? 'mobile-alt'
|
||||
: 'envelope'
|
||||
"
|
||||
></fa-icon>
|
||||
</div>
|
||||
<div class="tfa-method__body">
|
||||
<span class="tfa-method__name">{{ method.name | titlecase }}</span>
|
||||
<span class="tfa-method__target">{{ maskTarget(method) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
|
||||
<form class="two-factor-auth-form" [formGroup]="twoFactorAuthenticationDeliveryMethodForm" (ngSubmit)="requestOTP()">
|
||||
<mat-radio-group class="radio-group-spacing" formControlName="twoFactorAuthenticationDeliveryMethod">
|
||||
@for (
|
||||
twoFactorAuthenticationDeliveryMethod of twoFactorAuthenticationDeliveryMethods;
|
||||
track twoFactorAuthenticationDeliveryMethod
|
||||
) {
|
||||
<mat-radio-button [value]="twoFactorAuthenticationDeliveryMethod">
|
||||
{{ 'labels.inputs.Send' | translate }} {{ twoFactorAuthenticationDeliveryMethod.name }}
|
||||
{{ 'labels.inputs.to' | translate }} {{ twoFactorAuthenticationDeliveryMethod.target }}
|
||||
</mat-radio-button>
|
||||
}
|
||||
</mat-radio-group>
|
||||
<button mat-raised-button color="primary" [disabled]="!twoFactorAuthenticationDeliveryMethodForm.valid || loading">
|
||||
{{ 'labels.buttons.Request OTP' | translate }}
|
||||
@if (loading) {
|
||||
<mat-spinner [diameter]="20"></mat-spinner>
|
||||
}
|
||||
</button>
|
||||
</form>
|
||||
}
|
||||
<button
|
||||
type="submit"
|
||||
class="tfa-btn tfa-btn--primary"
|
||||
[disabled]="!twoFactorAuthenticationDeliveryMethodForm.valid || loading"
|
||||
>
|
||||
@if (loading) {
|
||||
<mat-spinner diameter="20"></mat-spinner>
|
||||
<span>Sending…</span>
|
||||
} @else {
|
||||
<fa-icon icon="paper-plane"></fa-icon>
|
||||
<span>{{ 'labels.buttons.Request OTP' | translate }}</span>
|
||||
}
|
||||
</button>
|
||||
</form>
|
||||
}
|
||||
|
||||
<!-- Show input for OTP -->
|
||||
@if (otpRequested) {
|
||||
<p>{{ 'labels.text.Please enter the OTP' | translate }}:</p>
|
||||
|
||||
<form class="two-factor-auth-form" [formGroup]="twoFactorAuthenticationForm" (ngSubmit)="validateOTP()">
|
||||
<mat-form-field class="two-factor-auth-input" appearance="fill">
|
||||
<span matPrefix>
|
||||
<fa-icon icon="user-shield" class="m-r-10"></fa-icon>
|
||||
<!-- Step 2 — Enter the code -->
|
||||
@if (otpRequested) {
|
||||
<div class="tfa-context">
|
||||
<fa-icon
|
||||
[icon]="
|
||||
(selectedTwoFactorAuthenticationDeliveryMethod.name | lowercase) === 'sms' ||
|
||||
(selectedTwoFactorAuthenticationDeliveryMethod.name | lowercase) === 'mobile'
|
||||
? 'mobile-alt'
|
||||
: 'envelope'
|
||||
"
|
||||
></fa-icon>
|
||||
<div>
|
||||
<span class="tfa-context__label">Code sent to</span>
|
||||
<strong class="tfa-context__target">{{ maskTarget(selectedTwoFactorAuthenticationDeliveryMethod) }}</strong>
|
||||
</div>
|
||||
<span class="tfa-context__validity">
|
||||
<fa-icon icon="clock"></fa-icon>
|
||||
{{ tokenValidityTime / 60 }} {{ 'labels.inputs.mins' | translate }}
|
||||
</span>
|
||||
<mat-label>{{ 'labels.inputs.OTP' | translate }}</mat-label>
|
||||
<input type="password" matInput autocomplete="off" required formControlName="otp" />
|
||||
<mat-hint align="start">
|
||||
<strong>{{ 'labels.inputs.Delivery Method' | translate }}:</strong>
|
||||
{{ selectedTwoFactorAuthenticationDeliveryMethod.name }}
|
||||
</mat-hint>
|
||||
<mat-hint align="end">
|
||||
<strong>{{ 'labels.inputs.Validity' | translate }}:</strong> {{ tokenValidityTime / 60 }}
|
||||
{{ 'labels.inputs.mins' | translate }}
|
||||
</mat-hint>
|
||||
@if (twoFactorAuthenticationForm.controls.otp.hasError('required')) {
|
||||
<mat-error>
|
||||
</div>
|
||||
|
||||
<form class="tfa-form" [formGroup]="twoFactorAuthenticationForm" (ngSubmit)="validateOTP()">
|
||||
<div class="tfa-otp">
|
||||
<input
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
autocomplete="one-time-code"
|
||||
maxlength="6"
|
||||
class="tfa-otp__input"
|
||||
formControlName="otp"
|
||||
placeholder="• • • • • •"
|
||||
(keypress)="$event.charCode >= 48 && $event.charCode <= 57 ? true : $event.preventDefault()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@if (
|
||||
twoFactorAuthenticationForm.controls.otp.hasError('required') &&
|
||||
twoFactorAuthenticationForm.controls.otp.touched
|
||||
) {
|
||||
<div class="tfa-error">
|
||||
<fa-icon icon="exclamation-circle"></fa-icon>
|
||||
{{ 'labels.inputs.OTP' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</div>
|
||||
}
|
||||
</mat-form-field>
|
||||
<button mat-raised-button color="primary" [disabled]="!twoFactorAuthenticationForm.valid || loading">
|
||||
{{ 'labels.buttons.Validate OTP' | translate }}
|
||||
@if (loading) {
|
||||
<mat-spinner [diameter]="20"></mat-spinner>
|
||||
}
|
||||
</button>
|
||||
<button type="button" mat-button (click)="resendOTP()" [disabled]="loading || resendOTPLoading">
|
||||
{{ 'labels.buttons.Resend OTP' | translate }}
|
||||
@if (resendOTPLoading) {
|
||||
<mat-spinner [diameter]="20"></mat-spinner>
|
||||
}
|
||||
</button>
|
||||
</form>
|
||||
}
|
||||
|
||||
<button type="submit" class="tfa-btn tfa-btn--primary" [disabled]="!twoFactorAuthenticationForm.valid || loading">
|
||||
@if (loading) {
|
||||
<mat-spinner diameter="20"></mat-spinner>
|
||||
<span>Verifying…</span>
|
||||
} @else {
|
||||
<fa-icon icon="check-circle"></fa-icon>
|
||||
<span>{{ 'labels.buttons.Validate OTP' | translate }}</span>
|
||||
}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="tfa-btn tfa-btn--ghost"
|
||||
(click)="resendOTP()"
|
||||
[disabled]="loading || resendOTPLoading"
|
||||
>
|
||||
@if (resendOTPLoading) {
|
||||
<mat-spinner diameter="18"></mat-spinner>
|
||||
<span>Resending…</span>
|
||||
} @else {
|
||||
<fa-icon icon="redo"></fa-icon>
|
||||
<span>{{ 'labels.buttons.Resend OTP' | translate }}</span>
|
||||
}
|
||||
</button>
|
||||
</form>
|
||||
}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user