Merge pull request #2 from lnbits/show_keys

feat: show merchant keypair

static/components/key-pair/key-pair.html

@@ -0,0 +1,44 @@
+<div>
+  <q-separator></q-separator>
+  <div class="row q-mt-md">
+    <div class="col-6 q-pl-xl">Public Key</div>
+    <div class="col-6">
+      <q-toggle v-model="showPrivateKey" class="q-pl-xl" color="secodary">
+        Show Private Key
+      </q-toggle>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-6">
+      <div class="text-center q-mb-lg cursor-pointer">
+        <q-responsive :ratio="1" class="q-mx-xl" @click="copyText(publicKey)">
+          <qrcode
+            :value="publicKey"
+            :options="{width: 250}"
+            class="rounded-borders"
+          ></qrcode>
+        </q-responsive>
+        <small><span v-text="publicKey"></span><br />Click to copy</small>
+      </div>
+    </div>
+    <div class="col-6 cursor-pointer">
+      <div v-if="showPrivateKey">
+        <div class="text-center q-mb-lg">
+          <q-responsive
+            :ratio="1"
+            class="q-mx-xl"
+            @click="copyText(privateKey)"
+          >
+            <qrcode
+              :value="privateKey"
+              :options="{width: 250}"
+              class="rounded-borders"
+            ></qrcode>
+          </q-responsive>
+          <small><span v-text="privateKey"></span><br />Click to copy</small>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

static/components/key-pair/key-pair.js

@@ -0,0 +1,25 @@
+async function keyPair(path) {
+  const template = await loadTemplateAsync(path)
+  Vue.component('key-pair', {
+    name: 'key-pair',
+    template,
+
+    props: ['public-key', 'private-key'],
+    data: function () {
+      return {
+        showPrivateKey: false
+      }
+    },
+    methods: {
+      copyText: function (text, message, position) {
+        var notify = this.$q.notify
+        Quasar.utils.copyToClipboard(text).then(function () {
+          notify({
+            message: message || 'Copied to clipboard!',
+            position: position || 'bottom'
+          })
+        })
+      }
+    }
+  })
+}

static/js/index.js

@@ -2,6 +2,7 @@ const merchant = async () => {
   Vue.component(VueQrcode.name, VueQrcode)
 
   await stallDetails('static/components/stall-details/stall-details.html')
+  await keyPair('static/components/key-pair/key-pair.html')
 
   const nostr = window.NostrTools
 
@@ -10,7 +11,8 @@ const merchant = async () => {
     mixins: [windowMixin],
     data: function () {
       return {
-        merchant: null
+        merchant: {},
+        showKeys: false
       }
     },
     methods: {
@@ -20,7 +22,7 @@ const merchant = async () => {
 
         const data = {private_key: privkey, public_key: pubkey, config: {}}
         try {
-          const resp = await LNbits.api.request(
+          await LNbits.api.request(
             'POST',
             '/nostrmarket/api/v1/merchant',
             this.g.user.wallets[0].adminkey,

templates/nostrmarket/index.html

@@ -59,7 +59,26 @@
     </q-card>
     <div v-else>
       <q-card>
-        <q-card-section> Merchant Exists </q-card-section>
+        <q-card-section>
+          <div class="row">
+            <div class="col-12">
+              <q-btn
+                @click="showKeys = !showKeys"
+                :label="showKeys ? 'Hide Keys' : 'Show Keys'"
+                color="primary"
+                class="float-right"
+              >
+                <q-tooltip> Show Public or Private keys </q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </q-card-section>
+        <q-card-section v-if="showKeys">
+          <key-pair
+            :public-key="merchant.public_key"
+            :private-key="merchant.private_key"
+          ></key-pair>
+        </q-card-section>
       </q-card>
     </div>
   </div>
@@ -83,6 +102,7 @@
 
 <script src="{{ url_for('nostrmarket_static', path='js/utils.js') }}"></script>
 <script src="{{ url_for('nostrmarket_static', path='components/stall-details/stall-details.js') }}"></script>
+<script src="{{ url_for('nostrmarket_static', path='components/key-pair/key-pair.js') }}"></script>
 <script src="{{ url_for('nostrmarket_static', path='js/index.js') }}"></script>
 
 {% endblock %}