tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Add JWT security settings form and restyle security page

pull/7297/head
Vladyslav_Prykhodko 4 years ago
parent
b776cf13b6
commit
fc1da12999
7 changed files with 410 additions and 165 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      ui-ngx/src/app/core/http/admin.service.ts
  2. 373
      ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
  3. 23
      ui-ngx/src/app/modules/home/pages/admin/security-settings.component.scss
  4. 132
      ui-ngx/src/app/modules/home/pages/admin/security-settings.component.ts
  5. 2
      ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html
  6. 7
      ui-ngx/src/app/shared/models/settings.models.ts
  7. 20
      ui-ngx/src/assets/locale/locale.constant-en_US.json

18
ui-ngx/src/app/core/http/admin.service.ts
View File

@ -20,16 +20,18 @@ import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import {
AdminSettings,
RepositorySettings,
AutoCommitSettings,
JwtSettings,
MailServerSettings,
RepositorySettings,
RepositorySettingsInfo,
SecuritySettings,
TestSmsRequest,
UpdateMessage,
AutoCommitSettings,
RepositorySettingsInfo
UpdateMessage
} from '@shared/models/settings.models';
import { EntitiesVersionControlService } from '@core/http/entities-version-control.service';
import { tap } from 'rxjs/operators';
import { LoginResponse } from '@shared/models/login.models';
@Injectable({
providedIn: 'root'
@ -70,6 +72,14 @@ export class AdminService {
defaultHttpOptionsFromConfig(config));
}
public getJwtSettings(config?: RequestConfig): Observable<JwtSettings> {
return this.http.get<JwtSettings>(`/api/admin/jwtSettings`, defaultHttpOptionsFromConfig(config));
}
public saveJwtSettings(jwtSettings: JwtSettings, config?: RequestConfig): Observable<LoginResponse> {
return this.http.post<LoginResponse>('/api/admin/jwtSettings', jwtSettings, defaultHttpOptionsFromConfig(config));
}
public getRepositorySettings(config?: RequestConfig): Observable<RepositorySettings> {
return this.http.get<RepositorySettings>(`/api/admin/repositorySettings`, defaultHttpOptionsFromConfig(config));
}

373
ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
View File

@ -15,144 +15,237 @@
limitations under the License.
-->
<div>
<mat-card class="settings-card">
<mat-card-title>
<div fxLayout="row">
<span class="mat-headline" translate>admin.security-settings</span>
<span fxFlex></span>
<div tb-help="securitySettings"></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]="securitySettingsFormGroup" (ngSubmit)="save()" autocomplete="off">
<fieldset [disabled]="isLoading$ | async">
<div class="mat-accordion-container">
<mat-accordion multi="true">
<mat-expansion-panel [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
<div class="tb-panel-title" translate>admin.general-policy</div>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-form-field class="mat-block">
<mat-label translate>admin.max-failed-login-attempts</mat-label>
<input matInput type="number"
formControlName="maxFailedLoginAttempts"
step="1"
min="0"/>
<mat-error *ngIf="securitySettingsFormGroup.get('maxFailedLoginAttempts').hasError('min')">
{{ 'admin.minimum-max-failed-login-attempts-range' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>admin.user-lockout-notification-email</mat-label>
<input matInput type="email"
formControlName="userLockoutNotificationEmail"/>
</mat-form-field>
</mat-expansion-panel>
<mat-expansion-panel [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
<div class="tb-panel-title" translate>admin.password-policy</div>
</mat-panel-title>
</mat-expansion-panel-header>
<section formGroupName="passwordPolicy">
<mat-form-field class="mat-block">
<mat-label translate>admin.minimum-password-length</mat-label>
<input matInput type="number"
formControlName="minimumLength"
step="1"
min="5"
max="50"
required/>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumLength').hasError('required')">
{{ 'admin.minimum-password-length-required' | translate }}
</mat-error>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumLength').hasError('min')">
{{ 'admin.minimum-password-length-range' | translate }}
</mat-error>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumLength').hasError('max')">
{{ 'admin.minimum-password-length-range' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>admin.minimum-uppercase-letters</mat-label>
<input matInput type="number"
formControlName="minimumUppercaseLetters"
step="1"
min="0"/>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumUppercaseLetters').hasError('min')">
{{ 'admin.minimum-uppercase-letters-range' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>admin.minimum-lowercase-letters</mat-label>
<input matInput type="number"
formControlName="minimumLowercaseLetters"
step="1"
min="0"/>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumLowercaseLetters').hasError('min')">
{{ 'admin.minimum-lowercase-letters-range' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>admin.minimum-digits</mat-label>
<input matInput type="number"
formControlName="minimumDigits"
step="1"
min="0"/>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumDigits').hasError('min')">
{{ 'admin.minimum-digits-range' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>admin.minimum-special-characters</mat-label>
<input matInput type="number"
formControlName="minimumSpecialCharacters"
step="1"
min="0"/>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumSpecialCharacters').hasError('min')">
{{ 'admin.minimum-special-characters-range' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>admin.password-expiration-period-days</mat-label>
<input matInput type="number"
formControlName="passwordExpirationPeriodDays"
step="1"
min="0"/>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.passwordExpirationPeriodDays').hasError('min')">
{{ 'admin.password-expiration-period-days-range' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>admin.password-reuse-frequency-days</mat-label>
<input matInput type="number"
formControlName="passwordReuseFrequencyDays"
step="1"
min="0"/>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.passwordReuseFrequencyDays').hasError('min')">
{{ 'admin.password-reuse-frequency-days-range' | translate }}
</mat-error>
</mat-form-field>
<mat-checkbox formControlName = "allowWhitespaces" >
<mat-label translate>admin.allow-whitespace</mat-label>
</mat-checkbox>
</section>
</mat-expansion-panel>
</mat-accordion>
</div>
<div fxLayout="row" fxLayoutAlign="end center" style="width: 100%;" class="layout-wrap">
<button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || securitySettingsFormGroup.invalid || !securitySettingsFormGroup.dirty"
type="submit">{{'action.save' | translate}}
</button>
</div>
<mat-card class="settings-card">
<mat-card-title>
<div fxLayout="row">
<span class="mat-headline" translate>admin.security-settings</span>
<span fxFlex></span>
<div tb-help="securitySettings"></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]="securitySettingsFormGroup" (ngSubmit)="save()" autocomplete="off">
<fieldset [disabled]="isLoading$ | async">
<fieldset class="fields-group">
<legend class="group-title" translate>admin.general-policy</legend>
<mat-form-field class="mat-block">
<mat-label translate>admin.max-failed-login-attempts</mat-label>
<input matInput type="number"
formControlName="maxFailedLoginAttempts"
step="1"
min="0"/>
<mat-error *ngIf="securitySettingsFormGroup.get('maxFailedLoginAttempts').hasError('min')">
{{ 'admin.minimum-max-failed-login-attempts-range' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>admin.user-lockout-notification-email</mat-label>
<input matInput type="email"
formControlName="userLockoutNotificationEmail"/>
</mat-form-field>
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>admin.password-policy</legend>
<section formGroupName="passwordPolicy">
<mat-form-field class="mat-block">
<mat-label translate>admin.minimum-password-length</mat-label>
<input matInput type="number"
formControlName="minimumLength"
step="1"
min="5"
max="50"
required/>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumLength').hasError('required')">
{{ 'admin.minimum-password-length-required' | translate }}
</mat-error>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumLength').hasError('min')">
{{ 'admin.minimum-password-length-range' | translate }}
</mat-error>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumLength').hasError('max')">
{{ 'admin.minimum-password-length-range' | translate }}
</mat-error>
</mat-form-field>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.minimum-uppercase-letters</mat-label>
<input matInput type="number"
formControlName="minimumUppercaseLetters"
step="1"
min="0"/>
<mat-error
*ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumUppercaseLetters').hasError('min')">
{{ 'admin.minimum-uppercase-letters-range' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.minimum-lowercase-letters</mat-label>
<input matInput type="number"
formControlName="minimumLowercaseLetters"
step="1"
min="0"/>
<mat-error
*ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumLowercaseLetters').hasError('min')">
{{ 'admin.minimum-lowercase-letters-range' | translate }}
</mat-error>
</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.minimum-digits</mat-label>
<input matInput type="number"
formControlName="minimumDigits"
step="1"
min="0"/>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumDigits').hasError('min')">
{{ 'admin.minimum-digits-range' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.minimum-special-characters</mat-label>
<input matInput type="number"
formControlName="minimumSpecialCharacters"
step="1"
min="0"/>
<mat-error
*ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumSpecialCharacters').hasError('min')">
{{ 'admin.minimum-special-characters-range' | translate }}
</mat-error>
</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.password-expiration-period-days</mat-label>
<input matInput type="number"
formControlName="passwordExpirationPeriodDays"
step="1"
min="0"/>
<mat-error
*ngIf="securitySettingsFormGroup.get('passwordPolicy.passwordExpirationPeriodDays').hasError('min')">
{{ 'admin.password-expiration-period-days-range' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.password-reuse-frequency-days</mat-label>
<input matInput type="number"
formControlName="passwordReuseFrequencyDays"
step="1"
min="0"/>
<mat-error
*ngIf="securitySettingsFormGroup.get('passwordPolicy.passwordReuseFrequencyDays').hasError('min')">
{{ 'admin.password-reuse-frequency-days-range' | translate }}
</mat-error>
</mat-form-field>
</div>
<mat-checkbox formControlName="allowWhitespaces" style="margin-bottom: 16px">
<mat-label translate>admin.allow-whitespace</mat-label>
</mat-checkbox>
</section>
</fieldset>
</form>
</mat-card-content>
</mat-card>
</div>
<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap" style="margin-top: 16px">
<button mat-button color="primary"
[disabled]="securitySettingsFormGroup.pristine"
(click)="discardSetting()"
type="button">{{'action.undo' | translate}}
</button>
<button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || securitySettingsFormGroup.invalid || !securitySettingsFormGroup.dirty"
type="submit">{{'action.save' | translate}}
</button>
</div>
</fieldset>
</form>
</mat-card-content>
</mat-card>
<mat-card class="settings-card">
<mat-card-title>
<div fxLayout="row">
<span class="mat-headline" translate>admin.jwt.security-settings</span>
</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]="jwtSecuritySettingsFormGroup" (ngSubmit)="saveJwtSettings()" autocomplete="off">
<fieldset [disabled]="isLoading$ | async">
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.jwt.issuer-name</mat-label>
<input matInput required formControlName="tokenIssuer"/>
<mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenIssuer').hasError('required')">
{{ 'admin.jwt.issuer-name-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.jwt.signings-key</mat-label>
<input matInput required formControlName="tokenSigningKey"/>
<button type="button"
matSuffix
mat-button
(click)="generateSigningKey()"
color="primary">
{{ 'admin.jwt.generate-key' | translate }}
</button>
<mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenSigningKey').hasError('required')">
{{ 'admin.jwt.signings-key-required' | translate }}
</mat-error>
<mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenSigningKey').hasError('base64')">
{{ 'admin.jwt.signings-key-base64' | translate }}
</mat-error>
</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.jwt.expiration-time</mat-label>
<input matInput type="number" required
formControlName="tokenExpirationTime"
step="1"
min="0"/>
<mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenExpirationTime').hasError('required')">
{{ 'admin.jwt.expiration-time-required' | translate }}
</mat-error>
<mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenExpirationTime').hasError('pattern')">
{{ 'admin.jwt.expiration-time-pattern' | translate }}
</mat-error>
<mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenExpirationTime').hasError('min')">
{{ 'admin.jwt.expiration-time-min' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.jwt.refresh-expiration-time</mat-label>
<input matInput type="number" required
formControlName="refreshTokenExpTime"
step="1"
min="0"/>
<mat-error *ngIf="jwtSecuritySettingsFormGroup.get('refreshTokenExpTime').hasError('required')">
{{ 'admin.jwt.refresh-expiration-time-required' | translate }}
</mat-error>
<mat-error *ngIf="jwtSecuritySettingsFormGroup.get('refreshTokenExpTime').hasError('pattern')">
{{ 'admin.jwt.refresh-expiration-time-pattern' | translate }}
</mat-error>
<mat-error *ngIf="jwtSecuritySettingsFormGroup.get('refreshTokenExpTime').hasError('min')">
{{ 'admin.jwt.refresh-expiration-time-min' | translate }}
</mat-error>
<mat-error *ngIf="jwtSecuritySettingsFormGroup.get('refreshTokenExpTime').hasError('lessToken')">
{{ 'admin.jwt.refresh-expiration-time-less-token' | translate }}
</mat-error>
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap">
<button mat-button color="primary"
[disabled]="jwtSecuritySettingsFormGroup.pristine"
(click)="discardJwtSetting()"
type="button">{{'action.undo' | translate}}
</button>
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async) || jwtSecuritySettingsFormGroup.invalid || !jwtSecuritySettingsFormGroup.dirty"
type="submit">{{'action.save' | translate}}
</button>
</div>
</fieldset>
</form>
</mat-card-content>
</mat-card>

23
ui-ngx/src/app/modules/home/pages/admin/security-settings.component.scss
View File

@ -14,7 +14,26 @@
* limitations under the License.
*/
:host {
.mat-accordion-container {
margin-bottom: 16px;
.mat-headline {
margin-bottom: 8px;
}
.mat-card-title {
margin: 0;
}
.mat-card-content {
padding: 0 !important;
}
.fields-group {
padding: 8px 16px 0;
margin: 10px 0;
border: 1px groove rgba(0, 0, 0, .25);
border-radius: 4px;
legend {
color: rgba(0, 0, 0, .7);
}
}
}

132
ui-ngx/src/app/modules/home/pages/admin/security-settings.component.ts
View File

@ -14,40 +14,50 @@
/// limitations under the License.
///
import { Component, OnInit } from '@angular/core';
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { PageComponent } from '@shared/components/page.component';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { SecuritySettings } from '@shared/models/settings.models';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { JwtSettings, SecuritySettings } from '@shared/models/settings.models';
import { AdminService } from '@core/http/admin.service';
import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard';
import { mergeMap, tap } from 'rxjs/operators';
import { randomAlphanumeric } from '@core/utils';
import { AuthService } from '@core/auth/auth.service';
import { DialogService } from '@core/services/dialog.service';
import { TranslateService } from '@ngx-translate/core';
import { Observable, of } from 'rxjs';
@Component({
selector: 'tb-security-settings',
templateUrl: './security-settings.component.html',
styleUrls: ['./security-settings.component.scss', './settings-card.scss']
})
export class SecuritySettingsComponent extends PageComponent implements OnInit, HasConfirmForm {
export class SecuritySettingsComponent extends PageComponent implements HasConfirmForm {
securitySettingsFormGroup: FormGroup;
securitySettings: SecuritySettings;
jwtSecuritySettingsFormGroup: FormGroup;
private securitySettings: SecuritySettings;
private jwtSettings: JwtSettings;
constructor(protected store: Store<AppState>,
private router: Router,
private adminService: AdminService,
public fb: FormBuilder) {
private authService: AuthService,
private dialogService: DialogService,
private translate: TranslateService,
private fb: FormBuilder) {
super(store);
}
ngOnInit() {
this.buildSecuritySettingsForm();
this.buildJwtSecuritySettingsForm();
this.adminService.getSecuritySettings().subscribe(
(securitySettings) => {
this.securitySettings = securitySettings;
this.securitySettingsFormGroup.reset(this.securitySettings);
}
securitySettings => this.processSecuritySettings(securitySettings)
);
this.adminService.getJwtSettings().subscribe(
jwtSettings => this.processJwtSettings(jwtSettings)
);
}
@ -70,18 +80,104 @@ export class SecuritySettingsComponent extends PageComponent implements OnInit,
});
}
buildJwtSecuritySettingsForm() {
this.jwtSecuritySettingsFormGroup = this.fb.group({
tokenIssuer: ['', Validators.required],
tokenSigningKey: ['', [Validators.required, this.base64Format]],
tokenExpirationTime: [0, [Validators.required, Validators.pattern('[0-9]*'), Validators.min(60)]],
refreshTokenExpTime: [0, [Validators.required, Validators.pattern('[0-9]*'), Validators.min(900)]]
}, {validators: this.refreshTokenTimeGreatTokenTime.bind(this)});
this.jwtSecuritySettingsFormGroup.get('tokenExpirationTime').valueChanges.subscribe(
() => this.jwtSecuritySettingsFormGroup.get('refreshTokenExpTime').updateValueAndValidity({onlySelf: true})
);
}
save(): void {
this.securitySettings = {...this.securitySettings, ...this.securitySettingsFormGroup.value};
this.adminService.saveSecuritySettings(this.securitySettings).subscribe(
(securitySettings) => {
this.securitySettings = securitySettings;
this.securitySettingsFormGroup.reset(this.securitySettings);
}
securitySettings => this.processSecuritySettings(securitySettings)
);
}
saveJwtSettings() {
const jwtFormSettings = this.jwtSecuritySettingsFormGroup.value;
this.confirmChangeJWTSettings().pipe(mergeMap(value => {
if (value) {
return this.adminService.saveJwtSettings(jwtFormSettings).pipe(
tap((data) => this.authService.setUserFromJwtToken(data.token, data.refreshToken, false)),
mergeMap(() => this.adminService.getJwtSettings()),
tap(jwtSettings => this.processJwtSettings(jwtSettings))
);
}
return of(null);
})).subscribe(() => {});
}
discardSetting() {
this.securitySettingsFormGroup.reset(this.securitySettings);
}
discardJwtSetting() {
this.jwtSecuritySettingsFormGroup.reset(this.jwtSettings);
}
private confirmChangeJWTSettings(): Observable<boolean> {
if (this.jwtSecuritySettingsFormGroup.get('tokenIssuer').value !== (this.jwtSettings?.tokenIssuer || '') ||
this.jwtSecuritySettingsFormGroup.get('tokenSigningKey').value !== (this.jwtSettings?.tokenSigningKey || '')) {
return this.dialogService.confirm(
this.translate.instant('admin.jwt.info-header'),
`<div style="max-width: 400px">${this.translate.instant('admin.jwt.info-message')}</div>`,
this.translate.instant('action.discard-changes'),
this.translate.instant('action.confirm')
);
}
return of(true);
}
generateSigningKey() {
this.jwtSecuritySettingsFormGroup.get('tokenSigningKey').setValue(randomAlphanumeric(44));
if (this.jwtSecuritySettingsFormGroup.get('tokenSigningKey').pristine) {
this.jwtSecuritySettingsFormGroup.get('tokenSigningKey').markAsDirty();
this.jwtSecuritySettingsFormGroup.get('tokenSigningKey').markAsTouched();
}
}
private processSecuritySettings(securitySettings: SecuritySettings) {
this.securitySettings = securitySettings;
this.securitySettingsFormGroup.reset(this.securitySettings);
}
private processJwtSettings(jwtSettings: JwtSettings) {
this.jwtSettings = jwtSettings;
this.jwtSecuritySettingsFormGroup.reset(jwtSettings);
}
private refreshTokenTimeGreatTokenTime(formGroup: FormGroup): { [key: string]: boolean } | null {
if (formGroup) {
const tokenTime = formGroup.value.tokenExpirationTime;
const refreshTokenTime = formGroup.value.refreshTokenExpTime;
if (tokenTime >= refreshTokenTime ) {
if (formGroup.get('refreshTokenExpTime').untouched) {
formGroup.get('refreshTokenExpTime').markAsTouched();
}
formGroup.get('refreshTokenExpTime').setErrors({lessToken: true});
return {lessToken: true};
}
}
return null;
}
private base64Format(control: FormControl): { [key: string]: boolean } | null {
try {
const value = btoa(control.value);
return null;
} catch (e) {
return {base64: true};
}
}
confirmForm(): FormGroup {
return this.securitySettingsFormGroup;
return this.securitySettingsFormGroup.dirty ? this.securitySettingsFormGroup : this.jwtSecuritySettingsFormGroup;
}
}

2
ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html
View File

@ -16,7 +16,7 @@
-->
<h2 mat-dialog-title>{{data.title}}</h2>
<div mat-dialog-content [innerHTML]="data.message"></div>
<div mat-dialog-content [innerHTML]="data.message | safe: 'html'"></div>
<div mat-dialog-actions fxLayoutAlign="end center">
<button mat-button color="primary" [mat-dialog-close]="false">{{data.cancel}}</button>
<button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{data.ok}}</button>

7
ui-ngx/src/app/shared/models/settings.models.ts
View File

@ -63,6 +63,13 @@ export interface SecuritySettings {
passwordPolicy: UserPasswordPolicy;
}
export interface JwtSettings {
tokenIssuer: string;
tokenSigningKey: string;
tokenExpirationTime: number;
refreshTokenExpTime: number;
}
export interface UpdateMessage {
message: string;
updateAvailable: boolean;

20
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -381,6 +381,26 @@
"within-time": "Within time (sec)",
"within-time-pattern": "Time must be a positive integer.",
"within-time-required": "Time is required."
},
"jwt": {
"security-settings": "JWT security settings",
"issuer-name": "Issuer name",
"issuer-name-required": "Issuer name is required.",
"signings-key": "Signing key",
"signings-key-required": "Signing key is required.",
"signings-key-base64": "Signing key must be base64 format.",
"expiration-time": "Token expiration time (sec)",
"expiration-time-required": "Token expiration time is required.",
"expiration-time-pattern": "Token expiration time be a positive integer.",
"expiration-time-min": "Minimum time is 60 seconds (1 minute).",
"refresh-expiration-time": "Refresh token expiration time",
"refresh-expiration-time-required": "Refresh token expiration time is required.",
"refresh-expiration-time-pattern": "Refresh token expiration time be a positive integer.",
"refresh-expiration-time-min": "Minimum time is 900 seconds (15 minute).",
"refresh-expiration-time-less-token": "Refresh token time must be greater token time.",
"generate-key": "Generate key",
"info-header": "All users will be to re-logined",
"info-message": "Change of the JWT Signing Key will cause all issued tokens to be invalid. All users will need to re-login. This will also affect scripts that use Rest API/Websockets."
}
},
"alarm": {

Write Preview
Loading…
Cancel
Save