Replace qrcode with package

frontend/package-lock.json

@@ -16364,6 +16364,11 @@
       "integrity": "sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg==",
       "dev": true
     },
+    "qr-creator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/qr-creator/-/qr-creator-1.0.0.tgz",
+      "integrity": "sha512-C0cqfbS1P5hfqN4NhsYsUXePlk9BO+a45bAQ3xLYjBL3bOIFzoVEjs79Fado9u9BPBD3buHi3+vY+C8tHh4qMQ=="
+    },
     "qs": {
       "version": "6.7.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",

frontend/package.json

@@ -127,6 +127,7 @@
     "ng2-dragula": "^2.1.1",
     "observable-array": "0.0.4",
     "pako": "^2.0.3",
+    "qr-creator": "^1.0.0",
     "reactivestates": "2.0.1",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^6.6.6",

frontend/src/app/core/augmenting/dynamic-scripts/two_factor_authentication.ts

@@ -1,6 +1,4 @@
-import 'core-vendor/qrcode-min';
-
-declare let QRCode:any;
+import QrCreator from 'qr-creator';
 
 jQuery(($) => {
   $('#submit_otp').submit(() => {
@@ -13,15 +11,14 @@ jQuery(($) => {
   });
 
   $('.qr-code-element').each(function () {
-    const el = $(this);
-    new QRCode(
-      el[0],
-      {
-        text: el.data('value'),
-        width: 220,
-        height: 220,
-      },
-    );
+    QrCreator.render({
+      text: this.dataset.value as string,
+      radius: 0,
+      ecLevel: 'H',
+      fill: '#222222',
+      background: '#FFFFFF',
+      size: 250,
+    }, this);
   });
 
   $('.ajax_form').submit(function () {