enhance seed-backup with clipboard copy & more info

src/views/SeedBackupView.vue

@@ -33,30 +33,65 @@
       <p class="text-center mb-4">
         <b class="text-red-600">BEWARE!</b> Anyone who has this seed phrase will
         be able impersonate you and take over any digital holdings based on it.
-        Reveal it when you are somewhere only you can see your screen, and
-        record it somewhere only you have access.
-        <i>Don't take a screenshot or send it to any online service.</i>
+        Reveal it when you are somewhere private, when only you can see your
+        screen, and record it somewhere only you have access. A password manager
+        is a good idea, and so is a piece of paper in a vault.
+        <i
+          >We recommend you do NOT take a screenshot or send it to any online
+          service.</i
+        >
       </p>
 
       <p v-if="numAccounts > 1">
         <b class="text-orange-600">Note:</b> You have more than one identifier
         stored in this browser. If they are all based on the same seed as the
-        current identifier, this one backup is sufficient; however, if you have
-        different seeds for other identifiers, you will have to back them up
-        separately.
+        current identifier, this one backup is sufficient, as long as you also
+        record the derivation path. However, if you have different seeds for
+        other identifiers, you will have to back them up separately.
       </p>
 
       <div class="bg-slate-100 rounded-md overflow-hidden p-4 mb-4">
+        <p v-if="showSeed" class="text-center text-slate-700 mt-2">
+          {{ activeAccount.mnemonic }}
+          <button
+            v-show="!showCopiedSeed"
+            @click="
+              doCopyTwoSecRedo(
+                activeAccount.mnemonic as string,
+                () => (showCopiedSeed = !showCopiedSeed),
+              )
+            "
+          >
+            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+          </button>
+          <span v-show="showCopiedSeed" class="text-sm text-green-500">
+            Copied
+          </span>
+          <br />
+          <br />
+          Derivation Path: {{ activeAccount.derivationPath }}
+          <button
+            v-show="!showCopiedDeri"
+            @click="
+              doCopyTwoSecRedo(
+                activeAccount.derivationPath as string,
+                () => (showCopiedDeri = !showCopiedDeri),
+              )
+            "
+          >
+            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+          </button>
+          <span v-show="showCopiedDeri" class="text-sm text-green-500"
+            >Copied</span
+          >
+        </p>
         <button
+          v-else
           class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
-          @click="showSeedPhrase"
+          @click="showSeed = true"
         >
           Reveal my Seed Phrase
         </button>
-
-        <p v-if="showSeed" class="text-center text-slate-700 mt-2">
-          {{ activeAccount.mnemonic }}
-        </p>
       </div>
     </div>
     <div v-else>You do not have an active identifier.</div>
@@ -64,8 +99,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
 import * as R from "ramda";
+import { Component, Vue } from "vue-facing-decorator";
+import { useClipboard } from "@vueuse/core";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
@@ -79,6 +115,8 @@ export default class SeedBackupView extends Vue {
 
   activeAccount: Account | null | undefined = null;
   numAccounts = 0;
+  showCopiedDeri = false;
+  showCopiedSeed = false;
   showSeed = false;
 
   // 'created' hook runs when the Vue instance is first created
@@ -106,8 +144,12 @@ export default class SeedBackupView extends Vue {
     }
   }
 
-  showSeedPhrase() {
-    this.showSeed = true;
+  // call fn, copy text to the clipboard, then redo fn after 2 seconds
+  doCopyTwoSecRedo(text: string, fn: () => void) {
+    fn();
+    useClipboard()
+      .copy(text)
+      .then(() => setTimeout(fn, 2000));
   }
 }
 </script>