lnbits-legend/lnbits/extensions/lnaddress/templates/lnaddress/display.html

{% extends "public.html" %} {% block page %}
<div class="row q-col-gutter-md justify-center">
  <div class="col-12 col-md-7 col-lg-6 q-gutter-y-md">
    <q-card class="q-pa-lg">
      <div class="q-pa-md">
        <div class="q-gutter-y-md">
          <q-tabs v-model="tab" active-color="primary">
            <q-tab
              name="create"
              label="Create"
              @update="val => tab = val.name"
            ></q-tab>
            <q-tab
              name="renew"
              label="Renew"
              @update="val => tab = val.name"
            ></q-tab>
          </q-tabs>
        </div>
      </div>

      <q-tab-panels v-model="tab" animated>
        <q-tab-panel name="create">
          <q-card-section class="q-pa-none">
            <h3 class="q-my-none">{{ domain_domain }}</h3>
            <br />
            <h6 class="q-my-none">
              Your Lightning Address: {% raw
              %}{{this.formDialog.data.username}}{% endraw %}@{{domain_domain}}
            </h6>
            <br />
            <q-form @submit="Invoice()" class="q-gutter-md">
              <q-input
                filled
                dense
                v-model.trim="formDialog.data.email"
                type="email"
                label="Your email (optional, if you want a reply)"
              ></q-input>
              <q-input
                filled
                dense
                v-model.trim="formDialog.data.username"
                type="text"
                label="Alias/username"
                :rules="[
                val => checkUsername || 'Sorry, alias already taken',
                val => isValidUsername || 'Alias is not valid'
                ]"
                lazy-rules
              >
              </q-input>
              <q-input
                filled
                dense
                v-model.trim="formDialog.data.wallet_endpoint"
                type="text"
                label="Endpoint of LNbits instance, defaults to this instance"
              >
              </q-input>
              <q-input
                filled
                dense
                v-model.trim="formDialog.data.wallet_key"
                type="text"
                label="Admin key for your wallet"
              >
              </q-input>
              <q-input
                filled
                dense
                v-model.trim="formDialog.data.duration"
                type="number"
                label="Number of days"
              >
              </q-input>
              <p>
                Cost per day: {{ domain_cost }} sats<br />
                {% raw %} Total cost: {{amountSats}} sats {% endraw %}
              </p>
              <div class="row q-mt-lg">
                <q-btn
                  unelevated
                  color="primary"
                  :disable="!formDialog.data.username || !formDialog.data.wallet_key || !formDialog.data.duration || !checkUsername"
                  type="submit"
                  >Submit</q-btn
                >
                <q-btn @click="resetForm" flat color="grey" class="q-ml-auto"
                  >Cancel</q-btn
                >
              </div>
            </q-form>
          </q-card-section>
        </q-tab-panel>
        <q-tab-panel name="renew">
          <q-card-section class="q-pa-none">
            <h3 class="q-my-none">{{ domain_domain }}</h3>
            <br />
            <h6 class="q-my-none">
              Renew your Lightning Address: {% raw
              %}{{this.formDialog.data.username}}{% endraw %}@{{domain_domain}}
            </h6>
            <br />
            <q-form @submit="renewAddress()" class="q-gutter-md">
              <q-input
                filled
                dense
                v-model.trim="renewDialog.data.username"
                type="text"
                label="Alias/username"
                :rules="[
                val => isValidUsername || 'Alias is not valid'
                ]"
              >
              </q-input>
              <q-input
                filled
                dense
                v-model.trim="renewDialog.data.wallet_key"
                type="text"
                label="Admin key for your wallet"
              >
              </q-input>
              <div>
                <div v-if="renewDialog.info">
                  {% raw %}
                  <p>
                    <strong>LN Address:</strong>
                    <span
                      >{{renewDialog.data.username}}@{{renewDialog.data.domain}}</span
                    >
                    <br />
                    <span>Expires at: {{renewDialog.data.expiration}}</span>
                  </p>
                  {% endraw %}
                </div>
                <q-btn
                  unelevated
                  color="primary"
                  v-if="!renewDialog.info"
                  :disable="!renewDialog.data.username || !renewDialog.data.wallet_key"
                  @click="getUserInfo()"
                  >Get Info</q-btn
                >
              </div>
              <q-input
                v-if="renewDialog.info"
                filled
                dense
                v-model.trim="renewDialog.data.duration"
                type="number"
                label="Number of days"
              >
              </q-input>
              <p>
                Cost per day: {{ domain_cost }} sats<br />
                {% raw %} Total cost: {{amountSats}} sats {% endraw %}
              </p>
              <div class="row q-mt-lg">
                <q-btn
                  unelevated
                  color="primary"
                  :disable="!renewDialog.data.username || !renewDialog.data.wallet_key || !renewDialog.data.duration || !isValidUsername"
                  type="submit"
                  >Submit</q-btn
                >
                <q-btn @click="resetForm" flat color="grey" class="q-ml-auto"
                  >Cancel</q-btn
                >
              </div>
            </q-form>
          </q-card-section>
        </q-tab-panel>
      </q-tab-panels>
    </q-card>
  </div>

  <q-dialog v-model="receive.show" position="top" @hide="closeReceiveDialog">
    <q-card
      v-if="!receive.paymentReq"
      class="q-pa-lg q-pt-xl lnbits__dialog-card"
    >
    </q-card>
    <q-card v-else class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <div class="text-center q-mb-lg">
        <a :href="'lightning:' + receive.paymentReq">
          <q-responsive :ratio="1" class="q-mx-xl">
            <qrcode
              :value="paymentReq"
              :options="{width: 340}"
              class="rounded-borders"
            ></qrcode>
          </q-responsive>
        </a>
      </div>
      <div class="row q-mt-lg">
        <q-btn outline color="grey" @click="copyText(receive.paymentReq)"
          >Copy invoice</q-btn
        >
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
      </div>
    </q-card>
  </q-dialog>
