{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %}
<div class="row q-col-gutter-md">
  <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <q-btn unelevated color="primary" @click="formDialog.show = true"
          >New Domain</q-btn
        >
        <q-btn unelevated color="primary" @click="addressFormDialog.show = true"
          >New Address</q-btn
        >
      </q-card-section>
    </q-card>

    <q-card>
      <q-card-section>
        <div class="row items-center no-wrap q-mb-md">
          <div class="col">
            <h5 class="text-subtitle1 q-my-none">Domains</h5>
          </div>
          <div class="col-auto">
            <q-btn flat color="grey" @click="exportCSV">Export to CSV</q-btn>
          </div>
        </div>
        <q-table
          dense
          flat
          :data="domains"
          row-key="id"
          :columns="domainsTable.columns"
          :pagination.sync="domainsTable.pagination"
        >
          {% raw %}
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th auto-width></q-th>
              <q-th v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.label }}
              </q-th>
              <q-th auto-width></q-th>
            </q-tr>
          </template>

          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td auto-width>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="launch"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  type="a"
                  :href="'signup/' + props.row.id"
                  target="_blank"
                ></q-btn>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="link"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  type="a"
                  :href="'api/v1/domain/' + props.row.id + '/nostr.json'"
                  target="_blank"
                ></q-btn>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="delete"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  @click="deleteDomain(props.row.id)"
                ></q-btn>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="edit"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  @click="editDomain(props.row.id)"
                ></q-btn>
              </q-td>
              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.value }}
              </q-td>
            </q-tr>
          </template>
          {% endraw %}
        </q-table>
      </q-card-section>
    </q-card>

    <q-card>
      <q-card-section>
        <div class="row items-center no-wrap q-mb-md">
          <div class="col">
            <h5 class="text-subtitle1 q-my-none">Addresses</h5>
          </div>
          <div class="col-auto">
            <q-btn flat color="grey" @click="exportAddressesCSV"
              >Export to CSV</q-btn
            >
          </div>
        </div>
        <q-table
          dense
          flat
          :data="addresses"
          row-key="id"
          :columns="addressesTable.columns"
          :pagination.sync="addressesTable.pagination"
        >
          {% raw %}
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th auto-width></q-th>
              <q-th v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.label }}
              </q-th>
              <q-th auto-width></q-th>
            </q-tr>
          </template>

          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td auto-width>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="edit"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  type="a"
                  target="_blank"
                  :href="'rotate/' + props.row.domain_id + '/' + props.row.id"
                ></q-btn>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="check"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  :disable="props.row.active == true"
                  @click="activateAddress(props.row.domain_id, props.row.id)"
                ></q-btn>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="delete"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  @click="deleteAddress(props.row.id)"
                ></q-btn>
              </q-td>
              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.value }}
              </q-td>
            </q-tr>
          </template>
          {% endraw %}
        </q-table>
      </q-card-section>
    </q-card>
  </div>

  <div class="col-12 col-md-5 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <h6 class="text-subtitle1 q-my-none">
          {{SITE_TITLE}} Nostr NIP-5 extension
        </h6>
        <p>
          <strong
            >Allow users to NIP-05 verify themselves at a domain you
            control</strong
          >
        </p>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list> {% include "nostrnip5/_api_docs.html" %} </q-list>
      </q-card-section>
    </q-card>
  </div>

  <q-dialog v-model="formDialog.show" position="top" @hide="closeFormDialog">
    <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
      <q-form @submit="saveDomain" class="q-gutter-md">
        <q-select
          filled
          dense
          emit-value
          v-model="formDialog.data.wallet"
          :options="g.user.walletOptions"
          label="Wallet *"
        ></q-select>
        <q-select
          filled
          dense
          emit-value
          v-model="formDialog.data.currency"
          :options="currencyOptions"
          label="Currency *"
        ></q-select>
        <q-input
          filled
          dense
          v-model.trim="formDialog.data.amount"
          label="Amount"
          placeholder="How much do you want to charge?"
        ></q-input>
        <q-input
          filled
          dense
          v-model.trim="formDialog.data.domain"
          label="Domain"
          placeholder="nostr.com"
        ></q-input>

        <div class="row q-mt-lg">
          <q-btn
            unelevated
            color="primary"
            :disable="formDialog.data.wallet == null || formDialog.data.currency == null"
            type="submit"
            >Create Domain</q-btn
          >
          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
            >Cancel</q-btn
          >
        </div>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog
    v-model="editFormDialog.show"
    position="top"
    @hide="closeFormDialog"
  >
    <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
      <q-form @submit="saveEditedDomain" class="q-gutter-md">
        <q-select
          filled
          dense
          emit-value
          v-model="editFormDialog.data.currency"
          :options="currencyOptions"
          label="Currency *"
        ></q-select>
        <q-input
          filled
          dense
          v-model.trim="editFormDialog.data.amount"
          label="Amount"
          placeholder="How much do you want to charge?"
        ></q-input>
        <div class="row q-mt-lg">
          <q-btn unelevated color="primary" type="submit">Update Amount</q-btn>
          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
            >Cancel</q-btn
          >
        </div>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog
    v-model="addressFormDialog.show"
    position="top"
    @hide="closeAddressFormDialog"
  >
    <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
      <q-form @submit="saveAddress" class="q-gutter-md">
        <q-select
          filled
          dense
          emit-value
          v-model="addressFormDialog.data.domain_id"
          :options="domainOptions"
          label="Domain *"
        ></q-select>
        <q-input
          filled
          dense
          v-model.trim="addressFormDialog.data.pubkey"
          label="Public Key"
          placeholder="npub..."
        ></q-input>
        <q-input
          filled
          dense
          v-model.trim="addressFormDialog.data.local_part"
          label="Local Part"
          placeholder="benarc"
        ></q-input>

        <div class="row q-mt-lg">
          <q-btn
            unelevated
            color="primary"
            :disable="addressFormDialog.data.domain_id == null || addressFormDialog.data.pubkey == null || addressFormDialog.data.local_part == null"
            type="submit"
            >Create Address</q-btn
          >
          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
            >Cancel</q-btn
          >
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</div>
{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script>
  var mapDomain = function (obj) {
    obj.time = Quasar.utils.date.formatDate(
      new Date(obj.time * 1000),
      'YYYY-MM-DD HH:mm'
    )

    if (obj.currency != 'Satoshis') {
      obj.amount = parseFloat(obj.amount / 100).toFixed(2)
    }

    return obj
  }

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        domains: [],
        addresses: [],
        currencyOptions: [
          'Satoshis',
          'USD',
          'EUR',
          'GBP',
          'AED',
          'AFN',
          'ALL',
          'AMD',
          'ANG',
          'AOA',
          'ARS',
          'AUD',
          'AWG',
          'AZN',
          'BAM',
          'BBD',
          'BDT',
          'BGN',
          'BHD',
          'BIF',
          'BMD',
          'BND',
          'BOB',
          'BRL',
          'BSD',
          'BTN',
          'BWP',
          'BYN',
          'BZD',
          'CAD',
          'CDF',
          'CHF',
          'CLF',
          'CLP',
          'CNH',
          'CNY',
          'COP',
          'CRC',
          'CUC',
          'CUP',
          'CVE',
          'CZK',
          'DJF',
          'DKK',
          'DOP',
          'DZD',
          'EGP',
          'ERN',
          'ETB',
          'EUR',
          'FJD',
          'FKP',
          'GBP',
          'GEL',
          'GGP',
          'GHS',
          'GIP',
          'GMD',
          'GNF',
          'GTQ',
          'GYD',
          'HKD',
          'HNL',
          'HRK',
          'HTG',
          'HUF',
          'IDR',
          'ILS',
          'IMP',
          'INR',
          'IQD',
          'IRR',
          'IRT',
          'ISK',
          'JEP',
          'JMD',
          'JOD',
          'JPY',
          'KES',
          'KGS',
          'KHR',
          'KMF',
          'KPW',
          'KRW',
          'KWD',
          'KYD',
          'KZT',
          'LAK',
          'LBP',
          'LKR',
          'LRD',
          'LSL',
          'LYD',
          'MAD',
          'MDL',
          'MGA',
          'MKD',
          'MMK',
          'MNT',
          'MOP',
          'MRO',
          'MUR',
          'MVR',
          'MWK',
          'MXN',
          'MYR',
          'MZN',
          'NAD',
          'NGN',
          'NIO',
          'NOK',
          'NPR',
          'NZD',
          'OMR',
          'PAB',
          'PEN',
          'PGK',
          'PHP',
          'PKR',
          'PLN',
          'PYG',
          'QAR',
          'RON',
          'RSD',
          'RUB',
          'RWF',
          'SAR',
          'SBD',
          'SCR',
          'SDG',
          'SEK',
          'SGD',
          'SHP',
          'SLL',
          'SOS',
          'SRD',
          'SSP',
          'STD',
          'SVC',
          'SYP',
          'SZL',
          'THB',
          'TJS',
          'TMT',
          'TND',
          'TOP',
          'TRY',
          'TTD',
          'TWD',
          'TZS',
          'UAH',
          'UGX',
          'USD',
          'UYU',
          'UZS',
          'VEF',
          'VES',
          'VND',
          'VUV',
          'WST',
          'XAF',
          'XAG',
          'XAU',
          'XCD',
          'XDR',
          'XOF',
          'XPD',
          'XPF',
          'XPT',
          'YER',
          'ZAR',
          'ZMW',
          'ZWL'
        ],
        domainsTable: {
          columns: [
            {name: 'id', align: 'left', label: 'ID', field: 'id'},
            {name: 'domain', align: 'left', label: 'Domain', field: 'domain'},
            {
              name: 'currency',
              align: 'left',
              label: 'Currency',
              field: 'currency'
            },
            {name: 'amount', align: 'left', label: 'Amount', field: 'amount'},
            {name: 'time', align: 'left', label: 'Created At', field: 'time'}
          ],
          pagination: {
            rowsPerPage: 10
          }
        },
        addressesTable: {
          columns: [
            {name: 'id', align: 'left', label: 'ID', field: 'id'},
            {name: 'active', align: 'left', label: 'Active', field: 'active'},
            {
              name: 'domain_id',
              align: 'left',
              label: 'Domain',
              field: 'domain_id'
            },
            {
              name: 'local_part',
              align: 'left',
              label: 'Local Part',
              field: 'local_part'
            },
            {name: 'pubkey', align: 'left', label: 'Pubkey', field: 'pubkey'},
            {name: 'time', align: 'left', label: 'Created At', field: 'time'}
          ],
          pagination: {
            rowsPerPage: 10
          }
        },
        formDialog: {
          show: false,
          data: {}
        },
        editFormDialog: {
          show: false,
          data: {}
        },
        addressFormDialog: {
          show: false,
          data: {}
        }
      }
    },
    methods: {
      closeAddressFormDialog: function () {
        this.formDialog.data = {}
      },
      closeFormDialog: function () {
        this.formDialog.data = {}
      },
      getDomains: function () {
        var self = this

        LNbits.api
          .request(
            'GET',
            '/nostrnip5/api/v1/domains?all_wallets=true',
            this.g.user.wallets[0].inkey
          )
          .then(function (response) {
            self.domains = response.data.map(function (obj) {
              return mapDomain(obj)
            })
          })
      },
      getAddresses: function () {
        var self = this

        LNbits.api
          .request(
            'GET',
            '/nostrnip5/api/v1/addresses?all_wallets=true',
            this.g.user.wallets[0].inkey
          )
          .then(function (response) {
            self.addresses = response.data.map(function (obj) {
              return mapDomain(obj)
            })
          })
      },
      saveDomain: function () {
        var data = this.formDialog.data
        var self = this

        LNbits.api
          .request(
            'POST',
            '/nostrnip5/api/v1/domain',
            _.findWhere(this.g.user.wallets, {id: this.formDialog.data.wallet})
              .inkey,
            data
          )
          .then(function (response) {
            self.domains.push(mapDomain(response.data))

            self.formDialog.show = false
            self.formDialog.data = {}
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      saveEditedDomain: function () {
        var data = this.editFormDialog.data
        var self = this

        LNbits.api
          .request(
            'PUT',
            '/nostrnip5/api/v1/domain',
            _.findWhere(this.g.user.wallets, {
              id: this.editFormDialog.data.wallet
            }).inkey,
            data
          )
          .then(function (response) {
            self.editFormDialog.show = false
            self.editFormDialog.data = {}
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      editDomain: function (domain_id) {
        var self = this
        var data = _.findWhere(this.domains, {id: domain_id})

        self.editFormDialog.show = true
        self.editFormDialog.data = data
      },
      deleteDomain: function (domain_id) {
        var self = this
        var domain = _.findWhere(this.domains, {id: domain_id})

        LNbits.utils
          .confirmDialog('Are you sure you want to delete this domain?')
          .onOk(function () {
            LNbits.api
              .request(
                'DELETE',
                '/nostrnip5/api/v1/domain/' + domain_id,
                _.findWhere(self.g.user.wallets, {id: domain.wallet}).adminkey
              )
              .then(function (response) {
                self.domains = _.reject(self.domain, function (obj) {
                  return obj.id == domain_id
                })
              })
              .catch(function (error) {
                LNbits.utils.notifyApiError(error)
              })
          })
      },
      saveAddress: function () {
        var self = this
        var formDialog = this.addressFormDialog
        var domain = _.findWhere(this.domains, {id: formDialog.data.domain_id})

        axios
          .post(
            '/nostrnip5/api/v1/domain/' +
              formDialog.data.domain_id +
              '/address',
            formDialog.data
          )
          .then(function (response) {
            return LNbits.api.request(
              'POST',
              '/nostrnip5/api/v1/domain/' +
                formDialog.data.domain_id +
                '/address/' +
                response.data.address_id +
                '/activate',
              _.findWhere(self.g.user.wallets, {id: domain.wallet}).adminkey
            )
          })
          .then(function (response) {
            self.addressFormDialog.data = {}
            self.addressFormDialog.show = false
            self.getAddresses()
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      deleteAddress: function (address_id) {
        var self = this
        var address = _.findWhere(this.addresses, {id: address_id})
        var domain = _.findWhere(this.domains, {id: address.domain_id})

        LNbits.utils
          .confirmDialog('Are you sure you want to delete this address?')
          .onOk(function () {
            LNbits.api
              .request(
                'DELETE',
                '/nostrnip5/api/v1/address/' + address_id,
                _.findWhere(self.g.user.wallets, {id: domain.wallet}).adminkey
              )
              .then(function (response) {
                self.addresses = _.reject(self.addresses, function (obj) {
                  return obj.id == address_id
                })
              })
              .catch(function (error) {
                LNbits.utils.notifyApiError(error)
              })
          })
      },
      activateAddress: function (domain_id, address_id) {
        var self = this
        var address = _.findWhere(this.addresses, {id: address_id})
        var domain = _.findWhere(this.domains, {id: address.domain_id})
        LNbits.utils
          .confirmDialog(
            'Are you sure you want to manually activate this address?'
          )
          .onOk(function () {
            return LNbits.api
              .request(
                'POST',
                '/nostrnip5/api/v1/domain/' +
                  domain_id +
                  '/address/' +
                  address_id +
                  '/activate',
                _.findWhere(self.g.user.wallets, {id: domain.wallet}).adminkey
              )
              .then(function (response) {
                self.getAddresses()
              })
              .catch(function (error) {
                LNbits.utils.notifyApiError(error)
              })
          })
      },
      exportCSV: function () {
        LNbits.utils.exportCSV(this.domainsTable.columns, this.domains)
      },
      exportAddressesCSV: function () {
        LNbits.utils.exportCSV(this.addressesTable.columns, this.addresses)
      }
    },
    created: function () {
      if (this.g.user.wallets.length) {
        this.getDomains()
        this.getAddresses()
      }
    },
    computed: {
      domainOptions: function () {
        return this.domains.map(el => {
          return {
            label: el.domain,
            value: el.id
          }
        })
      }
    }
  })
</script>
{% endblock %}
