From 099699198cf935ae86ae4851058803220ab61bd8 Mon Sep 17 00:00:00 2001
From: KernelDeimos <eric.alex.dube@gmail.com>
Date: Fri, 3 May 2024 22:53:32 -0400
Subject: [PATCH] Tweak QR code sizes

---
 src/UI/Components/QRCode.js | 41 +++++++++++++++++-
 src/UI/UIWindowQR.js        | 85 ++-----------------------------------
 src/i18n/i18n.js            |  6 ++-
 src/i18n/translations/en.js |  3 +-
 4 files changed, 51 insertions(+), 84 deletions(-)

diff --git a/src/UI/Components/QRCode.js b/src/UI/Components/QRCode.js
index 850118a6..3dfb9f1e 100644
--- a/src/UI/Components/QRCode.js
+++ b/src/UI/Components/QRCode.js
@@ -1,9 +1,16 @@
 import { Component } from "../../util/Component.js";
+import UIComponentWindow from "../UIComponentWindow.js";
 
 export default class QRCodeView extends Component {
     static PROPERTIES = {
         value: {
             description: 'The text to encode in the QR code',
+        },
+        size: {
+            value: 150,
+        },
+        enlarge_option: {
+            value: true,
         }
     }
 
@@ -16,9 +23,13 @@ export default class QRCodeView extends Component {
             align-items: center;
         }
         .qr-code img {
-            width: 150px;
             margin-bottom: 20px;
         }
+        .has-enlarge-option {
+            cursor: -moz-zoom-in; 
+            cursor: -webkit-zoom-in; 
+            cursor: zoom-in
+        }
     `
 
     create_template ({ template }) {
@@ -35,8 +46,36 @@ export default class QRCodeView extends Component {
             // $(this.dom_).find('.qr-code').empty();
             new QRCode($(this.dom_).find('.qr-code').get(0), {
                 text: value,
+                // TODO: dynamic size
+                width: this.get('size'),
+                height: this.get('size'),
                 currectLevel: QRCode.CorrectLevel.H,
             });
+
+            if ( this.get('enlarge_option') ) {
+                $(this.dom_).find('.qr-code img').addClass('has-enlarge-option');
+                $(this.dom_).find('.qr-code img').on('click', async () => {
+                    UIComponentWindow({
+                        component: new QRCodeView({
+                            value: value,
+                            size: 400,
+                            enlarge_option: false,
+                        }),
+                        title: i18n('enlarged_qr_code'),
+                        backdrop: true,
+                        dominant: true,
+                        width: 550,
+                        height: 'auto',
+                        body_css: {
+                            width: 'initial',
+                            height: '100%',
+                            'background-color': 'rgb(245 247 249)',
+                            'backdrop-filter': 'blur(3px)',
+                            padding: '20px',
+                        },
+                    })
+                });
+            }
         });
     }
 }
diff --git a/src/UI/UIWindowQR.js b/src/UI/UIWindowQR.js
index c2d63ec1..812b6a33 100644
--- a/src/UI/UIWindowQR.js
+++ b/src/UI/UIWindowQR.js
@@ -28,8 +28,6 @@ let checkbox_id_ = 0;
 async function UIWindowQR(options){
     const confirmations = options.confirmations || [];
 
-    const promise = new TeePromise();
-
     options = options ?? {};
 
     const placeholder_qr = Placeholder();
@@ -45,54 +43,6 @@ async function UIWindowQR(options){
 
     h += placeholder_qr.html;
 
-    if ( options.text_alternative ) {
-        h += `<div class="otp-as-text">`;
-            h += `<p style="text-align: center; font-size: 16px; padding: 10px; font-weight: 400; margin: -10px 10px 20px 10px; -webkit-font-smoothing: antialiased; color: #5f626d;">${
-                html_encode(options.text_alternative)
-            }</p>`;
-        h += `</div>`;
-    }
-
-    if ( options.recovery_codes ) {
-        h += `<div class="recovery-codes">`;
-            h += `<h2 style="text-align: center; font-size: 16px; padding: 10px; font-weight: 400; margin: -10px 10px 20px 10px; -webkit-font-smoothing: antialiased; color: #5f626d;">${
-                i18n('recovery_codes')
-            }</h2>`;
-            h += `<div class="recovery-codes-list">`;
-                for ( let i=0 ; i < options.recovery_codes.length ; i++ ) {
-                    h += `<div class="recovery-code">${
-                        html_encode(options.recovery_codes[i])
-                    }</div>`;
-                }
-            h += `</div>`;
-        h += `</div>`;
-    }
-
-    for ( let i=0 ; i < confirmations.length ; i++ ) {
-        const confirmation = confirmations[i];
-        // checkbox
-        h += `<div class="qr-code-checkbox">`;
-            h += `<input type="checkbox" id="checkbox_${++checkbox_id_}" name="confirmation_${i}">`;
-            h += `<label for="checkbox_${checkbox_id_}">${confirmation}</label>`;
-        h += `</div>`;
-    }
-
-    // h += `<button class="code-confirm-btn" style="margin: 20px auto; display: block; width: 100%; padding: 10px; font-size: 16px; font-weight: 400; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer;">${
-    //     i18n('confirm')
-    // }</button>`;
-    if ( options.has_confirm_and_cancel ) {
-        h += `<button type="submit" class="button button-block button-primary code-confirm-btn" style="margin-top:10px;" disabled>${
-            i18n('confirm')
-        }</button>`;
-        h += `<button type="submit" class="button button-block button-secondary code-cancel-btn" style="margin-top:10px;">${
-            i18n('cancel')
-        }</button>`;
-    } else {
-        h += `<button type="submit" class="button button-block button-primary code-confirm-btn" style="margin-top:10px;">${
-            i18n('done')
-        }</button>`;
-    }
-
     const el_window = await UIWindow({
         title: 'Instant Login!',
         app: 'instant-login',
@@ -110,7 +60,7 @@ async function UIWindowQR(options){
         allow_native_ctxmenu: false,
         allow_user_select: false,
         backdrop: true,
-        width: 550,
+        width: 450,
         height: 'auto',
         dominant: true,
         show_in_taskbar: false,
@@ -123,12 +73,13 @@ async function UIWindowQR(options){
             height: '100%',
             'background-color': 'rgb(245 247 249)',
             'backdrop-filter': 'blur(3px)',
-            padding: '20px',
+            padding: '50px 20px',
         },
     })
 
     const component_qr = new QRCodeView({
-        value: options.text
+        value: options.text,
+        size: 250,
     });
 
     const component_flexer = new Flexer({
@@ -141,38 +92,10 @@ async function UIWindowQR(options){
     component_flexer.attach(placeholder_qr);
     // placeholder_qr.replaceWith($(`<h1>test</h1>`).get(0));
 
-    if ( false ) {
-    // generate auth token QR code
-    new QRCode($(el_window).find('.otp-qr-code').get(0), {
-        text: options.text,
-        width: 455,
-        height: 455,
-        colorDark : "#000000",
-        colorLight : "#ffffff",
-        correctLevel : QRCode.CorrectLevel.H
-    });
-}
-
-    if ( confirmations.length > 0 ) {
-        $(el_window).find('.code-confirm-btn').prop('disabled', true);
-    }
-
     $(el_window).find('.qr-code-checkbox input').on('change', () => {
         const all_checked = $(el_window).find('.qr-code-checkbox input').toArray().every(el => el.checked);
         $(el_window).find('.code-confirm-btn').prop('disabled', !all_checked);
     });
-
-    $(el_window).find('.code-confirm-btn').on('click', () => {
-        $(el_window).close();
-        promise.resolve(true);
-    });
-
-    $(el_window).find('.code-cancel-btn').on('click', () => {
-        $(el_window).close();
-        promise.resolve(false);
-    });
-
-    return await promise;
 }
 
 export default UIWindowQR
\ No newline at end of file
diff --git a/src/i18n/i18n.js b/src/i18n/i18n.js
index 23f1efeb..f0f5fd65 100644
--- a/src/i18n/i18n.js
+++ b/src/i18n/i18n.js
@@ -44,7 +44,11 @@ window.i18n = function (key, replacements = [], encode_html = true) {
         str = key;
     }
     str = ReplacePlaceholders(str);
-    str = encode_html ? html_encode(str) : str;
+    if ( encode_html ) {
+        str = html_encode(str);
+        // html_encode doesn't render line breaks
+        str = str.replace(/\n/g, '<br />');
+    }
     // replace %% occurrences with the values in replacements
     // %% is for simple text replacements
     // %strong% is for <strong> tags
diff --git a/src/i18n/translations/en.js b/src/i18n/translations/en.js
index c42db8b9..1b02995c 100644
--- a/src/i18n/translations/en.js
+++ b/src/i18n/translations/en.js
@@ -105,6 +105,7 @@ const en = {
         end_hard: "End Hard",
         end_process_force_confirm: "Are you sure you want to force-quit this process?",
         end_soft: "End Soft",
+        enlarged_qr_code: "Enlarged QR Code",
         enter_password_to_confirm_delete_user: "Enter your password to confirm account deletion",
         error_unknown_cause: "An unknown error occurred.",
         feedback: "Feedback",
@@ -212,7 +213,7 @@ const en = {
         save_account_to_publish: 'Please create an account to proceed.',
         save_session: 'Save session',
         save_session_c2a: 'Create an account to save your current session and avoid losing your work.',
-        scan_qr_c2a: 'Scan the code below to log into this session from other devices',
+        scan_qr_c2a: 'Scan the code below\nto log into this session from other devices',
         scan_qr_2fa: 'Scan the QR code with your authenticator app',
         scan_qr_generic: 'Scan this QR code using your phone or another device',
         seconds: 'seconds',