update

src/app/pages/account/security/security-totp.dialog.html

@@ -0,0 +1,16 @@
+<h1 mat-dialog-title>{{'security.2fa.totp.enable' | i18n}}</h1>
+<div mat-dialog-content>
+
+    {{'security.2fa.totp.hint' | i18n}}
+
+    <qrcode *ngIf="data.qrData" [qrdata]="data.qrData" [width]="400" [errorCorrectionLevel]="'M'" title="{{data.qrData}}"></qrcode>
+
+    {{'security.2fa.totp.activate' | i18n}}
+    <mat-form-field>
+        <input matInput placeholder="{{'security.2fa.totp.code' | i18n}}" [formControl]="code" required>
+    </mat-form-field>
+</div>
+<div mat-dialog-actions>
+    <button mat-button [mat-dialog-close]="false">{{'cancel' | i18n}}</button>
+    <button [disabled]="code.invalid" mat-raised-button [mat-dialog-close]="code.value" cdkFocusInitial color="accent">{{'security.2fa.totp.enable' | i18n}}</button>
+</div>

src/app/pages/account/security/security.component.html

@@ -1,4 +1,4 @@
-<form [formGroup]="form" (ngSubmit)="changePassword()" #formDirective="ngForm">
+<form [formGroup]="passwordForm" (ngSubmit)="changePassword()" #passwordFormDirective="ngForm">
     <mat-card>
         <mat-card-content>
             <h2>{{'password.change' | i18n}}</h2>
@@ -6,22 +6,22 @@
                 {{'password.changed' | i18n}}
             </mat-hint>
             <mat-form-field>
-                <input matInput type="password" placeholder="{{'password.current' | i18n}}" formControlName="oldPassword"
-                    [(ngModel)]="model.old">
-                <mat-error *ngFor="let error of form.get('oldPassword').errors | keyvalue">
+                <input matInput type="password" placeholder="{{'password.current' | i18n}}"
+                    formControlName="oldPassword" [(ngModel)]="model.old">
+                <mat-error *ngFor="let error of passwordForm.get('oldPassword').errors | keyvalue">
                     {{error.key}}
                 </mat-error>
             </mat-form-field>
             <mat-form-field>
                 <input matInput type="password" placeholder="{{'password' | i18n}}" formControlName="password"
                     [(ngModel)]="model.password">
-                <mat-error *ngFor="let error of form.get('password').errors | keyvalue">
+                <mat-error *ngFor="let error of passwordForm.get('password').errors | keyvalue">
                     {{error.key}}
                 </mat-error>
             </mat-form-field>
             <mat-form-field>
-                <input matInput type="password" placeholder="{{'password.confirm' | i18n}}" formControlName="password2"
-                    [(ngModel)]="model.password2">
+                <input matInput type="password" length="6" placeholder="{{'password.confirm' | i18n}}"
+                    formControlName="password2" [(ngModel)]="model.password2">
                 <mat-error>
                     {{'password.not-match' | i18n}}
                 </mat-error>
@@ -29,9 +29,20 @@
         </mat-card-content>
         <mat-card-actions>
             <mat-progress-bar *ngIf="working" mode="indeterminate"></mat-progress-bar>
-            <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
+            <button *ngIf="!working" mat-raised-button color="primary" [disabled]="passwordForm.invalid">
                 {{'password.change' | i18n}}
             </button>
         </mat-card-actions>
     </mat-card>
-</form>
+</form>
+
+<mat-card>
+    <mat-card-content>
+        <h2>{{'security.2fa' | i18n}}</h2>
+        <p>{{'security.2fa.info' | i18n}}</p>
+    </mat-card-content>
+    <mat-card-actions>
+        <button *ngIf="!totp" (click)="createTotp()" mat-raised-button color="accent">{{'security.2fa.totp.create' | i18n}}</button>
+        <button *ngIf="totp" (click)="removeTotp()" mat-raised-button color="warn">{{'security.2fa.totp.remove' | i18n}}</button>
+    </mat-card-actions>
+</mat-card>

