QR code warns for scanners that keep history

2 files changed, 13 insertions, 4 deletions

diff --git a/src/index.html b/src/index.html
index 10fd62a..71df82a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -92,8 +92,10 @@
             .qr-image {
                 margin: 5px;
             }
-            .qr-hint {
+            .qr-hint,
+            .qr-warning {
                 padding: 2px;
+                max-width: 150px;
             }
             .more-info {
                 cursor: help;
@@ -623,7 +625,10 @@
         <div class="qr-container hidden">
             <div class="qr-hint bg-primary" data-translate>Click field to hide QR</div>
             <div class="qr-hint bg-primary hidden" data-translate>Click field to show QR</div>
-            <div class="qr-image"></div>
+            <div class="qr-hider">
+                <div class="qr-image"></div>
+                <div class="qr-warning bg-primary" data-translate>Caution: Scanner may keep history</div>
+            </div>
         </div>
 
         <div class="feedback-container">
diff --git a/src/js/index.js b/src/js/index.js
index 748a2ba..04559d1 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -67,6 +67,7 @@
     DOM.privateKeyToggle = $(".private-key-toggle");
     DOM.languages = $(".languages a");
     DOM.qrContainer = $(".qr-container");
+    DOM.qrHider = DOM.qrContainer.find(".qr-hider");
     DOM.qrImage = DOM.qrContainer.find(".qr-image");
     DOM.qrHint = DOM.qrContainer.find(".qr-hint");
     DOM.showQrEls = $("[data-show-qr]");
@@ -946,7 +947,10 @@
             var size = 130;
             DOM.qrImage.qrcode({width: size, height: size, text: content});
             if (!showQr) {
-                DOM.qrImage.addClass("hidden");
+                DOM.qrHider.addClass("hidden");
+            }
+            else {
+                DOM.qrHider.removeClass("hidden");
             }
             DOM.qrContainer.removeClass("hidden");
         }
@@ -959,7 +963,7 @@
 
     function toggleQr() {
         showQr = !showQr;
-        DOM.qrImage.toggleClass("hidden");
+        DOM.qrHider.toggleClass("hidden");
         DOM.qrHint.toggleClass("hidden");
     }