feat: support LUD-24 pinLimit for NFC card payments

models.py

@@ -13,6 +13,11 @@ class PayLnurlWData(BaseModel):
     lnurl: str
 
 
+class PayLnurlWPin(BaseModel):
+    pin_token: str = Field(..., min_length=1, max_length=64)
+    pin: str = Field(..., pattern=r"^\d{4}$")
+
+
 class CreateWithdrawPay(BaseModel):
     pay_link: str
 

static/components/pin-dialog.js

@@ -0,0 +1,111 @@
+// LUD-24: PIN entry for NFC cards whose withdrawRequest carries a `pinLimit`.
+window.app.component('tpos-pin-dialog', {
+  name: 'tpos-pin-dialog',
+  props: ['show', 'amount', 'attemptsLeft', 'error', 'loading'],
+  emits: ['submit', 'cancel'],
+  data() {
+    return {
+      pin: '',
+      keys: ['1', '2', '3', '4', '5', '6', '7', '8', '9']
+    }
+  },
+  watch: {
+    show(value) {
+      if (value) this.pin = ''
+    }
+  },
+  computed: {
+    errorText() {
+      if (!this.error) return ''
+      if (!this.attemptsLeft) return this.error
+      const word = this.attemptsLeft === 1 ? 'attempt' : 'attempts'
+      return `${this.error} (${this.attemptsLeft} ${word} left)`
+    }
+  },
+  methods: {
+    press(digit) {
+      if (this.loading || this.pin.length >= 4) return
+      this.pin += digit
+    },
+    back() {
+      if (this.loading) return
+      this.pin = this.pin.slice(0, -1)
+    },
+    submit() {
+      if (this.loading || this.pin.length !== 4) return
+      this.$emit('submit', this.pin)
+      this.pin = ''
+    }
+  },
+  template: `
+    <q-dialog :model-value="show" persistent position="top">
+      <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card" style="min-width: 300px">
+        <div class="text-center">
+          <div class="text-h6">Enter card PIN</div>
+          <div class="text-h5 q-my-md" v-text="amount"></div>
+          <div class="row justify-center q-gutter-sm q-my-md">
+            <q-icon
+              v-for="i in 4"
+              :key="i"
+              :name="pin.length >= i ? 'circle' : 'radio_button_unchecked'"
+              size="24px"
+            ></q-icon>
+          </div>
+          <div class="text-negative" style="min-height: 1.5em">
+            <span v-if="error" v-text="errorText"></span>
+          </div>
+        </div>
+        <div class="row q-col-gutter-sm q-mt-sm">
+          <div v-for="key in keys" :key="key" class="col-4">
+            <q-btn
+              unelevated
+              size="lg"
+              class="full-width"
+              color="primary"
+              :disable="loading"
+              :label="key"
+              @click="press(key)"
+            ></q-btn>
+          </div>
+          <div class="col-4">
+            <q-btn
+              unelevated
+              size="lg"
+              class="full-width"
+              color="grey"
+              icon="backspace"
+              :disable="loading"
+              @click="back"
+            ></q-btn>
+          </div>
+          <div class="col-4">
+            <q-btn
+              unelevated
+              size="lg"
+              class="full-width"
+              color="primary"
+              :disable="loading"
+              label="0"
+              @click="press('0')"
+            ></q-btn>
+          </div>
+          <div class="col-4">
+            <q-btn
+              unelevated
+              size="lg"
+              class="full-width"
+              color="positive"
+              icon="check"
+              :loading="loading"
+              :disable="pin.length !== 4"
+              @click="submit"
+            ></q-btn>
+          </div>
+        </div>
+        <div class="row q-mt-md">
+          <q-btn flat color="grey" class="q-ml-auto" :disable="loading" @click="$emit('cancel')">Cancel</q-btn>
+        </div>
+      </q-card>
+    </q-dialog>
+  `
+})

static/js/tpos.js

