UI: Add action print backup code

4 years ago · 152f5bc2a8
6 changed files with 90 additions and 8 deletions
--- 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 {
--- 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>
--- 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);
+  }
 }
--- 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
@ -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>
--- 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>
--- 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.",