lnbits-legend/lnbits/core/templates/admin/index.html

{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %}
<div class="row q-col-gutter-md justify-center">
  <div class="col q-my-md">
    <q-btn
      :label="$t('save')"
      color="primary"
      @click="updateSettings"
      :disabled="!checkChanges"
    >
      <q-tooltip v-if="checkChanges"
        >{%raw%}{{ $t('save_tooltip') }}{%endraw%}</q-tooltip
      >

      <q-badge
        v-if="checkChanges"
        color="red"
        rounded
        floating
        style="padding: 6px; border-radius: 6px"
      />
    </q-btn>

    <q-btn
      v-if="isSuperUser"
      :label="$t('restart')"
      color="primary"
      @click="restartServer"
    >
      <q-tooltip v-if="needsRestart"
        >{%raw%}{{ $t('restart_tooltip') }}{%endraw%}</q-tooltip
      >

      <q-badge
        v-if="needsRestart"
        color="red"
        rounded
        floating
        style="padding: 6px; border-radius: 6px"
      />
    </q-btn>

    <q-btn
      v-if="isSuperUser"
      :label="$t('topup')"
      color="primary"
      @click="topUpDialog.show = true"
    >
      <q-tooltip>{%raw%}{{ $t('add_funds_tooltip') }}{%endraw%}</q-tooltip>
    </q-btn>

    <q-btn :label="$t('download_backup')" flat @click="downloadBackup"></q-btn>

    <q-btn
      flat
      v-if="isSuperUser"
      :label="$t('reset_defaults')"
      color="primary"
      @click="deleteSettings"
      class="float-right"
    >
      <q-tooltip>{%raw%}{{ $t('reset_defaults_tooltip') }}{%endraw%}</q-tooltip>
    </q-btn>
  </div>
</div>

<div class="row q-col-gutter-md justify-center">
  <div class="col q-gutter-y-md">
    <q-card>
      <div class="q-pa-md">
        <div class="q-gutter-y-md">
          <q-tabs v-model="tab" active-color="primary" align="justify">
            <q-tab
              name="funding"
              :label="$t('funding')"
              @update="val => tab = val.name"
            ></q-tab>

            <q-tab
              name="users"
              :label="$t('users')"
              @update="val => tab = val.name"
            ></q-tab>

            <q-tab
              name="server"
              :label="$t('server')"
              @update="val => tab = val.name"
            ></q-tab>

            <q-tab
              name="security"
              :label="$t('security')"
              @update="val => tab = val.name"
            ></q-tab>

            <q-tab
              name="theme"
              :label="$t('theme')"
              @update="val => tab = val.name"
            ></q-tab>
          </q-tabs>
        </div>
      </div>

      <q-form name="settings_form" id="settings_form">
        <q-tab-panels v-model="tab" animated>
          {% include "admin/_tab_funding.html" %} {% include
          "admin/_tab_users.html" %} {% include "admin/_tab_server.html" %} {%
          include "admin/_tab_security.html" %} {% include
          "admin/_tab_theme.html" %}
        </q-tab-panels>
      </q-form>
    </q-card>
  </div>
</div>

<q-dialog v-if="isSuperUser" v-model="topUpDialog.show" position="top">
  <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
    <q-form class="q-gutter-md">
      <p v-text="$t('topup_wallet')"></p>

      <div class="row">
        <div class="col-12">
          <q-input
            dense
            type="text"
            filled
            v-model="wallet.id"
            label="Wallet ID"
            :hint="$t('topup_hint')"
          ></q-input>

          <br />
        </div>

        <div class="col-12">
          <q-input
            dense
            type="number"
            filled
            v-model="wallet.amount"
            :label="$t('amount')"
          ></q-input>
        </div>
      </div>

      <div class="row q-mt-lg">
        <q-btn
          :label="$t('topup')"
          color="primary"
          @click="topupWallet"
        ></q-btn>

        <q-btn
          v-close-popup
          flat
          color="grey"
          class="q-ml-auto"
          :label="$t('cancel')"
        ></q-btn>
      </div>
    </q-form>
  </q-card>
