Merge pull request #1608 from lnbits/feat/i18n

FEAT: add localisation to lnbits frontend

Makefile

@@ -89,3 +89,4 @@ updatevendor:
 	cp ./node_modules/quasar/dist/quasar.css ./lnbits/static/vendor/
 	cp ./node_modules/chart.js/dist/Chart.css ./lnbits/static/vendor/
 	cp ./node_modules/vue-qrcode-reader/dist/vue-qrcode-reader.css ./lnbits/static/vendor/
+	cp ./node_modules/vue-i18n/dist/vue-i18n.js ./lnbits/static/vendor/

lnbits/core/static/js/wallet.js

@@ -148,27 +148,27 @@ new Vue({
           {
             name: 'memo',
             align: 'left',
-            label: 'Memo',
+            label: this.$t('memo'),
             field: 'memo'
           },
           {
             name: 'date',
             align: 'left',
-            label: 'Date',
+            label: this.$t('date'),
             field: 'date',
             sortable: true
           },
           {
             name: 'sat',
             align: 'right',
-            label: 'Amount (' + LNBITS_DENOMINATION + ')',
+            label: this.$t('amount') + ' (' + LNBITS_DENOMINATION + ')',
             field: 'sat',
             sortable: true
           },
           {
             name: 'fee',
             align: 'right',
-            label: 'Fee (m' + LNBITS_DENOMINATION + ')',
+            label: this.$t('fee') + ' (m' + LNBITS_DENOMINATION + ')',
             field: 'fee'
           }
         ],
@@ -510,7 +510,7 @@ new Vue({
     payInvoice: function () {
       let dismissPaymentMsg = this.$q.notify({
         timeout: 0,
-        message: 'Processing payment...'
+        message: this.$t('processing_payment')
       })
 
       LNbits.api

lnbits/core/templates/admin/index.html

@@ -3,12 +3,14 @@
 <div class="row q-col-gutter-md justify-center">
   <div class="col q-my-md">
     <q-btn
-      label="Save"
+      :label="$t('save')"
       color="primary"
       @click="updateSettings"
       :disabled="!checkChanges"
     >
-      <q-tooltip v-if="checkChanges"> Save your changes </q-tooltip>
+      <q-tooltip v-if="checkChanges"
+        >{%raw%}{{ $t('save_tooltip') }}{%endraw%}</q-tooltip
+      >
 
       <q-badge
         v-if="checkChanges"
@@ -21,13 +23,13 @@
 
     <q-btn
       v-if="isSuperUser"
-      label="Restart server"
+      :label="$t('restart')"
       color="primary"
       @click="restartServer"
     >
-      <q-tooltip v-if="needsRestart">
-        Restart the server for changes to take effect
-      </q-tooltip>
+      <q-tooltip v-if="needsRestart"
+        >{%raw%}{{ $t('restart_tooltip') }}{%endraw%}</q-tooltip
+      >
 
       <q-badge
         v-if="needsRestart"
@@ -40,28 +42,24 @@
 
     <q-btn
       v-if="isSuperUser"
-      label="Topup"
+      :label="$t('topup')"
       color="primary"
       @click="topUpDialog.show = true"
     >
-      <q-tooltip> Add funds to a wallet. </q-tooltip>
+      <q-tooltip>{%raw%}{{ $t('add_funds_tooltip') }}{%endraw%}</q-tooltip>
     </q-btn>
 
-    <q-btn
-      label="Download Database Backup"
-      flat
-      @click="downloadBackup"
-    ></q-btn>
+    <q-btn :label="$t('download_backup')" flat @click="downloadBackup"></q-btn>
 
     <q-btn
       flat
       v-if="isSuperUser"
-      label="Reset to defaults"
+      :label="$t('reset_defaults')"
       color="primary"
       @click="deleteSettings"
       class="float-right"
     >
-      <q-tooltip> Delete all settings and reset to defaults. </q-tooltip>
+      <q-tooltip>{%raw%}{{ $t('reset_defaults_tooltip') }}{%endraw%}</q-tooltip>
     </q-btn>
   </div>
 </div>
@@ -74,25 +72,25 @@
           <q-tabs v-model="tab" active-color="primary" align="justify">
             <q-tab
               name="funding"
-              label="Funding"
+              :label="$t('funding')"
               @update="val => tab = val.name"
             ></q-tab>
 
             <q-tab
               name="users"
-              label="Users"
+              :label="$t('users')"
               @update="val => tab = val.name"
             ></q-tab>
 
             <q-tab
               name="server"
-              label="Server"
+              :label="$t('server')"
               @update="val => tab = val.name"
             ></q-tab>
 
             <q-tab
               name="theme"
-              label="Theme"
+              :label="$t('theme')"
               @update="val => tab = val.name"
             ></q-tab>
           </q-tabs>
@@ -113,7 +111,7 @@
 <q-dialog v-if="isSuperUser" v-model="topUpDialog.show" position="top">
   <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
     <q-form class="q-gutter-md">
-      <p>TopUp a wallet</p>
+      <p v-text="$t('topup_wallet')"></p>
 
       <div class="row">
         <div class="col-12">
@@ -123,7 +121,7 @@
             filled
             v-model="wallet.id"
             label="Wallet ID"
-            hint="Use the wallet ID to topup any wallet"
+            :hint="$t('topup_hint')"
           ></q-input>
 
           <br />
@@ -135,15 +133,25 @@
             type="number"
             filled
             v-model="wallet.amount"
-            label="Topup amount"
+            :label="$t('amount')"
           ></q-input>
         </div>
       </div>
 
       <div class="row q-mt-lg">
-        <q-btn label="Topup" color="primary" @click="topupWallet"></q-btn>
+        <q-btn
+          :label="$t('topup')"
+          color="primary"
+          @click="topupWallet"
+        ></q-btn>
 
-        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+        <q-btn
+          v-close-popup
+          flat
+          color="grey"
+          class="q-ml-auto"
+          :label="$t('cancel')"
+        ></q-btn>
       </div>
     </q-form>
   </q-card>

lnbits/core/templates/core/_api_docs.html

@@ -1,7 +1,7 @@
 <q-expansion-item
   group="extras"
   icon="swap_vertical_circle"
-  label="API info"
+  :label="$t('api_docs')"
   :content-inset-level="0.5"
 >
   <q-card-section>

lnbits/core/templates/core/extensions.html

@@ -11,8 +11,8 @@
         color="primary"
         type="a"
         :href="['/install?usr=', user.id].join('')"
-        >Manage Extensions</q-btn
-      >
+        :label="$t('manage_extensions')"
+      ></q-btn>
     </p>
   </div>
 
@@ -27,9 +27,7 @@
     </q-input>
   </div>
 </div>
-<p v-if="!filteredExtensions.length">
-  You don't have any extensions installed :(
-</p>
+<p v-if="!filteredExtensions.length" v-text="$t('no_extensions')"></p>
 <div class="row q-col-gutter-md">
   <div
     class="col-6 col-md-4 col-lg-3"

lnbits/core/templates/core/index.html

@@ -12,24 +12,23 @@
           @click="processing"
           type="a"
           href="{{ url_for('core.lnurlwallet') }}?lightning={{ lnurl }}"
-        >
-          Press to claim bitcoin
-        </q-btn>
+          v-text="$t('press_to_claim')"
+        ></q-btn>
         {% else %}
         <q-form @submit="createWallet" class="q-gutter-md">
           <q-input
             filled
             dense
             v-model="walletName"
-            label="Name your {{SITE_TITLE}} wallet *"
+            :label='$t("name_your_wallet", { name: "{{ SITE_TITLE }} *" })'
           ></q-input>
           <q-btn
             unelevated
             color="primary"
             :disable="walletName == ''"
             type="submit"
-            >Add a new wallet</q-btn
-          >
+            :label="$t('add_wallet')"
+          ></q-btn>
         </q-form>
         {% endif %}
       </q-card-section>
@@ -40,27 +39,7 @@
         <h3 class="q-my-none">{{SITE_TITLE}}</h3>
         <h5 class="q-my-md">{{SITE_TAGLINE}}</h5>
         <div v-if="'{{SITE_TITLE}}' == 'LNbits'">
-          <p>
-            Easy to set up and lightweight, LNbits can run on any
-            lightning-network funding source, currently supporting LND,
-            c-lightning, OpenNode, LNPay and even LNbits itself!
-          </p>
-          <p>
-            You can run LNbits for yourself, or easily offer a custodian
-            solution for others.
-          </p>
-          <p>
-            Each wallet has its own API keys and there is no limit to the number
-            of wallets you can make. Being able to partition funds makes LNbits
-            a useful tool for money management and as a development tool.
-          </p>
-          <p>
-            Extensions add extra functionality to LNbits so you can experiment
-            with a range of cutting-edge technologies on the lightning network.
-            We have made developing extensions as easy as possible, and as a
-            free and open-source project, we encourage people to develop and
-            submit their own.
-          </p>
+          <p v-text="$t('lnbits_description')"></p>
           <div class="row q-mt-md q-gutter-sm">
             <q-btn
               outline
@@ -69,8 +48,8 @@
               href="https://github.com/lnbits/lnbits"
               target="_blank"
               rel="noopener"
-              >View project in GitHub</q-btn
-            >
+              :label="$t('view_github')"
+            ></q-btn>
             <q-btn
               outline
               color="grey"
@@ -78,8 +57,8 @@
               href="https://legend.lnbits.com/paywall/GAqKguK5S8f6w5VNjS9DfK"
               target="_blank"
               rel="noopener"
-              >Donate</q-btn
-            >
+              :label="$t('donate')"
+            ></q-btn>
           </div>
         </div>
         <p v-else>{{SITE_DESCRIPTION | safe}}</p>
@@ -94,7 +73,7 @@
         <q-btn
           flat
           color="secondary"
-          label="Runs on"
+          :label="$t('runs_on')"
           class="full-width"
         ></q-btn>
         <div class="row">

lnbits/core/templates/core/wallet.html

@@ -37,8 +37,8 @@
                 >
                   <q-input
                     filled
-                    label="{{LNBITS_DENOMINATION}} to credit"
-                    hint="Press Enter to credit account"
+                    :label='$t("credit_label", { denomination: "{{LNBITS_DENOMINATION}}"})'
+                    :hint="$t('credit_hint')"
                     v-model="scope.value"
                     dense
                     autofocus
@@ -63,8 +63,8 @@
                 color="primary"
                 class="full-width"
                 @click="showParseDialog"
-                >Paste Request</q-btn
-              >
+                :label="$t('paste_request')"
+              ></q-btn>
             </div>
             <div class="col">
               <q-btn
@@ -72,8 +72,8 @@
                 color="primary"
                 class="full-width"
                 @click="showReceiveDialog"
-                >Create Invoice</q-btn
-              >
+                :label="$t('create_invoice')"
+              ></q-btn>
             </div>
             <div class="col">
               <q-btn
@@ -81,8 +81,11 @@
                 color="secondary"
                 icon="photo_camera"
                 @click="showCamera"
-                >scan
-                <q-tooltip>Use camera to scan an invoice/QR</q-tooltip>
+                :label="$t('scan')"
+              >
+                <q-tooltip
+                  >{% raw %}{{$t('camera_tooltip')}}{% endraw %}</q-tooltip
+                >
               </q-btn>
             </div>
           </div>
@@ -92,12 +95,18 @@
           <q-card-section>
             <div class="row items-center no-wrap q-mb-sm">
               <div class="col">
-                <h5 class="text-subtitle1 q-my-none">Transactions</h5>
+                <h5
+                  class="text-subtitle1 q-my-none"
+                  :v-text="$t('transactions')"
+                ></h5>
               </div>
               <div class="col-auto">
-                <q-btn flat color="grey" @click="exportCSV"
-                  >Export to CSV</q-btn
-                >
+                <q-btn
+                  flat
+                  color="grey"
+                  @click="exportCSV"
+                  :label="$t('export_csv')"
+                ></q-btn>
                 <!--<q-btn v-if="pendingPaymentsExist" dense flat round icon="update" color="grey" @click="checkPendingPayments">
                 <q-tooltip>Check pending</q-tooltip>
               </q-btn>-->
@@ -109,7 +118,9 @@
                   color="grey"
                   @click="showChart"
                 >
-                  <q-tooltip>Show chart</q-tooltip>
+                  <q-tooltip
+                    >{% raw %}{{$t('chart_tooltip')}}{% endraw %}</q-tooltip
+                  >
                 </q-btn>
               </div>
             </div>
@@ -120,7 +131,7 @@
               clearable
               v-model="paymentsTable.filter"
               debounce="300"
-              placeholder="Search by tag, memo, amount"
+              :placeholder="$t('search_by_tag_memo_amount')"
               class="q-mb-md"
             >
             </q-input>
@@ -131,7 +142,7 @@
               :row-key="paymentTableRowKey"
               :columns="paymentsTable.columns"
               :pagination.sync="paymentsTable.pagination"
-              no-data-label="No transactions made yet"
+              :no-data-label="$t('no_transactions')"
               :filter="paymentsTable.filter"
             >
               {% raw %}
@@ -159,7 +170,7 @@
                       color="grey"
                       @click="props.expand = !props.expand"
                     >
-                      <q-tooltip>Pending</q-tooltip>
+                      <q-tooltip>{{$t('pending')}}</q-tooltip>
                     </q-icon>
                   </q-td>
                   <q-td
@@ -209,7 +220,7 @@
                     <div class="text-center q-mb-lg">
                       <div v-if="props.row.isIn && props.row.pending">
                         <q-icon name="settings_ethernet" color="grey"></q-icon>
-                        Invoice waiting to be paid
+                        <span v-text="$t('invoice_waiting')"></span>
                         <lnbits-payment-details
                           :payment="props.row"
                         ></lnbits-payment-details>
@@ -232,15 +243,15 @@
                             outline
                             color="grey"
                             @click="copyText(props.row.bolt11)"
-                            >Copy invoice</q-btn
-                          >
+                            :label="$t('copy_invoice')"
+                          ></q-btn>
                           <q-btn
                             v-close-popup
                             flat
                             color="grey"
                             class="q-ml-auto"
-                            >Close</q-btn
-                          >
+                            :label="$t('close')"
+                          ></q-btn>
                         </div>
                       </div>
                       <div v-else-if="props.row.isPaid && props.row.isIn">
@@ -249,7 +260,7 @@
                           :name="'call_received'"
                           :color="'green'"
                         ></q-icon>
-                        Payment Received
+                        <span v-text="$t('payment_received')"></span>
                         <lnbits-payment-details
                           :payment="props.row"
                         ></lnbits-payment-details>
@@ -260,14 +271,14 @@
                           :name="'call_made'"
                           :color="'pink'"
                         ></q-icon>
-                        Payment Sent
+                        <span v-text="$t('payment_sent')"></span>
                         <lnbits-payment-details
                           :payment="props.row"
                         ></lnbits-payment-details>
                       </div>
                       <div v-else-if="props.row.isOut && props.row.pending">
                         <q-icon name="settings_ethernet" color="grey"></q-icon>
-                        Outgoing payment pending
+                        <span v-text="$t('outgoing_payment_pending')"></span>
                         <lnbits-payment-details
                           :payment="props.row"
                         ></lnbits-payment-details>
@@ -304,26 +315,17 @@
                 <q-expansion-item
                   group="extras"
                   icon="crop_free"
-                  label="Drain Funds"
+                  :label="$t('drain_funds')"
                 >
                   <q-card>
                     <q-card-section class="text-center">
-                      <p>
-                        This is an LNURL-withdraw QR code for slurping
-                        everything from this wallet. Do not share with anyone.
-                      </p>
                       <a href="lightning:{{wallet.lnurlwithdraw_full}}">
                         <qrcode
                           value="lightning:{{wallet.lnurlwithdraw_full}}"
                           :options="{width:240}"
                         ></qrcode>
                       </a>
-                      <p>
-                        It is compatible with <code>balanceCheck</code> and
-                        <code>balanceNotify</code> so your wallet may keep
-                        pulling the funds continuously from here after the first
-                        withdraw.
-                      </p>
+                      <p v-text="$('drain_funds_desc')"></p>
                     </q-card-section>
                   </q-card>
                 </q-expansion-item>
@@ -333,15 +335,11 @@
                 <q-expansion-item
                   group="extras"
                   icon="settings_cell"
-                  label="Export to Phone with QR Code"
+                  :label="$t('export_to_phone')"
                 >
                   <q-card>
                     <q-card-section class="text-center">
-                      <p>
-                        This QR code contains your wallet URL with full access.
-                        You can scan it from your phone to open your wallet from
-                        there.
-                      </p>
+                      <p v-text="$t('export_to_phone_desc')"></p>
                       <qrcode
                         :value="'{{request.base_url}}' +'wallet?usr={{user.id}}&wal={{wallet.id}}'"
                         :options="{width:240}"
@@ -353,7 +351,7 @@
                 <q-expansion-item
                   group="extras"
                   icon="edit"
-                  label="Rename wallet"
+                  :label="$t('rename_wallet')"
                 >
                   <q-card>
                     <q-card-section>
@@ -371,9 +369,9 @@
                         unelevated
                         class="q-mt-sm"
                         color="primary"
+                        :label="$t('update_name')"
                         @click="updateWalletName()"
-                        >Update name</q-btn
-                      >
+                      ></q-btn>
                     </q-card-section>
                   </q-card>
                 </q-expansion-item>
@@ -381,20 +379,17 @@
                 <q-expansion-item
                   group="extras"
                   icon="remove_circle"
-                  label="Delete wallet"
+                  :label="$t('delete_wallet')"
                 >
                   <q-card>
                     <q-card-section>
-                      <p>
-                        This whole wallet will be deleted, the funds will be
-                        <strong>UNRECOVERABLE</strong>.
-                      </p>
+                      <p v-text="$t('delete_wallet_desc')"></p>
                       <q-btn
                         unelevated
                         color="red-10"
                         @click="deleteWallet('{{ wallet.id }}', '{{ user.id }}')"
-                        >Delete wallet</q-btn
-                      >
+                        :label="$t('delete_wallet')"
+                      ></q-btn>
                     </q-card-section>
                   </q-card>
                 </q-expansion-item>
@@ -445,7 +440,7 @@
               filled
               dense
               v-model.number="receive.data.amount"
-              label="Amount ({{LNBITS_DENOMINATION}}) *"
+              :label="$('amount')+' ({{LNBITS_DENOMINATION}}) *'"
               mask="#.##"
               fill-mask="0"
               reverse-fill-mask
@@ -459,7 +454,7 @@
               dense
               v-model="receive.unit"
               type="text"
-              label="Unit"
+              :label="$t('unit')"
               :options="receive.units"
             ></q-select>
             <q-input
@@ -467,7 +462,7 @@
               filled
               dense
               v-model.number="receive.data.amount"
-              :label="'Amount (' + receive.unit + ') *'"
+              :label="$t('amount') + ' (' + receive.unit + ') *'"
               :mask="receive.unit != 'sat' ? '#.##' : '#'"
               fill-mask="0"
               reverse-fill-mask
@@ -482,7 +477,7 @@
               filled
               dense
               v-model.trim="receive.data.memo"
-              label="Memo"
+              :label="$t('memo')"
             ></q-input>
             {% raw %}
             <div v-if="receive.status == 'pending'" class="row q-mt-lg">
@@ -493,13 +488,17 @@
                 type="submit"
               >
                 <span v-if="receive.lnurl">
-                  Withdraw from {{receive.lnurl.domain}}
+                  {{$t('withdraw_from')}} {{receive.lnurl.domain}}
                 </span>
-                <span v-else> Create invoice </span>
+                <span v-else v-text="$t('create_invoice')"></span>
               </q-btn>
-              <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-                >Cancel</q-btn
-              >
+              <q-btn
+                v-close-popup
+                flat
+                color="grey"
+                class="q-ml-auto"
+                :label="$t('cancel')"
+              ></q-btn>
             </div>
             <q-spinner
               v-if="receive.status == 'loading'"
@@ -521,12 +520,19 @@
             </a>
           </div>
           <div class="row q-mt-lg">
-            <q-btn outline color="grey" @click="copyText(receive.paymentReq)"
-              >Copy invoice</q-btn
-            >
-            <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-              >Close</q-btn
-            >
+            <q-btn
+              outline
+              color="grey"
+              @click="copyText(receive.paymentReq)"
+              :label="$t('copy_invoice')"
+            ></q-btn>
+            <q-btn
+              v-close-popup
+              flat
+              color="grey"
+              class="q-ml-auto"
+              :label="$t('close')"
+            ></q-btn>
           </div>
         </q-card>
         {% endraw %}
@@ -545,24 +551,42 @@
             </h6>
             <q-separator class="q-my-sm"></q-separator>
             <p class="text-wrap">
-              <strong>Description:</strong> {{ parse.invoice.description }}<br />
+              <strong v-text="$t('description')">:</strong> {{
+              parse.invoice.description }}<br />
               <strong>Expire date:</strong> {{ parse.invoice.expireDate }}<br />
               <strong>Hash:</strong> {{ parse.invoice.hash }}
             </p>
             {% endraw %}
             <div v-if="canPay" class="row q-mt-lg">
-              <q-btn unelevated color="primary" @click="payInvoice">Pay</q-btn>
-              <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-                >Cancel</q-btn
-              >
+              <q-btn
+                unelevated
+                color="primary"
+                @click="payInvoice"
+                :label="$t('pay')"
+              ></q-btn>
+              <q-btn
+                v-close-popup
+                flat
+                color="grey"
+                class="q-ml-auto"
+                :label="$t('cancel')"
+              ></q-btn>
             </div>
             <div v-else class="row q-mt-lg">
-              <q-btn unelevated disabled color="yellow" text-color="black"
-                >Not enough funds!</q-btn
-              >
-              <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-                >Cancel</q-btn
-              >
+              <q-btn
+                :label="$t('not_enough_funds')"
+                unelevated
+                disabled
+                color="yellow"
+                text-color="black"
+              ></q-btn>
+              <q-btn
+                v-close-popup
+                flat
+                color="grey"
+                class="q-ml-auto"
+                :label="$t('cancel')"
+              ></q-btn>
             </div>
           </div>
           <div v-else-if="parse.lnurlauth">
@@ -584,9 +608,13 @@
               </p>
               <div class="row q-mt-lg">
                 <q-btn unelevated color="primary" type="submit">Login</q-btn>
-                <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-                  >Cancel</q-btn
-                >
+                <q-btn
+                  :label="$t('cancel')"
+                  v-close-popup
+                  flat
+                  color="grey"
+                  class="q-ml-auto"
+                ></q-btn>
               </div>
             </q-form>
             {% endraw %}
@@ -657,9 +685,13 @@
                 <q-btn unelevated color="primary" type="submit"
                   >Send {{LNBITS_DENOMINATION}}</q-btn
                 >
-                <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-                  >Cancel</q-btn
-                >
+                <q-btn
+                  :label="$t('cancel')"
+                  v-close-popup
+                  flat
+                  color="grey"
+                  class="q-ml-auto"
+                ></q-btn>
               </div>
             </q-form>
             {% endraw %}
@@ -675,7 +707,7 @@
                 dense
                 v-model.trim="parse.data.request"
                 type="textarea"
-                label="Paste an invoice, payment request or lnurl code *"
+                :label="$t('paste_invoice_label')"
               >
               </q-input>
               <div class="row q-mt-lg">
@@ -684,11 +716,15 @@
                   color="primary"
                   :disable="parse.data.request == ''"
                   type="submit"
-                  >Read</q-btn
-                >
-                <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-                  >Cancel</q-btn
-                >
+                  :label="$t('read')"
+                ></q-btn>
+                <q-btn
+                  v-close-popup
+                  flat
+                  color="grey"
+                  class="q-ml-auto"
+                  :label="$t('cancel')"
+                ></q-btn>
               </div>
             </q-form>
             <div v-else>
@@ -700,8 +736,13 @@
                 ></qrcode-stream>
               </q-responsive>
               <div class="row q-mt-lg">
-                <q-btn @click="closeCamera" flat color="grey" class="q-ml-auto">
-                  Cancel
+                <q-btn
+                  :label="$t('cancel')"
+                  @click="closeCamera"
+                  flat
+                  color="grey"
+                  class="q-ml-auto"
+                >
                 </q-btn>
               </div>
             </div>
@@ -719,9 +760,13 @@
             ></qrcode-stream>
           </div>
           <div class="row q-mt-lg">
-            <q-btn @click="closeCamera" flat color="grey" class="q-ml-auto"
-              >Cancel</q-btn
-            >
+            <q-btn
+              @click="closeCamera"
+              flat
+              color="grey"
+              class="q-ml-auto"
+              :label="$t('cancel')"
+            ></q-btn>
           </div>
         </q-card>
       </q-dialog>
@@ -755,31 +800,21 @@
       <q-dialog v-model="disclaimerDialog.show">
         <q-card class="q-pa-lg">
           <h6 class="q-my-md text-primary">Warning</h6>
-          <p>
-            Login functionality to be released in a future update, for now,
-            <strong
-              >make sure you bookmark this page for future access to your
-              wallet</strong
-            >!
-          </p>
-          <p>
-            This service is in BETA, and we hold no responsibility for people
-            losing access to funds. {% if service_fee > 0 %} To encourage you to
-            run your own LNbits installation, any balance on {% raw %}{{
-            disclaimerDialog.location.host }}{% endraw %} will incur a charge of
-            <strong>{{ service_fee }}% service fee</strong> per week. {% endif
-            %}
-          </p>
+          <p v-text="$t('disclaimer_dialog')"></p>
           <div class="row q-mt-lg">
             <q-btn
               outline
               color="grey"
               @click="copyText(disclaimerDialog.location.href)"
-              >Copy wallet URL</q-btn
-            >
-            <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-              >I understand</q-btn
-            >
+              :label="$t('copy_wallet_url')"
+            ></q-btn>
+            <q-btn
+              v-close-popup
+              flat
+              color="grey"
+              class="q-ml-auto"
+              :label="$t('i_understand')"
+            ></q-btn>
           </div>
         </q-card>
       </q-dialog>

lnbits/helpers.py

@@ -23,6 +23,7 @@ vendored_js = [
     "/static/vendor/vue-router.js",
     "/static/vendor/vue-qrcode-reader.browser.js",
     "/static/vendor/vue-qrcode.js",
+    "/static/vendor/vue-i18n.js",
     "/static/vendor/vuex.js",
     "/static/vendor/quasar.ie.polyfills.umd.min.js",
     "/static/vendor/quasar.umd.js",

lnbits/static/i18n/de.js

@@ -0,0 +1,90 @@
+window.localisation.de = {
+  server: 'Server',
+  theme: 'Theme',
+  funding: 'Funding',
+  users: 'Benutzer',
+  unit: 'Einheit',
+  restart: 'Server neu starten',
+  save: 'Speichern',
+  save_tooltip: 'Änderungen speichern',
+  topup: 'Aufladen',
+  topup_wallet: 'Wallet aufladen',
+  topup_hint: 'Nutze die Wallet-ID um eine beliebige Wallet aufzuladen',
+  restart_tooltip: 'Starte den Server neu um die Änderungen zu übernehmen',
+  add_funds_tooltip: 'Füge Geld zu einer Wallet hinzu.',
+  reset_defaults: 'Zurücksetzen',
+  reset_defaults_tooltip:
+    'Lösche alle Einstellungen und setze auf die Standardeinstellungen zurück.',
+  download_backup: 'Datenbank-Backup herunterladen',
+  name_your_wallet: 'Benenne deine %{name} Wallet',
+  paste_invoice_label:
+    'Füge eine Rechnung, Zahlungsanforderung oder lnurl ein *',
+  lnbits_description:
+    'Einfach zu installieren und leichtgewichtig, LNbits kann auf jeder Lightning-Netzwerk-Funding-Quelle laufen, derzeit unterstützt LND, c-lightning, OpenNode, LNPay und sogar LNbits selbst! Du kannst LNbits für dich selbst laufen lassen oder anderen eine kundige Lösung anbieten. Jede Wallet hat ihre eigenen API-Schlüssel und es gibt keine Begrenzung für die Anzahl der Wallets, die du erstellen kannst. Die Möglichkeit, Gelder zu partitionieren, macht LNbits zu einem nützlichen Werkzeug für die Geldverwaltung und als Entwicklungswerkzeug. Erweiterungen fügen der LNbits zusätzliche Funktionalität hinzu, so dass du mit einer Reihe von vorderen Technologien auf dem Lightning-Netzwerk experimentieren kannst. Wir haben es so einfach wie möglich gemacht, Erweiterungen zu entwickeln, und als freies und Open-Source-Projekt ermutigen wir Menschen, sich selbst zu entwickeln und ihre eigenen Beiträge einzureichen.',
+  export_to_phone: 'Exportieren Sie auf das Telefon mit QR-Code',
+  export_to_phone_desc:
+    'Dieser QR-Code enthält Ihre Wallet-URL mit vollständigem Zugriff. Sie können es von Ihrem Telefon aus scannen, um Ihre Wallet dort zu öffnen.',
+  wallets: 'Wallets',
+  add_wallet: 'Füge eine neue Wallet hinzu',
+  delete_wallet: 'Wallet löschen',
+  delete_wallet_desc:
+    'Diese ganze Wallet wird gelöscht, die Mittel sind UNWIEDERBRINGLICH.',
+  rename_wallet: 'Wallet umbenennen',
+  update_name: 'Name aktualisieren',
+  press_to_claim: 'Drücken Sie, um Bitcoin zu beanspruchen',
+  donate: 'Spenden',
+  view_github: 'Auf GitHub anzeigen',
+  voidwallet_active: 'VoidWallet ist aktiv! Zahlungen deaktiviert',
+  use_with_caution:
+    'VERWENDEN SIE MIT VORSICHT - %{name} Wallet ist noch in der BETA',
+  toggle_darkmode: 'Dark Mode umschalten',
+  view_swagger_docs: 'LNbits Swagger API-Dokumente anzeigen',
+  api_docs: 'Api docs',
+  commit_version: 'Commit version',
+  runs_on: 'Läuft auf',
+  credit_hint: 'Drücken Sie Enter, um das Konto zu belasten',
+  credit_label: '%{denomination} zu belasten',
+  paste_request: 'Anfrage einfügen',
+  create_invoice: 'Rechnung erstellen',
+  camera_tooltip:
+    'Verwenden Sie die Kamera, um eine Rechnung / QR-Code zu scannen',
+  export_csv: 'Exportieren Sie nach CSV',
+  transactions: 'Transaktionen',
+  chart_tooltip: 'Diagramm anzeigen',
+  pending: 'Ausstehend',
+  copy_invoice: 'Rechnung kopieren',
+  close: 'Schließen',
+  cancel: 'Stornieren',
+  scan: 'Scannen',
+  read: 'Lesen',
+  pay: 'Zahlen',
+  memo: 'Memo',
+  date: 'Datum',
+  processing_payment: 'Zahlung wird bearbeitet ...',
+  not_enough_funds: 'Nicht genug Geld!',
+  search_by_tag_memo_amount: 'Suche nach Tag, Memo, Betrag',
+  invoice_waiting: 'Rechnung wartet auf Zahlung',
+  payment_received: 'Zahlung erhalten',
+  payment_sent: 'Zahlung gesendet',
+  outgoing_payment_pending: 'Ausgehende Zahlung ausstehend',
+  drain_funds: 'Leeren Sie die Mittel',
+  drain_funds_desc:
+    'Dies ist ein LNURL-withdraw QR-Code zum Absaugen aller Mittel aus dieser Brieftasche. Teilen Sie es nicht mit jemandem. Es ist mit balanceCheck und balanceNotify kompatibel, so dass Ihre Brieftasche die Mittel nach dem ersten Abzug kontinuierlich von hier ziehen kann.',
+  i_understand: 'Ich verstehe',
+  copy_wallet_url: 'Wallet-URL kopieren',
+  disclaimer_dialog:
+    'Login-Funktionalität wird in einem zukünftigen Update veröffentlicht, für jetzt, stellen Sie sicher, dass Sie diese Seite als Lesezeichen speichern, um zukünftigen Zugriff auf Ihre Wallet zu erhalten! Dieser Service ist in BETA und wir übernehmen keine Verantwortung für Personen, die den Zugriff auf ihre Mittel verlieren.',
+  no_transactions: 'Noch keine Transaktionen',
+  manage_extensions: 'Erweiterungen verwalten',
+  manage_server: 'Server verwalten',
+  extensions: 'Erweiterungen',
+  no_extensions: 'Sie haben keine Erweiterungen installiert :(',
+  created: 'Erstellt',
+  payment_hash: 'Zahlungs-Hash',
+  fee: 'Gebühr',
+  amount: 'Menge',
+  description: 'Beschreibung',
+  expiry: 'Ablauf',
+  webhook: 'Webhook',
+  payment_proof: 'Zahlungsbeleg'
+}

lnbits/static/i18n/en.js

@@ -0,0 +1,86 @@
+window.localisation.en = {
+  server: 'Server',
+  theme: 'Theme',
+  funding: 'Funding',
+  users: 'Users',
+  restart: 'Restart server',
+  save: 'Save',
+  save_tooltip: 'Save your changes',
+  topup: 'Topup',
+  topup_wallet: 'Topup a wallet',
+  topup_hint: 'Use the wallet ID to topup any wallet',
+  restart_tooltip: 'Restart the server for changes to take effect',
+  add_funds_tooltip: 'Add funds to a wallet.',
+  reset_defaults: 'Reset to defaults',
+  reset_defaults_tooltip: 'Delete all settings and reset to defaults.',
+  download_backup: 'Download database backup',
+  name_your_wallet: 'Name your %{name} wallet',
+  paste_invoice_label: 'Paste an invoice, payment request or lnurl code *',
+  lnbits_description:
+    'Easy to set up and lightweight, LNbits can run on any lightning-network funding source, currently supporting LND, c-lightning, OpenNode, LNPay and even LNbits itself! You can run LNbits for yourself, or easily offer a custodian solution for others. Each wallet has its own API keys and there is no limit to the number of wallets you can make. Being able to partition funds makes LNbits a useful tool for money management and as a development tool. Extensions add extra functionality to LNbits so you can experiment with a range of cutting-edge technologies on the lightning network. We have made developing extensions as easy as possible, and as a free and open-source project, we encourage people to develop and submit their own.',
+  export_to_phone: 'Export to Phone with QR Code',
+  export_to_phone_desc:
+    'This QR code contains your wallet URL with full access. You can scan it from your phone to open your wallet from there.',
+  wallets: 'Wallets',
+  add_wallet: 'Add a new wallet',
+  delete_wallet: 'Delete wallet',
+  delete_wallet_desc:
+    'This whole wallet will be deleted, the funds will be UNRECOVERABLE.',
+  rename_wallet: 'Rename wallet',
+  update_name: 'Update name',
+  press_to_claim: 'Press to claim bitcoin',
+  donate: 'Donate',
+  view_github: 'View on GitHub',
+  voidwallet_active: 'VoidWallet is active! Payments disabled',
+  use_with_caution: 'USE WITH CAUTION - %{name} wallet is still in BETA',
+  toggle_darkmode: 'Toggle Dark Mode',
+  view_swagger_docs: 'View LNbits Swagger API docs',
+  api_docs: 'Api docs',
+  commit_version: 'Commit version',
+  runs_on: 'Runs on',
+  credit_hint: 'Press Enter to credit account',
+  credit_label: '%{denomination} to credit',
+  paste_request: 'Paste Request',
+  create_invoice: 'Create Invoice',
+  camera_tooltip: 'Use camera to scan an invoice/QR',
+  export_csv: 'Export to CSV',
+  transactions: 'Transactions',
+  chart_tooltip: 'Show chart',
+  pending: 'Pending',
+  copy_invoice: 'Copy invoice',
+  close: 'Close',
+  cancel: 'Cancel',
+  scan: 'Scan',
+  read: 'Read',
+  pay: 'Pay',
+  memo: 'Memo',
+  date: 'Date',
+  processing_payment: 'Processing payment...',
+  not_enough_funds: 'Not enough funds!',
+  search_by_tag_memo_amount: 'Search by tag, memo, amount',
+  invoice_waiting: 'Invoice waiting to be paid',
+  payment_received: 'Payment Received',
+  payment_sent: 'Payment Sent',
+  outgoing_payment_pending: 'Outgoing payment pending',
+  drain_funds: 'Drain Funds',
+  drain_funds_desc:
+    'This is an LNURL-withdraw QR code for slurping everything from this wallet. Do not share with anyone. It is compatible with balanceCheck and balanceNotify so your wallet may keep pulling the funds continuously from here after the first withdraw.',
+  i_understand: 'I understand',
+  copy_wallet_url: 'Copy wallet URL',
+  disclaimer_dialog:
+    'Login functionality to be released in a future update, for now, make sure you bookmark this page for future access to your wallet! This service is in BETA, and we hold no responsibility for people losing access to funds.',
+  no_transactions: 'No transactions made yet',
+  manage_extensions: 'Manage Extensions',
+  manage_server: 'Manage Server',
+  extensions: 'Extensions',
+  no_extensions: "You don't have any extensions installed :(",
+  created: 'Created',
+  payment_hash: 'Payment Hash',
+  fee: 'Fee',
+  amount: 'Amount',
+  unit: 'Unit',
+  description: 'Description',
+  expiry: 'Expiry',
+  webhook: 'Webhook',
+  payment_proof: 'Payment Proof'
+}

lnbits/static/i18n/es.js

@@ -0,0 +1,87 @@
+window.localisation.es = {
+  server: 'Servidor',
+  theme: 'Tema',
+  funding: 'Financiación',
+  unit: 'Unidad',
+  users: 'Usuarios',
+  restart: 'Reiniciar el servidor',
+  save: 'Guardar',
+  save_tooltip: 'Guardar cambios',
+  topup: 'Recargar',
+  topup_wallet: 'Recargar billetera',
+  topup_hint: 'Utilice el ID de billetera para recargar cualquier billetera',
+  restart_tooltip: 'Reinicie el servidor para aplicar los cambios',
+  add_funds_tooltip: 'Agregue fondos a una billetera.',
+  reset_defaults: 'Restablecer',
+  reset_defaults_tooltip:
+    'Borrar todas las configuraciones y restablecer a los valores predeterminados.',
+  download_backup: 'Descargar copia de seguridad de la base de datos',
+  name_your_wallet: 'Nombre de su billetera %{name}',
+  paste_invoice_label: 'Pegue la factura aquí',
+  lnbits_description:
+    'Fácil de instalar y liviano, LNbits puede ejecutarse en cualquier fuente de financiación de la red Lightning, actualmente compatible con LND, c-lightning, OpenNode, LNPay y hasta LNbits mismo! Puede ejecutar LNbits para usted mismo o ofrecer una solución competente a otros. Cada billetera tiene su propia clave API y no hay límite para la cantidad de billeteras que puede crear. La capacidad de particionar fondos hace de LNbits una herramienta útil para la administración de fondos y como herramienta de desarrollo. Las extensiones agregan funcionalidad adicional a LNbits, por lo que puede experimentar con una variedad de tecnologías de vanguardia en la red Lightning. Lo hemos hecho lo más simple posible para desarrollar extensiones y, como un proyecto gratuito y de código abierto, animamos a las personas a que se desarrollen a sí mismas y envíen sus propios contribuciones.',
+  export_to_phone: 'Exportar a teléfono con código QR',
+  export_to_phone_desc:
+    'Este código QR contiene su URL de billetera con acceso completo. Puede escanearlo desde su teléfono para abrir su billetera allí.',
+  wallets: 'Billeteras',
+  add_wallet: 'Agregar nueva billetera',
+  delete_wallet: 'Eliminar billetera',
+  delete_wallet_desc:
+    'Esta billetera completa se eliminará, los fondos son IRREVERSIBLES.',
+  rename_wallet: 'Cambiar el nombre de la billetera',
+  update_name: 'Actualizar nombre',
+  press_to_claim: 'Presione para reclamar Bitcoin',
+  donate: 'Donar',
+  view_github: 'Ver en GitHub',
+  voidwallet_active: '¡VoidWallet está activo! Pagos desactivados',
+  use_with_caution: 'USAR CON CUIDADO - %{name} Wallet aún está en BETA',
+  toggle_darkmode: 'Cambiar modo oscuro',
+  view_swagger_docs: 'Ver documentos de API de LNbits Swagger',
+  api_docs: 'Documentos de API',
+  commit_version: 'Versión de compromiso',
+  runs_on: 'Corre en',
+  credit_hint: 'Presione Enter para cargar la cuenta',
+  credit_label: 'Cargar %{denomination}',
+  paste_request: 'Pegar solicitud',
+  create_invoice: 'Crear factura',
+  camera_tooltip: 'Utilice la cámara para escanear una factura / código QR',
+  export_csv: 'Exportar a CSV',
+  transactions: 'Transacciones',
+  chart_tooltip: 'Mostrar gráfico',
+  pending: 'Pendiente',
+  copy_invoice: 'Copiar factura',
+  close: 'Cerrar',
+  cancel: 'Cancelar',
+  scan: 'Escanear',
+  read: 'Leer',
+  pay: 'Pagar',
+  memo: 'Memo',
+  date: 'Fecha',
+  processing_payment: 'Procesando pago ...',
+  not_enough_funds: '¡No hay suficientes fondos!',
+  search_by_tag_memo_amount: 'Buscar por etiqueta, memo, cantidad',
+  invoice_waiting: 'Factura esperando pago',
+  payment_received: 'Pago recibido',
+  payment_sent: 'Pago enviado',
+  outgoing_payment_pending: 'Pago saliente pendiente',
+  drain_funds: 'Drenar fondos',
+  drain_funds_desc:
+    'Este es un código QR LNURL-withdraw para drenar todos los fondos de esta billetera. No lo comparta con nadie. Es compatible con balanceCheck y balanceNotify, por lo que su billetera puede continuar drenando los fondos de aquí después del primer drenaje.',
+  i_understand: 'Lo entiendo',
+  copy_wallet_url: 'Copiar URL de billetera',
+  disclaimer_dialog:
+    'La funcionalidad de inicio de sesión se lanzará en una actualización futura, por ahora, asegúrese de guardar esta página como marcador para acceder a su billetera en el futuro. Este servicio está en BETA y no asumimos ninguna responsabilidad por personas que pierdan el acceso a sus fondos.',
+  no_transactions: 'No hay transacciones todavía',
+  manage_extensions: 'Administrar extensiones',
+  manage_server: 'Administrar servidor',
+  extensions: 'Extensiones',
+  no_extensions: 'No tienes extensiones instaladas :(',
+  created: 'Creado',
+  payment_hash: 'Hash de pago',
+  fee: 'Cuota',
+  amount: 'Cantidad',
+  description: 'Descripción',
+  expiry: 'Expiración',
+  webhook: 'Webhook',
+  payment_proof: 'Prueba de pago'
+}

lnbits/static/i18n/i18n.js

@@ -0,0 +1 @@
+window.localisation = {}

lnbits/static/i18n/jp.js

@@ -0,0 +1,85 @@
+window.localisation.jp = {
+  server: 'サーバー',
+  theme: 'テーマ',
+  funding: '資金調達',
+  users: 'ユーザー',
+  restart: 'サーバーを再起動する',
+  save: '保存',
+  unit: '単位',
+  save_tooltip: '変更を保存する',
+  topup: 'トップアップ',
+  topup_wallet: 'ウォレットをトップアップする',
+  topup_hint: 'ウォレットIDを使用して、任意のウォレットをトップアップできます',
+  restart_tooltip: 'サーバーを再起動して変更を適用します',
+  add_funds_tooltip: 'ウォレットに資金を追加します。',
+  reset_defaults: 'リセット',
+  reset_defaults_tooltip: 'すべての設定を削除してデフォルトに戻します。',
+  download_backup: 'データベースのバックアップをダウンロードする',
+  name_your_wallet: 'あなたのウォレットの名前 %{name}',
+  paste_invoice_label: '請求書を貼り付けてください',
+  lnbits_description:
+    '簡単にインストールでき、軽量で、LNbitsは現在LND、c-lightning、OpenNode、LNPay、さらにLNbits自身で動作する任意のLightningネットワークの資金源で実行できます！ LNbitsを自分で実行することも、他の人に優れたソリューションを提供することもできます。各ウォレットには独自のAPIキーがあり、作成できるウォレットの数に制限はありません。資金を分割する機能は、LNbitsを資金管理ツールとして使用したり、開発ツールとして使用したりするための便利なツールです。拡張機能は、LNbitsに追加の機能を追加します。そのため、LNbitsは最先端の技術をネットワークLightningで試すことができます。拡張機能を開発するのは簡単で、無料でオープンソースのプロジェクトであるため、人々が自分で開発し、自分の貢献を送信することを奨励しています。',
+  export_to_phone: '電話にエクスポート',
+  export_to_phone_desc:
+    'ウォレットを電話にエクスポートすると、ウォレットを削除する前にウォレットを復元できます。ウォレットを削除すると、ウォレットの秘密鍵が削除され、ウォレットを復元することはできません。',
+  wallets: 'ウォレット',
+  add_wallet: 'ウォレットを追加',
+  delete_wallet: 'ウォレットを削除',
+  delete_wallet_desc:
+    'ウォレットを削除すると、ウォレットの秘密鍵が削除され、ウォレットを復元することはできません。',
+  rename_wallet: 'ウォレットの名前を変更',
+  update_name: '名前を更新',
+  press_to_claim: 'クレームするには押してください',
+  donate: '寄付',
+  voidwallet_active: 'Voidwalletアクティブ',
+  use_with_caution: '注意して使用してください',
+  toggle_dark_mode: 'ダークモードを切り替える',
+  view_swagger_docs: 'Swaggerドキュメントを表示',
+  api_docs: 'APIドキュメント',
+  commit_version: 'コミットバージョン',
+  runs_on: 'で実行',
+  credit_hint:
+    'クレジットカードを使用して資金を追加するには、LNbitsを使用してください。',
+  credit_label: 'クレジットカード',
+  paste_request: 'リクエストを貼り付ける',
+  create_invoice: '請求書を作成する',
+  camera_tooltip: 'QRコードを読み取る',
+  export_csv: 'CSVでエクスポート',
+  transactions: 'トランザクション',
+  chart_tooltip: 'チャートを表示するには、グラフの上にカーソルを合わせます',
+  pending: '保留中',
+  copy_invoice: '請求書をコピー',
+  close: '閉じる',
+  cancel: 'キャンセル',
+  scan: 'スキャン',
+  read: '読む',
+  pay: '支払う',
+  memo: 'メモ',
+  date: '日付',
+  processing_payment: '支払い処理中',
+  not_enough_funds: '資金が不足しています',
+  search_by_tag_memo_amount: 'タグ、メモ、金額で検索',
+  invoice_waiting: '請求書を待っています',
+  payment_received: 'お支払いありがとうございます',
+  payment_sent: '支払いが完了しました',
+  outgoing_payment_pending: '支払い保留中',
+  drain_funds: '資金を排出する',
+  drain_funds_desc: 'ウォレットの残高をすべて他のウォレットに送金します',
+  i_understand: '理解した',
+  copy_wallet_url: 'ウォレットURLをコピー',
+  disclaimer_dialog:
+    'ウォレットを削除すると、ウォレットの秘密鍵が削除され、ウォレットを復元することはできません。ウォレットを削除する前に、ウォレットをエクスポートしてください。',
+  no_transactions: 'トランザクションはありません',
+  manage_extensions: '拡張機能を管理する',
+  manage_server: 'サーバーを管理する',
+  extensions: '拡張機能',
+  no_extensions: '拡張機能はありません',
+  created: '作成済み',
+  payment_hash: '支払いハッシュ',
+  fee: '料金',
+  amount: '量',
+  description: '説明',
+  expiry: '有効期限',
+  webhook: 'ウェブフック',
+  payment_proof: '支払い証明'
+}

lnbits/static/js/base.js

@@ -1,6 +1,14 @@
 /* globals crypto, moment, Vue, axios, Quasar, _ */
 
+Vue.use(VueI18n)
+
 window.LOCALE = 'en'
+window.i18n = new VueI18n({
+  locale: window.LOCALE,
+  fallbackLocale: window.LOCALE,
+  messages: window.localisation
+})
+
 window.EventHub = new Vue()
 window.LNbits = {
   api: {
@@ -320,6 +328,7 @@ window.LNbits = {
 }
 
 window.windowMixin = {
+  i18n: window.i18n,
   data: function () {
     return {
       g: {
@@ -335,6 +344,10 @@ window.windowMixin = {
   },
 
   methods: {
+    changeLanguage: function (newValue) {
+      window.i18n.locale = newValue
+      this.$q.localStorage.set('lnbits.lang', newValue)
+    },
     changeColor: function (newValue) {
       document.body.setAttribute('data-theme', newValue)
       this.$q.localStorage.set('lnbits.theme', newValue)
@@ -364,6 +377,12 @@ window.windowMixin = {
     }
     this.g.allowedThemes = window.allowedThemes ?? ['bitcoin']
 
+    let locale = this.$q.localStorage.getItem('lnbits.lang')
+    if (locale) {
+      window.LOCALE = locale
+      window.i18n.locale = locale
+    }
+
     addEventListener('offline', event => {
       this.g.offline = true
     })

lnbits/static/js/components.js

@@ -28,7 +28,7 @@ Vue.component('lnbits-wallet-list', {
   },
   template: `
     <q-list v-if="user && user.wallets.length" dense class="lnbits-drawer__q-list">
-      <q-item-label header>Wallets</q-item-label>
+      <q-item-label header v-text="$t('wallets')"></q-item-label>
       <q-item v-for="wallet in wallets" :key="wallet.id"
         clickable
         :active="activeWallet && activeWallet.id === wallet.id"
@@ -56,7 +56,7 @@ Vue.component('lnbits-wallet-list', {
           <q-icon :name="(showForm) ? 'remove' : 'add'" color="grey-5" size="md"></q-icon>
         </q-item-section>
         <q-item-section>
-          <q-item-label lines="1" class="text-caption">Add a wallet</q-item-label>
+          <q-item-label lines="1" class="text-caption" v-text="$t('add_wallet')"></q-item-label>
         </q-item-section>
       </q-item>
       <q-item v-if="showForm">
@@ -112,7 +112,7 @@ Vue.component('lnbits-extension-list', {
   },
   template: `
     <q-list v-if="user" dense class="lnbits-drawer__q-list">
-      <q-item-label header>Extensions</q-item-label>
+      <q-item-label header v-text="$t('extensions')"></q-item-label>
       <q-item v-for="extension in userExtensions" :key="extension.code"
         clickable
         :active="extension.isActive"
@@ -137,7 +137,7 @@ Vue.component('lnbits-extension-list', {
           <q-icon name="clear_all" color="grey-5" size="md"></q-icon>
         </q-item-section>
         <q-item-section>
-          <q-item-label lines="1" class="text-caption">Extensions</q-item-label>
+          <q-item-label lines="1" class="text-caption" v-text="$t('extensions')"></q-item-label>
         </q-item-section>
       </q-item>
       <q-item clickable tag="a" :href="['/install?usr=', user.id].join('')">
@@ -145,7 +145,7 @@ Vue.component('lnbits-extension-list', {
           <q-icon name="playlist_add" color="grey-5" size="md"></q-icon>
         </q-item-section>
         <q-item-section>
-          <q-item-label lines="1" class="text-caption">Manage Extensions</q-item-label>
+          <q-item-label lines="1" class="text-caption" v-text="$t('manage_extensions')"></q-item-label>
         </q-item-section>
       </q-item>
     </q-list>
@@ -199,7 +199,7 @@ Vue.component('lnbits-admin-ui', {
           <q-icon name="admin_panel_settings" color="grey-5" size="md"></q-icon>
         </q-item-section>
         <q-item-section>
-          <q-item-label lines="1" class="text-caption">Manage Server</q-item-label>
+          <q-item-label lines="1" class="text-caption" v-text="$t('manage_server')"></q-item-label>
         </q-item-section>
       </q-item>
     </q-list>
@@ -228,34 +228,34 @@ Vue.component('lnbits-payment-details', {
         </q-badge>
       </div>
       <div class="row">
-        <div class="col-3"><b>Created</b>:</div>
+        <div class="col-3"><b v-text="$t('created')"></b>:</div>
         <div class="col-9">{{ payment.date }} ({{ payment.dateFrom }})</div>
       </div>
       <div class="row">
-        <div class="col-3"><b>Expiry</b>:</div>
+        <div class="col-3"><b v-text="$t('expiry')"></b>:</div>
         <div class="col-9">{{ payment.expirydate }} ({{ payment.expirydateFrom }})</div>
       </div>
       <div class="row">
-        <div class="col-3"><b>Description</b>:</div>
+        <div class="col-3"><b v-text="$t('description')"></b>:</div>
         <div class="col-9">{{ payment.memo }}</div>
       </div>
       <div class="row">
-        <div class="col-3"><b>Amount</b>:</div>
+        <div class="col-3"><b v-text="$t('amount')"></b>:</div>
         <div class="col-9">{{ (payment.amount / 1000).toFixed(3) }} {{LNBITS_DENOMINATION}}</div>
       </div>
       <div class="row">
-        <div class="col-3"><b>Fee</b>:</div>
+        <div class="col-3"><b v-text="$t('fee')"></b>:</div>
         <div class="col-9">{{ (payment.fee / 1000).toFixed(3) }} {{LNBITS_DENOMINATION}}</div>
       </div>
       <div class="row">
-        <div class="col-3"><b>Payment hash</b>:</div>
+        <div class="col-3"><b v-text="$t('payment_hash')"></b>:</div>
         <div class="col-9 text-wrap mono">
             {{ payment.payment_hash }}
             <q-icon name="content_copy" @click="copyText(payment.payment_hash)" size="1em" color="grey" class="q-mb-xs cursor-pointer" />
       </div>
       </div>
       <div class="row" v-if="payment.webhook">
-        <div class="col-3"><b>Webhook</b>:</div>
+        <div class="col-3"><b v-text="$t('webhook')"></b>:</div>
         <div class="col-9 text-wrap mono">
           {{ payment.webhook }}
           <q-badge :color="webhookStatusColor" text-color="white">
@@ -264,7 +264,7 @@ Vue.component('lnbits-payment-details', {
         </div>
       </div>
       <div class="row" v-if="hasPreimage">
-        <div class="col-3"><b>Payment proof</b>:</div>
+        <div class="col-3"><b v-text="$t('payment_proof')"></b>:</div>
         <div class="col-9 text-wrap mono">{{ payment.preimage }}</div>
       </div>
       <div class="row" v-for="entry in extras">

lnbits/templates/base.html

@@ -46,15 +46,14 @@
           </q-toolbar-title>
           {% block beta %} {% if VOIDWALLET %}
           <q-badge color="red" text-color="black" class="q-mr-md">
-            <span>VoidWallet is active! Payments disabled</span>
+            {% raw %}{{ $t('voidwallet_active') }}{% endraw %}
           </q-badge>
           {%endif%}
           <q-badge color="yellow" text-color="black" class="q-mr-md">
             <span
-              ><span v-show="$q.screen.gt.sm"
-                >USE WITH CAUTION - {{SITE_TITLE}} wallet is still in </span
-              >BETA</span
-            >
+              v-show="$q.screen.gt.sm"
+              v-text='$t("use_with_caution", { name: "{{ SITE_TITLE }}" })'
+            ></span>
           </q-badge>
           {% endblock %}
           <q-badge
@@ -63,8 +62,39 @@
             text-color="white"
             class="q-mr-md"
           >
-            <span> OFFLINE </span>
+            <span>OFFLINE</span>
           </q-badge>
+          <q-btn-dropdown
+            dense
+            flat
+            round
+            size="sm"
+            icon="language"
+            class="q-pl-md"
+          >
+            <q-list>
+              <q-item clickable v-close-popup @click="changeLanguage('en')">
+                <q-item-section>
+                  <q-item-label>EN</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-item clickable v-close-popup @click="changeLanguage('de')">
+                <q-item-section>
+                  <q-item-label>DE</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-item clickable v-close-popup @click="changeLanguage('es')">
+                <q-item-section>
+                  <q-item-label>ES</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-item clickable v-close-popup @click="changeLanguage('jp')">
+                <q-item-section>
+                  <q-item-label>JP</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-btn-dropdown>
           <q-btn-dropdown
             v-if="g.allowedThemes && g.allowedThemes.length > 1"
             dense
@@ -175,7 +205,9 @@
             :icon="($q.dark.isActive) ? 'brightness_3' : 'wb_sunny'"
             size="sm"
           >
-            <q-tooltip>Toggle Dark Mode</q-tooltip>
+            <q-tooltip
+              >{% raw %}{{ $t('toggle_darkmode') }}{% endraw %}</q-tooltip
+            >
           </q-btn>
         </q-toolbar>
       </q-header>
@@ -213,7 +245,8 @@
             <br />
 
             <small v-if="'{{SITE_TITLE}}' == 'LNbits'"
-              >Commit version: {{LNBITS_VERSION}}</small
+              >{% raw %}{{ $t('commit_version') }}{% endraw %}:
+              {{LNBITS_VERSION}}</small
             >
           </q-toolbar-title>
           <q-space></q-space>
@@ -226,8 +259,10 @@
             target="_blank"
             rel="noopener"
           >
-            API DOCS
-            <q-tooltip>View LNbits Swagger API docs</q-tooltip>
+            {% raw %}{{ $t('api_docs') }}{% endraw %}
+            <q-tooltip
+              >{% raw %}{{ $t('view_swagger_docs') }}{% endraw %}</q-tooltip
+            >
           </q-btn>
           <q-btn
             flat
@@ -239,7 +274,7 @@
             target="_blank"
             rel="noopener"
           >
-            <q-tooltip>View project in GitHub</q-tooltip>
+            <q-tooltip>{% raw %}{{ $t('view_github') }}{% endraw %}</q-tooltip>
           </q-btn>
         </q-toolbar>
       </q-footer>
@@ -253,6 +288,11 @@
     <script src="{{ url }}"></script>
     {% endfor %}
     <!---->
+    <script src="/static/i18n/i18n.js"></script>
+    <script src="/static/i18n/en.js"></script>
+    <script src="/static/i18n/de.js"></script>
+    <script src="/static/i18n/es.js"></script>
+    <script src="/static/i18n/jp.js"></script>
     <script src="/static/js/base.js"></script>
     <script src="/static/js/components.js"></script>
     <script src="/static/js/bolt11-decoder.js"></script>

package-lock.json

@@ -13,6 +13,7 @@
         "quasar": "1.13.2",
         "underscore": "^1.13.6",
         "vue": "2.6.12",
+        "vue-i18n": "^8.28.2",
         "vue-qrcode-reader": "2.2",
         "vue-router": "3.4.3",
         "vuex": "3.5.1"
@@ -536,6 +537,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
       "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
     },
+    "node_modules/vue-i18n": {
+      "version": "8.28.2",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.28.2.tgz",
+      "integrity": "sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA=="
+    },
     "node_modules/vue-qrcode-reader": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/vue-qrcode-reader/-/vue-qrcode-reader-2.2.0.tgz",

package.json

@@ -12,6 +12,7 @@
     "quasar": "1.13.2",
     "underscore": "^1.13.6",
     "vue": "2.6.12",
+    "vue-i18n": "^8.28.2",
     "vue-qrcode-reader": "2.2",
     "vue-router": "3.4.3",
     "vuex": "3.5.1"

tools/build.py

@@ -13,6 +13,7 @@ vendored_js = [
     "/static/vendor/vue-router.js",
     "/static/vendor/vue-qrcode-reader.browser.js",
     "/static/vendor/vue-qrcode.js",
+    "/static/vendor/vue-i18n.js",
     "/static/vendor/vuex.js",
     "/static/vendor/quasar.ie.polyfills.umd.min.js",
     "/static/vendor/quasar.umd.js",