Unified logic for the PWA install button

Refactor and cleanup the Help and About page, add Dino as Recommenced client

app/widgets/About/about.tpl

@@ -43,10 +43,8 @@
             <div>
                 <p>{$c->__('about.software')}</p>
                 <p class="all">
-                   Pako.js <a href="https://github.com/nodeca/pako">nodeca/pako
-                   </a> under MIT<br />
-                   Markdown - Michel Fortin <a href="http://michelf.ca/projects/php-markdown/">michelf.ca</a> ©Michel Fortin<br/>
-                   Template Engine - RainTPL - Federico Ulfo <a href="http://www.raintpl.com/">www.raintpl.com</a> under MIT<br/>
+                   CommonMark - <a href="https://commonmark.thephpleague.com/">league/commonmark</a> under BSD-3-Clause License <br/>
+                   Template Engine - RainTPL - Federico Ulfo - <a href="http://www.raintpl.com/">www.raintpl.com</a> under MIT<br/>
                    Embed - Oscar Otero <a href="https://github.com/oscarotero/Embed">GitHub Embed</a> under MIT<br/>
                    Database engine - Eloquent - <a href="https://github.com/illuminate/database">Illuminate/Database</a> under MIT<br/>
                    WebSocket and Daemon engine - ReactPHP -  <a href="http://socketo.me/">socketo.me</a> ©Chris Boden<br/>

app/widgets/Help/help.tpl

@@ -68,27 +68,41 @@
     </ul>
     <br />
     <hr />
-    <ul class="list thick block">
+    <ul class="list thick block hide" id="pwa">
         <li class="subheader">
             <div>
-                <p>{$c->__('apps.question')}</p>
+                <p>{$c->__('apps.title')}</p>
+            </div>
+        </li>
+        <li class="block active">
+            <span class="primary icon gray">
+                <i class="material-icons on_desktop">install_desktop</i>
+                <i class="material-icons on_mobile">install_mobile</i>
+            </span>
+            <span class="control icon gray">
+                <i class="material-icons">chevron_right</i>
+            </span>
+            <div>
+                <p class="line">{$c->__('apps.install')}<p>
+                <p class="all">
+                    {$c->__('apps.install_text')}
+                </p>
+            </div>
+        </li>
+    </ul>
+    <ul class="list">
+        <li class="subheader">
+            <div>
+                <p>{$c->__('apps.recommend')}</p>
             </div>
         </li>
         <li class="block">
-            <span class="primary icon bubble color green">
+            <span class="primary icon green">
                 <i class="material-icons">android</i>
             </span>
             <div>
-                <p>{$c->__('apps.phone')}<p>
-                <p class="all">
-                    {$c->__('apps.android')}
-                    <br />
-                    <a class="button flat" href="https://f-droid.org/packages/com.movim.movim/" target="_blank">
-                        <i class="material-icons">adb</i> F-Droid
-                    </a>
-                    <br />
-                    {$c->__('apps.recommend')} Conversations
-                    <br />
+                <p class="normal line">
+                    Conversations
                     <a class="button flat" href="https://play.google.com/store/apps/details?id=eu.siacs.conversations" target="_blank">
                         <i class="material-icons">android</i> Play Store
                     </a>
@@ -98,6 +112,19 @@
                 </p>
             </div>
         </li>
+        <li class="block">
+            <span class="primary icon purple">
+                <i class="material-icons">computer</i>
+            </span>
+            <div>
+                <p class="normal line">
+                    Dino
+                    <a class="button flat" href="https://dino.im/" target="_blank">
+                        <i class="material-icons">open_in_new</i> Website
+                    </a>
+                </p>
+            </div>
+        </li>
     </ul>
     {if="$info && (!empty($info->adminaddresses) || !empty($info->abuseaddresses) || !empty($info->supportaddresses)  || !empty($info->securityaddresses))"}
         <hr />
