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> <ng-container>
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>admin.2fa.verification-limitations</legend> <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-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.total-allowed-time-for-verification</mat-label> <mat-label translate>admin.2fa.total-allowed-time-for-verification</mat-label>
<input matInput required formControlName="totalAllowedTimeForVerification" type="number" step="1" min="1"> <input matInput required formControlName="totalAllowedTimeForVerification" type="number" step="1" min="1">
@ -58,62 +58,137 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<mat-slide-toggle class="rate-limit-toggle" formControlName="verificationCodeSendRateLimitEnable"> <mat-expansion-panel class="provider">
{{ 'admin.2fa.verification-code-send-rate-limit' | translate }} <mat-expansion-panel-header>
</mat-slide-toggle> <mat-panel-title fxLayoutAlign="start center">
<div class="input-row" fxLayout="row" fxLayout.sm="column" fxLayoutGap="8px" <mat-slide-toggle
*ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitEnable').value"> (click)="toggleExtensionPanel($event, 0, twoFaFormGroup.get('verificationCodeSendRateLimitEnable').value)"
<mat-form-field fxFlex class="mat-block"> formControlName="verificationCodeSendRateLimitEnable">
<mat-label translate>admin.2fa.number-of-send-attempts</mat-label> </mat-slide-toggle>
<input matInput formControlName="verificationCodeSendRateLimitNumber" type="number" step="1" min="1" required> {{ 'admin.2fa.verification-code-send-rate-limit' | translate }}
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('required')"> </mat-panel-title>
{{ 'admin.2fa.number-of-send-attempts-required' | translate }} </mat-expansion-panel-header>
</mat-error> <ng-template matExpansionPanelContent>
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('pattern') <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')"> || twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('min')">
{{ 'admin.2fa.number-of-send-attempts-pattern' | translate }} {{ 'admin.2fa.number-of-send-attempts-pattern' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.within-time</mat-label> <mat-label translate>admin.2fa.within-time</mat-label>
<input matInput formControlName="verificationCodeSendRateLimitTime" type="number" step="1" min="1" required> <input matInput formControlName="verificationCodeSendRateLimitTime" type="number" step="1" min="1" required>
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('required')"> <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('required')">
{{ 'admin.2fa.within-time-required' | translate }} {{ 'admin.2fa.within-time-required' | translate }}
</mat-error> </mat-error>
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('pattern') <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('pattern')
|| twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('min')"> || twoFaFormGroup.get('verificationCodeSendRateLimitTime').hasError('min')">
{{ 'admin.2fa.within-time-pattern' | translate }} {{ 'admin.2fa.within-time-pattern' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<mat-slide-toggle class="rate-limit-toggle" formControlName="verificationCodeCheckRateLimitEnable"> </ng-template>
{{ 'admin.2fa.verification-code-check-rate-limit' | translate }} </mat-expansion-panel>
</mat-slide-toggle> <!-- <mat-slide-toggle class="rate-limit-toggle" formControlName="verificationCodeSendRateLimitEnable">-->
<div class="input-row" fxLayout="row" fxLayout.sm="column" fxLayoutGap="8px" <!-- {{ 'admin.2fa.verification-code-send-rate-limit' | translate }}-->
*ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitEnable').value"> <!-- </mat-slide-toggle>-->
<mat-form-field fxFlex class="mat-block"> <!-- <div class="input-row" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"-->
<mat-label translate>admin.2fa.number-of-checking-attempts</mat-label> <!-- *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitEnable').value">-->
<input matInput formControlName="verificationCodeCheckRateLimitNumber" required type="number" step="1" min="1"> <!-- <mat-form-field fxFlex class="mat-block">-->
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('required')"> <!-- <mat-label translate>admin.2fa.number-of-send-attempts</mat-label>-->
{{ 'admin.2fa.number-of-checking-attempts-required' | translate }} <!-- <input matInput formControlName="verificationCodeSendRateLimitNumber" type="number" step="1" min="1" required>-->
</mat-error> <!-- <mat-error *ngIf="twoFaFormGroup.get('verificationCodeSendRateLimitNumber').hasError('required')">-->
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('pattern') <!-- {{ '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')"> || twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('min')">
{{ 'admin.2fa.number-of-checking-attempts-pattern' | translate }} {{ 'admin.2fa.number-of-checking-attempts-pattern' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.within-time</mat-label> <mat-label translate>admin.2fa.within-time</mat-label>
<input matInput formControlName="verificationCodeCheckRateLimitTime" required type="number" step="1" min="1"> <input matInput formControlName="verificationCodeCheckRateLimitTime" required type="number" step="1" min="1">
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('required')"> <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('required')">
{{ 'admin.2fa.within-time-required' | translate }} {{ 'admin.2fa.within-time-required' | translate }}
</mat-error> </mat-error>
<mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('pattern') <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('pattern')
|| twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('min')"> || twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('min')">
{{ 'admin.2fa.within-time-pattern' | translate }} {{ 'admin.2fa.within-time-pattern' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </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>
<fieldset class="fields-group" formArrayName="providers"> <fieldset class="fields-group" formArrayName="providers">
<legend class="group-title" translate>admin.2fa.available-providers</legend> <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 { legend {
color: rgba(0, 0, 0, .7); color: rgba(0, 0, 0, .7);
width: fit-content; width: fit-content;
margin: 0 8px;
} }
&:not(:last-of-type) { .input-row {
padding: 8px; padding: 8px 8px 0;
} }
&:last-of-type { &:last-of-type {
margin-bottom: 24px; margin-bottom: 24px;
legend {
margin: 0 8px;
}
} }
.rate-limit-toggle { .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 { 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) { if ($event) {
$event.stopPropagation(); $event.stopPropagation();
} }
if (this.providersForm.at(i).get('enable').value) { if (currentState) {
this.getByIndexPanel(i).close(); this.getByIndexPanel(i).close();
} else { } else {
this.getByIndexPanel(i).open(); this.getByIndexPanel(i).open();
@ -175,7 +179,7 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI
const findIndex = allowProvidersConfig.indexOf(provider); const findIndex = allowProvidersConfig.indexOf(provider);
if (findIndex > -1) { if (findIndex > -1) {
processFormValue.providers.push(Object.assign(settings.providers[findIndex], {enable: true})); processFormValue.providers.push(Object.assign(settings.providers[findIndex], {enable: true}));
this.getByIndexPanel(index).open(); this.getByIndexPanel(index + 2).open();
} else { } else {
processFormValue.providers.push({enable: false}); 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{ .mat-card-title{
font: 500 28px / 36px Roboto, "Helvetica Neue", sans-serif; font: 400 28px / 36px Roboto, "Helvetica Neue", sans-serif;
} }
.mat-card-content { .mat-card-content {
@ -58,9 +58,15 @@
::ng-deep{ ::ng-deep{
button.provider { button.provider {
text-align: start; text-align: start;
font-weight: 400;
&:not(.mat-button-disabled) { &:not(.mat-button-disabled) {
border-color: rgba(255, 255, 255, .8); 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 { export class TwoFactorAuthLoginComponent extends PageComponent implements OnInit {
private providersInfo: TwoFaProviderInfo[]; private providersInfo: TwoFaProviderInfo[];
private prevProvider: TwoFactorAuthProviderType;
selectedProvider: TwoFactorAuthProviderType; selectedProvider: TwoFactorAuthProviderType;
twoFactorAuthProvider = TwoFactorAuthProviderType; twoFactorAuthProvider = TwoFactorAuthProviderType;
@ -89,13 +90,16 @@ export class TwoFactorAuthLoginComponent extends PageComponent implements OnInit
} }
selectProvider(type: TwoFactorAuthProviderType) { selectProvider(type: TwoFactorAuthProviderType) {
this.prevProvider = type === null ? this.selectedProvider : null;
this.selectedProvider = type; this.selectedProvider = type;
const providerConfig = this.providersInfo.find(config => config.type === type); if (type !== null) {
this.providerDescription = this.translate.instant(this.providersData.get(providerConfig.type).description, { const providerConfig = this.providersInfo.find(config => config.type === type);
contact: providerConfig.contact this.providerDescription = this.translate.instant(this.providersData.get(providerConfig.type).description, {
}); contact: providerConfig.contact
if (type !== TwoFactorAuthProviderType.TOTP && type !== null) { });
this.sendCode(); if (type !== TwoFactorAuthProviderType.TOTP) {
this.sendCode();
}
} }
} }
@ -104,6 +108,11 @@ export class TwoFactorAuthLoginComponent extends PageComponent implements OnInit
} }
cancelLogin() { cancelLogin() {
this.authService.logout(); if (this.prevProvider) {
this.selectedProvider = this.prevProvider;
this.prevProvider = null;
} else {
this.authService.logout();
}
} }
} }