add keystore

Signed-off-by: heron <[email protected]>
nknorg · Jan 11, 2020 · 6a64127 · 6a64127
1 parent 5b8e5d8
commit 6a64127
Show file tree

Hide file tree

Showing 17 changed files with 512 additions and 117 deletions.
diff --git a/package.json b/package.json
@@ -9,8 +9,9 @@
   },
   "dependencies": {
     "core-js": "^2.6.5",
+    "lodash": "^4.17.15",
     "moment": "^2.24.0",
-    "nkn-multiclient": "^0.1.0",
+    "nkn-multiclient": "^0.1.1",
     "nkn-wallet": "^0.4.8",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -40,6 +40,9 @@
   "CANCEL": {
     "message": "Cancel"
   },
+  "NEXT": {
+    "message": "Next"
+  },
   "SUBMIT": {
     "message": "Submit"
   },
@@ -49,6 +52,9 @@
   "SEED": {
     "message": "Seed"
   },
+  "KEYSTORE": {
+    "message": "Keystore"
+  },
   "INVALID_SEED": {
     "message": "Invalid Seed"
   },
@@ -61,6 +67,9 @@
   "SERVER_ADDRESS": {
     "message": "Server Address"
   },
+  "REMOTE_ADDRESS": {
+    "message": "Remote Address"
+  },
   "CLIENT_ADDRESS": {
     "message": "Client Address"
   },
@@ -75,5 +84,21 @@
   },
   "NAME": {
     "message": "Name"
+  },
+  "WALLET": {
+    "message": "Wallet"
+  },
+  "UPLOAD_WALLET": {
+    "message": "Upload wallet file"
+  },
+  "PASSWORD": {
+    "message": "Password"
+  },
+  "PASSWORD_HINT": {
+    "message": "Please enter wallet password."
+  },
+  "PASSWORD_ERROR": {
+    "message": "Invalid password."
   }
+
 }
diff --git a/public/_locales/zh_CN/messages.json b/public/_locales/zh_CN/messages.json
@@ -40,6 +40,9 @@
   "CANCEL": {
     "message": "取消"
   },
+  "NEXT": {
+    "message": "下一步"
+  },
   "SUBMIT": {
     "message": "提交"
   },
@@ -49,6 +52,9 @@
   "SEED": {
     "message": "Seed"
   },
+  "KEYSTORE": {
+    "message": "Keystore"
+  },
   "INVALID_SEED": {
     "message": "Seed 格式不正确"
   },
@@ -61,6 +67,9 @@
   "SERVER_ADDRESS": {
     "message": "Server Address"
   },
+  "REMOTE_ADDRESS": {
+    "message": "Remote Address"
+  },
   "CLIENT_ADDRESS": {
     "message": "Client Address"
   },
@@ -75,5 +84,20 @@
   },
   "NAME": {
     "message": "名称"
+  },
+  "WALLET": {
+    "message": "钱包"
+  },
+  "UPLOAD_WALLET": {
+    "message": "上传钱包文件"
+  },
+  "PASSWORD": {
+    "message": "密码"
+  },
+  "PASSWORD_HINT": {
+    "message": "请输入钱包密码."
+  },
+  "PASSWORD_ERROR": {
+    "message": "密码错误."
   }
 }
diff --git a/src/components/dialog/AddKeystore.vue b/src/components/dialog/AddKeystore.vue
@@ -1,42 +1,76 @@
 <template>
     <v-dialog v-model="visible" max-width="1200px" @click:outside="">
-        <v-form ref="form" @submit.prevent="next">
-            <v-card>
-                <v-card-title>
+
+        <v-card>
+            <v-toolbar flat>
+                <v-toolbar-title class="mr-4">
                     <span class="headline" v-if="currentIndex!=null && currentIndex>-1">{{$i18n.getMessage('EDIT_KEYSTORE')}}</span>
                     <span class="headline" v-else>{{$i18n.getMessage('ADD_KEYSTORE')}}</span>
-                    <v-spacer/>
-                    <v-btn class="mr-0" icon small @click="cancel">
-                        <v-icon class="fas fa-times" color="grey darken-2" small/>
+                </v-toolbar-title>
+
+                <v-toolbar-items>
+                    <v-btn text @click="selectTab(0)">{{$i18n.getMessage('SEED')}}</v-btn>
+                    <v-btn text @click="selectTab(1)">{{$i18n.getMessage('KEYSTORE')}}</v-btn>
+                </v-toolbar-items>
+                <v-spacer/>
+                <template v-if="$vuetify.breakpoint.smAndUp">
+                    <v-btn class="mr-0" icon @click="cancel">
+                        <font-awesome-icon :icon="['fas', 'times']" style="font-size: 20px;"/>
                     </v-btn>
