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
708b7038d4
commit
0e32206bd4
8 changed files with 90 additions and 90 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. 141
      ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
  2. 5
      ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.scss
  3. 4
      ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts
  4. 10
      ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
  5. 7
      ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
  6. 5
      ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
  7. 4
      ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
  8. 4
      ui-ngx/src/assets/locale/locale.constant-en_US.json

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

@ -31,6 +31,75 @@
<form [formGroup]="twoFaFormGroup" (ngSubmit)="save()">
<fieldset [disabled]="isLoading$ | async">
<ng-container>
<fieldset class="fields-group" formArrayName="providers">
<legend class="group-title" translate>admin.2fa.available-providers</legend>
<ng-container *ngFor="let provider of providersForm.controls; let i = index; let $last = last; trackBy: trackByElement">
<mat-expansion-panel class="provider" [formGroupName]="i">
<mat-expansion-panel-header>
<mat-panel-title fxLayoutAlign="start center">
<mat-slide-toggle
(click)="toggleProviders($event, i)"
formControlName="enable">
</mat-slide-toggle>
{{ provider.value.providerType }}
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<ng-container [ngSwitch]="provider.get('providerType').value">
<ng-container *ngSwitchCase="twoFactorAuthProviderType.TOTP">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.issuer-name</mat-label>
<input matInput formControlName="issuerName" required>
<mat-error *ngIf="provider.get('issuerName').hasError('required')">
{{ "admin.2fa.issuer-name-required" | translate }}
</mat-error>
</mat-form-field>
</ng-container>
<div *ngSwitchCase="twoFactorAuthProviderType.SMS"
fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.verification-message-template</mat-label>
<input matInput formControlName="smsVerificationMessageTemplate" required>
<mat-error *ngIf="provider.get('smsVerificationMessageTemplate').hasError('required')">
{{ "admin.2fa.verification-message-template-required" | translate }}
</mat-error>
<mat-error *ngIf="provider.get('smsVerificationMessageTemplate').hasError('pattern')">
{{ "admin.2fa.verification-message-template-pattern" | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.verification-code-lifetime</mat-label>
<input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required>
<mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')">
{{ "admin.2fa.verification-code-lifetime-required" | translate }}
</mat-error>
<mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('min') ||
provider.get('verificationCodeLifetime').hasError('pattern')">
{{ "admin.2fa.verification-code-lifetime-pattern" | translate }}
</mat-error>
</mat-form-field>
</div>
<div *ngSwitchCase="twoFactorAuthProviderType.EMAIL">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.verification-code-lifetime</mat-label>
<input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required>
<mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')">
{{ "admin.2fa.verification-code-lifetime-required" | translate }}
</mat-error>
<mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('min') ||
provider.get('verificationCodeLifetime').hasError('pattern')">
{{ "admin.2fa.verification-code-lifetime-pattern" | translate }}
</mat-error>
</mat-form-field>
</div>
</ng-container>
</ng-template>
</mat-expansion-panel>
<mat-divider *ngIf="!$last"></mat-divider>
</ng-container>
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>admin.2fa.verification-limitations</legend>
<div class="input-row" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
@ -99,8 +168,7 @@
<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)"
<mat-slide-toggle (click)="toggleExtensionPanel($event, 1, twoFaFormGroup.get('verificationCodeCheckRateLimitEnable').value)"
formControlName="verificationCodeCheckRateLimitEnable">
</mat-slide-toggle>
{{ 'admin.2fa.verification-code-check-rate-limit' | translate }}
@ -134,75 +202,6 @@
</ng-template>
</mat-expansion-panel>
</fieldset>
<fieldset class="fields-group" formArrayName="providers">
<legend class="group-title" translate>admin.2fa.available-providers</legend>
<ng-container *ngFor="let provider of providersForm.controls; let i = index; let $last = last; trackBy: trackByElement">
<mat-expansion-panel class="provider" [formGroupName]="i">
<mat-expansion-panel-header>
<mat-panel-title fxLayoutAlign="start center">
<mat-slide-toggle
(click)="toggleProviders($event, i)"
formControlName="enable">
</mat-slide-toggle>
{{ provider.value.providerType }}
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<ng-container [ngSwitch]="provider.get('providerType').value">
<ng-container *ngSwitchCase="twoFactorAuthProviderType.TOTP">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.issuer-name</mat-label>
<input matInput formControlName="issuerName" required>
<mat-error *ngIf="provider.get('issuerName').hasError('required')">
{{ "admin.2fa.issuer-name-required" | translate }}
</mat-error>
</mat-form-field>
</ng-container>
<div *ngSwitchCase="twoFactorAuthProviderType.SMS"
fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.verification-message-template</mat-label>
<input matInput formControlName="smsVerificationMessageTemplate" required>
<mat-error *ngIf="provider.get('smsVerificationMessageTemplate').hasError('required')">
{{ "admin.2fa.verification-message-template-required" | translate }}
</mat-error>
<mat-error *ngIf="provider.get('smsVerificationMessageTemplate').hasError('pattern')">
{{ "admin.2fa.verification-message-template-pattern" | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.verification-code-lifetime</mat-label>
<input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required>
<mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')">
{{ "admin.2fa.verification-code-lifetime-required" | translate }}
</mat-error>
<mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('min') ||
provider.get('verificationCodeLifetime').hasError('pattern')">
{{ "admin.2fa.verification-code-lifetime-pattern" | translate }}
</mat-error>
</mat-form-field>
</div>
<div *ngSwitchCase="twoFactorAuthProviderType.EMAIL">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.2fa.verification-code-lifetime</mat-label>
<input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required>
<mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')">
{{ "admin.2fa.verification-code-lifetime-required" | translate }}
</mat-error>
<mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('min') ||
provider.get('verificationCodeLifetime').hasError('pattern')">
{{ "admin.2fa.verification-code-lifetime-pattern" | translate }}
</mat-error>
</mat-form-field>
</div>
</ng-container>
</ng-template>
</mat-expansion-panel>
<mat-divider *ngIf="!$last"></mat-divider>
</ng-container>
</fieldset>
<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
<button mat-button mat-raised-button color="primary"
[disabled]="(isLoading$ | async) || twoFaFormGroup.invalid || !twoFaFormGroup.dirty"

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

@ -36,11 +36,6 @@
&:last-of-type {
margin-bottom: 24px;
}
.rate-limit-toggle {
display: block;
margin-bottom: 8px;
}
}
.mat-expansion-panel {

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

@ -203,9 +203,9 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI
formControlConfig.issuerName = [{value: 'ThingsBoard', disabled: true}, Validators.required];
break;
case TwoFactorAuthProviderType.SMS:
formControlConfig.smsVerificationMessageTemplate = [{value: 'Verification code: ${verificationCode}', disabled: true}, [
formControlConfig.smsVerificationMessageTemplate = [{value: 'Verification code: ${сode}', disabled: true}, [
Validators.required,
Validators.pattern(/\${verificationCode}/)
Validators.pattern(/\${сode}/)
]];
formControlConfig.verificationCodeLifetime = [{value: 120, disabled: true}, [
Validators.required,

10
ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
View File

@ -36,10 +36,11 @@
<ng-template matStepLabel>{{ 'security.2fa.dialog.email-step-label' | translate }}</ng-template>
<form [formGroup]="emailConfigForm" (ngSubmit)="nextStep()">
<p class="mat-body step-description input" translate>security.2fa.dialog.email-step-description</p>
<div fxLayout="row" fxLayoutAlign="space-between center">
<div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="8px">
<mat-form-field fxFlex class="mat-block input-container" hideRequiredMarker floatLabel="always">
<mat-label></mat-label>
<input matInput formControlName="email" required
<input matInput formControlName="email"
type="email" required
placeholder="{{ 'security.2fa.dialog.email-step-label' | translate }}" />
<mat-error *ngIf="emailConfigForm.get('email').hasError('required')">
{{ 'user.email-required' | translate }}
@ -67,8 +68,9 @@
<mat-form-field fxFlex class="mat-block code-container" hideRequiredMarker floatLabel="always">
<mat-label></mat-label>
<input matInput formControlName="verificationCode"
maxlength="6" type="text"
pattern="\d*" required
maxlength="6" type="text" required
inputmode="numeric" pattern="[0-9]*"
autocomplete="off"
placeholder="{{ 'security.2fa.dialog.verification-code' | translate }}">
<mat-error *ngIf="emailVerificationForm.get('verificationCode').invalid">
{{ 'security.2fa.dialog.verification-code-invalid' | translate }}

7
ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
View File

@ -66,12 +66,13 @@
<p class="mat-body step-description input">
{{ 'security.2fa.dialog.verification-step-description' | translate : {address: smsConfigForm.get('phone').value} }}
</p>
<div fxLayout="row" fxLayoutAlign="space-between center">
<div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="8px">
<mat-form-field fxFlex class="mat-block code-container" floatLabel="always" hideRequiredMarker>
<mat-label></mat-label>
<input matInput formControlName="verificationCode"
maxlength="6" type="text"
pattern="\d*" required
maxlength="6" type="text" required
inputmode="numeric" pattern="[0-9]*"
autocomplete="off"
placeholder="{{ 'security.2fa.dialog.verification-code' | translate }}">
<mat-error *ngIf="smsVerificationForm.get('verificationCode').invalid">
{{ 'security.2fa.dialog.verification-code-invalid' | translate }}

5
ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
View File

@ -56,8 +56,9 @@
<mat-form-field fxFlex class="mat-block code-container" floatLabel="always" hideRequiredMarker>
<mat-label></mat-label>
<input matInput formControlName="verificationCode"
maxlength="6" type="text"
pattern="\d*" required
maxlength="6" type="text" required
inputmode="numeric" pattern="[0-9]*"
autocomplete="off"
placeholder="{{ 'security.2fa.dialog.verification-code' | translate }}">
<mat-error *ngIf="totpConfigForm.get('verificationCode').invalid">
{{ 'security.2fa.dialog.verification-code-invalid' | translate }}

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

@ -42,7 +42,9 @@
<mat-form-field class="mat-block" fxFlex floatLabel="always" hideRequiredMarker>
<mat-label></mat-label>
<input matInput formControlName="verificationCode"
required maxlength="6" type="text" pattern="\d*"
required maxlength="6" type="text"
inputmode="numeric" pattern="[0-9]*"
autocomplete="off"
placeholder="{{ 'security.2fa.dialog.verification-code' | translate }}"/>
<mat-error *ngIf="verificationForm.get('verificationCode').invalid">
{{ 'security.2fa.dialog.verification-code-invalid' | translate }}

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

@ -338,7 +338,7 @@
"verification-code-send-rate-limit": "Verification code send rate limit",
"verification-message-template": "Verification message template",
"verification-limitations": "Verification limitations",
"verification-message-template-pattern": "Verification message need to contains pattern: ${verificationCode}",
"verification-message-template-pattern": "Verification message need to contains pattern: ${code}",
"verification-message-template-required": "Verification message template is required.",
"within-time": "Within time (sec)",
"within-time-pattern": "Time must be a positive integer.",
@ -2613,7 +2613,7 @@
"email-description": "Use a security code sent to your email address to authenticate.",
"sms": "SMS",
"sms-description": "Use your phone to authenticate. We'll send you a security code via SMS message when you log in.",
"totp": "Authentication app",
"totp": "Authenticator app",
"totp-description": "Use apps like Google Authenticator, Authy, or Duo on your phone to authenticate. It will generate a security code for logging in."
}
}

Write Preview
Loading…
Cancel
Save