feat: add dynamic errorpage (#3602)

lnbits/templates/components.vue

@@ -28,7 +28,8 @@ include('components/lnbits-wallet-api-docs.vue') %} {%
 include('components/lnbits-wallet-share.vue') %} {%
 include('components/lnbits-wallet-charts.vue') %} {%
 include('components/lnbits-wallet-paylinks.vue') %} {%
-include('components/lnbits-wallet-extra.vue') %}
+include('components/lnbits-wallet-extra.vue') %} {%
+include('components/lnbits-error.vue') %}
 
 <template id="lnbits-manage">
   <q-list v-if="g.user" dense class="lnbits-drawer__q-list">

lnbits/templates/components/lnbits-drawer.vue

@@ -24,7 +24,6 @@
             flat
             :icon="g.walletFlip ? 'view_list' : 'view_column'"
             color="grey"
-            class=""
             @click="g.walletFlip = !g.walletFlip"
           >
             <q-tooltip

lnbits/templates/components/lnbits-error.vue

@@ -0,0 +1,25 @@
+<template id="lnbits-error">
+  <div class="text-center q-pa-md flex flex-center">
+    <div>
+      <div class="error-code" v-text="code"></div>
+      <div class="error-message" v-text="message"></div>
+      <div class="q-mx-auto q-mt-lg justify-center" style="width: max-content">
+        <q-btn
+          v-if="isExtension"
+          color="primary"
+          @click="goToExtension()"
+          label="Go To Extension"
+        ></q-btn>
+        <q-btn
+          v-else-if="g.isUserAuthorized"
+          color="primary"
+          @click="goToWallet()"
+          label="Go to Wallet"
+        ></q-btn>
+        <q-btn v-else color="primary" @click="goBack()" label="Go Back"></q-btn>
+        <span class="q-mx-md">OR</span>
+        <q-btn color="secondary" @click="goHome()" label="Go Home"></q-btn>
+      </div>
+    </div>
+  </div>
+</template>

lnbits/templates/error.html

@@ -1,102 +1,5 @@
-{% extends "public.html" %} {% block page_container %}
-<q-page-container>
-  <q-page
-    class="q-px-md q-py-lg content-center"
-    :class="{'q-px-lg': $q.screen.gt.xs}"
-  >
-    {% block page %}
-    <div class="text-center q-pa-md flex flex-center">
-      <div v-if="statusCode">
-        <div class="error-code" v-text="statusCode"></div>
-
-        <div class="error-message" v-text="message"></div>
-
-        <div
-          class="q-mx-auto q-mt-lg justify-center"
-          style="width: max-content"
-        >
-          <q-btn
-            v-if="isExtension"
-            color="primary"
-            @click="goToExtension"
-            label="Go To Extension"
-            class="q-mb-lg full-width"
-          ></q-btn>
-          <br />
-          <q-btn color="primary" href="/" label="Go Home"></q-btn>
-          <span class="q-mx-md">OR</span>
-          <q-btn color="primary" @click="goBack" label="Go Back"></q-btn>
-        </div>
-      </div>
-    </div>
-    {% endblock %}
-  </q-page>
-</q-page-container>
-{% endblock %} {% block scripts %}
-<style>
-  .error-code {
-    font-size: clamp(15vh, 20vw, 30vh);
-  }
-
-  .error-message {
-    font-size: clamp(1.5rem, calc(1.5 / 10 * 20vw), 3.75rem);
-    font-weight: 300;
-    opacity: 0.4;
-  }
-</style>
-<script>
-  window.app = Vue.createApp({
-    el: '#vue',
-    mixins: [window.windowMixin],
-    data() {
-      return {
-        err: null,
-        statusCode: null,
-        message: null
-      }
-    },
-    methods: {
-      goBack: function () {
-        window.history.back()
-      },
-      goHome: function () {
-        window.location.href = '/'
-      },
-      goToExtension() {
-        window.location.href = `/extensions#${this.extension}`
-      },
-      async logOut() {
-
-        try {
-          await LNbits.api.logout()
-          window.location = '/'
-        } catch (e) {
-          LNbits.utils.notifyApiError(e)
-        }
-
-    },
-    },
-    computed: {
-      isExtension() {
-        if (this.statusCode != 403) return false
-        if (this.message.startsWith('Extension ')) return true
-      }
-    },
-    async created() {
-      this.err = '{{ err }}'
-      const statusCode = '{{ status_code }}' || 404
-      this.message = String({{ message | tojson }}) || 'Page not found'
-      if (statusCode == 401) {
-        console.warn(`Unauthorized: ${this.message}`)
-        this.logOut()
-        return
-      }
-      this.statusCode = statusCode
-
-      if (this.isExtension) {
-        this.extension = this.message.match(/'([^']+)'/)[1]
-      }
-    }
-  })
-</script>
+{% extends "public.html" %} {% from "macros.jinja" import window_vars with
+context %} {% block scripts %} {{ window_vars() }} {% endblock %} {% block
+page_container %}
+<lnbits-error code="{{ status_code }}" message="{{ message }}"></lnbits-error>
 {% endblock %}

lnbits/templates/pages.vue

@@ -3,4 +3,5 @@ include('pages/audit.vue') %} {% include('pages/wallets.vue') %} {%
 include('pages/users.vue') %} {% include('pages/admin.vue') %} {%
 include('pages/account.vue') %} {% include('pages/extensions_builder.vue') %} {%
 include('pages/extensions.vue') %} {% include('pages/first-install.vue') %} {%
-include('pages/home.vue') %} {% include('pages/wallet.vue') %}
+include('pages/home.vue') %} {% include('pages/wallet.vue') %} {%
+include('pages/error.vue') %}

lnbits/templates/pages/error.vue

@@ -0,0 +1,9 @@
+<template id="page-error">
+  <div id="page-error">
+    <lnbits-error
+      :dynamic="true"
+      :code="g.errorCode"
+      :message="g.errorMessage"
+    ></lnbits-error>
+  </div>
+</template>

lnbits/templates/pages/wallet.vue

@@ -1,5 +1,5 @@
 <template id="page-wallet">
-  <div class="row q-col-gutter-md" style="margin-bottom: 6rem">
+  <div v-if="g.wallet" class="row q-col-gutter-md" style="margin-bottom: 6rem">
     <div class="col-12 col-md-7 q-gutter-y-md wallet-wrapper">
       <q-card class="wallet-card">
         <q-card-section>