Vladyslav Prykhodko
4 years ago
9 changed files with 401 additions and 2 deletions
@ -0,0 +1,25 @@ |
|||||
|
import { Injectable } from '@angular/core'; |
||||
|
import { HttpClient } from '@angular/common/http'; |
||||
|
import { defaultHttpOptionsFromConfig, RequestConfig } from '@core/http/http-utils'; |
||||
|
import { Observable } from 'rxjs'; |
||||
|
import { TwoFactorAuthSettings } from '@shared/models/two-factor-auth.models'; |
||||
|
|
||||
|
@Injectable({ |
||||
|
providedIn: 'root' |
||||
|
}) |
||||
|
export class TwoFactorAuthenticationService { |
||||
|
|
||||
|
constructor( |
||||
|
private http: HttpClient |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
getTwoFaSettings(config?: RequestConfig): Observable<TwoFactorAuthSettings> { |
||||
|
return this.http.get<TwoFactorAuthSettings>(`/api/2fa/settings`, defaultHttpOptionsFromConfig(config)); |
||||
|
} |
||||
|
|
||||
|
saveTwoFaSettings(settings: TwoFactorAuthSettings, config?: RequestConfig): Observable<TwoFactorAuthSettings> { |
||||
|
return this.http.post<TwoFactorAuthSettings>(`/api/2fa/settings`, settings, defaultHttpOptionsFromConfig(config)); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,142 @@ |
|||||
|
<div> |
||||
|
<mat-card class="settings-card"> |
||||
|
<mat-card-title> |
||||
|
<div fxLayout="row"> |
||||
|
<span class="mat-headline" translate>admin.2fa.2fa</span> |
||||
|
<span fxFlex></span> |
||||
|
<!-- <div tb-help="twoFactorAuthSettings"></div>--> |
||||
|
</div> |
||||
|
</mat-card-title> |
||||
|
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> |
||||
|
</mat-progress-bar> |
||||
|
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> |
||||
|
<mat-card-content style="padding-top: 16px;"> |
||||
|
<form [formGroup]="twoFaFormGroup" (ngSubmit)="save()" fxLayout="column"> |
||||
|
<mat-checkbox *ngIf="isTenantAdmin()" formControlName="useSystemTwoFactorAuthSettings" style="padding-bottom: 16px;"> |
||||
|
{{ 'admin.2fa.use-system-two-factor-auth-settings' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<ng-container *ngIf="!isTenantAdmin() || twoFaFormGroup.get('useSystemTwoFactorAuthSettings').value"> |
||||
|
<mat-form-field> |
||||
|
<mat-label translate>admin.2fa.total-allowed-time-for-verification</mat-label> |
||||
|
<input matInput required formControlName="totalAllowedTimeForVerification" type="number" step="1" min="1"> |
||||
|
<mat-error *ngIf="twoFaFormGroup.get('totalAllowedTimeForVerification').hasError('required')"> |
||||
|
{{ 'admin.2fa.total-allowed-time-for-verification-required' | translate }} |
||||
|
</mat-error> |
||||
|
<mat-error *ngIf="twoFaFormGroup.get('totalAllowedTimeForVerification').hasError('pattern') |
||||
|
|| twoFaFormGroup.get('totalAllowedTimeForVerification').hasError('min')"> |
||||
|
{{ 'admin.2fa.total-allowed-time-for-verification-pattern' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field> |
||||
|
<mat-label translate>admin.2fa.max-verification-failures-before-user-lockout</mat-label> |
||||
|
<input matInput required formControlName="maxVerificationFailuresBeforeUserLockout" type="number" step="1" min="0" max="65535"> |
||||
|
<mat-error *ngIf="twoFaFormGroup.get('maxVerificationFailuresBeforeUserLockout').hasError('required')"> |
||||
|
{{ 'admin.2fa.max-verification-failures-before-user-lockout-required' | translate }} |
||||
|
</mat-error> |
||||
|
<mat-error *ngIf="twoFaFormGroup.get('maxVerificationFailuresBeforeUserLockout').hasError('pattern') |
||||
|
|| twoFaFormGroup.get('maxVerificationFailuresBeforeUserLockout').hasError('min') |
||||
|
|| twoFaFormGroup.get('maxVerificationFailuresBeforeUserLockout').hasError('max')"> |
||||
|
{{ 'admin.2fa.max-verification-failures-before-user-lockout-pattern' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field> |
||||
|
<mat-label translate>admin.2fa.verification-code-send-rate-limit</mat-label> |
||||
|
<input matInput formControlName="verificationCodeSendRateLimit"> |
||||
|
<mat-hint translate>admin.2fa.verification-code-send-rate-limit-hint</mat-hint> |
||||
|
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimit').hasError('pattern')"> |
||||
|
{{ 'admin.2fa.verification-code-send-rate-limit-pattern' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field> |
||||
|
<mat-label translate>admin.2fa.verification-code-check-rate-limit</mat-label> |
||||
|
<input matInput formControlName="verificationCodeCheckRateLimit"> |
||||
|
<mat-hint translate>admin.2fa.verification-code-check-rate-limit-hint</mat-hint> |
||||
|
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimit').hasError('pattern')"> |
||||
|
{{ 'admin.2fa.verification-code-check-rate-limit-pattern' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<div class="mat-h3">Providers</div> |
||||
|
<ng-container formArrayName="providers"> |
||||
|
<div class="container"> |
||||
|
<mat-expansion-panel *ngFor="let provider of providersForm.controls; let j = index; trackBy: trackByParams" |
||||
|
class="registration-card mat-elevation-z0"> |
||||
|
<mat-expansion-panel-header> |
||||
|
<mat-panel-title fxLayoutAlign="start center"> |
||||
|
{{ provider.value.providerType }} |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center"> |
||||
|
<button mat-icon-button |
||||
|
type="button" |
||||
|
[disabled]="providersForm.controls.length < 2" |
||||
|
(click)="removeProviders($event, j)" |
||||
|
matTooltip="{{ 'admin.oauth2.delete-provider' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>delete</mat-icon> |
||||
|
</button> |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
|
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<section [formGroupName]="j"> |
||||
|
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"> |
||||
|
<section fxFlex formGroupName="additionalInfo" fxLayout="row"> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>admin.oauth2.login-provider</mat-label> |
||||
|
<mat-select formControlName="providerName"> |
||||
|
<mat-option *ngFor="let provider of templateProvider" [value]="provider"> |
||||
|
{{ provider }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
|
<mat-form-field floatLabel="always" fxFlex class="mat-block"> |
||||
|
<mat-label translate>admin.oauth2.allowed-platforms</mat-label> |
||||
|
<mat-select formControlName="platforms" multiple placeholder="{{ 'admin.oauth2.all-platforms' | translate }}"> |
||||
|
<mat-option *ngFor="let platform of platformTypes" [value]="platform"> |
||||
|
{{ platformTypeTranslations.get(platform) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>admin.oauth2.client-id</mat-label> |
||||
|
<input matInput formControlName="clientId" required> |
||||
|
<mat-error *ngIf="registration.get('clientId').hasError('required')"> |
||||
|
{{ 'admin.oauth2.client-id-required' | translate }} |
||||
|
</mat-error> |
||||
|
<mat-error *ngIf="registration.get('clientId').hasError('maxlength')"> |
||||
|
{{ 'admin.oauth2.client-id-max-length' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
|
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>admin.oauth2.client-secret</mat-label> |
||||
|
<input matInput formControlName="clientSecret" required> |
||||
|
<mat-error *ngIf="registration.get('clientSecret').hasError('required')"> |
||||
|
{{ 'admin.oauth2.client-secret-required' | translate }} |
||||
|
</mat-error> |
||||
|
<mat-error *ngIf="registration.get('clientSecret').hasError('maxlength')"> |
||||
|
{{ 'admin.oauth2.client-secret-max-length' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
|
||||
|
</section> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
</ng-container> |
||||
|
<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px"> |
||||
|
<button mat-button mat-raised-button color="primary" |
||||
|
[disabled]="(isLoading$ | async) || twoFaFormGroup.invalid || !twoFaFormGroup.dirty" |
||||
|
type="submit"> |
||||
|
{{'action.save' | translate}} |
||||
|
</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
</mat-card-content> |
||||
|
</mat-card> |
||||
|
</div> |
||||
@ -0,0 +1,155 @@ |
|||||
|
import { Component, Inject, OnDestroy, OnInit } from '@angular/core'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { ActivatedRoute } from '@angular/router'; |
||||
|
import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { DialogService } from '@core/services/dialog.service'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { WINDOW } from '@core/services/window.service'; |
||||
|
import { TwoFactorAuthenticationService } from '@core/http/two-factor-authentication.service'; |
||||
|
import { AuthState } from '@core/auth/auth.models'; |
||||
|
import { getCurrentAuthState } from '@core/auth/auth.selectors'; |
||||
|
import { Authority } from '@shared/models/authority.enum'; |
||||
|
import { |
||||
|
TwoFactorAuthProviderType, |
||||
|
TwoFactorAuthSettings, |
||||
|
TwoFactorAuthSettingsForm |
||||
|
} from '@shared/models/two-factor-auth.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-2fa-settings', |
||||
|
templateUrl: './two-factor-auth-settings.component.html', |
||||
|
styleUrls: ['./two-factor-auth-settings.component.scss', './settings-card.scss'] |
||||
|
}) |
||||
|
export class TwoFactorAuthSettingsComponent extends PageComponent implements OnInit, HasConfirmForm, OnDestroy { |
||||
|
|
||||
|
private authState: AuthState = getCurrentAuthState(this.store); |
||||
|
private authUser = this.authState.authUser; |
||||
|
|
||||
|
twoFaFormGroup: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private route: ActivatedRoute, |
||||
|
private twoFaService: TwoFactorAuthenticationService, |
||||
|
private fb: FormBuilder, |
||||
|
private dialogService: DialogService, |
||||
|
private translate: TranslateService, |
||||
|
@Inject(WINDOW) private window: Window) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.build2faSettingsForm(); |
||||
|
this.twoFaService.getTwoFaSettings().subscribe((setting) => { |
||||
|
console.log(this.formDataPreprocessing(setting)); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy() { |
||||
|
super.ngOnDestroy(); |
||||
|
} |
||||
|
|
||||
|
confirmForm(): FormGroup { |
||||
|
return this.twoFaFormGroup; |
||||
|
} |
||||
|
|
||||
|
isTenantAdmin(): boolean { |
||||
|
return this.authUser.authority === Authority.TENANT_ADMIN; |
||||
|
} |
||||
|
|
||||
|
save() { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
private build2faSettingsForm(): void { |
||||
|
this.twoFaFormGroup = this.fb.group({ |
||||
|
useSystemTwoFactorAuthSettings: [false], |
||||
|
maxVerificationFailuresBeforeUserLockout: [30, [ |
||||
|
Validators.required, |
||||
|
Validators.pattern(/^\d*$/), |
||||
|
Validators.min(0), |
||||
|
Validators.max(65535) |
||||
|
]], |
||||
|
totalAllowedTimeForVerification: [3600, [ |
||||
|
Validators.required, |
||||
|
Validators.min(1), |
||||
|
Validators.pattern(/^\d*$/) |
||||
|
]], |
||||
|
verificationCodeCheckRateLimit: ['', Validators.pattern(/^[1-9]\d*:[1-9]\d*$/)], |
||||
|
verificationCodeSendRateLimit: ['', Validators.pattern(/^[1-9]\d*:[1-9]\d*$/)], |
||||
|
providers: this.fb.array([]) |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
addProviders() { |
||||
|
const newProviders = this.fb.group({ |
||||
|
providerType: [TwoFactorAuthProviderType.TOTP], |
||||
|
issuerName: ['', Validators.required], |
||||
|
smsVerificationMessageTemplate: [{ |
||||
|
value: 'Verification code: ${verificationCode}', |
||||
|
disabled: true |
||||
|
}, [ |
||||
|
Validators.required, |
||||
|
Validators.pattern(/\${verificationCode}/) |
||||
|
]], |
||||
|
verificationCodeLifetime: [{ |
||||
|
value: 120, |
||||
|
disabled: true |
||||
|
}, [ |
||||
|
Validators.required, |
||||
|
Validators.min(1), |
||||
|
Validators.pattern(/^\d*$/) |
||||
|
]] |
||||
|
}); |
||||
|
newProviders.get('providerType').valueChanges.subscribe(type => { |
||||
|
switch (type) { |
||||
|
case TwoFactorAuthProviderType.SMS: |
||||
|
newProviders.get('issuerName').disable({emitEvent: false}); |
||||
|
newProviders.get('smsVerificationMessageTemplate').enable({emitEvent: false}); |
||||
|
newProviders.get('verificationCodeLifetime').enable({emitEvent: false}); |
||||
|
break; |
||||
|
case TwoFactorAuthProviderType.TOTP: |
||||
|
newProviders.get('issuerName').enable({emitEvent: false}); |
||||
|
newProviders.get('smsVerificationMessageTemplate').disable({emitEvent: false}); |
||||
|
newProviders.get('verificationCodeLifetime').disable({emitEvent: false}); |
||||
|
break; |
||||
|
} |
||||
|
}); |
||||
|
if (this.providersForm.length) { |
||||
|
const selectProvidersType = this.providersForm.value[0].providerType; |
||||
|
if (selectProvidersType !== TwoFactorAuthProviderType.TOTP) { |
||||
|
newProviders.get('providerType').patchValue(TwoFactorAuthProviderType.SMS, {emitEvents: true}) |
||||
|
} |
||||
|
} |
||||
|
this.providersForm.push(newProviders); |
||||
|
} |
||||
|
|
||||
|
removeProviders($event: Event, index: number): void { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
$event.preventDefault(); |
||||
|
} |
||||
|
this.providersForm.removeAt(index); |
||||
|
this.providersForm.markAsTouched(); |
||||
|
this.providersForm.markAsDirty(); |
||||
|
} |
||||
|
|
||||
|
get providersForm(): FormArray { |
||||
|
return this.twoFaFormGroup.get('providers') as FormArray; |
||||
|
} |
||||
|
|
||||
|
private formDataPreprocessing(data: TwoFactorAuthSettings): TwoFactorAuthSettingsForm { |
||||
|
return data; |
||||
|
} |
||||
|
|
||||
|
private formDataPostprocessing(data: TwoFactorAuthSettingsForm): TwoFactorAuthSettings{ |
||||
|
return data; |
||||
|
} |
||||
|
|
||||
|
trackByParams(index: number): number { |
||||
|
return index; |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,30 @@ |
|||||
|
export interface TwoFactorAuthSettings { |
||||
|
maxVerificationFailuresBeforeUserLockout: number; |
||||
|
providers: Array<TwoFactorAuthProviderConfig>; |
||||
|
totalAllowedTimeForVerification: number; |
||||
|
useSystemTwoFactorAuthSettings: boolean; |
||||
|
verificationCodeCheckRateLimit: string; |
||||
|
verificationCodeSendRateLimit: string; |
||||
|
} |
||||
|
|
||||
|
export type TwoFactorAuthProviderConfig = Partial<TotpTwoFactorAuthProviderConfig | SmsTwoFactorAuthProviderConfig> |
||||
|
|
||||
|
export interface TotpTwoFactorAuthProviderConfig { |
||||
|
providerType: TwoFactorAuthProviderType; |
||||
|
issuerName: string; |
||||
|
} |
||||
|
|
||||
|
export interface SmsTwoFactorAuthProviderConfig { |
||||
|
providerType: TwoFactorAuthProviderType; |
||||
|
smsVerificationMessageTemplate: string; |
||||
|
verificationCodeLifetime: number; |
||||
|
} |
||||
|
|
||||
|
export enum TwoFactorAuthProviderType{ |
||||
|
TOTP = 'TOTP', |
||||
|
SMS = 'SMS' |
||||
|
} |
||||
|
|
||||
|
export interface TwoFactorAuthSettingsForm extends TwoFactorAuthSettings { |
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue