Fix jrQrcode

assets/index.js

@@ -10,6 +10,9 @@ import annotator from 'annotator';
 import ClipboardJS from 'clipboard';
 import 'mathjax/es5/tex-svg';
 
+/* jrQrcode */
+import jrQrcode from 'jr-qrcode';
+
 /* Fonts */
 import 'material-design-icons-iconfont/dist/material-design-icons.css';
 import 'lato-font/css/lato-font.css';
@@ -372,4 +375,10 @@ $(document).ready(() => {
       $('form[name="form_mass_action"] button[name="tag"]').trigger('click');
     }
   });
+
+  document.querySelectorAll('img.jr-qrcode').forEach((qrcode) => {
+    const src = jrQrcode.getQrBase64(qrcode.getAttribute('data-url'));
+
+    qrcode.setAttribute('src', src);
+  });
 });

assets/js/tools.js

@@ -1,8 +1,5 @@
 import $ from 'jquery';
 
-/* Allows inline call qr-code call */
-import jrQrcode from 'jr-qrcode'; // eslint-disable-line
-
 function supportsLocalStorage() {
   try {
     return 'localStorage' in window && window.localStorage !== null;

templates/Config/index.html.twig

@@ -110,11 +110,8 @@
                                 <div class="input-field col s12">
                                     <h5>{{ 'config.form_settings.android_configuration'|trans }}</h5>
                                     <a href="wallabag://{{ app.user.username }}@{{ wallabag_url }}" class="waves-effect waves-light btn hide-on-large-only">{{ 'config.form_settings.android_instruction'|trans }}</a>
-                                    <img id="androidQrcode" class="hide-on-med-and-down" alt="{{ 'config.otp.app.qrcode_label'|trans }}" />
+                                    <img class="hide-on-med-and-down jr-qrcode" alt="{{ 'config.otp.app.qrcode_label'|trans }}" data-url="wallabag://{{ app.user.username }}@{{ wallabag_url }}" />
                                 </div>
-                                <script>
-                                    document.getElementById('androidQrcode').src = jrQrcode.getQrBase64('wallabag://{{ app.user.username }}@{{ wallabag_url }}');
-                                </script>
                             </div>
 
                             <h5>{{ 'config.tab_menu.article_display'|trans }}</h5>

templates/Config/otp_app.html.twig

@@ -15,10 +15,7 @@
                             <p>{{ 'config.otp.app.two_factor_code_description_2'|trans }}</p>
 
                             <p>
-                                <img id="2faQrcode" class="hide-on-med-and-down" />
-                                <script>
-                                    document.getElementById('2faQrcode').src = jrQrcode.getQrBase64('{{ qr_code|raw }}');
-                                </script>
+                                <img class="hide-on-med-and-down jr-qrcode" data-url="{{ qr_code|raw }}" />
                             </p>
 
                             <p>