src/app/pages/account/security/security.component.scss

@@ -1,3 +1,3 @@
 mat-form-field {
-  display: block;
+  display: inline;
 }

src/app/pages/account/security/security.component.ts

@@ -1,6 +1,8 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
+import { Component, OnInit, ViewChild, Inject } from '@angular/core';
+import { FormBuilder, FormGroup, FormControl, Validators, NgForm } from '@angular/forms';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
+import { AuthService } from './../../../services/auth.service';
 import { UserService } from './../../../services/user.service';
 import { MatchingValidator } from './../../../utils/matching.validator';
 
@@ -15,28 +17,39 @@ export class SecurityComponent implements OnInit {
   model: any = {};
   public working: boolean;
   public success: boolean;
-  form: FormGroup;
-  @ViewChild('formDirective') private formDirective: NgForm;
+  public totp: boolean = false;
 
-  constructor(private formBuilder: FormBuilder, private userService: UserService) { }
+  passwordForm: FormGroup;
+  @ViewChild('passwordFormDirective') private passwordFormDirective: NgForm;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private userService: UserService,
+    private authService: AuthService,
+    public dialog: MatDialog) { }
 
   ngOnInit(): void {
-    this.form = this.formBuilder.group({
+    this.passwordForm = this.formBuilder.group({
       oldPassword: ['', Validators.required],
       password: ['', Validators.required],
       password2: ['', Validators.required]
     }, {
       validator: MatchingValidator('password', 'password2')
     });
+
+    this.authService.isTotpEnabled().subscribe(response => {
+      this.totp = true;
+    }, error => {
+      this.totp = false;
+    })
   }
 
-
   changePassword() {
-    if (this.form.valid && !this.working) {
+    if (this.passwordForm.valid && !this.working) {
       this.working = true;
 
       this.userService.password(this.model).subscribe((result: any) => {
-        this.formDirective.resetForm();
+        this.passwordFormDirective.resetForm();
         this.success = true;
         this.working = false;
       }, (error) => {
@@ -49,11 +62,68 @@ export class SecurityComponent implements OnInit {
           }
 
           for (let code in errors) {
-            this.form.get(code).setErrors(errors[code]);
+            this.passwordForm.get(code).setErrors(errors[code]);
           }
         }
       })
     }
   }
 
+  createTotp() {
+    this.authService.createTotp().subscribe((result: any) => {
+      const dialogRef = this.dialog.open(SecurityTotpDialog, {
+        closeOnNavigation: false,
+        disableClose: true,
+        data: result
+      });
+
+      dialogRef.afterClosed().subscribe(result => {
+        if (result) {
+          this.authService.enableTotp(result).subscribe((result: any) => {
+            this.totp = true;
+          })
+        } else {
+          this.authService.removeTotp().subscribe((result: any) => {
+            this.totp = false;
+          })
+        }
+      });
+    })
+  }
+
+
+  enableTotp() {
+    const dialogRef = this.dialog.open(SecurityTotpDialog, {
+      closeOnNavigation: false,
+      disableClose: true,
+      data: {}
+    });
+  }
+
+  removeTotp() {
+    this.authService.removeTotp().subscribe((result: any) => {
+      this.totp = false;
+    })
+  }
+
 }
+
+
+@Component({
+  selector: 'app-security-totp-dialog',
+  templateUrl: 'security-totp.dialog.html',
+  styleUrls: ['./security.component.scss']
+})
+export class SecurityTotpDialog {
+
+  code: FormControl;
+
+  constructor(
+    public dialogRef: MatDialogRef<SecurityTotpDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) { }
+
+  ngOnInit(): void {
+    this.code = new FormControl('', [Validators.required, Validators.pattern("[0-9]{6}")]);
+  }
+}