-                </v-card-title>
-                <v-divider/>
-                <v-card-text class="pt-10">
-                    <v-text-field autofocus
-                                  v-model="seed"
-                                  :label="$i18n.getMessage('SEED')"
-                                  persistent-hint
-                                  :rules="[$rules.fieldRequired($i18n.getMessage('SEED')),$rules.seed]"
-                    />
-                    <v-combobox multiple
-                                v-model="tags"
-                                :label="$i18n.getMessage('TAG')"
-                                hide-no-data
-                                small-chips
-                    />
-                </v-card-text>
+                </template>
+            </v-toolbar>
+            <v-divider/>
+            <v-card-text class="pt-10">
+                <v-tabs-items v-model="tab">
+                    <v-tab-item>
+                        <v-form ref="form1">
+                            <v-text-field autofocus
+                                          v-model="seed"
+                                          :label="$i18n.getMessage('SEED')"
+                                          persistent-hint
+                                          :rules="[$rules.fieldRequired($i18n.getMessage('SEED')),$rules.seed]"
+                            />
+                        </v-form>
+                    </v-tab-item>
+                    <v-tab-item>
+                        <v-form ref="form2">
+                            <v-file-input v-model="file" label="File input" accept="application/json"
+                                          placeholder="Upload your documents"
+                                          prepend-icon="mdi-paperclip"
+                                          :error="fileError"
+                                          :error-messages="fileErrorMessage"
+                                          :rules="[$rules.fieldRequired($i18n.getMessage('KEYSTORE'))]"
+                            >
+                                <template v-slot:selection="{ text }">
+                                    <v-chip small label color="primary">
+                                        {{ text }}
+                                    </v-chip>
+                                </template>
+                            </v-file-input>
+                        </v-form>
+                    </v-tab-item>
+                </v-tabs-items>
+
+                <v-combobox multiple
+                            v-model="tags"
+                            :label="$i18n.getMessage('TAG')"
+                            hide-no-data
+                            small-chips
+                />
+            </v-card-text>
+
+            <v-card-actions class="pa-3">
+                <v-btn color="blue darken-1" text @click="cancel">{{$i18n.getMessage('CANCEL')}}</v-btn>
+                <v-spacer/>
+                <v-btn color="primary" @click="next">{{$i18n.getMessage('OK')}}</v-btn>
+            </v-card-actions>
+        </v-card>
 
-                <v-card-actions class="pa-3">
-                    <v-btn color="blue darken-1" text @click="cancel">{{$i18n.getMessage('CANCEL')}}</v-btn>
-                    <v-spacer/>
-                    <v-btn color="primary" @click="next">{{$i18n.getMessage('OK')}}</v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-form>
     </v-dialog>
 </template>
 
 <script>
+  import isNumber from 'lodash/isNumber'
 
   export default {
     name: 'AddKeystore',
@@ -60,7 +94,11 @@
       return {
         visible: this.value,
         seed: '',
-        tags: []
+        file: undefined,
+        fileError: false,
+        fileErrorMessage: '',
+        tags: [],
+        tab: 0
       }
     },
     watch: {
@@ -74,9 +112,18 @@
         if (val) {
           this.seed = val.seed
           this.tags = val.tags
-        }else{
+        } else {
           this.init()
         }
+      },
+      file(val) {
+        if (!val) {
+          this.fileError = true
+          this.fileErrorMessage = this.$i18n.getMessage('FIELD_REQUIRED', this.$i18n.getMessage('KEYSTORE'))
+        } else {
+          this.fileError = false
+          this.fileErrorMessage = ''
+        }
       }
     },
 
@@ -85,13 +132,20 @@
         this.seed = ''
         this.tags = []
       },
+      selectTab(n) {
+        this.tab = n
+      },
       cancel() {
         this.visible = false
       },
       async next() {
-        if (this.$refs.form.validate()) {
+
+        if (this.tab === 0) {
+          if (!this.$refs.form1.validate()) {
+            return
+          }
           let data = {seed: this.seed, tags: this.tags}
-          if (this.currentIndex != null && this.currentIndex > -1) {
+          if (isNumber(this.currentIndex)) {
             await this.$syncStorage.setSeed(this.currentIndex, data)
           } else {
             await this.$syncStorage.addSeed(data)
@@ -100,7 +154,35 @@
           if (this.onSuccess) {
             this.onSuccess()
           }
+        } else if (this.tab === 1) {
+          if (!this.$refs.form2.validate()) {
+            return
+          }
+          if (!this.file) {
+            this.fileError = true
+            this.fileErrorMessage = this.$i18n.getMessage('FIELD_REQUIRED', this.$i18n.getMessage('KEYSTORE'))
+            return
+          }
+
+          let reader = new FileReader()
+          reader.readAsText(this.file, 'UTF-8')
+
+          reader.onload = async (evt) => {
+            let walletJson = evt.target.result
+            let data = {keystore: walletJson, tags: this.tags}
+            if (isNumber(this.currentIndex)) {
+              await this.$syncStorage.setSeed(this.currentIndex, data)
+            } else {
+              await this.$syncStorage.addSeed(data)
+            }
+            this.cancel()
+            if (this.onSuccess) {
+              this.onSuccess()
+            }
+          }
         }
+
+
       }
     }
   }