add offline indicator

lnbits/static/js/base.js

@@ -315,6 +315,7 @@ window.windowMixin = {
   data: function () {
     return {
       g: {
+        offline: !navigator.onLine,
         visibleDrawer: false,
         extensions: [],
         user: null,
@@ -354,6 +355,14 @@ window.windowMixin = {
     }
     this.g.allowedThemes = window.allowedThemes ?? ['bitcoin']
 
+    addEventListener('offline', event => { 
+      this.g.offline = true
+    })
+
+    addEventListener('online', event => {
+      this.g.offline = false
+    })
+
     // failsafe if admin changes themes halfway
     if (!this.$q.localStorage.getItem('lnbits.theme')){
       this.changeColor(this.g.allowedThemes[0])
@@ -432,4 +441,4 @@ window.decryptLnurlPayAES = function (success_action, preimage) {
       let decoder = new TextDecoder('utf-8')
       return decoder.decode(valueb)
     })
-}
+}

lnbits/templates/base.html

@@ -51,6 +51,11 @@
             >
           </q-badge>
           {% endblock %}
+          <q-badge v-if="g.offline" color="red" text-color="white" class="q-mr-md">
+            <span>
+              OFFLINE
+            </span>
+          </q-badge>
           <q-btn-dropdown
             v-if="g.allowedThemes && g.allowedThemes.length > 1"
             dense