UI: Add page setting fb2

ui-ngx/src/app/core/http/two-factor-authentication.service.ts

@@ -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));
+  }
+
+}

ui-ngx/src/app/core/services/menu.service.ts

@@ -108,7 +108,7 @@ export class MenuService {
         name: 'admin.system-settings',
         type: 'toggle',
         path: '/settings',
-        height: '240px',
+        height: '280px',
         icon: 'settings',
         pages: [
           {
@@ -146,6 +146,14 @@ export class MenuService {
             path: '/settings/oauth2',
             icon: 'security'
           },
+          {
+            id: guid(),
+            name: 'admin.2fa.2fa',
+            type: 'link',
+            path: '/settings/2fa',
+            icon: 'mdi:two-factor-authentication',
+            isMdiIcon: true
+          },
           {
             id: guid(),
             name: 'resource.resources-library',
@@ -216,6 +224,12 @@ export class MenuService {
             icon: 'security',
             path: '/settings/oauth2'
           },
+          {
+            name: 'admin.2fa.2fa',
+            icon: 'mdi:two-factor-authentication',
+            isMdiIcon: true,
+            path: '/settings/2fa'
+          },
           {
             name: 'resource.resources-library',
             icon: 'folder',

ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts

@@ -32,6 +32,7 @@ import { ResourcesLibraryTableConfigResolver } from '@home/pages/admin/resource/
 import { EntityDetailsPageComponent } from '@home/components/entity/entity-details-page.component';
 import { entityDetailsPageBreadcrumbLabelFunction } from '@home/pages/home-pages.models';
 import { BreadCrumbConfig } from '@shared/components/breadcrumb';
+import { TwoFactorAuthSettingsComponent } from '@home/pages/admin/two-factor-auth-settings.component';
 
 @Injectable()
 export class OAuth2LoginProcessingUrlResolver implements Resolve<string> {
@@ -183,6 +184,20 @@ const routes: Routes = [
             }
           }
         ]
+      },
+      {
+        path: '2fa',
+        component: TwoFactorAuthSettingsComponent,
+        canDeactivate: [ConfirmOnExitGuard],
+        data: {
+          auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN],
+          title: 'admin.2fa.2fa',
+          breadcrumb: {
+            label: 'admin.2fa.2fa',
+            icon: 'mdi:two-factor-authentication',
+            isMdiIcon: true
+          }
+        }
       }
     ]
   }

ui-ngx/src/app/modules/home/pages/admin/admin.module.ts

@@ -28,6 +28,7 @@ import { SmsProviderComponent } from '@home/pages/admin/sms-provider.component';
 import { SendTestSmsDialogComponent } from '@home/pages/admin/send-test-sms-dialog.component';
 import { HomeSettingsComponent } from '@home/pages/admin/home-settings.component';
 import { ResourcesLibraryComponent } from '@home/pages/admin/resource/resources-library.component';
+import { TwoFactorAuthSettingsComponent } from '@home/pages/admin/two-factor-auth-settings.component';
 
 @NgModule({
   declarations:
@@ -39,7 +40,8 @@ import { ResourcesLibraryComponent } from '@home/pages/admin/resource/resources-
       SecuritySettingsComponent,
       OAuth2SettingsComponent,
       HomeSettingsComponent,
-      ResourcesLibraryComponent
+      ResourcesLibraryComponent,
+      TwoFactorAuthSettingsComponent
     ],
   imports: [
     CommonModule,

ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html

@@ -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>

ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts

@@ -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;
+  }
+
+}

ui-ngx/src/app/shared/models/two-factor-auth.models.ts

@@ -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 {
+
+}

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -252,6 +252,22 @@
           "platform-ios": "iOS",
           "all-platforms": "All platforms",
           "allowed-platforms": "Allowed platforms"
+        },
+        "2fa":  {
+          "2fa": "Two-factor authentication",
+          "use-system-two-factor-auth-settings": "Use system two factor auth settings",
+          "total-allowed-time-for-verification": "Total allowed time for verification",
+          "total-allowed-time-for-verification-required": "Total allowed time is required.",
+          "total-allowed-time-for-verification-pattern": "Total allowed time must be a positive integer.",
+          "max-verification-failures-before-user-lockout": "Max verification failures before user lockout",
+          "max-verification-failures-before-user-lockout-required": "Max verification failures is required.",
+          "max-verification-failures-before-user-lockout-pattern": "Max verification failures must be a positive integer.",
+          "verification-code-check-rate-limit": "Verification code check rate limit",
+          "verification-code-check-rate-limit-hint": "If empty field, the limit not be apply",
+          "verification-code-check-rate-limit-pattern": "Verification code check limit has invalid format",
+          "verification-code-send-rate-limit": "Verification code send rate limit",
+          "verification-code-send-rate-limit-hint": "If empty field, the limit not be apply",
+          "verification-code-send-rate-limit-pattern": "Verification code send limit has invalid format"
         }
       },
     "alarm": {