Fix webhook (#12)

* refactor html
* don't exclude values on update

static/js/index.js

@@ -116,7 +116,6 @@ new Vue({
       if (this.formDialog.fixedAmount) data.max = data.min
       if (data.currency === 'satoshis') data.currency = null
       if (isNaN(parseInt(data.comment_chars))) data.comment_chars = 0
-
       if (data.id) {
         this.updatePayLink(wallet, data)
       } else {
@@ -131,33 +130,12 @@ new Vue({
       }
     },
     updatePayLink(wallet, data) {
-      let values = _.omit(
-        _.pick(
-          data,
-          'description',
-          'min',
-          'max',
-          'webhook_url',
-          'success_text',
-          'success_url',
-          'comment_chars',
-          'currency',
-          'username',
-          'zaps'
-        ),
-        (value, key) =>
-          (key === 'webhook_url' ||
-            key === 'success_text' ||
-            key === 'success_url') &&
-          (value === null || value === '')
-      )
-
       LNbits.api
         .request(
           'PUT',
           '/lnurlp/api/v1/links/' + data.id,
           wallet.adminkey,
-          values
+          data
         )
         .then(response => {
           this.payLinks = _.reject(this.payLinks, obj => obj.id === data.id)

templates/lnurlp/index.html

@@ -4,9 +4,7 @@
   <div class="col-12 col-md-7 q-gutter-y-md">
     <q-card>
       <q-card-section>
-        <q-btn unelevated color="primary" @click="formDialog.show = true"
+        <q-btn unelevated color="primary" @click="formDialog.show = true">New pay link</q-btn>
-          >New pay link</q-btn
-        >
       </q-card-section>
     </q-card>
 
@@ -17,13 +15,7 @@
             <h5 class="text-subtitle1 q-my-none">Pay links</h5>
           </div>
         </div>
-        <q-table
+        <q-table dense flat :data="payLinks" row-key="id" :pagination.sync="payLinksTable.pagination">
-          dense
-          flat
-          :data="payLinks"
-          row-key="id"
-          :pagination.sync="payLinksTable.pagination"
-        >
           {% raw %}
           <template v-slot:header="props">
             <q-tr class="text-left" :props="props">
@@ -39,26 +31,10 @@
           <template v-slot:body="props">
             <q-tr :props="props">
               <q-td auto-width>
-                <q-btn
+                <q-btn unelevated dense size="xs" icon="launch" :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
-                  unelevated
+                  type="a" :href="props.row.pay_url" target="_blank"><q-tooltip>Sharable Page</q-tooltip></q-btn>
-                  dense
+                <q-btn unelevated dense size="xs" icon="visibility" :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
-                  size="xs"
+                  @click="openQrCodeDialog(props.row.id)"><q-tooltip>View Link</q-tooltip></q-btn>
-                  icon="launch"
-                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
-                  type="a"
-                  :href="props.row.pay_url"
-                  target="_blank"
-                  ><q-tooltip>Sharable Page</q-tooltip></q-btn
-                >
-                <q-btn
-                  unelevated
-                  dense
-                  size="xs"
-                  icon="visibility"
-                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
-                  @click="openQrCodeDialog(props.row.id)"
-                  ><q-tooltip>View Link</q-tooltip></q-btn
-                >
               </q-td>
               <q-td auto-width>{{ props.row.description }}</q-td>
               <q-td auto-width>
@@ -68,57 +44,30 @@
                 <span v-else>{{ props.row.min }} - {{ props.row.max }}</span>
               </q-td>
               <q-td>{{ props.row.currency || 'sat' }}</q-td>
-              <q-td
+              <q-td auto-width :class="(props.row.username) ? 'text-normal' : 'text-grey'">{{ props.row.username ||
-                auto-width
+                'None' }}</q-td>
-                :class="(props.row.username) ? 'text-normal' : 'text-grey'"
-                >{{ props.row.username || 'None' }}</q-td
-              >
               <q-td>
                 <q-icon v-if="props.row.webhook_url" size="14px" name="http">
                   <q-tooltip>Webhook to {{ props.row.webhook_url }}</q-tooltip>
                 </q-icon>
-                <q-icon
+                <q-icon v-if="props.row.success_text || props.row.success_url" size="14px" name="call_to_action">
-                  v-if="props.row.success_text || props.row.success_url"
-                  size="14px"
-                  name="call_to_action"
-                >
                   <q-tooltip>
                     On success, show message '{{ props.row.success_text }}'
-                    <span v-if="props.row.success_url"
+                    <span v-if="props.row.success_url">and URL '{{ props.row.success_url }}'</span>
-                      >and URL '{{ props.row.success_url }}'</span
-                    >
                   </q-tooltip>
                 </q-icon>
-                <q-icon
+                <q-icon v-if="props.row.comment_chars > 0" size="14px" name="insert_comment">
-                  v-if="props.row.comment_chars > 0"
-                  size="14px"
-                  name="insert_comment"
-                >
                   <q-tooltip>
                     {{ props.row.comment_chars }}-char comment allowed
                   </q-tooltip>
                 </q-icon>
               </q-td>
               <q-td auto-width>
-                <q-btn
+                <q-btn flat dense size="xs" @click="openUpdateDialog(props.row.id)" icon="edit" color="light-blue">
-                  flat
-                  dense
-                  size="xs"
-                  @click="openUpdateDialog(props.row.id)"
-                  icon="edit"
-                  color="light-blue"
-                >
                   <q-tooltip>Edit</q-tooltip>
                 </q-btn>
-                <q-btn
+                <q-btn flat dense size="xs" @click="deletePayLink(props.row.id)" icon="cancel"
-                  flat
+                  color="pink"><q-tooltip>Delete</q-tooltip></q-btn>
-                  dense
-                  size="xs"
-                  @click="deletePayLink(props.row.id)"
-                  icon="cancel"
-                  color="pink"
-                  ><q-tooltip>Delete</q-tooltip></q-btn
-                >
               </q-td>
             </q-tr>
           </template>
@@ -149,32 +98,14 @@
   <q-dialog v-model="formDialog.show" @hide="closeFormDialog">
     <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
       <q-form @submit="sendFormData" class="q-gutter-md">
-        <q-select
+        <q-select filled dense emit-value v-model="formDialog.data.wallet" :options="g.user.walletOptions"
-          filled
+          label="Wallet *">
-          dense
-          emit-value
-          v-model="formDialog.data.wallet"
-          :options="g.user.walletOptions"
-          label="Wallet *"
-        >
         </q-select>
-        <q-input
+        <q-input filled dense v-model.trim="formDialog.data.description" type="text" label="Item description *">
-          filled
-          dense
-          v-model.trim="formDialog.data.description"
-          type="text"
-          label="Item description *"
-        >
         </q-input>
         <div class="row">
           <div class="col">
-            <q-input
+            <q-input filled dense v-model.trim="formDialog.data.username" type="text" label="Lightning Address" />
-              filled
-              dense
-              v-model.trim="formDialog.data.username"
-              type="text"
-              label="Lightning Address"
-            />
           </div>
           <div class="col" style="margin-top: 10px">
             <span class="label">
@@ -183,171 +114,90 @@
           </div>
         </div>
         <div class="row q-col-gutter-sm q-mx-sm">
-          <q-input
+          <q-input filled dense v-model.number="formDialog.data.min" type="number"
-            filled
-            dense
-            v-model.number="formDialog.data.min"
-            type="number"
             :step="formDialog.data.currency && formDialog.data.currency !== 'satoshis' ? '0.01' : '1'"
-            :label="formDialog.fixedAmount ? 'Amount *' : 'Min *'"
+            :label="formDialog.fixedAmount ? 'Amount *' : 'Min *'"></q-input>
-          ></q-input>
+          <q-input v-if="!formDialog.fixedAmount" filled dense v-model.number="formDialog.data.max" type="number"
-          <q-input
+            :step="formDialog.data.currency && formDialog.data.currency !== 'satoshis' ? '0.01' : '1'" label="Max *">
-            v-if="!formDialog.fixedAmount"
-            filled
-            dense
-            v-model.number="formDialog.data.max"
-            type="number"
-            :step="formDialog.data.currency && formDialog.data.currency !== 'satoshis' ? '0.01' : '1'"
-            label="Max *"
-          >
           </q-input>
         </div>
         <div class="row q-col-gutter-sm">
           <div class="col">
-            <q-checkbox
+            <q-checkbox dense v-model="formDialog.fixedAmount" label="Fixed amount" />
-              dense
-              v-model="formDialog.fixedAmount"
-              label="Fixed amount"
-            />
           </div>
           <div class="col">
-            <q-select
+            <q-select dense :options="currencies" v-model="formDialog.data.currency"
-              dense
+              :display-value="formDialog.data.currency || 'satoshis'" label="Currency"
-              :options="currencies"
-              v-model="formDialog.data.currency"
-              :display-value="formDialog.data.currency || 'satoshis'"
-              label="Currency"
               :hint="'Converted to satoshis at each payment. ' + (formDialog.data.currency && fiatRates[formDialog.data.currency] ? `Currently 1 ${formDialog.data.currency} = ${fiatRates[formDialog.data.currency]} sat` : '')"
-              @input="updateFiatRate"
+              @input="updateFiatRate" />
-            />
           </div>
         </div>
-        <q-expansion-item
+        <q-expansion-item group="advanced" icon="settings" label="Advanced options">
-          group="advanced"
+          <q-card>
-          icon="settings"
+            <q-card-section>
-          label="Advanced options"
+              <h5 class="text-caption q-mt-sm q-mb-none">LNURL</h5>
-        >
+              <div class="row">
-        <q-card>
+                <div class="col-12">
-          <q-card-section>
+                  <q-input filled dense v-model.number="formDialog.data.comment_chars" type="number"
-            <h5 class="text-caption q-mt-sm q-mb-none">LNURL</h5>
+                    label="Comment maximum characters" hint="Allow the payer to attach a comment.">
-          <div class="row">
+                  </q-input>
-            <div class="col-12">
+                </div>
-              <q-input
+              </div>
-                filled
+              <div class="row">
-                dense
+                <div class="col-12">
-                v-model.number="formDialog.data.comment_chars"
+                  <q-input filled dense v-model="formDialog.data.webhook_url" type="text" label="Webhook URL (optional)"
-                type="number"
+                    hint="A URL to be called whenever this link receives a payment."></q-input>
-                label="Comment maximum characters"
+                </div>
-                hint="Allow the payer to attach a comment."
+              </div>
-              >
+              <div class="row" v-if="formDialog.data.webhook_url">
-              </q-input>
+                <div class="col-12">
-            </div>
+                  <q-input filled dense v-model="formDialog.data.webhook_headers" type="text"
-          </div>
+                    label="Webhook headers (optional)"
-          <div class="row">
+                    hint="Custom data as JSON string, send headers along with the webhook."></q-input>
-            <div class="col-12">
+                </div>
-              <q-input
+                <div class="col-12">
-                filled
+                  <q-input filled dense v-model="formDialog.data.webhook_body" type="text"
-                dense
+                    label="Webhook custom data (optional)"
-                v-model="formDialog.data.webhook_url"
+                    hint="Custom data as JSON string, will get posted along with webhook 'body' field."></q-input>
-                type="text"
+                </div>
-                label="Webhook URL (optional)"
+              </div>
-                hint="A URL to be called whenever this link receives a payment."
+              <div class="row">
-              ></q-input>
+                <div class="col-12">
-            </div>
+                  <q-input filled dense v-model="formDialog.data.success_text" type="text"
-          </div>
+                    label="Success message (optional)"
-          <div class="row">
+                    hint="Will be shown to the user in his wallet after a successful payment."></q-input>
-            <div class="col-12">
+                </div>
-              <q-input
+              </div>
-                filled
+              <div class="row">
-                dense
+                <div class="col-12">
-                v-if="formDialog.data.webhook_url"
+                  <q-input filled dense v-model="formDialog.data.success_url" type="text" label="Success URL (optional)"
-                v-model="formDialog.data.webhook_headers"
+                    hint="Link will be shown to the sender after a successful payment.">
-                type="text"
+                  </q-input>
-                label="Webhook headers (optional)"
+                </div>
-                hint="Custom data as JSON string, send headers along with the webhook."
+              </div>
-              ></q-input>
+            </q-card-section>
-            </div>
+            <q-card-section>
-          </div>
+              <h5 class="text-caption q-mt-sm q-mb-none">Nostr</h5>
-          <div class="row">
+              <div class="row">
-            <div class="col-12">
+                <div class="col-12">
-              <q-input
+                  <q-checkbox :toggle-indeterminate="false" dense v-model="formDialog.data.zaps"
-                filled
+                    label="Enable nostr zaps" />
-                dense
+                </div>
-                v-if="formDialog.data.webhook_url"
+              </div>
-                v-model="formDialog.data.webhook_body"
+            </q-card-section>
-                type="text"
+          </q-card>
-                label="Webhook custom data (optional)"
-                hint="Custom data as JSON string, will get posted along with webhook 'body' field."
-              ></q-input>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-12">
-              <q-input
-                filled
-                dense
-                v-model="formDialog.data.success_text"
-                type="text"
-                label="Success message (optional)"
-                hint="Will be shown to the user in his wallet after a successful payment."
-              ></q-input>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-12">
-              <q-input
-                filled
-                dense
-                v-model="formDialog.data.success_url"
-                type="text"
-                label="Success URL (optional)"
-                hint="Link will be shown to the sender after a successful payment."
-              >
-              </q-input>
-            </div>
-          </div>
-        </q-card-section>
-        <q-card-section>
-          <h5 class="text-caption q-mt-sm q-mb-none">Nostr</h5>
-          <div class="row">
-            <div class="col-12">
-              <q-checkbox
-                :toggle-indeterminate="false"
-                dense
-                v-model="formDialog.data.zaps"
-                label="Enable nostr zaps"
-              />
-            </div>
-          </div>
-        </q-card-section>
-        </q-card>
         </q-expansion-item>
         <div class="row q-mt-lg">
-          <q-btn
+          <q-btn v-if="formDialog.data.id" unelevated color="primary" type="submit">Update pay link</q-btn>
-            v-if="formDialog.data.id"
+          <q-btn v-else unelevated color="primary" :disable="
-            unelevated
-            color="primary"
-            type="submit"
-            >Update pay link</q-btn
-          >
-          <q-btn
-            v-else
-            unelevated
-            color="primary"
-            :disable="
                 formDialog.data.wallet == null ||
                 formDialog.data.description == null ||
                 (
                   formDialog.data.min == null ||
                   formDialog.data.min <= 0
                 )
-                "
+                " type="submit">Create pay link</q-btn>
-            type="submit"
+          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
-            >Create pay link</q-btn
-          >
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-            >Cancel</q-btn
-          >
         </div>
       </q-form>
     </q-card>
@@ -357,23 +207,18 @@
     <q-card v-if="qrCodeDialog.data" class="q-pa-lg lnbits__dialog-card">
       {% raw %}
       <q-responsive :ratio="1" class="q-mx-xl q-mb-md">
-        <qrcode
+        <qrcode :value="'lightning:' + qrCodeDialog.data.lnurl" :options="{width: 800}" class="rounded-borders">
-          :value="'lightning:' + qrCodeDialog.data.lnurl"
+        </qrcode>
-          :options="{width: 800}"
-          class="rounded-borders"
-        ></qrcode>
       </q-responsive>
       <p style="word-break: break-all">
         <strong>ID:</strong> {{ qrCodeDialog.data.id }}<br />
         <strong>Amount:</strong> {{ qrCodeDialog.data.amount }}<br />
-        <span v-if="qrCodeDialog.data.currency"
+        <span v-if="qrCodeDialog.data.currency"><strong>{{ qrCodeDialog.data.currency }} price:</strong>
-          ><strong>{{ qrCodeDialog.data.currency }} price:</strong>
           {{
-            fiatRates[qrCodeDialog.data.currency]
+          fiatRates[qrCodeDialog.data.currency]
-              ? fiatRates[qrCodeDialog.data.currency] + ' sat'
+          ? fiatRates[qrCodeDialog.data.currency] + ' sat'
-              : 'Loading...'
+          : 'Loading...'
-          }}<br
+          }}<br /></span>
-        /></span>
         <strong>Accepts comments:</strong> {{ qrCodeDialog.data.comments
         }}<br />
         <strong>Dispatches webhook to:</strong> {{ qrCodeDialog.data.webhook
@@ -387,37 +232,17 @@
       </p>
       {% endraw %}
       <div class="row q-mt-lg q-gutter-sm">
-        <q-btn
+        <q-btn outline color="grey" @click="copyText(qrCodeDialog.data.lnurl, 'LNURL copied to clipboard!')"
-          outline
+          class="q-ml-sm">Copy LNURL</q-btn>
-          color="grey"
+        <q-btn outline color="grey" icon="link"
-          @click="copyText(qrCodeDialog.data.lnurl, 'LNURL copied to clipboard!')"
+          @click="copyText(qrCodeDialog.data.pay_url, 'Link copied to clipboard!')"><q-tooltip>Copy sharable
-          class="q-ml-sm"
+            link</q-tooltip>
-          >Copy LNURL</q-btn
-        >
-        <q-btn
-          outline
-          color="grey"
-          icon="link"
-          @click="copyText(qrCodeDialog.data.pay_url, 'Link copied to clipboard!')"
-          ><q-tooltip>Copy sharable link</q-tooltip>
         </q-btn>
-        <q-btn
+        <q-btn outline color="grey" icon="nfc" @click="writeNfcTag(qrCodeDialog.data.lnurl)"
-          outline
+          :disable="nfcTagWriting"><q-tooltip>Write to NFC</q-tooltip>
-          color="grey"
-          icon="nfc"
-          @click="writeNfcTag(qrCodeDialog.data.lnurl)"
-          :disable="nfcTagWriting"
-          ><q-tooltip>Write to NFC</q-tooltip>
         </q-btn>
-        <q-btn
+        <q-btn outline color="grey" icon="print" type="a" :href="qrCodeDialog.data.print_url"
-          outline
+          target="_blank"><q-tooltip>Print</q-tooltip></q-btn>
-          color="grey"
-          icon="print"
-          type="a"
-          :href="qrCodeDialog.data.print_url"
-          target="_blank"
-          ><q-tooltip>Print</q-tooltip></q-btn
-        >
         <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
       </div>
     </q-card>
@@ -425,4 +250,4 @@
 </div>
 {% endblock %} {% block scripts %} {{ window_vars(user) }}
 <script src="/lnurlp/static/js/index.js"></script>
-{% endblock %}
+{% endblock %}