From 152f5bc2a821c91e362bf0cf9bf919e3f4a32cf0 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 26 May 2022 09:41:42 +0300
Subject: [PATCH] UI: Add action print backup code

---
 .../authentication-dialog.component.scss      |  7 ++-
 .../backup-code-auth-dialog.component.html    | 11 ++--
 .../backup-code-auth-dialog.component.ts      | 23 +++++++++
 .../backup-code-print-template.raw            | 50 +++++++++++++++++++
 .../pages/security/security.component.html    |  6 +--
 .../assets/locale/locale.constant-en_US.json  |  1 +
 6 files changed, 90 insertions(+), 8 deletions(-)
 create mode 100644 ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-print-template.raw

diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/authentication-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/authentication-dialog.component.scss
index 0b27d00983..a9325b6468 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/authentication-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/authentication-dialog.component.scss
@@ -80,10 +80,10 @@
     max-width: 500px;
     .container {
       max-width: 500px;
-      margin: 40px 0 24px;
+      margin: 40px 0 8px;
       .code {
         letter-spacing: 0.25px;
-        padding: 0 30px;
+        padding: 0 24px;
         margin-bottom: 16px;
         font-family: Roboto Mono, "Helvetica Neue", monospace;
         &.even {
@@ -91,6 +91,9 @@
         }
       }
     }
+    .action-buttons {
+      margin-bottom: 40px;
+    }
   }
 
   & ::ng-deep {
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
index 61701c9358..ab3ba1a797 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
@@ -34,13 +34,18 @@
       {{ code }}
     </div>
   </div>
-  <p class="mat-body-1 description" translate>security.2fa.dialog.backup-code-warn</p>
-  <div fxLayout="row" fxLayoutAlign="center start"  fxLayoutGap="16px">
+  <div fxLayout="row" fxLayoutAlign="center start"  fxLayoutGap="16px" class="action-buttons">
     <button type="button" mat-stroked-button color="primary" (click)="downloadFile()">
       {{ 'security.2fa.dialog.download-txt' | translate }}
     </button>
-    <button type="button" mat-raised-button color="primary">
+    <button type="button" mat-raised-button color="primary" (click)="printCode()">
       {{ 'action.print' | translate }}
     </button>
   </div>
+  <p class="mat-body-1 description" translate>security.2fa.dialog.backup-code-warn</p>
+  <div fxLayout="row" fxLayoutAlign="end start">
+    <button type="button" mat-raised-button color="primary" (click)="closeDialog()">
+      {{ 'action.done' | translate }}
+    </button>
+  </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.ts
index 70c2888ac5..5d3a26b13d 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.ts
@@ -29,6 +29,9 @@ import {
 } from '@shared/models/two-factor-auth.models';
 import { mergeMap, tap } from 'rxjs/operators';
 import { ImportExportService } from '@home/components/import-export/import-export.service';
+import { deepClone } from '@core/utils';
+
+import printTemplate from '!raw-loader!./backup-code-print-template.raw';
 
 @Component({
   selector: 'tb-backup-code-auth-dialog',
@@ -62,4 +65,24 @@ export class BackupCodeAuthDialogComponent extends DialogComponent<BackupCodeAut
   downloadFile() {
     this.importExportService.exportText(this.backupCode.codes, 'backup-codes');
   }
+
+  printCode() {
+    const codeTemplate = deepClone(this.backupCode.codes)
+      .map(code => `<div class="code-row"><input type="checkbox"><span class="code">${code}</span></div>`).join('');
+    const printPage = printTemplate.replace('${codesBlock}', codeTemplate);
+    const newWindow = window.open('', 'Print backup code');
+
+    newWindow.document.open();
+    newWindow.document.write(printPage);
+
+    setTimeout(() => {
+      newWindow.print();
+
+      newWindow.document.close();
+
+      setTimeout(() => {
+        newWindow.close();
+      }, 10);
+    }, 0);
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-print-template.raw b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-print-template.raw
new file mode 100644
index 0000000000..1ab7efc79f
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-print-template.raw
@@ -0,0 +1,50 @@
+<html lang="en">
+<head>
+    <meta name="viewport" content="width=device-width" />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>Backup code</title>
+
+    <style>
+        .code-block {
+            display: flex;
+            flex-wrap: wrap;
+            margin-bottom: 16px;
+        }
+        .code-row {
+            margin: 0 6px 8px;
+            display: flex;
+            min-width: 130px;
+        }
+        .code {
+            font: 400 16px / 20px Roboto Mono, "Helvetica Neue", monospace;
+            margin-left: 6px;
+        }
+        input[type="checkbox"] {
+            -webkit-appearance: none;
+            appearance: none;
+            background-color: #fff;
+            margin: 0;
+            font: inherit;
+            color: currentColor;
+            width: 1em;
+            height: 1em;
+            border: 0.1em solid currentColor;
+            border-radius: 0.15em;
+            transform: translateY(0em);
+        }
+    </style>
+</head>
+
+<body style="margin: 0">
+    <div style="margin: 8px; max-width: 286px">
+        <div style="border: #d0d7de solid 1px; border-radius:4px">
+            <h3 style="padding: 16px 24px; margin: 0; font: 500 20px / 24px Roboto, 'Helvetica Neue', sans-serif; text-align: center">
+                Backup codes
+            </h3>
+            <div class="code-block">
+                ${codesBlock}
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/ui-ngx/src/app/modules/home/pages/security/security.component.html b/ui-ngx/src/app/modules/home/pages/security/security.component.html
index 8daa2f63ae..4a43db2ce7 100644
--- a/ui-ngx/src/app/modules/home/pages/security/security.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/security.component.html
@@ -66,15 +66,15 @@
             <mat-checkbox [value]="provider"
                           [checked]="useByDefault === provider"
                           (click)="changeDefaultProvider($event, provider)"
-                          [disabled]="(isLoading$ | async) || activeSingleProvider"
-                           *ngIf="twoFactorAuth.get(provider).value && provider !== twoFactorAuthProviderType.BACKUP_CODE">
+                          [disabled]="(isLoading$ | async)"
+                           *ngIf="twoFactorAuth.get(provider).value && provider !== twoFactorAuthProviderType.BACKUP_CODE && !activeSingleProvider">
               <span class="checkbox-label" translate>security.2fa.main-2fa-method</span>
             </mat-checkbox>
             <button type="button"
              mat-stroked-button color="primary"
              (click)="generateNewBackupCode()"
              *ngIf="twoFactorAuth.get(provider).value && provider === twoFactorAuthProviderType.BACKUP_CODE">
-              Get new code
+              {{ 'security.2fa.get-new-code' | translate }}
             </button>
           </div>
           <mat-divider *ngIf="!$last"></mat-divider>
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 485960c2e2..07817603dd 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -2590,6 +2590,7 @@
             "authenticate-with": "You can authenticate with:",
             "disable-2fa-provider-text": "Disabling {{name}} will make your account less secure",
             "disable-2fa-provider-title": "Are you sure you want to disable {{name}}?",
+            "get-new-code": "Get new code",
             "main-2fa-method": "Use as main two-factor authentication method",
             "dialog": {
                 "activation-step-description-email": "The next time you login in, you will be prompted to enter the security code that will be sent to your email address.",