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

UI: Refactoring

pull/6235/head
Vladyslav_Prykhodko 4 years ago
parent
57924394db
commit
ebcfa52e8d
5 changed files with 160 additions and 68 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. 181
      ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
  2. 8
      ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.scss
  3. 8
      ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts
  4. 8
      ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.scss
  5. 23
      ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.ts

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();
}
}
}

Write Preview
Loading…
Cancel
Save