dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Refactoring

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2022-05-18 17:49:25 +03:00
parent 57924394db
commit ebcfa52e8d
5 changed files with 160 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,7 +33,7 @@
<ng-container>
<fieldset class="fields-group">
<legend class="group-title" translate>admin.2fa.verification-limitations</legend>
<div class="input-row" fxLayout="row" fxLayout.sm="column" fxLayoutGap="8px">
<div class="input-row" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.total-allowed-time-for-verification</mat-label>
<input matInput required formControlName="totalAllowedTimeForVerification" type="number" step="1" min="1">
@ -58,62 +58,137 @@
</mat-error>
</mat-form-field>
</div>
<mat-slide-toggle class="rate-limit-toggle" formControlName="verificationCodeSendRateLimitEnable">
{{ 'admin.2fa.verification-code-send-rate-limit' | translate }}
</mat-slide-toggle>
<div class="input-row" fxLayout="row" fxLayout.sm="column" fxLayoutGap="8px"
*ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitEnable').value">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.number-of-send-attempts</mat-label>
<input matInput formControlName="verificationCodeSendRateLimitNumber" type="number" step="1" min="1" required>
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('required')">
{{ 'admin.2fa.number-of-send-attempts-required' | translate }}
</mat-error>
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('pattern')
<mat-expansion-panel class="provider">
<mat-expansion-panel-header>
<mat-panel-title fxLayoutAlign="start center">
<mat-slide-toggle
(click)="toggleExtensionPanel($event, 0, twoFaFormGroup.get('verificationCodeSendRateLimitEnable').value)"
formControlName="verificationCodeSendRateLimitEnable">
</mat-slide-toggle>
{{ 'admin.2fa.verification-code-send-rate-limit' | translate }}
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.number-of-send-attempts</mat-label>
<input matInput formControlName="verificationCodeSendRateLimitNumber" type="number" step="1" min="1" required>
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('required')">
{{ 'admin.2fa.number-of-send-attempts-required' | translate }}
</mat-error>
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('pattern')
|| twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('min')">
{{ 'admin.2fa.number-of-send-attempts-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.within-time</mat-label>
<input matInput formControlName="verificationCodeSendRateLimitTime" type="number" step="1" min="1" required>
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('required')">
{{ 'admin.2fa.within-time-required' | translate }}
</mat-error>
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('pattern')
{{ 'admin.2fa.number-of-send-attempts-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.within-time</mat-label>
<input matInput formControlName="verificationCodeSendRateLimitTime" type="number" step="1" min="1" required>
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('required')">
{{ 'admin.2fa.within-time-required' | translate }}
</mat-error>
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('pattern')
|| twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('min')">
{{ 'admin.2fa.within-time-pattern' | translate }}
</mat-error>
</mat-form-field>
</div>
<mat-slide-toggle class="rate-limit-toggle" formControlName="verificationCodeCheckRateLimitEnable">
{{ 'admin.2fa.verification-code-check-rate-limit' | translate }}
</mat-slide-toggle>
<div class="input-row" fxLayout="row" fxLayout.sm="column" fxLayoutGap="8px"
*ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitEnable').value">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.number-of-checking-attempts</mat-label>
<input matInput formControlName="verificationCodeCheckRateLimitNumber" required type="number" step="1" min="1">
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('required')">
{{ 'admin.2fa.number-of-checking-attempts-required' | translate }}
</mat-error>
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('pattern')
{{ 'admin.2fa.within-time-pattern' | translate }}
</mat-error>
</mat-form-field>
</div>
</ng-template>
</mat-expansion-panel>
<!-- <mat-slide-toggle class="rate-limit-toggle" formControlName="verificationCodeSendRateLimitEnable">-->
<!-- {{ 'admin.2fa.verification-code-send-rate-limit' | translate }}-->
<!-- </mat-slide-toggle>-->
<!-- <div class="input-row" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"-->
<!-- *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitEnable').value">-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label translate>admin.2fa.number-of-send-attempts</mat-label>-->
<!-- <input matInput formControlName="verificationCodeSendRateLimitNumber" type="number" step="1" min="1" required>-->
<!-- <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('required')">-->
<!-- {{ 'admin.2fa.number-of-send-attempts-required' | translate }}-->
<!-- </mat-error>-->
<!-- <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('pattern')-->
<!-- || twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('min')">-->
<!-- {{ 'admin.2fa.number-of-send-attempts-pattern' | translate }}-->
<!-- </mat-error>-->
<!-- </mat-form-field>-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label translate>admin.2fa.within-time</mat-label>-->
<!-- <input matInput formControlName="verificationCodeSendRateLimitTime" type="number" step="1" min="1" required>-->
<!-- <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('required')">-->
<!-- {{ 'admin.2fa.within-time-required' | translate }}-->
<!-- </mat-error>-->
<!-- <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('pattern')-->
<!-- || twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('min')">-->
<!-- {{ 'admin.2fa.within-time-pattern' | translate }}-->
<!-- </mat-error>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<mat-divider></mat-divider>
<mat-expansion-panel class="provider">
<mat-expansion-panel-header>
<mat-panel-title fxLayoutAlign="start center">
<mat-slide-toggle class="rate-limit-toggle"
(click)="toggleExtensionPanel($event, 1, twoFaFormGroup.get('verificationCodeCheckRateLimitEnable').value)"
formControlName="verificationCodeCheckRateLimitEnable">
</mat-slide-toggle>
{{ 'admin.2fa.verification-code-check-rate-limit' | translate }}
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.number-of-checking-attempts</mat-label>
<input matInput formControlName="verificationCodeCheckRateLimitNumber" required type="number" step="1" min="1">
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('required')">
{{ 'admin.2fa.number-of-checking-attempts-required' | translate }}
</mat-error>
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('pattern')
|| twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('min')">
{{ 'admin.2fa.number-of-checking-attempts-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.within-time</mat-label>
<input matInput formControlName="verificationCodeCheckRateLimitTime" required type="number" step="1" min="1">
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('required')">
{{ 'admin.2fa.within-time-required' | translate }}
</mat-error>
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('pattern')
{{ 'admin.2fa.number-of-checking-attempts-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.within-time</mat-label>
<input matInput formControlName="verificationCodeCheckRateLimitTime" required type="number" step="1" min="1">
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('required')">
{{ 'admin.2fa.within-time-required' | translate }}
</mat-error>
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('pattern')
|| twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('min')">
{{ 'admin.2fa.within-time-pattern' | translate }}
</mat-error>
</mat-form-field>
</div>
{{ 'admin.2fa.within-time-pattern' | translate }}
</mat-error>
</mat-form-field>
</div>
</ng-template>
</mat-expansion-panel>
<!-- <mat-slide-toggle class="rate-limit-toggle" formControlName="verificationCodeCheckRateLimitEnable">-->
<!-- {{ 'admin.2fa.verification-code-check-rate-limit' | translate }}-->
<!-- </mat-slide-toggle>-->
<!-- <div class="input-row" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"-->
<!-- *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitEnable').value">-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label translate>admin.2fa.number-of-checking-attempts</mat-label>-->
<!-- <input matInput formControlName="verificationCodeCheckRateLimitNumber" required type="number" step="1" min="1">-->
<!-- <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('required')">-->
<!-- {{ 'admin.2fa.number-of-checking-attempts-required' | translate }}-->
<!-- </mat-error>-->
<!-- <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('pattern')-->
<!-- || twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('min')">-->
<!-- {{ 'admin.2fa.number-of-checking-attempts-pattern' | translate }}-->
<!-- </mat-error>-->
<!-- </mat-form-field>-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label translate>admin.2fa.within-time</mat-label>-->
<!-- <input matInput formControlName="verificationCodeCheckRateLimitTime" required type="number" step="1" min="1">-->
<!-- <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('required')">-->
<!-- {{ 'admin.2fa.within-time-required' | translate }}-->
<!-- </mat-error>-->
<!-- <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('pattern')-->
<!-- || twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('min')">-->
<!-- {{ 'admin.2fa.within-time-pattern' | translate }}-->
<!-- </mat-error>-->
<!-- </mat-form-field>-->
<!-- </div>-->
</fieldset>
<fieldset class="fields-group" formArrayName="providers">
<legend class="group-title" translate>admin.2fa.available-providers</legend>

8
ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.scss
View File

@ -26,17 +26,15 @@
legend {
color: rgba(0, 0, 0, .7);
width: fit-content;
margin: 0 8px;
}
&:not(:last-of-type) {
padding: 8px;
.input-row {
padding: 8px 8px 0;
}
&:last-of-type {
margin-bottom: 24px;
legend {
margin: 0 8px;
}
}
.rate-limit-toggle {

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

@ -92,10 +92,14 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI
}
toggleProviders($event: Event, i: number): void {
this.toggleExtensionPanel($event, i + 2, this.providersForm.at(i).get('enable').value);
}
toggleExtensionPanel($event: Event, i: number, currentState: boolean) {
if ($event) {
$event.stopPropagation();
}
if (this.providersForm.at(i).get('enable').value) {
if (currentState) {
this.getByIndexPanel(i).close();
} else {
this.getByIndexPanel(i).open();
@ -175,7 +179,7 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI
const findIndex = allowProvidersConfig.indexOf(provider);
if (findIndex > -1) {
processFormValue.providers.push(Object.assign(settings.providers[findIndex], {enable: true}));
this.getByIndexPanel(index).open();
this.getByIndexPanel(index + 2).open();
} else {
processFormValue.providers.push({enable: false});
}

8
ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.scss
View File

@ -28,7 +28,7 @@
}
.mat-card-title{
font: 500 28px / 36px Roboto, "Helvetica Neue", sans-serif;
font: 400 28px / 36px Roboto, "Helvetica Neue", sans-serif;
}
.mat-card-content {
@ -58,9 +58,15 @@
::ng-deep{
button.provider {
text-align: start;
font-weight: 400;
&:not(.mat-button-disabled) {
border-color: rgba(255, 255, 255, .8);
}
.icon{
height: 18px;
width: 18px;
vertical-align: sub;
}
}
}
}

23
ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.ts
View File

@ -36,6 +36,7 @@ import { TranslateService } from '@ngx-translate/core';
export class TwoFactorAuthLoginComponent extends PageComponent implements OnInit {
private providersInfo: TwoFaProviderInfo[];
private prevProvider: TwoFactorAuthProviderType;
selectedProvider: TwoFactorAuthProviderType;
twoFactorAuthProvider = TwoFactorAuthProviderType;
@ -89,13 +90,16 @@ export class TwoFactorAuthLoginComponent extends PageComponent implements OnInit
}
selectProvider(type: TwoFactorAuthProviderType) {
this.prevProvider = type === null ? this.selectedProvider : null;
this.selectedProvider = type;
const providerConfig = this.providersInfo.find(config => config.type === type);
this.providerDescription = this.translate.instant(this.providersData.get(providerConfig.type).description, {
contact: providerConfig.contact
});
if (type !== TwoFactorAuthProviderType.TOTP && type !== null) {
this.sendCode();
if (type !== null) {
const providerConfig = this.providersInfo.find(config => config.type === type);
this.providerDescription = this.translate.instant(this.providersData.get(providerConfig.type).description, {
contact: providerConfig.contact
});
if (type !== TwoFactorAuthProviderType.TOTP) {
this.sendCode();
}
}
}
@ -104,6 +108,11 @@ export class TwoFactorAuthLoginComponent extends PageComponent implements OnInit
}
cancelLogin() {
this.authService.logout();
if (this.prevProvider) {
this.selectedProvider = this.prevProvider;
this.prevProvider = null;
} else {
this.authService.logout();
}
}
}