#1163 Manual configuration code added

src/installPage/functions/installContainerHandlers.js

@@ -21,7 +21,7 @@
 const S = require('../../selectors');
 const setQRCode = require('./setQRCode');
 
-const installContainerHandlers = (channel, imageURL) => {
+const installContainerHandlers = (channel, imageURL, extensionID) => {
   const app = document.querySelector(S.installPage.container.app);
   const qr = document.querySelector(S.installPage.container.qr);
   let t;
@@ -41,7 +41,7 @@ const installContainerHandlers = (channel, imageURL) => {
         document.dispatchEvent(qrHiddenEvent);
       }
     } else {
-      t = setQRCode(imageURL, channel);
+      t = setQRCode(imageURL, channel, extensionID);
       channel.connect();
     }
   };

src/installPage/functions/setQRCode.js

@@ -20,15 +20,22 @@
 const S = require('../../selectors');
 const qrTimeout = require('./qrTimeout');
 
-const setQRCode = (imageURL, channel) => {
+const setQRCode = (imageURL, channel, extensionID) => {
   return new Promise(() => {
     const QRImgs = document.querySelectorAll(S.installPage.qr.imgs);
+    const QRManuals = document.querySelectorAll(S.installPage.qr.manual);
 
     if (QRImgs) {
       QRImgs.forEach(img => {
         img.src = imageURL;
       });
     }
+
+    if (QRManuals) {
+      QRManuals.forEach(manual => {
+        manual.innerText = extensionID;
+      });
+    }
   
     return qrTimeout(QRImgs, channel);
   });

src/installPage/installPage.html

@@ -66,6 +66,8 @@
                   <img data-i18n="qrCode" src="#" alt="QR Code" class="twofas-js-qrcode">
                 </div>
 
+                <div class="twofas-qr-container-manual twofas-js-qr-manual"><p></p></div>
+
                 <h4 class="twofas-app-qr-header" data-i18n="installScan">Scan this code with your 2FAS mobile app</h4>
                 <div class="twofas-app-qr-steps">
                   <div class="twofas-app-qr-steps-item">
@@ -103,6 +105,8 @@
 
                     <img data-i18n="qrCode" src="#" alt="QR Code" class="twofas-js-qrcode">
                   </div>
+
+                  <div class="twofas-qr-container-manual twofas-js-qr-manual"><p></p></div>
   
                   <img class="twofas-app-qr-border" data-i18n="2fasAuthApp" src="<%=require('../images/qr-border.svg')%>" alt="2FAS Auth App">
 

src/installPage/installPage.js

@@ -59,7 +59,7 @@ const init = async storage => {
   const configLink = new SDK().generateQRLink(storage.extensionID);
 
   return generateQRCode(configLink)
-    .then(imageURL => installContainerHandlers(channel, imageURL))
+    .then(imageURL => installContainerHandlers(channel, imageURL, storage.extensionID))
     .then(handleTargetBlank)
     .then(() => hidePreloader(true))
     .then(() => browser.runtime.onMessage.addListener(extPageOnMessage));

src/installPage/styles/_container.scss

@@ -383,6 +383,14 @@
           display: flex !important;
         }
       }
+
+      .twofas-qr-container-manual {
+        display: none !important;
+
+        @media all and (max-width: 700px) {
+          display: block !important;
+        }
+      }
     }
 
     &-right {
@@ -427,6 +435,32 @@
           display: none !important;
         }
       }
+
+      .twofas-qr-container-manual {
+        background-color: transparent !important;
+        bottom: 40px;
+        color: $color !important;
+        position: absolute;
+        text-align: center;
+        width: 291px;
+
+        @media (prefers-color-scheme: dark) {
+          bottom: 35px;
+          color: $color-2 !important;
+        }
+
+        @media all and (max-width: 780px) {
+          bottom: 0;
+          left: 13px;
+          padding: 0 !important;
+          width: 225px;
+        }
+
+        p {
+          margin: 0 auto;
+          max-width: 200px;
+        }
+      }
     }
 
     &-steps {
@@ -632,6 +666,19 @@
       }
     }
 
+    .twofas-qr-container-manual {
+      background-color: $color-header;
+      border-radius: 32px;
+      color: $color-2;
+      font-size: 14px;
+      margin-bottom: 16px;
+      padding: 12px 20px;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: $bg-dark;
+      }
+    }
+
     h4 {
       max-width: 300px;
     }

src/selectors.js

@@ -30,7 +30,8 @@ const selectors = {
     qr: {
       timeout: '.twofas-qr-container-timeout',
       regenerate: '.js-twofas-regenerate-qr',
-      imgs: 'img.twofas-js-qrcode'
+      imgs: 'img.twofas-js-qrcode',
+      manual: '.twofas-js-qr-manual p'
     }
   },
   optionsPage: {