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