Merge pull request #2523 from wallabag/qrcode-android-app

Added QRCode and link to configure android application

app/Resources/static/themes/_global/js/tools.js

@@ -1,5 +1,8 @@
 const $ = require('jquery');
 
+/* Allows inline call qr-code call */
+import jrQrcode from 'jr-qrcode'; // eslint-disable-line
+
 function supportsLocalStorage() {
   try {
     return 'localStorage' in window && window.localStorage !== null;

package.json

@@ -99,5 +99,8 @@
     "stylelint": "^7.3.1",
     "stylelint-config-standard": "^13.0.2",
     "through": "^2.3.8"
+  },
+  "dependencies": {
+    "jr-qrcode": "^1.0.5"
   }
 }

src/Wallabag/CoreBundle/Controller/ConfigController.php

@@ -149,6 +149,7 @@ class ConfigController extends Controller
                 'token' => $config->getRssToken(),
             ],
             'twofactor_auth' => $this->getParameter('twofactor_auth'),
+            'wallabag_url' => $this->get('craue_config')->get('wallabag_url'),
             'enabled_users' => $this->getDoctrine()
                 ->getRepository('WallabagUserBundle:User')
                 ->getSumEnabledUsers(),

src/Wallabag/CoreBundle/Resources/translations/messages.da.yml

@@ -71,6 +71,7 @@ config:
             # 300_word: 'I read ~300 words per minute'
             # 400_word: 'I read ~400 words per minute'
         pocket_consumer_key_label: Brugers nøgle til Pocket for at importere materialer
+        # android_configuration: Configure your Android application
     form_rss:
         description: 'RSS-feeds fra wallabag gør det muligt at læse de artikler, der gemmes i wallabag, med din RSS-læser. Det kræver, at du genererer et token først.'
         token_label: 'RSS-Token'

src/Wallabag/CoreBundle/Resources/translations/messages.de.yml

@@ -71,6 +71,7 @@ config:
             300_word: 'Ich lese ~300 Wörter pro Minute'
             400_word: 'Ich lese ~400 Wörter pro Minute'
         pocket_consumer_key_label: Consumer-Key für Pocket, um Inhalte zu importieren
+        # android_configuration: Configure your Android application
     form_rss:
         description: 'Die RSS-Feeds von wallabag erlauben es dir, deine gespeicherten Artikel mit deinem bevorzugten RSS-Reader zu lesen. Vorher musst du jedoch einen Token erstellen.'
         token_label: 'RSS-Token'

src/Wallabag/CoreBundle/Resources/translations/messages.en.yml

@@ -71,6 +71,7 @@ config:
             300_word: 'I read ~300 words per minute'
             400_word: 'I read ~400 words per minute'
         pocket_consumer_key_label: Consumer key for Pocket to import contents
+        android_configuration: Configure your Android application
     form_rss:
         description: 'RSS feeds provided by wallabag allow you to read your saved articles with your favourite RSS reader. You need to generate a token first.'
         token_label: 'RSS token'

src/Wallabag/CoreBundle/Resources/translations/messages.es.yml

@@ -71,6 +71,7 @@ config:
             300_word: 'Leo ~300 palabras por minuto'
             400_word: 'Leo ~400 palabras por minuto'
         # pocket_consumer_key_label: Consumer key for Pocket to import contents
+        # android_configuration: Configure your Android application
     form_rss:
         description: 'Los feeds RSS de wallabag permiten leer los artículos guardados con su lector RSS favorito. Necesita generar un token primero'
         token_label: 'RSS token'

src/Wallabag/CoreBundle/Resources/translations/messages.fa.yml

@@ -71,6 +71,7 @@ config:
             300_word: 'من تقریباً ۳۰۰ واژه را در دقیقه می‌خوانم'
             400_word: 'من تقریباً ۴۰۰ واژه را در دقیقه می‌خوانم'
         pocket_consumer_key_label: کلید کاربری Pocket برای درون‌ریزی مطالب
+        # android_configuration: Configure your Android application
     form_rss:
         description: 'با خوراک آر-اس-اس که wallabag در اختیارتان می‌گذارد، می‌توانید مقاله‌های ذخیره‌شده را در نرم‌افزار آر-اس-اس دلخواه خود بخوانید. برای این کار نخست باید یک کد بسازید.'
         token_label: 'کد آر-اس-اس'

src/Wallabag/CoreBundle/Resources/translations/messages.fr.yml

@@ -71,6 +71,7 @@ config:
             300_word: 'Je lis environ 300 mots par minute'
             400_word: 'Je lis environ 400 mots par minute'
         pocket_consumer_key_label: Clé d'authentification Pocket pour importer les données
+        android_configuration: Configurez votre application Android
     form_rss:
         description: "Les flux RSS fournis par wallabag vous permettent de lire vos articles sauvegardés dans votre lecteur de flux préféré. Pour pouvoir les utiliser, vous devez d'abord créer un jeton."
         token_label: 'Jeton RSS'

