generate qr code locally

package-lock.json

@@ -6789,6 +6789,11 @@
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
       "dev": true
     },
+    "qrious": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/qrious/-/qrious-4.0.2.tgz",
+      "integrity": "sha512-xWPJIrK1zu5Ypn898fBp8RHkT/9ibquV2Kv24S/JY9VYEhMBMKur1gHVsOiNUh7PHP9uCgejjpZUHUIXXKoU/g=="
+    },
     "qs": {
       "version": "6.3.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.2.tgz",

package.json

@@ -71,6 +71,7 @@
     "node-forge": "0.7.1",
     "papaparse": "4.3.5",
     "popper.js": "1.14.3",
+    "qrious": "4.0.2",
     "rxjs": "5.5.6",
     "sweetalert": "2.1.0",
     "tldjs": "2.0.0",

src/app/settings/two-factor-authenticator.component.html

@@ -49,8 +49,7 @@
                     </p>
                     <hr *ngIf="enabled">
                     <p class="text-center" [ngClass]="{'mb-0': enabled}">
-                        <img [src]="qr" width="160" height="160" alt="">
-                        <br>
+                        <canvas id="qr"></canvas><br>
                         <code title="{{'key' | i18n}}">{{key}}</code>
                     </p>
                     <ng-container *ngIf="!enabled">

src/app/settings/two-factor-authenticator.component.ts

@@ -1,4 +1,8 @@
-import { Component } from '@angular/core';
+import {
+    Component,
+    OnDestroy,
+    OnInit,
+} from '@angular/core';
 
 import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
@@ -19,17 +23,29 @@ import { TwoFactorBaseComponent } from './two-factor-base.component';
     selector: 'app-two-factor-authenticator',
     templateUrl: 'two-factor-authenticator.component.html',
 })
-export class TwoFactorAuthenticatorComponent extends TwoFactorBaseComponent {
+export class TwoFactorAuthenticatorComponent extends TwoFactorBaseComponent implements OnInit, OnDestroy {
     key: string;
-    qr: string;
     token: string;
     formPromise: Promise<any>;
 
+    private qrScript: HTMLScriptElement;
+
     constructor(apiService: ApiService, i18nService: I18nService,
         analytics: Angulartics2, toasterService: ToasterService,
         private userService: UserService, platformUtilsService: PlatformUtilsService) {
         super(apiService, i18nService, analytics, toasterService, platformUtilsService,
             TwoFactorProviderType.Authenticator);
+        this.qrScript = window.document.createElement('script');
+        this.qrScript.src = 'scripts/qrious.min.js';
+        this.qrScript.async = true;
+    }
+
+    ngOnInit() {
+        window.document.body.appendChild(this.qrScript);
+    }
+
+    ngOnDestroy() {
+        window.document.body.removeChild(this.qrScript);
     }
 
     auth(authResponse: any) {
@@ -62,9 +78,14 @@ export class TwoFactorAuthenticatorComponent extends TwoFactorBaseComponent {
         this.token = null;
         this.enabled = response.enabled;
         this.key = response.key;
-        this.qr = 'https://chart.googleapis.com/chart?chs=160x160&chld=L|0&cht=qr&chl=otpauth://totp/' +
-            'Bitwarden:' + encodeURIComponent(await this.userService.getEmail()) +
-            '%3Fsecret=' + encodeURIComponent(this.key) +
-            '%26issuer=Bitwarden';
+        const email = await this.userService.getEmail();
+        window.setTimeout(() => {
+            const qr = new (window as any).QRious({
+                element: document.getElementById('qr'),
+                value: 'otpauth://totp/Bitwarden:' + encodeURIComponent(email) +
+                    '?secret=' + encodeURIComponent(this.key) + '&issuer=Bitwarden',
+                size: 160,
+            });
+        }, 100);
     }
 }

webpack.config.js

@@ -103,6 +103,7 @@ const plugins = [
         { from: './src/images', to: 'images' },
         { from: './src/locales', to: 'locales' },
         { from: './src/scripts', to: 'scripts' },
+        { from: './node_modules/qrious/dist/qrious.min.js', to: 'scripts' },
     ]),
     extractCss,
     new webpack.DefinePlugin({