143 lines
8.2 KiB
HTML
143 lines
8.2 KiB
HTML
|
<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>
|