src/Wallabag/CoreBundle/Resources/translations/messages.it.yml

@@ -71,6 +71,7 @@ config:
             300_word: 'Leggo ~300 parole al minuto'
             400_word: 'Leggo ~400 parole al minuto'
         pocket_consumer_key_label: Consumer key per Pocket per importare i contenuti
+        # android_configuration: Configure your Android application
     form_rss:
         description: 'I feed RSS generati da wallabag ti permettono di leggere i tuoi contenuti salvati con il tuo lettore di RSS preferito. Prima, devi generare un token.'
         token_label: 'RSS token'

src/Wallabag/CoreBundle/Resources/translations/messages.oc.yml

@@ -71,6 +71,7 @@ config:
             300_word: "Legissi a l'entorn de 300 mots per minuta"
             400_word: "Legissi a l'entorn de 400 mots per minuta"
         pocket_consumer_key_label: Clau d'autentificacion Pocket per importar las donadas
+        # android_configuration: Configure your Android application
     form_rss:
         description: "Los fluxes RSS fornits per wallabag vos permeton de legir vòstres articles salvagardats dins vòstre lector de fluxes preferit. Per los poder emplegar, vos cal, d'en primièr crear un geton."
         token_label: 'Geton RSS'

src/Wallabag/CoreBundle/Resources/translations/messages.pl.yml

@@ -71,6 +71,7 @@ config:
             300_word: 'Czytam ~300 słów na minutę'
             400_word: 'Czytam ~400 słów na minutę'
         pocket_consumer_key_label: 'Klucz klienta Pocket do importu zawartości'
+        # android_configuration: Configure your Android application
     form_rss:
         description: 'Kanały RSS prowadzone przez wallabag pozwalają Ci na czytanie twoich zapisanych artykułów w twoium ulubionym czytniku RSS. Musisz najpierw wynegenerować tokena.‌'
         token_label: 'Token RSS'

src/Wallabag/CoreBundle/Resources/translations/messages.ro.yml

@@ -71,6 +71,7 @@ config:
             # 300_word: 'I read ~300 words per minute'
             # 400_word: 'I read ~400 words per minute'
         pocket_consumer_key_label: Cheie consumator pentru importarea contentului din Pocket
+        # android_configuration: Configure your Android application
     form_rss:
         description: 'Feed-urile RSS oferite de wallabag îți permit să-ți citești articolele salvate în reader-ul tău preferat RSS.'
         token_label: 'RSS-Token'

src/Wallabag/CoreBundle/Resources/translations/messages.tr.yml

@@ -71,6 +71,7 @@ config:
             # 300_word: 'I read ~300 words per minute'
             # 400_word: 'I read ~400 words per minute'
         # pocket_consumer_key_label: Consumer key for Pocket to import contents
+        # android_configuration: Configure your Android application
     form_rss:
         description: 'wallabag RSS akışı kaydetmiş olduğunuz makalelerini favori RSS okuyucunuzda görüntülemenizi sağlar. Bunu yapabilmek için öncelikle belirteç (token) oluşturmalısınız.'
         token_label: 'RSS belirteci (token)'

src/Wallabag/CoreBundle/Resources/views/themes/baggy/Config/index.html.twig

@@ -54,6 +54,16 @@
                     <a href="https://getpocket.com/developer/docs/authentication">https://getpocket.com/developer/docs/authentication</a>
                 </p>
             </div>
+
+            <div class="row">
+                <h3>{{ 'config.form_settings.android_configuration'|trans }}</h3>
+                <a href="wallabag://{{ app.user.username }}@{{ wallabag_url }}" >Touch here to prefill your Android application</a>
+                <img id="androidQrcode" />
+                <script>
+                    const imgBase64 = jrQrcode.getQrBase64('wallabag://{{ app.user.username }}@{{ wallabag_url }}');
+                    document.getElementById('androidQrcode').src = imgBase64;
+                </script>
+            </div>
         </fieldset>
 
         {{ form_rest(form.config) }}

src/Wallabag/CoreBundle/Resources/views/themes/material/Config/index.html.twig

@@ -71,6 +71,18 @@
                                 </div>
                             </div>
 
+                            <div class="row">
+                                <div class="input-field col s12">
+                                    <h5>{{ 'config.form_settings.android_configuration'|trans }}</h5>
+                                    <a href="wallabag://{{ app.user.username }}@{{ wallabag_url }}" class="waves-effect waves-light btn hide-on-large-only">Touch here to prefill your Android application</a>
+                                    <img id="androidQrcode" class="hide-on-med-and-down" />
+                                </div>
+                                <script>
+                                    const imgBase64 = jrQrcode.getQrBase64('wallabag://{{ app.user.username }}@{{ wallabag_url }}');
+                                    document.getElementById('androidQrcode').src = imgBase64;
+                                </script>
+                            </div>
+
                             {{ form_widget(form.config.save, {'attr': {'class': 'btn waves-effect waves-light'}}) }}
                             {{ form_rest(form.config) }}
                         </form>