Merge pull request #25 from deltachat/r10s/add-qr-code

add qr code, add screen if JavaScript is disabled
deltachat · Jan 30, 2024 · a856d5f · a856d5f
2 parents feb4eab + 4d9a849
commit a856d5f
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 71 deletions.
diff --git a/i18n/en.js b/i18n/en.js
@@ -3,7 +3,7 @@ Object.assign((typeof window === 'undefined' ? module.exports : window).i18n = (
     TitleText: 'Connect on Delta Chat',
     DescriptionText: 'Delta Chat is a messaging app that works over e-mail.',
     FormBlurbText: 'Create a Delta Chat invite link',
-    StepCodeText: 'Open Delta Chat, then navigate to <code>QR code</code>, <code>Show QR Invite Code</code>, <code>Copy to Clipboard</code>',
+    StepCodeText: 'Open Delta Chat, then navigate to <b>QR code → Show QR Invite Code → Copy to Clipboard</b>',
     StepPasteText: 'Paste into the following field:',
     StepShareText: 'Share the generated link over any channel',
     ShareLinkText: 'Open link',

diff --git a/i18n/fr.js b/i18n/fr.js
@@ -3,7 +3,7 @@ Object.assign((typeof window === 'undefined' ? module.exports : window).i18n = (
     TitleText: 'Connecte sur Delta Chat',
     DescriptionText: 'Delta Chat est une application de messagerie qui fonctionne par e-mail.',
     FormBlurbText: "Crée un lien d'invitation à Delta Chat",
-    StepCodeText: "Ouvre Delta Chat, navigue jusqu'à <code>QR code</code>, <code>Afficher le code d'invitation QR</code>, <code>Copier dans le presse-papiers </code>.",
+    StepCodeText: "Ouvre Delta Chat, navigue jusqu'à <b>QR code → Afficher le code d'invitation QR → Copier dans le presse-papiers </b>.",
     StepPasteText: 'Colle dans le champ suivant :',
     StepShareText: "Partage le lien généré sur n'importe quel canal",
     ShareLinkText: 'Ouvre lien',

diff --git a/index.html b/index.html
@@ -18,6 +18,7 @@
 
     <link rel="icon" href="identity.svg" sizes="any" type="image/svg+xml">
 
+    <script src="./qrcode.min.js"></script>
     <script src="./i18n/i18next.min.js"></script>
     <script src="./i18n/en.js"></script>
     <script src="./i18n/fr.js"></script>
@@ -34,7 +35,7 @@
             margin: 0;
 
             font-family: Arial,Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
-            font-size: 18pt;
+            font-size: 12pt;
 
             background: url('background.jpg');
             background-size: 500px;
@@ -53,6 +54,7 @@
         header {
             padding: var(--pad);
             font-family: Arial, 'Helvetica Neue', Helvetica;
+            font-size: 18pt;
             background: var(--dc-gradient);
             box-shadow: 0px 0px 3px #888;
         }
@@ -62,6 +64,13 @@
             color: white;
         }
 
+        h2 {
+            font-weight: normal;
+            font-size: 18pt;
+            text-align: center;
+            margin-bottom: 2em;
+        }
+
         .logo {
             display: flex;
             align-items: center;
@@ -88,7 +97,6 @@
         }
 
         #box li {
-           font-size: 14pt;
            margin-bottom: 40px;
         }
 
@@ -102,9 +110,8 @@
         #dc-link, .download, .share-link {
             padding: 10px;
             border-radius: 30px;
-
+            font-size: 10pt;
             font-weight: bold;
-            font-size: 60%;
             text-transform: uppercase;
             text-decoration: none;
             color: white;
@@ -121,12 +128,9 @@
             left: 100px;
         }
 
-        form ol {
+        ol {
             left: 30px;
-        }
-
-        #box form li {
-            font-size: 60%;
+            width: 80%;
         }
 
         @media (max-width: 450px) {
@@ -164,13 +168,6 @@
             text-align: center;
         }
 
-        code {
-            font-size: 80%;
-            background: #eee;
-            padding: 4px;
-            border-radius: 10px;
-        }
-
         textarea {
             width: 80%;
             height: 4.5em;
@@ -179,6 +176,28 @@
         .hidden {
             display: none;
         }
+
+        details {
+            margin-top: 4em;
+            text-align: center;
+        }
+
+        details summary {
+            cursor: pointer;
+            font-size: 11pt;
+            text-decoration: none;
+        }
+
+        details summary:hover {
+            text-decoration: underline;
+        }
+
+        details #qrcode {
+            width:200px;
+            padding-top: 1em;
+            height:200px;
+            margin: auto;
+        }
     </style>
 </head>
 <body>
@@ -191,9 +210,20 @@
 </header>
 
     <div id="box">
-        <form>
+        <noscript>
+            <div>
+                <h2><b>Say hello 👋 to ...</b> you've disabled JavaScript, no problem:</h2>
+                <ol>
+                    <li><a class="download" href="https://get.delta.chat" target="_blank">Download Delta Chat</a></li>
+                    <li><b>Copy</b> the URL of this browser window to the <b>clipboard, </b> including all text behind the <b>#</b></li>
+                    <li>In Delta Chat, select <b>QR Code → Scan QR Code → Paste from Clipboard</b> and start chatting</li>
+                </ol>
+            </div>
+        </noscript>
 
-            <p class="form-blurb"></p>
+        <form class="hidden">
+
+            <h2 class="form-blurb"></h2>
 
             <ol>
                 <li class="step-code"></li>
@@ -212,12 +242,12 @@
 
         </form>
 
-        <section> 
-        <p>
+        <div id="say-hello" class="hidden">
+        <h2>
             <span id="join">Say hello to</span>
             <b id="name">NAME</b>
             👋
-        </p>
+        </h2>
 
         <ol>
             <li>
@@ -227,7 +257,17 @@
                 <a id="dc-link" href="">Open chat</a>
             </li>
         </ol>
-        </section>
+
+        <details>
+            <summary>Tap if you have Delta Chat on another device</summary>
+
+            <div id="qrcode"></div>
+            <p>
+                <i>Scan to open the chat on the other device</i>
+            </p>
+        </details>
+
+        </div>
     </div>
 
     <script>
@@ -247,12 +287,21 @@
 
             document.getElementById("name").innerText = searchParams.get("n") || searchParams.get("g") || searchParams.get("a");
 
-            if (isValid && document.querySelector('section').classList.contains('hidden')) {
+            if (isValid && !document.querySelector('form').classList.contains('hidden')) {
                 document.querySelector('.share-link').setAttribute('href', '#' + inputData.replace(/openpgp4fpr:/i, '').replace('#', '&'))
                 return document.querySelector('.share-link').classList.remove('hidden');
             }
 
-            (isValid ? document.querySelector('form') : document.querySelector('section')).classList.add('hidden');
+            if (isValid) {
+                var qrcode = new QRCode(document.getElementById("qrcode"), {
+                    width : 200,
+                    height : 200
+                });
+                qrcode.makeCode(openpgp4fprStr);
+                document.getElementById('say-hello').classList.remove('hidden')
+            } else {
+                document.querySelector('form').classList.remove('hidden')
+            }
         };
 
         // when all apps can generate invite links internally, we may decide to remove on-site generator