feat: add dynamic errorpage (#3602)

lnbits/static/css/base.css

@@ -454,3 +454,12 @@ video {
     width: 90% !important;
   }
 }
+.error-code {
+  font-size: clamp(15vh, 20vw, 30vh);
+}
+
+.error-message {
+  font-size: clamp(1.5rem, 3vw, 3.75rem);
+  font-weight: 300;
+  opacity: 0.4;
+}

lnbits/static/js/components/lnbits-error.js

@@ -0,0 +1,53 @@
+window.app.component('lnbits-error', {
+  template: '#lnbits-error',
+  mixins: [window.windowMixin],
+  props: ['dynamic', 'code', 'message'],
+  computed: {
+    isExtension() {
+      if (this.code != 403) return false
+      if (this.message.startsWith('Extension ')) return true
+    }
+  },
+  methods: {
+    goBack() {
+      window.history.back()
+    },
+    goHome() {
+      window.location = '/'
+    },
+    goToWallet() {
+      if (this.dynamic) {
+        this.$router.push('/wallet')
+        return
+      }
+      window.location = '/wallet'
+    },
+    goToExtension() {
+      const extension = this.message.match(/'([^']+)'/)[1]
+      const url = `/extensions#${extension}`
+      if (this.dynamic) {
+        this.$router.push(url)
+        return
+      }
+      window.location = url
+    },
+    async logOut() {
+      try {
+        await LNbits.api.logout()
+        window.location = '/'
+      } catch (e) {
+        LNbits.utils.notifyApiError(e)
+      }
+    }
+  },
+  async created() {
+    // check if we have error from error.html
+    if (!this.dynamic) {
+      if (this.code == 401) {
+        console.warn(`Unauthorized: ${this.errorMessage}`)
+        this.logOut()
+        return
+      }
+    }
+  }
+})

lnbits/static/js/globals.js

@@ -9,6 +9,8 @@ const localStore = (key, defaultValue) => {
 }
 
 window.g = Vue.reactive({
+  errorCode: null,
+  errorMessage: null,
   isUserAuthorized: !!Quasar.Cookies.get('is_lnbits_user_authorized'),
   offline: !navigator.onLine,
   hasCamera: false,

lnbits/static/js/init-app.js

@@ -78,6 +78,11 @@ const routes = [
     path: '/',
     name: 'PageHome',
     component: PageHome
+  },
+  {
+    path: '/error',
+    name: 'PageError',
+    component: PageError
   }
 ]
 

lnbits/static/js/pages/error.js

@@ -0,0 +1,4 @@
+window.PageError = {
+  template: '#page-error',
+  mixins: [window.windowMixin]
+}

lnbits/static/js/pages/wallet.js

@@ -604,16 +604,17 @@ window.PageWallet = {
       this.decodeRequest()
       this.parse.show = true
     }
-    let wallet = g.user.wallets.find(w => w.id === this.$route.params.id)
-    if (!wallet) {
-      const walletId = g.lastActiveWallet || g.user.wallets[0].id
-      wallet = g.user.wallets.find(w => w.id === walletId)
-      // TODO: should show PageError(404) if wallet not found
+    const wallet = g.user.wallets.find(w => w.id === this.$route.params.id)
+    if (wallet) {
+      this.g.wallet = wallet
+      this.g.lastActiveWallet = wallet.id
+      this.$q.localStorage.setItem('lnbits.lastActiveWallet', wallet.id)
+      this.$router.replace(`/wallet/${wallet.id}`)
+    } else {
+      this.g.errorCode = 404
+      this.g.errorMessage = 'Wallet not found.'
+      this.$router.push('/error')
     }
-    this.g.wallet = wallet
-    this.g.lastActiveWallet = wallet.id
-    this.$q.localStorage.setItem('lnbits.lastActiveWallet', wallet.id)
-    this.$router.replace(`/wallet/${wallet.id}`)
   },
   watch: {
     'g.updatePaymentsHash'() {

lnbits/static/scss/base.scss

@@ -197,3 +197,12 @@ video {
     }
   }
 }
+
+.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;
+}

lnbits/static/vendor.json

@@ -42,6 +42,7 @@
     "js/bolt11-decoder.js"
   ],
   "components": [
+    "js/pages/error.js",
     "js/pages/home.js",
     "js/pages/extensions_builder.js",
     "js/pages/extensions.js",
@@ -75,6 +76,7 @@
     "js/components/lnbits-wallet-paylinks.js",
     "js/components/lnbits-wallet-extra.js",
     "js/components/lnbits-home-logos.js",
+    "js/components/lnbits-error.js",
     "js/components/lnbits-qrcode.js",
     "js/components/lnbits-qrcode-lnurl.js",
     "js/components/lnbits-disclaimer.js",