</q-dialog>
{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script>
  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        settings: {},
        logs: [],
        serverlogEnabled: false,
        lnbits_theme_options: [
          'classic',
          'bitcoin',
          'flamingo',
          'cyber',
          'freedom',
          'mint',
          'autumn',
          'monochrome',
          'salvador'
        ],
        auditData: {},
        statusData: {},
        statusDataTable: {
          columns: [
            {
              name: 'date',
              align: 'left',
              label: this.$t('date'),
              field: 'date'
            },
            {
              name: 'message',
              align: 'left',
              label: this.$t('memo'),
              field: 'message'
            }
          ]
        },
        formData: {},
        formAddAdmin: '',
        formAddUser: '',
        formAddExtensionsManifest: '',
        formAllowedIPs: '',
        formBlockedIPs: '',
        isSuperUser: false,
        wallet: {},
        cancel: {},
        topUpDialog: {
          show: false
        },
        tab: 'funding',
        needsRestart: false,
        funding_sources: new Map([
          ['VoidWallet', null],
          [
            'FakeWallet',
            {
              fake_wallet_secret: {
                value: null,
                label: 'Secret'
              }
            }
          ],
          [
            'CoreLightningWallet',
            {
              corelightning_rpc: {
                value: null,
                label: 'Endpoint'
              }
            }
          ],
          [
            'CoreLightningRestWallet',
            {
              corelightning_rest_url: {
                value: null,
                label: 'Endpoint'
              },
              corelightning_rest_cert: {
                value: null,
                label: 'Certificate'
              },
              corelightning_rest_macaroon: {
                value: null,
                label: 'Macaroon'
              }
            }
          ],
          [
            'LndRestWallet',
            {
              lnd_rest_endpoint: {
                value: null,
                label: 'Endpoint'
              },
              lnd_rest_cert: {
                value: null,
                label: 'Certificate'
              },
              lnd_rest_macaroon: {
                value: null,
                label: 'Macaroon'
              },
              lnd_rest_macaroon_encrypted: {
                value: null,
                label: 'Encrypted Macaroon'
              }
            }
          ],
          [
            'LndWallet',
            {
              lnd_grpc_endpoint: {
                value: null,
                label: 'Endpoint'
              },
              lnd_grpc_cert: {
                value: null,
                label: 'Certificate'
              },
              lnd_grpc_port: {
                value: null,
                label: 'Port'
              },
              lnd_grpc_admin_macaroon: {
                value: null,
                label: 'Admin Macaroon'
              },
              lnd_grpc_macaroon_encrypted: {
                value: null,
                label: 'Encrypted Macaroon'
              }
            }
          ],
          [
            'LnTipsWallet',
            {
              lntips_api_endpoint: {
                value: null,
                label: 'Endpoint'
              },
              lntips_api_key: {
                value: null,
                label: 'API Key'
              }
            }
          ],
          [
            'LNPayWallet',
            {
              lnpay_api_endpoint: {
                value: null,
                label: 'Endpoint'
              },
              lnpay_api_key: {
                value: null,
                label: 'API Key'
              },
              lnpay_wallet_key: {
                value: null,
                label: 'Wallet Key'
              }
            }
          ],
          [
            'EclairWallet',
            {
              eclair_url: {
                value: null,
                label: 'URL'
              },
              eclair_pass: {
                value: null,
                label: 'Password'
              }
            }
          ],
          [
            'LNbitsWallet',
            {
              lnbits_endpoint: {
                value: null,
                label: 'Endpoint'
              },
              lnbits_key: {
                value: null,
                label: 'Admin Key'
              }
            }
          ],
          [
            'OpenNodeWallet',
            {
              opennode_api_endpoint: {
                value: null,
                label: 'Endpoint'
              },
              opennode_key: {
                value: null,
                label: 'Key'
              }
            }
          ],
          [
            'ClicheWallet',
            {
              cliche_endpoint: {
                value: null,
                label: 'Endpoint'
              }
            }
          ],
          [
            'SparkWallet',
            {
              spark_url: {
                value: null,
                label: 'Endpoint'
              },
              spark_token: {
                value: null,
                label: 'Token'
              }
            }
          ]
        ])
      }
    },
    created() {
      this.getSettings()
      this.getAudit()
      this.balance = +'{{ balance|safe }}'
    },
    computed: {
      lnbitsVersion() {
        return LNBITS_VERSION
      },
      checkChanges() {
        return !_.isEqual(this.settings, this.formData)
      },
      updateAvailable() {
        return LNBITS_VERSION !== this.statusData.version
      }
    },
    methods: {
      addAdminUser() {
        let addUser = this.formAddAdmin
        let admin_users = this.formData.lnbits_admin_users
        if (addUser && addUser.length && !admin_users.includes(addUser)) {
          //admin_users = [...admin_users, addUser]
          this.formData.lnbits_admin_users = [...admin_users, addUser]
          this.formAddAdmin = ''
        }
      },
      removeAdminUser(user) {
        let admin_users = this.formData.lnbits_admin_users
        this.formData.lnbits_admin_users = admin_users.filter(u => u !== user)
      },
      addAllowedUser() {
        let addUser = this.formAddUser
        let allowed_users = this.formData.lnbits_allowed_users
        if (addUser && addUser.length && !allowed_users.includes(addUser)) {
          this.formData.lnbits_allowed_users = [...allowed_users, addUser]
          this.formAddUser = ''
        }
      },
      removeAllowedUser(user) {
        let allowed_users = this.formData.lnbits_allowed_users
        this.formData.lnbits_allowed_users = allowed_users.filter(
          u => u !== user
        )
      },
      addExtensionsManifest() {
        const addManifest = this.formAddExtensionsManifest.trim()
        const manifests = this.formData.lnbits_extensions_manifests
        if (
          addManifest &&
          addManifest.length &&
          !manifests.includes(addManifest)
        ) {
          this.formData.lnbits_extensions_manifests = [
            ...manifests,
            addManifest
          ]
          this.formAddExtensionsManifest = ''
        }
      },
      removeExtensionsManifest(manifest) {
        const manifests = this.formData.lnbits_extensions_manifests
        this.formData.lnbits_extensions_manifests = manifests.filter(
          m => m !== manifest
        )
      },
      async toggleServerLog() {
        this.serverlogEnabled = !this.serverlogEnabled
        if (this.serverlogEnabled) {
          const wsProto = location.protocol !== 'http:' ? 'wss://' : 'ws://'
          const digestHex = await LNbits.utils.digestMessage(this.g.user.id)
          const localUrl =
            wsProto +
            document.domain +
            ':' +
            location.port +
            '/api/v1/ws/' +
            digestHex
          this.ws = new WebSocket(localUrl)
          this.ws.addEventListener('message', async ({data}) => {
            this.logs.push(data.toString())
            const scrollArea = this.$refs.logScroll
            if (scrollArea) {
              const scrollTarget = scrollArea.getScrollTarget()
              const duration = 0
              scrollArea.setScrollPosition(scrollTarget.scrollHeight, duration)
            }
          })
        } else {
          this.ws.close()
        }
      },
      addAllowedIPs() {
        const allowedIPs = this.formAllowedIPs.trim()
        const allowed_ips = this.formData.lnbits_allowed_ips
        if (
          allowedIPs &&
          allowedIPs.length &&
          !allowed_ips.includes(allowedIPs)
        ) {
          this.formData.lnbits_allowed_ips = [...allowed_ips, allowedIPs]
          this.formAllowedIPs = ''
        }
      },
      removeAllowedIPs(allowed_ip) {
        const allowed_ips = this.formData.lnbits_allowed_ips
        this.formData.lnbits_allowed_ips = allowed_ips.filter(
          a => a !== allowed_ip
        )
      },
      addBlockedIPs() {
        const blockedIPs = this.formBlockedIPs.trim()
        const blocked_ips = this.formData.lnbits_blocked_ips
        if (
          blockedIPs &&
          blockedIPs.length &&
          !blocked_ips.includes(blockedIPs)
        ) {
          this.formData.lnbits_blocked_ips = [...blocked_ips, blockedIPs]
          this.formBlockedIPs = ''
        }
      },
      removeBlockedIPs(blocked_ip) {
        const blocked_ips = this.formData.lnbits_blocked_ips
        this.formData.lnbits_blocked_ips = blocked_ips.filter(
          b => b !== blocked_ip
        )
      },
      restartServer() {
        LNbits.api
          .request('GET', '/admin/api/v1/restart/?usr=' + this.g.user.id)
          .then(response => {
            this.$q.notify({
              type: 'positive',
              message: 'Success! Restarted Server',
              icon: null
            })
            this.needsRestart = false
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      topupWallet() {
        LNbits.api
          .request(
            'PUT',
            '/admin/api/v1/topup/?usr=' + this.g.user.id,
            this.g.user.wallets[0].adminkey,
            this.wallet
          )
          .then(response => {
            this.$q.notify({
              type: 'positive',
              message:
                'Success! Added ' +
                this.wallet.amount +
                ' to ' +
                this.wallet.id,
              icon: null
            })
            this.wallet = {}
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      updateFundingData() {
        this.settings.lnbits_allowed_funding_sources.map(f => {
          let opts = this.funding_sources.get(f)
          if (!opts) return
          Object.keys(opts).forEach(e => {
            opts[e].value = this.settings[e]
          })
        })
      },
      formatDate(date) {
        return moment(date * 1000).fromNow()
      },
      getNotifications() {
        if (this.settings.lnbits_notifications) {
          axios
            .get(this.settings.lnbits_status_manifest)
            .then(response => {
              this.statusData = response.data
            })
            .catch(error => {
              this.formData.lnbits_notifications = false
              error.response.data = {}
              error.response.data.message = 'Could not fetch status manifest.'
              LNbits.utils.notifyApiError(error)
            })
        }
      },
      getAudit() {
        LNbits.api
          .request(
            'GET',
            '/admin/api/v1/audit/?usr=' + this.g.user.id,
            this.g.user.wallets[0].adminkey
          )
          .then(response => {
            this.auditData = response.data
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      getSettings() {
        LNbits.api
          .request(
            'GET',
            '/admin/api/v1/settings/?usr=' + this.g.user.id,
            this.g.user.wallets[0].adminkey
          )
          .then(response => {
            this.isSuperUser = response.data.is_super_user || false
            this.settings = response.data
            this.formData = {...this.settings}
            this.updateFundingData()
            this.getNotifications()
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      updateSettings() {
        let data = _.omit(this.formData, [
          'is_super_user',
          'lnbits_allowed_funding_sources'
        ])
        LNbits.api
          .request(
            'PUT',
            '/admin/api/v1/settings/?usr=' + this.g.user.id,
            this.g.user.wallets[0].adminkey,
            data
          )
          .then(response => {
            this.needsRestart =
              this.settings.lnbits_backend_wallet_class !==
                this.formData.lnbits_backend_wallet_class ||
              this.settings.lnbits_killswitch !==
                this.formData.lnbits_killswitch
            this.settings = this.formData
            this.formData = _.clone(this.settings)
            this.updateFundingData()
            this.$q.notify({
              type: 'positive',
              message: `Success! Settings changed! ${
                this.needsRestart ? 'Restart required!' : ''
              }`,
              icon: null
            })
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      deleteSettings() {
        LNbits.utils
          .confirmDialog(
            'Are you sure you want to restore settings to default?'
          )
          .onOk(() => {
            LNbits.api
              .request(
                'DELETE',
                '/admin/api/v1/settings/?usr=' + this.g.user.id
              )
              .then(response => {
                this.$q.notify({
                  type: 'positive',
                  message:
                    'Success! Restored settings to defaults, restart required!',
                  icon: null
                })
                this.needsRestart = true
              })
              .catch(function (error) {
                LNbits.utils.notifyApiError(error)
              })
          })
      },
      downloadBackup() {
        window.open('/admin/api/v1/backup/?usr=' + this.g.user.id, '_blank')
      }
    }
  })
</script>
{% endblock %}