@@ -107,7 +134,6 @@
                     <p class="normal">{$c->__('contact.title')}</p>
                 </div>
             </li>
-            <hr />
             {$addresses = array_unique(array_merge($info->adminaddresses, $info->abuseaddresses, $info->supportaddresses, $info->securityaddresses))}
             {loop="$addresses"}
                 <li class="block">

app/widgets/Help/locales.ini

@@ -9,14 +9,10 @@ find_contacts_title = Where can I find my contacts?
 find_contacts_text  = By opening the search panel.
 
 [apps]
-question        = Have you already tried Movim on other platforms?
-phone           = Apps for your phone
-android         = Try out our official Android app
-recommend       = We also recommend
-computer        = Apps for your computer
-computer_text   = Our official apps are available on our website
-install         = Movim App
-install_text    = Install Movim on your device
+title        = Applications
+install      = Movim App
+install_text = Install Movim on your device
+recommend    = We also recommend
 
 [contact]
 title      = Administrators & Contact

app/widgets/Login/login.css

@@ -137,8 +137,4 @@ body main {
 
 #login_widget ul.invite span.primary + span.primary ~ p {
     padding-left: 12rem;
-}
-
-#login #pwa {
-    display: none;
 }

app/widgets/Login/login.js

@@ -94,6 +94,7 @@ MovimWebsocket.register(function()
 movimAddOnload(function() {
     // We had the autocomplete system
     var login = document.querySelector('input#username');
+
     login.addEventListener('input', function() {
         if (this.value.indexOf('@') == -1) {
             document.querySelector('input#complete').value = this.value + '@' + Login.domain;
@@ -109,30 +110,4 @@ movimAddOnload(function() {
     login.addEventListener('blur', function() {
         this.value = document.querySelector('input#complete').value;
     });
-
-
-    /**
-     * Handle the PWA install button
-     */
-    const pwaButton = document.querySelector('#pwa');
-    pwaButton.style.display = 'none';
-
-    window.addEventListener('beforeinstallprompt', (e) => {
-        e.preventDefault();
-        deferredPrompt = e;
-        pwaButton.style.display = 'initial';
-
-        pwaButton.addEventListener('click', () => {
-            deferredPrompt.prompt();
-
-            deferredPrompt.userChoice.then((choiceResult) => {
-                if (choiceResult.outcome === 'accepted') {
-                    console.log('Movim App installed');
-                }
-
-                deferredPrompt = null;
-            });
-        });
-    });
-
 });

app/widgets/Login/login.tpl

@@ -165,7 +165,7 @@
                 </ul>
             {/if}
 
-            <ul class="list middle" id="pwa">
+            <ul class="list middle hide" id="pwa">
                 <li class="block active">
                     <span class="primary icon bubble gray">
                         <i class="material-icons on_desktop">install_desktop</i>

public/scripts/movim_base.js

@@ -63,3 +63,29 @@ if ('serviceWorker' in navigator) {
         .register('sw.js')
         .then(() => { console.log('Service Worker Registered'); });
 }
+
+
+movimAddOnload(function() {
+    /**
+     * Handle the PWA install button
+     */
+     const pwaButton = document.querySelector('#pwa');
+
+     window.addEventListener('beforeinstallprompt', (e) => {
+         e.preventDefault();
+         deferredPrompt = e;
+         pwaButton.style.display = 'initial';
+
+         pwaButton.addEventListener('click', () => {
+             deferredPrompt.prompt();
+
+             deferredPrompt.userChoice.then((choiceResult) => {
+                 if (choiceResult.outcome === 'accepted') {
+                     console.log('Movim App installed');
+                 }
+
+                 deferredPrompt = null;
+             });
+         });
+     });
+});

src/Movim/i18n/Locale.php

@@ -163,6 +163,7 @@ class Locale
             return $string;
         } else {
             \Utils::info('Locale: Translation key "'.$key.'" not found');
+            return $arr[1];
         }
     }