refactor into <lnbits-footer /> component (#3487)

lnbits/static/js/components/lnbits-footer.js

@@ -0,0 +1,18 @@
+window.app.component('lnbits-footer', {
+  template: '#lnbits-footer',
+  mixins: [window.windowMixin],
+  computed: {
+    version() {
+      return this.LNBITS_VERSION || 'unknown version'
+    },
+    title() {
+      return `${this.SITE_TITLE}, ${this.SITE_TAGLINE}`
+    },
+    showFooter() {
+      return (
+        this.SITE_TITLE == 'LNbits' &&
+        this.LNBITS_SHOW_HOME_PAGE_ELEMENTS == true
+      )
+    }
+  }
+})

lnbits/static/vendor.json

@@ -69,6 +69,7 @@
     "js/components/lnbits-new-user-wallet.js",
     "js/components/lnbits-qrcode.js",
     "js/components/lnbits-qrcode-lnurl.js",
+    "js/components/lnbits-footer.js",
     "js/components/extension-settings.js",
     "js/components/data-fields.js",
     "js/components/payment-list.js",

lnbits/templates/base.html

@@ -355,51 +355,7 @@
           </q-page>
         </q-page-container>
         {% endblock %} {% block footer %}
-
-        <q-footer
-          v-if="'{{ SITE_TITLE }}' == 'LNbits' && '{{ LNBITS_SHOW_HOME_PAGE_ELEMENTS }}' == 'True'"
-          class="bg-transparent q-px-lg q-py-md"
-          :class="{'text-dark': !$q.dark.isActive}"
-        >
-          <q-space class="q-py-lg lt-md"></q-space>
-          <q-toolbar class="gt-sm">
-            <q-toolbar-title class="text-caption">
-              {{ SITE_TITLE }}, {{SITE_TAGLINE}}
-              <br />
-              <small
-                v-text="$t('lnbits_version') + ': {{LNBITS_VERSION}}'"
-              ></small>
-            </q-toolbar-title>
-            <q-space></q-space>
-            <q-btn
-              flat
-              dense
-              :color="($q.dark.isActive) ? 'white' : 'primary'"
-              type="a"
-              href="/docs"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <span v-text="$t('api_docs')"></span>
-              <q-tooltip
-                ><span v-text="$t('view_swagger_docs')"></span
-              ></q-tooltip>
-            </q-btn>
-            <q-btn
-              flat
-              dense
-              :color="($q.dark.isActive) ? 'white' : 'primary'"
-              icon="code"
-              type="a"
-              href="https://github.com/lnbits/lnbits"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <q-tooltip><span v-text="$t('view_github')"></span></q-tooltip>
-            </q-btn>
-          </q-toolbar>
-        </q-footer>
-
+        <lnbits-footer />
         {% endblock %}
       </q-layout>
     </div>

lnbits/templates/components.vue

@@ -10,7 +10,8 @@ include('components/admin/extensions.vue') %} {%
 include('components/admin/library.vue') %} {%
 include('components/admin/notifications.vue') %} {%
 include('components/admin/server.vue') %} {%
-include('components/new_user_wallet.vue') %}
+include('components/new_user_wallet.vue') %} {%
+include('components/lnbits-footer.vue') %}
 
 <template id="lnbits-wallet-list">
   <q-list

lnbits/templates/components/lnbits-footer.vue

@@ -0,0 +1,41 @@
+<template id="lnbits-footer">
+  <q-footer
+    v-if="showFooter"
+    class="bg-transparent q-px-lg q-py-md"
+    :class="{'text-dark': !$q.dark.isActive}"
+  >
+    <q-space class="q-py-lg lt-md"></q-space>
+    <q-toolbar class="gt-sm">
+      <q-toolbar-title class="text-caption">
+        <span v-text="title"></span>
+        <br />
+        <small v-text="$t('lnbits_version') + ': ' + version"></small>
+      </q-toolbar-title>
+      <q-space></q-space>
+      <q-btn
+        flat
+        dense
+        :color="$q.dark.isActive ? 'white' : 'primary'"
+        type="a"
+        href="/docs"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <span v-text="$t('api_docs')"></span>
+        <q-tooltip><span v-text="$t('view_swagger_docs')"></span></q-tooltip>
+      </q-btn>
+      <q-btn
+        flat
+        dense
+        :color="$q.dark.isActive ? 'white' : 'primary'"
+        icon="code"
+        type="a"
+        href="https://github.com/lnbits/lnbits"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <q-tooltip><span v-text="$t('view_github')"></span></q-tooltip>
+      </q-btn>
+    </q-toolbar>
+  </q-footer>
+</template>

package.json

@@ -121,6 +121,7 @@
       "js/components/lnbits-new-user-wallet.js",
       "js/components/lnbits-qrcode.js",
       "js/components/lnbits-qrcode-lnurl.js",
+      "js/components/lnbits-footer.js",
       "js/components/extension-settings.js",
       "js/components/data-fields.js",
       "js/components/payment-list.js",