wipe card

lnbits/extensions/boltcards/static/js/index.js

@@ -150,6 +150,7 @@ new Vue({
       },
       qrCodeDialog: {
         show: false,
+        wipe: false,
         data: null
       }
     }
@@ -260,9 +261,10 @@ new Vue({
           })
         })
     },
-    openQrCodeDialog(cardId) {
+    openQrCodeDialog(cardId, wipe) {
       var card = _.findWhere(this.cards, {id: cardId})
       this.qrCodeDialog.data = {
+        id: card.id,
         link: window.location.origin + '/boltcards/api/v1/auth?a=' + card.otp,
         name: card.card_name,
         uid: card.uid,
@@ -274,6 +276,18 @@ new Vue({
         k4: card.k2,
         webhook_url: card.webhook_url
       }
+      this.qrCodeDialog.data_wipe = JSON.stringify({
+        action: 'wipe',
+        id: 1,
+        k0: card.k0,
+        k1: card.k1,
+        k2: card.k2,
+        k3: card.k1,
+        k4: card.k2,
+        uid: card.uid,
+        version: 1
+      })
+      this.qrCodeDialog.wipe = wipe
       this.qrCodeDialog.show = true
     },
     addCardOpen: function () {

lnbits/extensions/boltcards/templates/boltcards/index.html

@@ -48,6 +48,7 @@
               </q-th>
               <q-th auto-width></q-th>
               <q-th auto-width></q-th>
+              <q-th auto-width></q-th>
             </q-tr>
           </template>
           <template v-slot:body="props">
@@ -58,7 +59,7 @@
                   dense
                   icon="qr_code"
                   :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
-                  @click="openQrCodeDialog(props.row.id)"
+                  @click="openQrCodeDialog(props.row.id, false)"
                 >
                   <q-tooltip>Card key credentials</q-tooltip>
                 </q-btn>
@@ -99,7 +100,7 @@
                   flat
                   dense
                   size="xs"
-                  @click="deleteCard(props.row.id)"
+                  @click="openQrCodeDialog(props.row.id, true)"
                   icon="cancel"
                   color="pink"
                 >
@@ -367,21 +368,61 @@
   <q-dialog v-model="qrCodeDialog.show" position="top">
     <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">
+      <div class="col q-mt-lg text-center">
+        <q-responsive
+          :ratio="1"
+          class="q-mx-xl q-mb-md"
+          v-show="!qrCodeDialog.wipe"
+        >
           <qrcode
             :value="qrCodeDialog.data.link"
             :options="{width: 800}"
             class="rounded-borders"
           ></qrcode>
-      </q-responsive>
+
-      <p style="word-break: break-all" class="text-center">
+          <p class="text-center">
-        (Keys for
+            (QR for <strong>create</strong> the card in
             <a
               href="https://play.google.com/store/apps/details?id=com.lightningnfcapp"
               target="_blank"
               >Boltcard NFC Card Creator</a
             >)
           </p>
+        </q-responsive>
+        <q-responsive
+          :ratio="1"
+          class="q-mx-xl q-mb-md"
+          v-show="qrCodeDialog.wipe"
+        >
+          <qrcode
+            :value="qrCodeDialog.data_wipe"
+            :options="{width: 800}"
+            class="rounded-borders"
+          ></qrcode>
+          <p class="text-center">
+            (QR for for <strong>wipe</strong> the card in
+            <a
+              href="https://play.google.com/store/apps/details?id=com.lightningnfcapp"
+              target="_blank"
+              >Boltcard NFC Card Creator</a
+            >)
+          </p>
+        </q-responsive>
+      </div>
+      <div class="col q-mt-xl q-mb-md text-center">
+        <q-btn-toggle
+          v-model="qrCodeDialog.wipe"
+          rounded
+          unelevated
+          toggle-color="primary"
+          color="white"
+          text-color="primary"
+          :options="[
+            {label: 'Create', value: false},
+            {label: 'Wipe', value: true}
+          ]"
+        />
+      </div>
       <p style="word-break: break-all">
         <strong>Name:</strong> {{ qrCodeDialog.data.name }}<br />
         <strong>UID:</strong> {{ qrCodeDialog.data.uid }}<br />
@@ -398,11 +439,32 @@
         outline
         color="grey"
         @click="copyText(qrCodeDialog.data.link)"
-        label="Keys/Auth link"
+        label="Create link"
+        v-show="!qrCodeDialog.wipe"
       >
+        <q-tooltip>Click to copy, then paste to NFC Card Creator</q-tooltip>
+      </q-btn>
+      <q-btn
+        unelevated
+        outline
+        color="grey"
+        @click="copyText(qrCodeDialog.data_wipe)"
+        label="Wipe data"
+        v-show="qrCodeDialog.wipe"
+      >
+        <q-tooltip>Click to copy, then paste to NFC Card Creator</q-tooltip>
+      </q-btn>
+      <q-btn
+        unelevated
+        outline
+        color="red"
+        @click="deleteCard(qrCodeDialog.data.id)"
+        label="Delete card"
+        v-show="qrCodeDialog.wipe"
+        v-close-popup
+      >
+        <q-tooltip>Backup the keys, or wipe the card first!</q-tooltip>
       </q-btn>
-      <q-tooltip>Click to copy, then add to NFC card</q-tooltip>
-
       {% endraw %}
       <div class="row q-mt-lg q-gutter-sm">
         <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>