@@ -42,6 +42,14 @@ window.app = Vue.createApp({
       atmMode: false,
       atmToken: '',
       nfcTagReading: false,
+      pinDialog: {
+        show: false,
+        token: null,
+                failedAttempts: 0,
+        attemptsLeft: 0,
+        error: '',
+        loading: false
+      },
       lnaddressDialog: {
         show: false,
         lnaddress: ''
@@ -1642,26 +1650,82 @@ window.app = Vue.createApp({
           }
         )
         .then(response => {
-          if (!response.data.success) {
-            Quasar.Notify.create({
-              type: 'negative',
-              message: response.data.detail,
-              timeout: 0,
-              actions: [
-                {
-                  icon: 'close',
-                  color: 'white',
-                  round: true,
-                  handler: () => {
-                    this.readNfcTag()
-                  }
-                }
-              ]
-            })
+          if (response.data.pin_required) {
+            this.openPinDialog(response.data.pin_token)
+          } else if (!response.data.success) {
+            this.notifyNfcError(response.data.detail)
+          }
+        })
+        .catch(error => {
+          console.error(error)
+          LNbits.utils.notifyApiError(error)
+        })
+    },
+    notifyNfcError(message) {
+      Quasar.Notify.create({
+        type: 'negative',
+        message,
+        timeout: 0,
+        actions: [
+          {
+            icon: 'close',
+            color: 'white',
+            round: true,
+            handler: () => {
+              this.readNfcTag()
+            }
+          }
+        ]
+      })
+    },
+    // LUD-24: the card asks for a PIN, it allows 3 wrong attempts in total
+    openPinDialog(token) {
+      this.pinDialog = {
+        show: true,
+        token,
+        failedAttempts: 0,
+        attemptsLeft: 0,
+        error: '',
+        loading: false
+      }
+    },
+    closePinDialog() {
+      this.pinDialog.show = false
+      this.pinDialog.token = null
+      this.pinDialog.loading = false
+    },
+    cancelPin() {
+      this.closePinDialog()
+      this.readNfcTag()
+    },
+    submitPin(pin) {
+      this.pinDialog.loading = true
+      this.pinDialog.error = ''
+      return axios
+        .post(`/tpos/api/v1/tposs/${this.tposId}/invoices/pay-pin`, {
+          pin_token: this.pinDialog.token,
+          pin
+        })
+        .then(response => {
+          const data = response.data
+          if (data.success) {
+            this.closePinDialog()
+          } else if (data.pin_retry) {
+            this.pinDialog.failedAttempts += 1
+            this.pinDialog.attemptsLeft = Math.max(
+              0,
+              3 - this.pinDialog.failedAttempts
+            )
+            this.pinDialog.error = 'Wrong PIN'
+            this.pinDialog.loading = false
+          } else {
+            this.closePinDialog()
+            this.notifyNfcError(data.detail)
           }
         })
         .catch(error => {
           console.error(error)
+          this.closePinDialog()
           LNbits.utils.notifyApiError(error)
         })
     },

templates/tpos/dialogs.html

@@ -57,6 +57,16 @@ <h5 class="q-mt-none q-mb-sm">
     </q-card>
   </q-dialog>
 
+  <tpos-pin-dialog
+    :show="pinDialog.show"
+    :amount="activePaymentAmountWithTipFormatted"
+    :attempts-left="pinDialog.attemptsLeft"
+    :error="pinDialog.error"
+    :loading="pinDialog.loading"
+    @submit="submitPin"
+    @cancel="cancelPin"
+  ></tpos-pin-dialog>
+
   <tpos-print-dialog
     v-model:show="printDialog.show"
     :payment-hash="printDialog.paymentHash"

templates/tpos/tpos.html

@@ -260,6 +260,7 @@ <h5 class="text-italic">
 <script src="{{ static_url_for('tpos/static', path='components/keypad.js') }}"></script>
 <script src="{{ static_url_for('tpos/static', path='components/payment-method-selector.js') }}"></script>
 <script src="{{ static_url_for('tpos/static', path='components/payment-dialog.js') }}"></script>
+<script src="{{ static_url_for('tpos/static', path='components/pin-dialog.js') }}"></script>
 <script src="{{ static_url_for('tpos/static', path='components/held-carts-dialog.js') }}"></script>
 <script src="{{ static_url_for('tpos/static', path='components/print-dialog.js') }}"></script>
 <script src="{{ static_url_for('tpos/static', path='components/receipt.js') }}"></script>

tests/check_static_load.js

@@ -39,6 +39,7 @@ const pages = [
       'static/components/keypad.js',
       'static/components/payment-method-selector.js',
       'static/components/payment-dialog.js',
+      'static/components/pin-dialog.js',
       'static/components/held-carts-dialog.js',
       'static/components/print-dialog.js',
       'static/components/receipt.js',