lnbits-legend/lnbits/extensions/subdomains/templates/subdomains/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">
      <q-card-section class="q-pa-none">
        <h3 class="q-my-none">{{ domain_domain }}</h3>
        <br />
        <h5 class="q-my-none">{{ domain_desc }}</h5>
        <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-select
            dense
            filled
            v-model="formDialog.data.record_type"
            :options="{{domain_allowed_record_types}}"
            label="Record type"
          ></q-select>
          <q-input
            filled
            dense
            v-model.trim="formDialog.data.subdomain"
            type="text"
            label="Subdomain you want"
          >
          </q-input>
          <q-input
            filled
            dense
            v-model.trim="formDialog.data.ip"
            type="text"
            label="Ip of your server"
          >
          </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.subdomain == '' || formDialog.data.ip == '' || formDialog.data.duration == ''"
              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-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>
  console.log('{{ domain_cost }}')
  Vue.component(VueQrcode.name, VueQrcode)

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        paymentReq: null,
        redirectUrl: null,
        formDialog: {
          show: false,
          data: {
            ip: '',
            subdomain: '',
            duration: '',
            email: '',
            record_type: ''
          }
        },
        receive: {
          show: false,
          status: 'pending',
          paymentReq: null
        }
      }
    },
    computed: {
      amountSats() {
        var sats = this.formDialog.data.duration * parseInt('{{ domain_cost }}')
        this.formDialog.data.sats = sats
        return sats
      }
    },

    methods: {
      resetForm: function (e) {
        e.preventDefault()
        this.formDialog.data.subdomain = ''
        this.formDialog.data.email = ''
        this.formDialog.data.ip = ''
        this.formDialog.data.duration = ''
        this.formDialog.data.record_type = ''
      },

      closeReceiveDialog: function () {
        var checker = this.receive.paymentChecker
        dismissMsg()

        clearInterval(paymentChecker)
        setTimeout(function () {}, 10000)
      },
      Invoice: function () {
        var self = this
        axios
          .post('/subdomains/api/v1/subdomains/{{ domain_id }}', {
            domain: '{{ domain_id }}',
            subdomain: self.formDialog.data.subdomain,
            ip: self.formDialog.data.ip,
            email: self.formDialog.data.email,
            sats: self.formDialog.data.sats,
            duration: parseInt(self.formDialog.data.duration),
            record_type: self.formDialog.data.record_type
          })
          .then(function (response) {
            self.paymentReq = response.data.payment_request
            self.paymentCheck = response.data.payment_hash

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

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

            paymentChecker = setInterval(function () {
              axios
                .get('/subdomains/api/v1/subdomains/' + self.paymentCheck)
                .then(function (res) {
                  console.log(res.data)
                  if (res.data.paid) {
                    clearInterval(paymentChecker)
                    self.receive = {
                      show: false,
                      status: 'complete',
                      paymentReq: null
                    }
                    dismissMsg()

                    console.log(self.formDialog)
                    self.formDialog.data.subdomain = ''
                    self.formDialog.data.email = ''
                    self.formDialog.data.ip = ''
                    self.formDialog.data.duration = ''
                    self.formDialog.data.record_type = ''
                    self.$q.notify({
                      type: 'positive',
                      message: 'Sent, thank you!',
                      icon: 'thumb_up'
                    })
                    console.log('END')
                  }
                })
                .catch(function (error) {
                  console.log(error)
                  LNbits.utils.notifyApiError(error)
                })
            }, 2000)
          })
          .catch(function (error) {
            console.log(error)
            LNbits.utils.notifyApiError(error)
          })
      }
    }
  })
</script>
{% endblock %}