support duplicate words in mnemonic verification, fixes #87

symbol · Mar 16, 2020 · ee1293c · ee1293c
1 parent d74cfcc
commit ee1293c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 26 deletions.
diff --git a/src/components/MnemonicVerification/MnemonicVerification.vue b/src/components/MnemonicVerification/MnemonicVerification.vue
@@ -1,22 +1,22 @@
 <template>
   <div class="mnemonic_container" @keyup.enter="processVerification()">
     <div class="mnemonicWordDiv clear scroll">
-      <draggable v-model="selectedWords" ghost-class="ghost" @end="drag = false">
-        <span v-for="(word, index) in selectedWords" :key="index">
-          <Tag closable @on-close="removeWord(word)">
-            {{ word }}
+      <draggable v-model="selectedWordIndexes" ghost-class="ghost" @end="drag = false">
+        <span v-for="index in selectedWordIndexes" :key="index">
+          <Tag closable @on-close="removeWord(index)">
+            {{ shuffledWords[index] }}
           </Tag>
         </span>
       </draggable>
     </div>
     <div class="wordDiv clear">
       <span
-        v-for="(item,index) in shuffledWords"
+        v-for="index in shuffledWordsIndexes"
         :key="index"
-        :class="selectedWords.includes(item) ? 'confirmed_word' : ''"
-        @click="addWord(item)"
+        :class="selectedWordIndexes.includes(index) ? 'confirmed_word' : ''"
+        @click="onWordClicked(index)"
       >
-        {{ item }}
+        {{ shuffledWords[index] }}
       </span>
     </div>
     <div class="buttons clear">

diff --git a/src/components/MnemonicVerification/MnemonicVerificationTs.ts b/src/components/MnemonicVerification/MnemonicVerificationTs.ts
@@ -49,45 +49,53 @@ export class MnemonicVerificationTs extends Vue {
    * Randomized words
    * @var {string[]}
    */
-  public shuffledWords: string[] = []
+  public shuffledWords: Record<number, string> = {}
 
   /**
-   * Selected words
+   * Randomized words indexes
    * @var {string[]}
    */
-  public selectedWords: string[] = []
+  public shuffledWordsIndexes: number[] = []
 
   /**
-   * Hook called when the component is mounted
+   * Selected words indexes
+   * @var {string[]}
+   */
+  public selectedWordIndexes: number[] = []
+
+  /**
+   * Hook called when the component is created
    * @return {void}
    */
-  public mounted() {
-    this.shuffledWords = shuffle([...this.words])
+  public created() {
+    const shuffledWordsArray: string[] = shuffle([...this.words])
+    this.shuffledWords = shuffledWordsArray.reduce(
+      (acc, word, index) => ({...acc, ...{[index]: word}}), {}
+    )
+    this.shuffledWordsIndexes = [...Array(shuffledWordsArray.length).keys()]
   }
 
   /**
-   * Add confirmed word
+   * Toggle a word presence in the confirmed words
    * @param {string} word 
-   * @return {string[]}
+   * @return {void}
    */
-  public addWord(word: string): string[] {
-    if (this.selectedWords.includes(word)) {
-      this.removeWord(word)
+  public onWordClicked(index: number): void {
+    if (this.selectedWordIndexes.includes(index)) {
+      this.removeWord(index)
       return
     }
 
-    this.selectedWords.push(word)
-    return this.selectedWords
+    this.selectedWordIndexes.push(index)
   }
 
   /**
    * Add confirmed word
    * @param {string} word 
    * @return {string[]}
    */
-  public removeWord(word: string) {
-    this.selectedWords = this.selectedWords.filter(sel => sel !== word)
-    return this.selectedWords
+  public removeWord(index: number): void {
+    this.selectedWordIndexes = [...this.selectedWordIndexes].filter(sel => sel !== index)
   }
 
   /**
@@ -96,11 +104,11 @@ export class MnemonicVerificationTs extends Vue {
    */
   public processVerification(): boolean {
     const origin = this.words.join(' ')
-    const rebuilt = this.selectedWords.join(' ')
+    const rebuilt = this.selectedWordIndexes.map(i => this.shuffledWords[i]).join(' ')
 
     // - origin words list does not match
     if (origin !== rebuilt) {
-      const errorMsg = this.selectedWords.length < 1 ? 
+      const errorMsg = this.selectedWordIndexes.length < 1 ? 
               NotificationType.PLEASE_ENTER_MNEMONIC_INFO
             : NotificationType.MNEMONIC_INCONSISTENCY_ERROR
       this.$store.dispatch('notification/ADD_WARNING', errorMsg)