feat: add a copy wallet button (#2613)

* feat: add a copy wallet button
* fix: make button consistent
* feat: hide API keys
Closes #2462
* fix: consistency in icons
* fix: missing end tag

lnbits/core/templates/core/_api_docs.html

@@ -5,10 +5,56 @@
   :content-inset-level="0.5"
 >
   <q-card-section>
-    <strong>Node URL: </strong><em v-text="origin"></em><br />
+    <q-list>
-    <strong>Wallet ID: </strong><em>{{ wallet.id }}</em><br />
+      <q-item dense class="q-pa-none">
-    <strong>Admin key: </strong><em>{{ wallet.adminkey }}</em><br />
+        <q-item-section>
-    <strong>Invoice/read key: </strong><em>{{ wallet.inkey }}</em>
+          <q-item-label>
+            <strong>Node URL: </strong><em v-text="origin"></em>
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-item dense class="q-pa-none">
+        <q-item-section>
+          <q-item-label>
+            <strong>Wallet ID: </strong><em>{{ wallet.id }}</em>
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-item dense class="q-pa-none">
+        <q-item-section>
+          <q-item-label>
+            <strong>Admin key: </strong
+            ><em
+              v-text="adminkeyHidden ? '****************' : `{{ wallet.adminkey }}`"
+            ></em>
+          </q-item-label>
+        </q-item-section>
+        <q-item-section side>
+          <q-icon
+            :name="adminkeyHidden ? 'visibility_off' : 'visibility'"
+            class="cursor-pointer float-right"
+            @click="adminkeyHidden = !adminkeyHidden"
+          ></q-icon>
+        </q-item-section>
+      </q-item>
+      <q-item dense class="q-pa-none">
+        <q-item-section>
+          <q-item-label>
+            <strong>Invoice/read key: </strong
+            ><em
+              v-text="inkeyHidden ? '****************' : `{{ wallet.inkey }}`"
+            ></em>
+          </q-item-label>
+        </q-item-section>
+        <q-item-section side>
+          <q-icon
+            :name="inkeyHidden ? 'visibility_off' : 'visibility'"
+            class="cursor-pointer float-right"
+            @click="inkeyHidden = !inkeyHidden"
+          ></q-icon>
+        </q-item-section>
+      </q-item>
+    </q-list>
   </q-card-section>
   <q-expansion-item
     group="api"

lnbits/core/templates/core/wallet.html

@@ -156,9 +156,17 @@
                       <p v-text="$t('export_to_phone_desc')"></p>
                       <qrcode
                         :value="'{{request.base_url}}wallet?usr={{user.id}}&wal={{wallet.id}}'"
-                        :options="{width:240}"
+                        :options="{ width: 256 }"
                       ></qrcode>
                     </q-card-section>
+                    <q-card-actions class="flex-center q-pb-md">
+                      <q-btn
+                        outline
+                        color="grey"
+                        :label="$t('copy_wallet_url')"
+                        @click="copyText('{{request.base_url}}wallet?usr={{user.id}}&wal={{wallet.id}}')"
+                      ></q-btn>
+                    </q-card-actions>
                   </q-card>
                 </q-expansion-item>
                 <q-separator></q-separator>

lnbits/static/js/wallet.js

@@ -56,7 +56,9 @@ new Vue({
       update: {
         name: null,
         currency: null
-      }
+      },
+      inkeyHidden: true,
+      adminkeyHidden: true
     }
   },
   computed: {