feat: user logout and data clear

static/components/user-config/user-config.html

@@ -1,8 +1,47 @@
 <q-card>
-  <div class="q-pa-md">
+  <q-card-section v-if="account">
-    <div class="q-gutter-y-md">
+    <div class="row">
-      User Config
+      <div class="col-10">
+        <q-input v-model="account.npub" readonly disbled outlined :hint="account.pubkey" type="text" label="Public Key"
+          class="q-mb-md">
+          <template v-slot:append>
+            <q-btn @click="copyText(account.npub)" icon="content_copy" label="Npub" flat
+              color="gray float-right q-mt-sm"></q-btn>
+          </template>
+        </q-input>
+      </div>
+
+      <div class="col-2 auto-width">
+        <q-btn @click="copyText(account.pubkey)" icon="content_copy" label="Hex" flat
+          color="gray float-right q-mt-sm"></q-btn>
       </div>
     </div>
 
+    <div class="row">
+      <div class="col-10">
+        <q-input v-model="account.nsec" readonly disbled outlined type="password" label="Private Key"
+          class="q-mb-md">
+          <template v-slot:append>
+            <q-btn @click="copyText(account.nsec)"  icon="content_copy" label="Nsec" flat color="gray float-right q-mt-sm"></q-btn>
+          </template>
+        </q-input>
+      </div>
+
+      <div class="col-2 auto-width">
+        <q-btn @click="copyText(account.privkey)"  icon="content_copy" label="Hex" flat color="gray float-right q-mt-sm"></q-btn>
+      </div>
+    </div>
+  </q-card-section>
+  <q-separator />
+  <q-card-section>
+    <div v-if="account" class="float-right">
+      <q-checkbox v-model="clearAllData" label="Clear All Data"></q-checkbox>
+      <q-btn @click="logout" flat label="Logout" icon="logout" class="q-ml-lg" color="primary"></q-btn>
+    </div>
+    <div v-else>
+      <strong>No Account</strong>
+    </div>
+  </q-card-section>
+  <q-card-section></q-card-section>
+
 </q-card>

static/components/user-config/user-config.js

@@ -2,15 +2,27 @@ async function userConfig(path) {
     const template = await loadTemplateAsync(path)
     Vue.component('user-config', {
         name: 'user-config',
-        props: ['user',],
+        props: ['account'],
         template,
 
         data: function () {
             return {
+                clearAllData: false
             }
         },
         methods: {
-            
+            logout: async function () {
+                LNbits.utils
+                    .confirmDialog(
+                        'Please make sure you save your private key! You will not be able to recover it later!'
+                    )
+                    .onOk(async () => {
+                        this.$emit('logout', { clearAllData: this.clearAllData })
+                    })
+            },
+            copyText(text) {
+                this.$emit('copy-text', text)
+            }
         },
         created: async function () {
 

static/js/market.js

@@ -306,16 +306,6 @@ const market = async () => {
         }
       },
 
-      async deleteAccount() {
-        await LNbits.utils
-          .confirmDialog(
-            `This will delete all stored data. If you didn't backup the Key Pair (Private and Public Keys), you will lose it. Continue?`
-          )
-          .onOk(() => {
-            window.localStorage.removeItem('nostrmarket.account')
-            this.account = null
-          })
-      },
       async createAccount(useExtension = false) {
         let nip07
         if (useExtension) {
@@ -328,9 +318,14 @@ const market = async () => {
             let { type, data } = NostrTools.nip19.decode(key)
             key = data
           }
+          const privkey = watchOnly ? null : key
+          const pubkey = watchOnly ? key : NostrTools.getPublicKey(key)
           this.$q.localStorage.set('nostrmarket.account', {
-            privkey: watchOnly ? null : key,
+            privkey,
-            pubkey: watchOnly ? key : NostrTools.getPublicKey(key),
+            pubkey,
+            nsec: NostrTools.nip19.nsecEncode(key),
+            npub: NostrTools.nip19.npubEncode(pubkey),
+
             useExtension: nip07 ?? false
           })
           this.accountDialog.data = {
@@ -929,6 +924,17 @@ const market = async () => {
           relays: Array.from(this.relays)
         })
         this.copyText(naddr)
+      },
+
+      logout(opts) {
+        window.localStorage.removeItem('nostrmarket.account')
+        this.account = null
+        if (opts?.clearAllData) {
+          this.$q.localStorage.getAllKeys().forEach(key => window.localStorage.removeItem(key))
+          window.location.href = window.location.origin + window.location.pathname;
+        }
+
+
       }
 
     }

templates/nostrmarket/market.html

@@ -134,7 +134,8 @@
           @remove-merchant="removeMerchant" :relays="relays" @add-relay="addRelay" @remove-relay="removeRelay"
           :config-ui="config?.opts" @ui-config-update="updateUiConfig" @publish-naddr="publishNaddr"></market-config>
 
-        <user-config v-else-if="activePage === 'user-config'"></user-config>
+        <user-config v-else-if="activePage === 'user-config'" :account="account" @logout="logout"
+          @copy-text="copyText"></user-config>
 
         <user-chat v-else-if="activePage === 'user-chat'"></user-chat>