</div>

{% endblock %} {% block scripts %}
<script>
  Vue.component(VueQrcode.name, VueQrcode)

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        paymentReq: null,
        redirectUrl: null,
        formDialog: {
          show: false,
          data: {}
        },
        renewDialog: {
          show: false,
          data: {},
          info: false
        },
        receive: {
          show: false,
          status: 'pending',
          paymentReq: null
        },
        tab: 'create',
        wallet: {
          inkey: ''
        },
        cancelListener: () => {}
      }
    },
    computed: {
      amountSats() {
        let dialog = this.renewDialog.info ? this.renewDialog : this.formDialog
        if (!dialog.data.duration) return 0
        let sats = dialog.data.duration * parseInt('{{ domain_cost }}')
        dialog.data.sats = parseInt(sats)
        return sats
      },
      checkUsername: async function () {
        let username = this.formDialog.data.username
        if (!this.isValidUsername) {
          return true
        }
        let available = await axios
          .get(
            `/lnaddress/api/v1/address/availabity/${'{{domain_id}}'}/${username}`
          )
          .then(res => {
            return res.data < 1
          })
        console.log(available)
        return available
      },
      isValidUsername: function () {
        let username = this.formDialog.data.username
        return /^[a-z0-9_\.]+$/.test(username)
      }
    },
    methods: {
      resetForm: function (e) {
        e.preventDefault()
        this.formDialog.data = {}
        this.renewDialog.data = {}
        this.renewDialog.info = false
      },

      closeReceiveDialog: function () {
        let checker = this.startPaymentNotifier
        dismissMsg()
        if (this.tab == 'create') {
          clearInterval(paymentChecker)
        }
        setTimeout(function () {}, 10000)
      },
      getUserInfo() {
        let {username, wallet_key} = this.renewDialog.data
        axios
          .get(
            `/lnaddress/api/v1/address/{{ domain_domain }}/${username}/${wallet_key}`
          )
          .then(res => {
            if (res) {
              let dt = {}
              let result = new Date(res.data.time * 1000)
              dt.start = new Date(res.data.time * 1000)
              dt.expiration = moment(
                result.setDate(result.getDate() + res.data.duration)
              ).format('dddd, MMMM Do YYYY, h:mm:ss a')
              dt.domain = '{{domain_domain}}'
              dt.wallet_endpoint = res.data.wallet_endpoint
              this.renewDialog.data = {
                ...this.renewDialog.data,
                ...dt
              }
              this.renewDialog.info = true
              console.log(this.renewDialog)
            }
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      renewAddress() {
        let {data} = this.renewDialog
        data.duration = parseInt(data.duration)

        axios
          .put(
            '/lnaddress/api/v1/address/{{ domain_id }}/' +
              data.username +
              '/' +
              data.wallet_key,
            data
          )
          .then(response => {
            this.paymentReq = response.data.payment_request
            this.paymentCheck = response.data.payment_hash

            dismissMsg = this.$q.notify({
              timeout: 0,
              message: 'Waiting for payment...'
            })

            this.receive = {
              show: true,
              status: 'pending',
              paymentReq: this.paymentReq
            }
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
        return
      },
      startPaymentNotifier() {
        this.cancelListener()

        this.cancelListener = LNbits.events.onInvoicePaid(
          this.wallet,
          payment => {
            this.receive = {
              show: false,
              status: 'complete',
              paymentReq: null
            }
            dismissMsg()

            this.renewDialog.data = {}
            this.renewDialog.info = false

            this.$q.notify({
              type: 'positive',
              message: 'Sent, thank you!',
              icon: 'thumb_up'
            })
          }
        )
      },
      Invoice: function () {
        let {data} = this.formDialog
        data.domain = '{{ domain_id }}'
        if (data.wallet_endpoint == '') {
          data.wallet_endpoint = null
        }
        data.wallet_endpoint = data.wallet_endpoint ?? '{{ root_url }}'
        data.duration = parseInt(data.duration)

        axios
          .post('/lnaddress/api/v1/address/{{ domain_id }}', data)
          .then(response => {
            this.paymentReq = response.data.payment_request
            this.paymentCheck = response.data.payment_hash

            dismissMsg = this.$q.notify({
              timeout: 0,
              message: 'Waiting for payment...'
            })

            this.receive = {
              show: true,
              status: 'pending',
              paymentReq: this.paymentReq
            }

            paymentChecker = setInterval(() => {
              axios
                .get(`/lnaddress/api/v1/addresses/${this.paymentCheck}`)
                .then(res => {
                  console.log('pay_check', res.data)
                  if (res.data.paid) {
                    clearInterval(paymentChecker)
                    this.receive = {
                      show: false,
                      status: 'complete',
                      paymentReq: null
                    }
                    dismissMsg()

                    console.log(this.formDialog)
                    this.formDialog.data = {}
                    this.$q.notify({
                      type: 'positive',
                      message: 'Sent, thank you!',
                      icon: 'thumb_up'
                    })
                    console.log('END')
                  }
                })
                .catch(function (error) {
                  console.log(error)
                  LNbits.utils.notifyApiError(error)
                })
            }, 5000)
          })
          .catch(function (error) {
            console.log(error)
            LNbits.utils.notifyApiError(error)
          })
      }
    },
    created() {
      this.wallet.inkey = '{{domain_wallet_inkey}}'
      this.startPaymentNotifier()
    }
  })
</script>
{% endblock %}