Browse Source

enhance seed-backup with clipboard copy & more info

playwright-pwa-install-test
Trent Larson 4 months ago
parent
commit
3b05ae7d9d
  1. 70
      src/views/SeedBackupView.vue

70
src/views/SeedBackupView.vue

@ -33,30 +33,65 @@
<p class="text-center mb-4"> <p class="text-center mb-4">
<b class="text-red-600">BEWARE!</b> Anyone who has this seed phrase will <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. 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 Reveal it when you are somewhere private, when only you can see your
record it somewhere only you have access. screen, and record it somewhere only you have access. A password manager
<i>Don't take a screenshot or send it to any online service.</i> 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>
<p v-if="numAccounts > 1"> <p v-if="numAccounts > 1">
<b class="text-orange-600">Note:</b> You have more than one identifier <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 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 current identifier, this one backup is sufficient, as long as you also
different seeds for other identifiers, you will have to back them up record the derivation path. However, if you have different seeds for
separately. other identifiers, you will have to back them up separately.
</p> </p>
<div class="bg-slate-100 rounded-md overflow-hidden p-4 mb-4"> <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 <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" 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 Reveal my Seed Phrase
</button> </button>
<p v-if="showSeed" class="text-center text-slate-700 mt-2">
{{ activeAccount.mnemonic }}
</p>
</div> </div>
</div> </div>
<div v-else>You do not have an active identifier.</div> <div v-else>You do not have an active identifier.</div>
@ -64,8 +99,9 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import * as R from "ramda"; import * as R from "ramda";
import { Component, Vue } from "vue-facing-decorator";
import { useClipboard } from "@vueuse/core";
import QuickNav from "@/components/QuickNav.vue"; import QuickNav from "@/components/QuickNav.vue";
import { NotificationIface } from "@/constants/app"; import { NotificationIface } from "@/constants/app";
@ -79,6 +115,8 @@ export default class SeedBackupView extends Vue {
activeAccount: Account | null | undefined = null; activeAccount: Account | null | undefined = null;
numAccounts = 0; numAccounts = 0;
showCopiedDeri = false;
showCopiedSeed = false;
showSeed = false; showSeed = false;
// 'created' hook runs when the Vue instance is first created // 'created' hook runs when the Vue instance is first created
@ -106,8 +144,12 @@ export default class SeedBackupView extends Vue {
} }
} }
showSeedPhrase() { // call fn, copy text to the clipboard, then redo fn after 2 seconds
this.showSeed = true; doCopyTwoSecRedo(text: string, fn: () => void) {
fn();
useClipboard()
.copy(text)
.then(() => setTimeout(fn, 2000));
} }
} }
</script> </script>

Loading…
Cancel
Save