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>
|
||||
|
||||
+307
-194
@@ -6,180 +6,338 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
// ===== Host Container =====
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
animation: fade-in-up 0.4s ease-out;
|
||||
justify-content: center;
|
||||
animation: tfa-fade 0.4s ease-out;
|
||||
}
|
||||
|
||||
// ===== Title Section =====
|
||||
p {
|
||||
text-align: center;
|
||||
font-size: 1.1rem;
|
||||
color: rgb(255 255 255 / 90%);
|
||||
margin: 0 0 1rem;
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Divider =====
|
||||
mat-divider {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
// ===== Delivery Method Description =====
|
||||
p:not(:first-of-type) {
|
||||
text-align: center;
|
||||
font-size: 0.95rem;
|
||||
color: rgb(255 255 255 / 65%);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
// ===== Main Form Container =====
|
||||
.two-factor-auth-form {
|
||||
.tfa-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 24px 22px 22px;
|
||||
border-radius: 18px;
|
||||
background: rgb(255 255 255 / 6%);
|
||||
border: 1px solid rgb(255 255 255 / 12%);
|
||||
backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.tfa-icon {
|
||||
align-self: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
||||
color: #fff;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
box-shadow:
|
||||
0 6px 20px rgb(37 99 235 / 35%),
|
||||
inset 0 1px 0 rgb(255 255 255 / 25%);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
mat-radio-button {
|
||||
margin-bottom: 0.25rem;
|
||||
.tfa-title {
|
||||
margin: 0 0 6px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tfa-sub {
|
||||
margin: 0 0 20px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: rgb(255 255 255 / 65%);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// Style radio buttons to match Material Design 3
|
||||
::ng-deep {
|
||||
.mdc-form-field {
|
||||
font-size: 0.95rem;
|
||||
color: var(--md-sys-color-on-surface, #1a1c1e);
|
||||
}
|
||||
/* ──────── Form layout ──────── */
|
||||
.tfa-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mdc-radio__outer-circle {
|
||||
border-color: var(--md-sys-color-on-surface-variant, #44474e);
|
||||
}
|
||||
/* ──────── Step 1 — delivery methods ──────── */
|
||||
.tfa-methods__group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mdc-radio--selected .mdc-radio__outer-circle,
|
||||
.mdc-radio--selected .mdc-radio__inner-circle {
|
||||
border-color: var(--md-sys-color-primary, #1074b9);
|
||||
}
|
||||
}
|
||||
.tfa-method {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid rgb(255 255 255 / 12%);
|
||||
background: rgb(255 255 255 / 4%);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 0.18s,
|
||||
background 0.18s,
|
||||
box-shadow 0.18s;
|
||||
|
||||
&:hover {
|
||||
border-color: rgb(96 165 250 / 60%);
|
||||
background: rgb(96 165 250 / 8%);
|
||||
}
|
||||
|
||||
// ===== OTP Input Field =====
|
||||
.two-factor-auth-input {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
|
||||
[matPrefix] {
|
||||
padding-left: 1rem;
|
||||
|
||||
fa-icon {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
.mat-mdc-text-field-wrapper {
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-focus-overlay {
|
||||
border-radius: 12px 12px 0 0;
|
||||
background-color: var(--md-sys-color-on-surface, #1a1c1e);
|
||||
opacity: 0.04;
|
||||
}
|
||||
|
||||
.mdc-line-ripple::after {
|
||||
border-bottom-color: var(--md-sys-color-primary, #1074b9);
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-hint-wrapper {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
mat-hint {
|
||||
font-size: 0.75rem;
|
||||
color: var(--md-sys-color-on-surface-variant, #44474e);
|
||||
}
|
||||
}
|
||||
&.is-selected {
|
||||
border-color: #60a5fa;
|
||||
background: rgb(96 165 250 / 12%);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px #60a5fa,
|
||||
0 6px 18px rgb(37 99 235 / 28%);
|
||||
}
|
||||
|
||||
// ===== Buttons =====
|
||||
.two-factor-auth-button,
|
||||
[mat-raised-button],
|
||||
[mat-button] {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
&__icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 999px;
|
||||
background: rgb(255 255 255 / 8%);
|
||||
color: #93c5fd;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
[mat-raised-button] {
|
||||
background: var(--md-sys-color-primary, #1074b9);
|
||||
color: var(--md-sys-color-on-primary, #fff);
|
||||
box-shadow:
|
||||
0 1px 2px rgb(0 0 0 / 30%),
|
||||
0 1px 3px 1px rgb(0 0 0 / 15%);
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
box-shadow:
|
||||
0 1px 3px rgb(0 0 0 / 30%),
|
||||
0 4px 8px 3px rgb(0 0 0 / 15%);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
background: var(--md-sys-color-on-surface, #1a1c1e);
|
||||
opacity: 0.38;
|
||||
}
|
||||
&.is-selected &__icon {
|
||||
background: #1d4ed8;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[mat-button] {
|
||||
color: var(--md-sys-color-primary, #1074b9);
|
||||
background: transparent;
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
background: rgb(16 116 185 / 8%);
|
||||
}
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
mat-spinner {
|
||||
display: inline-block;
|
||||
margin-left: 0.5rem;
|
||||
&__name {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: rgb(255 255 255 / 92%);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
&__target {
|
||||
font-size: 12.5px;
|
||||
color: rgb(255 255 255 / 70%);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&__radio {
|
||||
margin-left: auto;
|
||||
|
||||
::ng-deep .mdc-radio__outer-circle {
|
||||
border-color: rgb(255 255 255 / 35%);
|
||||
}
|
||||
|
||||
::ng-deep .mat-mdc-radio-button.mat-accent .mdc-radio__inner-circle,
|
||||
::ng-deep .mdc-radio--selected .mdc-radio__outer-circle {
|
||||
border-color: #60a5fa !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Radio Group Spacing =====
|
||||
.radio-group-spacing {
|
||||
/* ──────── Step 2 — context strip ──────── */
|
||||
.tfa-context {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0;
|
||||
margin-bottom: 0.5rem;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 12px;
|
||||
background: rgb(255 255 255 / 5%);
|
||||
border: 1px solid rgb(255 255 255 / 10%);
|
||||
|
||||
> fa-icon {
|
||||
color: #93c5fd;
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 11px;
|
||||
color: rgb(255 255 255 / 55%);
|
||||
letter-spacing: 0.4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__target {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&__validity {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgb(34 197 94 / 18%);
|
||||
color: #86efac;
|
||||
border: 1px solid rgb(34 197 94 / 35%);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
|
||||
fa-icon {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Animations =====
|
||||
@keyframes fade-in-up {
|
||||
/* ──────── Step 2 — OTP input ──────── */
|
||||
.tfa-otp {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tfa-otp__input {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
border: 1px solid rgb(255 255 255 / 18%);
|
||||
background: rgb(255 255 255 / 8%);
|
||||
border-radius: 14px;
|
||||
color: #fff;
|
||||
font-family: 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 14px;
|
||||
padding: 0 0 0 14px;
|
||||
outline: none;
|
||||
transition:
|
||||
border-color 0.18s,
|
||||
box-shadow 0.18s,
|
||||
background 0.18s;
|
||||
|
||||
&::placeholder {
|
||||
color: rgb(255 255 255 / 25%);
|
||||
letter-spacing: 14px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #60a5fa;
|
||||
background: rgb(255 255 255 / 12%);
|
||||
box-shadow: 0 0 0 4px rgb(96 165 250 / 25%);
|
||||
}
|
||||
}
|
||||
|
||||
.tfa-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
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;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
/* ──────── Buttons ──────── */
|
||||
.tfa-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, #2563eb 0%, #1e40af 100%);
|
||||
color: #fff;
|
||||
box-shadow:
|
||||
0 6px 20px rgb(37 99 235 / 32%),
|
||||
inset 0 1px 0 rgb(255 255 255 / 18%);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow:
|
||||
0 10px 24px rgb(37 99 235 / 42%),
|
||||
inset 0 1px 0 rgb(255 255 255 / 22%);
|
||||
}
|
||||
}
|
||||
|
||||
&--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;
|
||||
}
|
||||
}
|
||||
|
||||
/* ──────── Animations ──────── */
|
||||
@keyframes tfa-fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
to {
|
||||
@@ -188,61 +346,16 @@ p:not(:first-of-type) {
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Dark Mode Support =====
|
||||
:host-context(.dark-theme),
|
||||
:host-context([data-theme='dark']) {
|
||||
p {
|
||||
color: var(--md-sys-color-on-surface, #e2e2e5);
|
||||
|
||||
strong {
|
||||
color: inherit;
|
||||
}
|
||||
/* ──────── Responsive ──────── */
|
||||
@media (width <= 480px) {
|
||||
.tfa-card {
|
||||
padding: 20px 16px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
p:not(:first-of-type) {
|
||||
color: var(--md-sys-color-on-surface-variant, #c4c6cf);
|
||||
}
|
||||
|
||||
.two-factor-auth-form {
|
||||
mat-radio-button {
|
||||
::ng-deep {
|
||||
.mdc-form-field {
|
||||
color: var(--md-sys-color-on-surface, #e2e2e5);
|
||||
}
|
||||
|
||||
.mdc-radio__outer-circle {
|
||||
border-color: var(--md-sys-color-on-surface-variant, #c4c6cf);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[mat-raised-button] {
|
||||
background: var(--md-sys-color-primary, #a8c8ff);
|
||||
color: var(--md-sys-color-on-primary, #003258);
|
||||
}
|
||||
|
||||
[mat-button] {
|
||||
color: var(--md-sys-color-primary, #a8c8ff);
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
background: rgb(168 200 255 / 12%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Responsive Styles =====
|
||||
/* stylelint-disable-next-line media-feature-range-notation -- Safari compatibility */
|
||||
@media (max-width: 768px) {
|
||||
.radio-group-spacing {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.two-factor-auth-form {
|
||||
.two-factor-auth-input,
|
||||
[mat-raised-button],
|
||||
[mat-button] {
|
||||
max-width: 100%;
|
||||
}
|
||||
.tfa-otp__input {
|
||||
font-size: 22px;
|
||||
letter-spacing: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,10 +15,8 @@ import { finalize } from 'rxjs/operators';
|
||||
|
||||
/** Custom Services */
|
||||
import { AuthenticationService } from '../../core/authentication/authentication.service';
|
||||
import { MatDivider } from '@angular/material/divider';
|
||||
import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
|
||||
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
||||
import { MatFormField, MatPrefix, MatLabel, MatHint, MatError } from '@angular/material/form-field';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
@@ -31,13 +29,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
styleUrls: ['./two-factor-authentication.component.scss'],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
MatDivider,
|
||||
MatRadioGroup,
|
||||
MatRadioButton,
|
||||
MatProgressSpinner,
|
||||
MatPrefix,
|
||||
FaIconComponent,
|
||||
MatHint
|
||||
FaIconComponent
|
||||
]
|
||||
})
|
||||
export class TwoFactorAuthenticationComponent implements OnInit {
|
||||
@@ -69,7 +64,18 @@ export class TwoFactorAuthenticationComponent implements OnInit {
|
||||
ngOnInit() {
|
||||
this.createTwoFactorAuthenticationDeliveryMethodForm();
|
||||
this.authenticationService.getDeliveryMethods().subscribe((deliveryMethods: any) => {
|
||||
this.twoFactorAuthenticationDeliveryMethods = deliveryMethods;
|
||||
// Keep only methods the user has actually configured (target populated).
|
||||
// Methods returned without a destination are noise from the backend.
|
||||
const enabled = (deliveryMethods || []).filter((m: any) => !!m?.target);
|
||||
this.twoFactorAuthenticationDeliveryMethods = enabled;
|
||||
|
||||
// If exactly one method is enabled, skip the picker and request OTP automatically.
|
||||
if (enabled.length === 1) {
|
||||
this.twoFactorAuthenticationDeliveryMethodForm
|
||||
.get('twoFactorAuthenticationDeliveryMethod')
|
||||
?.setValue(enabled[0]);
|
||||
this.requestOTP();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -120,6 +126,35 @@ export class TwoFactorAuthenticationComponent implements OnInit {
|
||||
.subscribe();
|
||||
}
|
||||
|
||||
/** Explicitly select a delivery method when the row is clicked. */
|
||||
selectDeliveryMethod(method: any): void {
|
||||
this.twoFactorAuthenticationDeliveryMethodForm.get('twoFactorAuthenticationDeliveryMethod')?.setValue(method);
|
||||
}
|
||||
|
||||
/**
|
||||
* Mask the delivery target so only the last 4 characters are visible.
|
||||
* Mobile → "+XXXXXX2076"; Email → "ad***@gmail.com".
|
||||
*/
|
||||
maskTarget(method: any): string {
|
||||
const target = method?.target || '';
|
||||
if (!target) return '';
|
||||
const channel = (method?.name || '').toString().toLowerCase();
|
||||
const isMobile = channel === 'sms' || channel === 'mobile' || channel === 'phone';
|
||||
if (isMobile) {
|
||||
const digits = target.replace(/\D/g, '');
|
||||
if (digits.length <= 4) return target;
|
||||
return '+' + 'X'.repeat(digits.length - 4) + digits.slice(-4);
|
||||
}
|
||||
// Email — keep first 2 chars of local part, mask the rest, keep domain
|
||||
const at = target.indexOf('@');
|
||||
if (at <= 0) return target;
|
||||
const local = target.substring(0, at);
|
||||
const domain = target.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;
|
||||
}
|
||||
|
||||
/**
|
||||
* Resends OTP via the selected delivery method.
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user