Vladyslav_Prykhodko
4 years ago
30 changed files with 1088 additions and 626 deletions
@ -1,104 +0,0 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2022 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<mat-toolbar fxLayout="row" color="primary"> |
|||
<h2>Enable email authenticator</h2> |
|||
<span fxFlex></span> |
|||
<button mat-icon-button |
|||
(click)="closeDialog()" |
|||
type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-toolbar> |
|||
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> |
|||
</mat-progress-bar> |
|||
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> |
|||
<div mat-dialog-content style="padding: 0"> |
|||
<mat-stepper labelPosition="bottom" linear #stepper> |
|||
<ng-template matStepperIcon="edit"> |
|||
<mat-icon>done</mat-icon> |
|||
</ng-template> |
|||
<mat-step [stepControl]="emailConfigForm"> |
|||
<ng-template matStepLabel>Add email</ng-template> |
|||
<form [formGroup]="emailConfigForm" style="display: block"> |
|||
<mat-form-field class="mat-block" appearance="fill" style="max-width: 250px;"> |
|||
<mat-label translate>user.email</mat-label> |
|||
<input matInput formControlName="email" required/> |
|||
<mat-error *ngIf="emailConfigForm.get('email').hasError('required')"> |
|||
{{ 'user.email-required' | translate }} |
|||
</mat-error> |
|||
<mat-error *ngIf="emailConfigForm.get('email').hasError('email')"> |
|||
{{ 'user.invalid-email-format' | translate }} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
<div fxLayout="row" fxLayoutAlign="end center"> |
|||
<button mat-button |
|||
type="button" |
|||
[mat-dialog-close]="false"> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
<button mat-raised-button |
|||
type="button" |
|||
color="primary" |
|||
[disabled]="(isLoading$ | async) || emailConfigForm.invalid" |
|||
(click)="nextStep()"> |
|||
Send code |
|||
</button> |
|||
</div> |
|||
</form> |
|||
</mat-step> |
|||
<mat-step [stepControl]="emailVerificationForm"> |
|||
<ng-template matStepLabel>Authentication verification</ng-template> |
|||
<form [formGroup]="emailVerificationForm" style="display: block"> |
|||
<p class="mat-body-strong">Enter the 6-digit code here</p> |
|||
<p class="mat-body" style="max-width: 480px;">Enter the 6 digit verification code we just sent to {{ emailConfigForm.get('email').value }}.</p> |
|||
<mat-form-field class="mat-block" appearance="fill" style="max-width: 200px;"> |
|||
<mat-label>6-digit code</mat-label> |
|||
<input matInput formControlName="verificationCode" required maxlength="6" type="text" pattern="\d*"> |
|||
</mat-form-field> |
|||
<div fxLayout="row" fxLayoutAlign="end center"> |
|||
<button mat-button |
|||
type="button" |
|||
[mat-dialog-close]="false"> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
<button mat-raised-button |
|||
type="button" |
|||
color="primary" |
|||
[disabled]="(isLoading$ | async) || emailVerificationForm.invalid" |
|||
(click)="nextStep()"> |
|||
Activate |
|||
</button> |
|||
</div> |
|||
</form> |
|||
</mat-step> |
|||
<mat-step> |
|||
<ng-template matStepLabel matStepperIcon="done">Two-factor authentication activated</ng-template> |
|||
<div> |
|||
<h2 class="mat-h2">Email authentication enabled</h2> |
|||
<p class="mat-body" style="max-width: 480px;">If we notice an attempted login from a device or browser we don’t recognize, you will be prompted to enter the security code that will be sent to your email address.</p> |
|||
<div fxLayout="row" fxLayoutAlign="end center"> |
|||
<button mat-button |
|||
type="button" |
|||
[mat-dialog-close]="true"> |
|||
Done |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</mat-step> |
|||
</mat-stepper> |
|||
</div> |
|||
@ -1,105 +0,0 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2022 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<mat-toolbar fxLayout="row" color="primary"> |
|||
<h2>Enable SMS authenticator</h2> |
|||
<span fxFlex></span> |
|||
<button mat-icon-button |
|||
(click)="closeDialog()" |
|||
type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-toolbar> |
|||
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> |
|||
</mat-progress-bar> |
|||
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> |
|||
<div mat-dialog-content style="padding: 0"> |
|||
<mat-stepper labelPosition="bottom" linear #stepper> |
|||
<ng-template matStepperIcon="edit"> |
|||
<mat-icon>done</mat-icon> |
|||
</ng-template> |
|||
<mat-step [stepControl]="smsConfigForm"> |
|||
<ng-template matStepLabel>Add phone number</ng-template> |
|||
<form [formGroup]="smsConfigForm" style="display: block"> |
|||
<p class="mat-body-1">Enter the phone number including the area code.</p> |
|||
<mat-form-field class="mat-block" appearance="fill" style="max-width: 250px;"> |
|||
<mat-label>Phone number</mat-label> |
|||
<input type="tel" required [pattern]="phoneNumberPattern" matInput formControlName="phone"> |
|||
<mat-error *ngIf="smsConfigForm.get('phone').hasError('required')"> |
|||
{{ 'admin.number-to-required' | translate }} |
|||
</mat-error> |
|||
<mat-error *ngIf="smsConfigForm.get('phone').hasError('pattern')"> |
|||
{{ 'admin.phone-number-pattern' | translate }} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
<div fxLayout="row" fxLayoutAlign="end center"> |
|||
<button mat-button |
|||
type="button" |
|||
[mat-dialog-close]="false"> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
<button mat-raised-button |
|||
type="button" |
|||
color="primary" |
|||
[disabled]="(isLoading$ | async) || smsConfigForm.invalid" |
|||
(click)="nextStep()"> |
|||
Send code |
|||
</button> |
|||
</div> |
|||
</form> |
|||
</mat-step> |
|||
<mat-step [stepControl]="smsVerificationForm"> |
|||
<ng-template matStepLabel>Authentication verification</ng-template> |
|||
<form [formGroup]="smsVerificationForm" style="display: block"> |
|||
<p class="mat-body-strong">Enter the 6-digit code here</p> |
|||
<p class="mat-body" style="max-width: 480px;">Enter the 6 digit verification code we just sent to {{ smsConfigForm.get('phone').value }}.</p> |
|||
<mat-form-field class="mat-block" appearance="fill" style="max-width: 200px;"> |
|||
<mat-label>6-digit code</mat-label> |
|||
<input matInput formControlName="verificationCode" required maxlength="6" type="text" pattern="\d*"> |
|||
</mat-form-field> |
|||
<div fxLayout="row" fxLayoutAlign="end center"> |
|||
<button mat-button |
|||
type="button" |
|||
[mat-dialog-close]="false"> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
<button mat-raised-button |
|||
type="button" |
|||
color="primary" |
|||
[disabled]="(isLoading$ | async) || smsVerificationForm.invalid" |
|||
(click)="nextStep()"> |
|||
Activate |
|||
</button> |
|||
</div> |
|||
</form> |
|||
</mat-step> |
|||
<mat-step> |
|||
<ng-template matStepLabel matStepperIcon="done">Two-factor authentication activated</ng-template> |
|||
<div> |
|||
<h2 class="mat-h2">SMS authentication enabled</h2> |
|||
<p class="mat-body" style="max-width: 480px;">If we notice an attempted login from a device or browser we don’t recognize, you will be prompted to enter the security code that will be sent to the phone number.</p> |
|||
<div fxLayout="row" fxLayoutAlign="end center"> |
|||
<button mat-button |
|||
type="button" |
|||
[mat-dialog-close]="true"> |
|||
Done |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</mat-step> |
|||
</mat-stepper> |
|||
</div> |
|||
@ -1,15 +0,0 @@ |
|||
/** |
|||
* Copyright © 2016-2022 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
@ -1,97 +0,0 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2022 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<mat-toolbar fxLayout="row" color="primary"> |
|||
<h2>Enable authenticator app</h2> |
|||
<span fxFlex></span> |
|||
<button mat-icon-button |
|||
(click)="closeDialog()" |
|||
type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-toolbar> |
|||
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> |
|||
</mat-progress-bar> |
|||
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> |
|||
<div mat-dialog-content style="padding: 0"> |
|||
<mat-stepper labelPosition="bottom" linear #stepper> |
|||
<ng-template matStepperIcon="edit"> |
|||
<mat-icon>done</mat-icon> |
|||
</ng-template> |
|||
<mat-step> |
|||
<ng-template matStepLabel>Get app</ng-template> |
|||
<div> |
|||
<p class="mat-body-1">You'll need to use a verification app such as Google Authenticator, Authy, or Duo. Install from your app store</p> |
|||
<div fxLayout="row" fxLayoutAlign="end center"> |
|||
<button mat-button |
|||
type="button" |
|||
[mat-dialog-close]="false"> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
<button mat-raised-button |
|||
type="button" |
|||
color="primary" |
|||
matStepperNext> |
|||
Next |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</mat-step> |
|||
<mat-step [stepControl]="totpConfigForm"> |
|||
<ng-template matStepLabel>Authentication verification</ng-template> |
|||
<form [formGroup]="totpConfigForm" style="display: block"> |
|||
<p class="mat-body-strong">1. Scan this QR code with your verification app</p> |
|||
<p class="mat-body" style="margin-bottom: 8px">Once your app reads the QR code, you'll get a 6-digit code.</p> |
|||
<canvas fxFlex #canvas [ngStyle]="{display: totpAuthURL ? 'block' : 'none'}"></canvas> |
|||
<p class="mat-body-strong">2. Enter the 6-digit code here</p> |
|||
<p class="mat-body" style="max-width: 480px;">Enter the code from the app below. Once connected, we'll remember your phone so you can use it each time you log in.</p> |
|||
<mat-form-field class="mat-block" appearance="fill" style="max-width: 200px;"> |
|||
<mat-label>6-digit code</mat-label> |
|||
<input matInput formControlName="verificationCode" required maxlength="6" type="text" pattern="\d*"> |
|||
</mat-form-field> |
|||
<div fxLayout="row" fxLayoutAlign="end center"> |
|||
<button mat-button |
|||
type="button" |
|||
[mat-dialog-close]="false"> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
<button mat-raised-button |
|||
type="button" |
|||
color="primary" |
|||
[disabled]="(isLoading$ | async) || totpConfigForm.invalid" |
|||
(click)="onSaveConfig()"> |
|||
Next |
|||
</button> |
|||
</div> |
|||
</form> |
|||
</mat-step> |
|||
<mat-step> |
|||
<ng-template matStepLabel matStepperIcon="done">Two-factor authentication activated</ng-template> |
|||
<div> |
|||
<h2 class="mat-h2">Success</h2> |
|||
<p class="mat-body" style="max-width: 480px;">The next time you login from an unrecognized browser or device, you will need to provide a two-factor authentication code.</p> |
|||
<div fxLayout="row" fxLayoutAlign="end center"> |
|||
<button mat-button |
|||
type="button" |
|||
[mat-dialog-close]="true"> |
|||
Done |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</mat-step> |
|||
</mat-stepper> |
|||
</div> |
|||
@ -1,15 +0,0 @@ |
|||
/** |
|||
* Copyright © 2016-2022 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
@ -0,0 +1,77 @@ |
|||
/** |
|||
* Copyright © 2016-2022 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
:host{ |
|||
.mat-toolbar > h2 { |
|||
font-weight: 400; |
|||
letter-spacing: 0.25px; |
|||
} |
|||
|
|||
form { |
|||
display: block; |
|||
} |
|||
|
|||
.mat-body-1 { |
|||
margin-bottom: 0; |
|||
letter-spacing: 0.25px; |
|||
|
|||
&:not(:first-of-type) { |
|||
margin: 0 0 8px; |
|||
} |
|||
} |
|||
|
|||
.input-container { |
|||
max-width: 290px; |
|||
} |
|||
|
|||
.code-container { |
|||
max-width: 170px; |
|||
} |
|||
|
|||
.result-title { |
|||
font: 500 18px / 24px Roboto, "Helvetica Neue", sans-serif; |
|||
letter-spacing: 0.1px; |
|||
margin: 8px 0; |
|||
text-align: center; |
|||
} |
|||
|
|||
.result-description { |
|||
text-align: center; |
|||
margin: 0 0 16px; |
|||
letter-spacing: 0.25px; |
|||
max-width: 500px; |
|||
} |
|||
|
|||
.step-description { |
|||
max-width: 450px; |
|||
&.input { |
|||
margin: 12px 0 0; |
|||
} |
|||
} |
|||
|
|||
.qr-code-description { |
|||
text-align: center; |
|||
max-width: 180px; |
|||
letter-spacing: 0.25px; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
& ::ng-deep { |
|||
.mat-horizontal-stepper-header{ |
|||
pointer-events: none !important; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,29 @@ |
|||
///
|
|||
/// Copyright © 2016-2022 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Type } from '@angular/core'; |
|||
import { TwoFactorAuthProviderType } from '@shared/models/two-factor-auth.models'; |
|||
import { TotpAuthDialogComponent } from './totp-auth-dialog.component'; |
|||
import { SMSAuthDialogComponent } from './sms-auth-dialog.component'; |
|||
import { EmailAuthDialogComponent } from './email-auth-dialog.component'; |
|||
|
|||
export const authenticationDialogMap = new Map<TwoFactorAuthProviderType, Type<any>>( |
|||
[ |
|||
[TwoFactorAuthProviderType.TOTP, TotpAuthDialogComponent], |
|||
[TwoFactorAuthProviderType.SMS, SMSAuthDialogComponent], |
|||
[TwoFactorAuthProviderType.EMAIL, EmailAuthDialogComponent] |
|||
] |
|||
); |
|||
@ -0,0 +1,102 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2022 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<mat-toolbar fxLayout="row" color="primary"> |
|||
<h2 translate>security.2fa.dialog.enable-email-title</h2> |
|||
<span fxFlex></span> |
|||
<button mat-icon-button |
|||
(click)="closeDialog()" |
|||
type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-toolbar> |
|||
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> |
|||
</mat-progress-bar> |
|||
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> |
|||
<div mat-dialog-content tb-toast style="padding: 0"> |
|||
<mat-stepper [linear]="true" #stepper> |
|||
<ng-template matStepperIcon="edit"> |
|||
<mat-icon>done</mat-icon> |
|||
</ng-template> |
|||
<mat-step [stepControl]="emailConfigForm"> |
|||
<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"> |
|||
<mat-form-field fxFlex class="mat-block input-container" floatLabel="always"> |
|||
<mat-label></mat-label> |
|||
<input matInput formControlName="email" |
|||
placeholder="{{ 'security.2fa.dialog.email-step-label' | translate }}" /> |
|||
<mat-error *ngIf="emailConfigForm.get('email').hasError('required')"> |
|||
{{ 'user.email-required' | translate }} |
|||
</mat-error> |
|||
<mat-error *ngIf="emailConfigForm.get('email').hasError('email')"> |
|||
{{ 'user.invalid-email-format' | translate }} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
<button mat-raised-button |
|||
type="submit" |
|||
color="primary" |
|||
[disabled]="(isLoading$ | async) || emailConfigForm.invalid"> |
|||
{{ 'security.2fa.dialog.send-code' | translate }} |
|||
</button> |
|||
</div> |
|||
</form> |
|||
</mat-step> |
|||
<mat-step [stepControl]="emailVerificationForm"> |
|||
<ng-template matStepLabel>{{ 'security.2fa.dialog.verification-step-label' | translate }}</ng-template> |
|||
<form [formGroup]="emailVerificationForm" (ngSubmit)="nextStep()"> |
|||
<p class="mat-body step-description input"> |
|||
{{ 'security.2fa.dialog.verification-step-description' | translate : {address: emailConfigForm.get('email').value} }} |
|||
</p> |
|||
<div fxLayout="row" fxLayoutAlign="space-between center"> |
|||
<mat-form-field fxFlex class="mat-block code-container" floatLabel="always"> |
|||
<mat-label></mat-label> |
|||
<input matInput formControlName="verificationCode" |
|||
maxlength="6" type="text" |
|||
pattern="\d*" |
|||
placeholder="{{ 'security.2fa.dialog.verification-code' | translate }}"> |
|||
<mat-error *ngIf="emailVerificationForm.get('verificationCode').invalid"> |
|||
{{ 'security.2fa.dialog.verification-code-invalid' | translate }} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
<button mat-raised-button |
|||
type="submit" |
|||
color="primary" |
|||
[disabled]="(isLoading$ | async) || emailVerificationForm.invalid"> |
|||
{{ 'security.2fa.dialog.activate' | translate }} |
|||
</button> |
|||
</div> |
|||
</form> |
|||
</mat-step> |
|||
<mat-step> |
|||
<ng-template matStepLabel matStepperIcon="done">{{ 'security.2fa.dialog.activation-step-label' | translate }}</ng-template> |
|||
<div> |
|||
<h3 class="result-title" translate>security.2fa.dialog.success</h3> |
|||
<p class="mat-body result-description" translate>security.2fa.dialog.activation-step-description-email</p> |
|||
<div fxLayout="row" fxLayoutAlign="end center"> |
|||
<button mat-raised-button |
|||
type="button" |
|||
color="primary" |
|||
[mat-dialog-close]="true"> |
|||
{{ 'import.stepper-text.done' | translate }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</mat-step> |
|||
</mat-stepper> |
|||
</div> |
|||
@ -0,0 +1,105 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2022 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<mat-toolbar fxLayout="row" color="primary"> |
|||
<h2 translate>security.2fa.dialog.enable-sms-title</h2> |
|||
<span fxFlex></span> |
|||
<button mat-icon-button |
|||
(click)="closeDialog()" |
|||
type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-toolbar> |
|||
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> |
|||
</mat-progress-bar> |
|||
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> |
|||
<div mat-dialog-content tb-toast style="padding: 0"> |
|||
<mat-stepper linear #stepper> |
|||
<ng-template matStepperIcon="edit"> |
|||
<mat-icon>done</mat-icon> |
|||
</ng-template> |
|||
<mat-step [stepControl]="smsConfigForm"> |
|||
<ng-template matStepLabel>{{ 'security.2fa.dialog.sms-step-label' | translate }}</ng-template> |
|||
<form [formGroup]="smsConfigForm" (ngSubmit)="nextStep()"> |
|||
<p class="mat-body step-description input" translate>security.2fa.dialog.sms-step-description</p> |
|||
<div fxLayout="row" fxLayoutAlign="space-between center"> |
|||
<mat-form-field fxFlex class="mat-block input-container" floatLabel="always"> |
|||
<mat-label></mat-label> |
|||
<input type="tel" |
|||
[pattern]="phoneNumberPattern" |
|||
matInput formControlName="phone" |
|||
placeholder="{{ 'security.2fa.dialog.sms-step-label' | translate }}"> |
|||
<mat-error *ngIf="smsConfigForm.get('phone').hasError('required')"> |
|||
{{ 'admin.number-to-required' | translate }} |
|||
</mat-error> |
|||
<mat-error *ngIf="smsConfigForm.get('phone').hasError('pattern')"> |
|||
{{ 'admin.phone-number-pattern' | translate }} |
|||
</mat-error> |
|||
<mat-hint innerHTML="{{ 'admin.phone-number-hint' | translate }}"></mat-hint> |
|||
</mat-form-field> |
|||
<button mat-raised-button |
|||
type="submit" |
|||
color="primary" |
|||
[disabled]="(isLoading$ | async) || smsConfigForm.invalid"> |
|||
{{ 'security.2fa.dialog.send-code' | translate }} |
|||
</button> |
|||
</div> |
|||
</form> |
|||
</mat-step> |
|||
<mat-step [stepControl]="smsVerificationForm"> |
|||
<ng-template matStepLabel>{{ 'security.2fa.dialog.verification-step-label' | translate }}</ng-template> |
|||
<form [formGroup]="smsVerificationForm" (ngSubmit)="nextStep()"> |
|||
<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"> |
|||
<mat-form-field fxFlex class="mat-block code-container" floatLabel="always"> |
|||
<mat-label></mat-label> |
|||
<input matInput formControlName="verificationCode" |
|||
maxlength="6" type="text" |
|||
pattern="\d*" |
|||
placeholder="{{ 'security.2fa.dialog.verification-code' | translate }}"> |
|||
<mat-error *ngIf="smsVerificationForm.get('verificationCode').invalid"> |
|||
{{ 'security.2fa.dialog.verification-code-invalid' | translate }} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
<button mat-raised-button |
|||
type="submit" |
|||
color="primary" |
|||
[disabled]="(isLoading$ | async) || smsVerificationForm.invalid"> |
|||
{{ 'security.2fa.dialog.activate' | translate }} |
|||
</button> |
|||
</div> |
|||
</form> |
|||
</mat-step> |
|||
<mat-step> |
|||
<ng-template matStepLabel matStepperIcon="done">{{ 'security.2fa.dialog.activation-step-label' | translate }}</ng-template> |
|||
<div> |
|||
<h3 class="result-title" translate>security.2fa.dialog.success</h3> |
|||
<p class="mat-body result-description" translate>security.2fa.dialog.activation-step-description-sms</p> |
|||
<div fxLayout="row" fxLayoutAlign="end center"> |
|||
<button mat-raised-button |
|||
type="button" |
|||
color="primary" |
|||
[mat-dialog-close]="true"> |
|||
{{ 'import.stepper-text.done' | translate }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</mat-step> |
|||
</mat-stepper> |
|||
</div> |
|||
@ -0,0 +1,92 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2022 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<mat-toolbar fxLayout="row" color="primary"> |
|||
<h2 translate>security.2fa.dialog.enable-totp-title</h2> |
|||
<span fxFlex></span> |
|||
<button mat-icon-button |
|||
(click)="closeDialog()" |
|||
type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-toolbar> |
|||
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> |
|||
</mat-progress-bar> |
|||
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> |
|||
<div mat-dialog-content tb-toast style="padding: 0"> |
|||
<mat-stepper linear #stepper> |
|||
<ng-template matStepperIcon="edit"> |
|||
<mat-icon>done</mat-icon> |
|||
</ng-template> |
|||
<mat-step> |
|||
<ng-template matStepLabel>{{ 'security.2fa.dialog.totp-step-label' | translate }}</ng-template> |
|||
<div> |
|||
<p class="mat-body-1" translate>security.2fa.dialog.totp-step-description-open</p> |
|||
<p class="mat-body-1" translate>security.2fa.dialog.totp-step-description-install</p> |
|||
<div fxLayout="row" fxLayoutAlign="end center"> |
|||
<button mat-raised-button |
|||
type="button" |
|||
color="primary" |
|||
matStepperNext> |
|||
{{ 'security.2fa.dialog.next' | translate }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</mat-step> |
|||
<mat-step [stepControl]="totpConfigForm"> |
|||
<ng-template matStepLabel>{{ 'security.2fa.dialog.verification-step-label' | translate }}</ng-template> |
|||
<form [formGroup]="totpConfigForm" fxLayoutAlign="start center" fxLayout="column" (ngSubmit)="onSaveConfig()"> |
|||
<p class="mat-body qr-code-description" translate>security.2fa.dialog.scan-qr-code</p> |
|||
<canvas fxFlex #canvas [ngStyle]="{display: totpAuthURL ? 'block' : 'none'}"></canvas> |
|||
<p class="mat-body qr-code-description" style="margin-top: 30px;" translate>security.2fa.dialog.enter-verification-code</p> |
|||
<mat-form-field fxFlex class="mat-block code-container" floatLabel="always"> |
|||
<mat-label></mat-label> |
|||
<input matInput formControlName="verificationCode" |
|||
maxlength="6" type="text" |
|||
pattern="\d*" |
|||
placeholder="{{ 'security.2fa.dialog.verification-code' | translate }}"> |
|||
<mat-error *ngIf="totpConfigForm.get('verificationCode').invalid"> |
|||
{{ 'security.2fa.dialog.verification-code-invalid' | translate }} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
</form> |
|||
<div fxLayout="row" fxLayoutAlign="end center"> |
|||
<button mat-raised-button |
|||
type="submit" |
|||
color="primary" |
|||
[disabled]="(isLoading$ | async) || totpConfigForm.invalid"> |
|||
{{ 'security.2fa.dialog.next' | translate }} |
|||
</button> |
|||
</div> |
|||
</mat-step> |
|||
<mat-step> |
|||
<ng-template matStepLabel matStepperIcon="done">{{ 'security.2fa.dialog.activation-step-label' | translate }}</ng-template> |
|||
<div> |
|||
<h3 class="result-title" translate>security.2fa.dialog.success</h3> |
|||
<p class="mat-body result-description" translate>security.2fa.dialog.activation-step-description-totp</p> |
|||
<div fxLayout="row" fxLayoutAlign="end center"> |
|||
<button mat-raised-button |
|||
type="button" |
|||
color="primary" |
|||
[mat-dialog-close]="true"> |
|||
{{ 'import.stepper-text.done' | translate }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</mat-step> |
|||
</mat-stepper> |
|||
</div> |
|||
@ -0,0 +1,84 @@ |
|||
///
|
|||
/// Copyright © 2016-2022 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Injectable, NgModule } from '@angular/core'; |
|||
import { Resolve, RouterModule, Routes } from '@angular/router'; |
|||
|
|||
import { SecurityComponent } from './security.component'; |
|||
import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard'; |
|||
import { Authority } from '@shared/models/authority.enum'; |
|||
import { User } from '@shared/models/user.model'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { UserService } from '@core/http/user.service'; |
|||
import { getCurrentAuthUser } from '@core/auth/auth.selectors'; |
|||
import { Observable } from 'rxjs'; |
|||
import { TwoFactorAuthProviderType } from '@shared/models/two-factor-auth.models'; |
|||
import { TwoFactorAuthenticationService } from '@core/http/two-factor-authentication.service'; |
|||
|
|||
@Injectable() |
|||
export class UserProfileResolver implements Resolve<User> { |
|||
|
|||
constructor(private store: Store<AppState>, |
|||
private userService: UserService) { |
|||
} |
|||
|
|||
resolve(): Observable<User> { |
|||
const userId = getCurrentAuthUser(this.store).userId; |
|||
return this.userService.getUser(userId); |
|||
} |
|||
} |
|||
|
|||
@Injectable() |
|||
export class UserTwoFAProvidersResolver implements Resolve<Array<TwoFactorAuthProviderType>> { |
|||
|
|||
constructor(private twoFactorAuthService: TwoFactorAuthenticationService) { |
|||
} |
|||
|
|||
resolve(): Observable<Array<TwoFactorAuthProviderType>> { |
|||
return this.twoFactorAuthService.getAvailableTwoFaProviders(); |
|||
} |
|||
} |
|||
|
|||
const routes: Routes = [ |
|||
{ |
|||
path: 'security', |
|||
component: SecurityComponent, |
|||
canDeactivate: [ConfirmOnExitGuard], |
|||
data: { |
|||
auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN, Authority.CUSTOMER_USER], |
|||
title: 'security.security', |
|||
breadcrumb: { |
|||
label: 'security.security', |
|||
icon: 'lock' |
|||
} |
|||
}, |
|||
resolve: { |
|||
user: UserProfileResolver, |
|||
providers: UserTwoFAProvidersResolver |
|||
} |
|||
} |
|||
]; |
|||
|
|||
@NgModule({ |
|||
imports: [RouterModule.forChild(routes)], |
|||
exports: [RouterModule], |
|||
providers: [ |
|||
UserProfileResolver, |
|||
UserTwoFAProvidersResolver |
|||
] |
|||
}) |
|||
export class SecurityRoutingModule { } |
|||
@ -0,0 +1,80 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2022 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div class="profile-container" fxLayout="column" fxLayoutGap="8px"> |
|||
<mat-card class="profile-card" fxLayout="column"> |
|||
<mat-card-title> |
|||
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="8px" |
|||
fxLayoutAlign="space-between start" fxLayoutAlign.xs="start start"> |
|||
<div fxFlex class="mat-headline" translate> |
|||
security.security |
|||
</div> |
|||
<div fxLayout="column"> |
|||
<span class="mat-subheader" translate>profile.last-login-time</span> |
|||
<span class="profile-last-login-ts" style='opacity: 0.7;'>{{ user?.additionalInfo?.lastLoginTs | date:'yyyy-MM-dd HH:mm:ss' }}</span> |
|||
</div> |
|||
</div> |
|||
</mat-card-title> |
|||
<mat-card-content> |
|||
<div> |
|||
<button mat-stroked-button |
|||
color="primary" |
|||
type="button" |
|||
(click)="copyToken()"> |
|||
<mat-icon class="material-icons">add_circle_outline</mat-icon> |
|||
<span>{{ 'profile.copy-jwt-token' | translate }}</span> |
|||
</button> |
|||
<div class="profile-btn-subtext">{{ expirationJwtData }}</div> |
|||
</div> |
|||
</mat-card-content> |
|||
</mat-card> |
|||
<mat-card class="profile-card" *ngIf="allowTwoFactorProviders.length"> |
|||
<mat-card-title style="margin-bottom: 20px;"> |
|||
<span class="mat-headline" translate>admin.2fa.2fa</span> |
|||
</mat-card-title> |
|||
<mat-card-subtitle style="margin-bottom: 40px;"> |
|||
<div class="mat-body-1 description" translate>security.2fa.2fa-description</div> |
|||
</mat-card-subtitle> |
|||
<mat-card-content> |
|||
<h3 class="mat-h3 auth-title" translate>security.2fa.authenticate-with</h3> |
|||
<form [formGroup]="twoFactorAuth"> |
|||
<fieldset [disabled]="isLoading$ | async"> |
|||
<mat-radio-group formControlName="useByDefault"> |
|||
<ng-container *ngFor="let provider of allowTwoFactorProviders; let $last = last; trackBy: trackByProvider"> |
|||
<div class="provider"> |
|||
<h4 class="provider-title">{{ providersData.get(provider).name | translate }}</h4> |
|||
<div fxLayout="row" fxLayoutAlign="space-between start"> |
|||
<div class="mat-body-1 description"> |
|||
{{ providersData.get(provider).description | translate }} |
|||
</div> |
|||
<mat-slide-toggle [formControlName]="provider" |
|||
(click)="confirm2FAChange($event, provider)"> |
|||
</mat-slide-toggle> |
|||
</div> |
|||
<mat-radio-button [value]="provider" |
|||
*ngIf="twoFactorAuth.get(provider).value"> |
|||
<span class="checkbox-label" translate>security.2fa.main-2fa-method</span> |
|||
</mat-radio-button> |
|||
</div> |
|||
<mat-divider *ngIf="!$last"></mat-divider> |
|||
</ng-container> |
|||
</mat-radio-group> |
|||
</fieldset> |
|||
</form> |
|||
</mat-card-content> |
|||
</mat-card> |
|||
</div> |
|||
@ -0,0 +1,115 @@ |
|||
/** |
|||
* Copyright © 2016-2022 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
@import "../../../../../scss/constants"; |
|||
|
|||
:host { |
|||
.profile-container { |
|||
padding: 8px; |
|||
} |
|||
mat-card.profile-card { |
|||
@media #{$mat-gt-sm} { |
|||
width: 70%; |
|||
} |
|||
@media #{$mat-gt-md} { |
|||
width: 50%; |
|||
} |
|||
@media #{$mat-gt-xl} { |
|||
width: 45%; |
|||
} |
|||
.title-container { |
|||
margin: 0; |
|||
} |
|||
.profile-email { |
|||
font-size: 16px; |
|||
font-weight: 400; |
|||
} |
|||
.mat-subheader { |
|||
line-height: 24px; |
|||
color: rgba(0,0,0,0.54); |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
} |
|||
.profile-last-login-ts { |
|||
font-size: 16px; |
|||
font-weight: 400; |
|||
} |
|||
.profile-btn-subtext { |
|||
font: 400 14px / 16px Roboto, "Helvetica Neue", sans-serif; |
|||
letter-spacing: 0.25px; |
|||
opacity: 0.6; |
|||
padding: 8px 0; |
|||
} |
|||
.tb-home-dashboard { |
|||
tb-dashboard-autocomplete { |
|||
@media #{$mat-gt-sm} { |
|||
padding-right: 12px; |
|||
} |
|||
|
|||
@media #{$mat-lt-md} { |
|||
padding-bottom: 12px; |
|||
} |
|||
} |
|||
mat-checkbox { |
|||
@media #{$mat-gt-sm} { |
|||
margin-top: 16px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.description { |
|||
color: rgba(0, 0, 0, 0.54); |
|||
letter-spacing: 0.25px; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.auth-title { |
|||
font-weight: 500; |
|||
line-height: 20px; |
|||
letter-spacing: 0.25px; |
|||
margin: 0; |
|||
} |
|||
|
|||
.mat-divider-horizontal { |
|||
left: 16px; |
|||
right: 16px; |
|||
width: auto; |
|||
} |
|||
|
|||
.provider { |
|||
padding: 24px 0; |
|||
|
|||
.provider-title { |
|||
font: 400 14px / 16px Roboto, "Helvetica Neue", sans-serif; |
|||
letter-spacing: 0.25px; |
|||
margin: 0 0 8px; |
|||
} |
|||
|
|||
.description { |
|||
max-width: 85%; |
|||
} |
|||
|
|||
.checkbox-label { |
|||
font-size: 14px; |
|||
letter-spacing: 0.25px; |
|||
opacity: 0.87; |
|||
} |
|||
|
|||
.mat-radio-button { |
|||
margin-top: 8px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,171 @@ |
|||
///
|
|||
/// Copyright © 2016-2022 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, OnInit } from '@angular/core'; |
|||
import { User } from '@shared/models/user.model'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { FormBuilder, FormGroup } from '@angular/forms'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { MatDialog } from '@angular/material/dialog'; |
|||
import { DialogService } from '@core/services/dialog.service'; |
|||
import { ActivatedRoute } from '@angular/router'; |
|||
import { ActionNotificationShow } from '@core/notification/notification.actions'; |
|||
import { DatePipe } from '@angular/common'; |
|||
import { ClipboardService } from 'ngx-clipboard'; |
|||
import { TwoFactorAuthenticationService } from '@core/http/two-factor-authentication.service'; |
|||
import { |
|||
AccountTwoFaSettings, |
|||
twoFactorAuthProvidersData, |
|||
TwoFactorAuthProviderType |
|||
} from '@shared/models/two-factor-auth.models'; |
|||
import { authenticationDialogMap } from '@home/pages/security/authentication-dialog/authentication-dialog.map'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-security', |
|||
templateUrl: './security.component.html', |
|||
styleUrls: ['./security.component.scss'] |
|||
}) |
|||
export class SecurityComponent extends PageComponent implements OnInit { |
|||
|
|||
twoFactorAuth: FormGroup; |
|||
user: User; |
|||
allowTwoFactorProviders: TwoFactorAuthProviderType[] = []; |
|||
providersData = twoFactorAuthProvidersData; |
|||
|
|||
get jwtToken(): string { |
|||
return `Bearer ${localStorage.getItem('jwt_token')}`; |
|||
} |
|||
|
|||
get jwtTokenExpiration(): string { |
|||
return localStorage.getItem('jwt_token_expiration'); |
|||
} |
|||
|
|||
get expirationJwtData(): string { |
|||
const expirationData = this.datePipe.transform(this.jwtTokenExpiration, 'yyyy-MM-dd HH:mm:ss'); |
|||
return this.translate.instant('profile.valid-till', { expirationData }); |
|||
} |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private route: ActivatedRoute, |
|||
private translate: TranslateService, |
|||
private twoFaService: TwoFactorAuthenticationService, |
|||
public dialog: MatDialog, |
|||
public dialogService: DialogService, |
|||
public fb: FormBuilder, |
|||
private datePipe: DatePipe, |
|||
private clipboardService: ClipboardService) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit() { |
|||
this.buildTwoFactorForm(); |
|||
this.user = this.route.snapshot.data.user; |
|||
this.twoFactorLoad(this.route.snapshot.data.providers); |
|||
} |
|||
|
|||
private buildTwoFactorForm() { |
|||
this.twoFactorAuth = this.fb.group({ |
|||
TOTP: [false], |
|||
SMS: [false], |
|||
EMAIL: [false], |
|||
useByDefault: [null] |
|||
}); |
|||
this.twoFactorAuth.get('useByDefault').valueChanges.subscribe(value => { |
|||
this.twoFaService.updateTwoFaAccountConfig(value, true, {ignoreLoading: true}) |
|||
.subscribe(data => this.processTwoFactorAuthConfig(data)); |
|||
}); |
|||
} |
|||
|
|||
private twoFactorLoad(providers: TwoFactorAuthProviderType[]) { |
|||
if (providers.length) { |
|||
this.twoFaService.getAccountTwoFaSettings().subscribe(data => this.processTwoFactorAuthConfig(data)); |
|||
Object.values(TwoFactorAuthProviderType).forEach(type => { |
|||
if (providers.includes(type)) { |
|||
this.allowTwoFactorProviders.push(type); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
|
|||
private processTwoFactorAuthConfig(setting: AccountTwoFaSettings) { |
|||
const configs = setting.configs; |
|||
Object.values(TwoFactorAuthProviderType).forEach(provider => { |
|||
if (configs[provider]) { |
|||
this.twoFactorAuth.get(provider).setValue(true); |
|||
if (configs[provider].useByDefault) { |
|||
this.twoFactorAuth.get('useByDefault').setValue(provider, {emitEvent: false}); |
|||
} |
|||
} else { |
|||
this.twoFactorAuth.get(provider).setValue(false); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
trackByProvider(i: number, provider: TwoFactorAuthProviderType) { |
|||
return provider; |
|||
} |
|||
|
|||
copyToken() { |
|||
if (+this.jwtTokenExpiration < Date.now()) { |
|||
this.store.dispatch(new ActionNotificationShow({ |
|||
message: this.translate.instant('profile.tokenCopiedWarnMessage'), |
|||
type: 'warn', |
|||
duration: 1500, |
|||
verticalPosition: 'bottom', |
|||
horizontalPosition: 'right' |
|||
})); |
|||
} else { |
|||
this.clipboardService.copyFromContent(this.jwtToken); |
|||
this.store.dispatch(new ActionNotificationShow({ |
|||
message: this.translate.instant('profile.tokenCopiedSuccessMessage'), |
|||
type: 'success', |
|||
duration: 750, |
|||
verticalPosition: 'bottom', |
|||
horizontalPosition: 'right' |
|||
})); |
|||
} |
|||
} |
|||
|
|||
confirm2FAChange(event: MouseEvent, provider: TwoFactorAuthProviderType) { |
|||
event.stopPropagation(); |
|||
event.preventDefault(); |
|||
if (this.twoFactorAuth.get(provider).value) { |
|||
const providerName = this.translate.instant(`security.2fa.provider.${provider.toLowerCase()}`); |
|||
this.dialogService.confirm( |
|||
this.translate.instant('security.2fa.disable-2fa-provider-title', {name: providerName}), |
|||
this.translate.instant('security.2fa.disable-2fa-provider-text', {name: providerName}), |
|||
).subscribe(res => { |
|||
if (res) { |
|||
this.twoFaService.deleteTwoFaAccountConfig(provider).subscribe(data => this.processTwoFactorAuthConfig(data)); |
|||
} |
|||
}); |
|||
} else { |
|||
const dialogData = provider === TwoFactorAuthProviderType.EMAIL ? {email: this.user.email} : {}; |
|||
this.dialog.open(authenticationDialogMap.get(provider), { |
|||
disableClose: true, |
|||
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
|||
data: dialogData |
|||
}).afterClosed().subscribe(res => { |
|||
if (res) { |
|||
this.twoFactorAuth.get(provider).setValue(res); |
|||
this.twoFactorAuth.get('useByDefault').setValue(provider, {emitEvent: false}); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,39 @@ |
|||
///
|
|||
/// Copyright © 2016-2022 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { NgModule } from '@angular/core'; |
|||
import { CommonModule } from '@angular/common'; |
|||
import { SecurityComponent } from './security.component'; |
|||
import { SharedModule } from '@shared/shared.module'; |
|||
import { SecurityRoutingModule } from './security-routing.module'; |
|||
import { TotpAuthDialogComponent } from './authentication-dialog/totp-auth-dialog.component'; |
|||
import { SMSAuthDialogComponent } from '@home/pages/security/authentication-dialog/sms-auth-dialog.component'; |
|||
import { EmailAuthDialogComponent } from '@home/pages/security/authentication-dialog/email-auth-dialog.component'; |
|||
|
|||
@NgModule({ |
|||
declarations: [ |
|||
SecurityComponent, |
|||
TotpAuthDialogComponent, |
|||
SMSAuthDialogComponent, |
|||
EmailAuthDialogComponent |
|||
], |
|||
imports: [ |
|||
CommonModule, |
|||
SharedModule, |
|||
SecurityRoutingModule |
|||
] |
|||
}) |
|||
export class SecurityModule { } |
|||
Loading…
Reference in new issue