lnbits-legend/lnbits/templates/error.html

{% 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>
        <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}`
      },
      logOut() {
        LNbits.utils
          .confirmDialog(
            'Do you really want to logout?'
          )
          .onOk( async () => {
            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
      }
    },
    created() {
      this.err = '{{ err }}'
      this.statusCode = '{{ status_code }}' || 404
      this.message = String({{ message | tojson }}) || 'Page not found'
      if (this.isExtension) {
        this.extension = this.message.match(/'([^']+)'/)[1]
      }
    }
  })
</script>
{% endblock %}