├── src
    ├── background
    │   └── index.js
    ├── helpers
    │   ├── utils.helper.js
    │   ├── store.helper.js
    │   ├── i18n.helper.js
    │   ├── validation.helper.js
    │   └── syncStorage.helper.js
    ├── styles
    │   └── global.scss
    ├── store
    │   ├── index.js
    │   └── common.js
    ├── options
    │   ├── index.js
    │   ├── App
    │   │   └── App.vue
    │   └── index.html
    ├── routes.js
    ├── popup
    │   ├── App
    │   │   └── App.vue
    │   ├── index.html
    │   └── index.js
    ├── layouts
    │   ├── terminal.vue
    │   ├── error.vue
    │   └── default.vue
    ├── plugins
    │   └── vuetify.js
    ├── components
    │   ├── Terminal.vue
    │   ├── Footer.vue
    │   ├── dialog
    │   │   ├── Snackbar.vue
    │   │   ├── Confirm.vue
    │   │   ├── Modal.vue
    │   │   ├── VerificationPassword.vue
    │   │   ├── AddNShell.vue
    │   │   └── AddKeystore.vue
    │   ├── Markdown.vue
    │   ├── Textbox.vue
    │   └── widget
    │   │   └── SeedSelect.vue
    ├── manifest.production.json
    ├── manifest.development.json
    └── pages
    │   ├── terminal.vue
    │   ├── index.vue
    │   └── keystore.vue
├── .browserslistrc
├── README.md
├── babel.config.js
├── postcss.config.js
├── public
    ├── icon.png
    ├── assets
    │   ├── logo.png
    │   ├── favicon.ico
    │   ├── logo2.png
    │   ├── logo3.png
    │   └── logo@128x128.png
    └── _locales
    │   ├── zh_CN
    │       └── messages.json
    │   └── en
    │       └── messages.json
├── .gitignore
├── vue.config.js
├── package.json
└── LICENSE


/src/background/index.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # nshell-chrome-extension
2 | nshell-chrome-extension
3 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nknorg/nshell-chrome-extension/master/public/icon.png


--------------------------------------------------------------------------------
/public/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nknorg/nshell-chrome-extension/master/public/assets/logo.png


--------------------------------------------------------------------------------
/public/assets/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nknorg/nshell-chrome-extension/master/public/assets/favicon.ico


--------------------------------------------------------------------------------
/public/assets/logo2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nknorg/nshell-chrome-extension/master/public/assets/logo2.png


--------------------------------------------------------------------------------
/public/assets/logo3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nknorg/nshell-chrome-extension/master/public/assets/logo3.png


--------------------------------------------------------------------------------
/public/assets/logo@128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nknorg/nshell-chrome-extension/master/public/assets/logo@128x128.png


--------------------------------------------------------------------------------
/src/helpers/utils.helper.js:
--------------------------------------------------------------------------------
1 | export function parseKeystore(json) {
2 |   try {
3 |     let keystore = JSON.parse(json)
4 |     return keystore
5 |   } catch (e) {
6 |     return undefined
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/src/helpers/store.helper.js:
--------------------------------------------------------------------------------
1 | import store from '../store'
2 | export async function showConfirmDialog({title, content, onSuccess}) {
3 |   await store.dispatch('showConfirmDialog',{title, content})
4 | }
5 | 
6 | 


--------------------------------------------------------------------------------
/src/helpers/i18n.helper.js:
--------------------------------------------------------------------------------
1 | export default class I18nHelper {
2 |   static getMessage(key, fields){
3 |     if(!chrome || !chrome.i18n) return key
4 |     return chrome.i18n.getMessage(key, fields)
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/src/styles/global.scss:
--------------------------------------------------------------------------------
 1 | body{
 2 |   overflow-x: auto;
 3 | }
 4 | #app {
 5 |   min-width: 800px;min-height: 500px;
 6 | }
 7 | .v-list-item:nth-of-type(odd) {
 8 |   background-color: rgba(0, 0, 0, .01);
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import common from './common'
 4 | 
 5 | Vue.use(Vuex)
 6 | 
 7 | export default new Vuex.Store({
 8 |   modules: {
 9 | 
10 |   },
11 |   ...common
12 | })
13 | 


--------------------------------------------------------------------------------
/src/options/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import AppComponent from "./App/App.vue";
 3 | 
 4 | Vue.component("app-component", AppComponent);
 5 | 
 6 | new Vue({
 7 |   el: "#app",
 8 |   render: createElement => {
 9 |     return createElement(AppComponent);
10 |   }
11 | });
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/src/helpers/validation.helper.js:
--------------------------------------------------------------------------------
 1 | import i18n from './i18n.helper'
 2 | export const rules = {
 3 |   required:  v => !!v || i18n.getMessage('REQUIRED'),
 4 |   fieldRequired: field => v => !!v || i18n.getMessage('FIELD_REQUIRED', [field]),
 5 |   seed: v => /^\w{64}$/.test(v) || i18n.getMessage('INVALID_SEED'),
 6 | }
 7 | 
 8 | 
 9 | export function isSeed(seed) {
10 |   let isSeed = rules.seed(seed)
11 |   if (isSeed === true) {
12 |    return true
13 |   }
14 |   return false
15 | }
16 | 


--------------------------------------------------------------------------------
/src/options/App/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="main_app">
 3 |     <h1>Hello Options</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'app',
10 | }
11 | </script>
12 | 
13 | <style>
14 | .main_app {
15 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
16 |   -webkit-font-smoothing: antialiased;
17 |   -moz-osx-font-smoothing: grayscale;
18 |   text-align: center;
19 |   color: #2c3e50;
20 |   margin-top: 60px;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/src/routes.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import Index from './pages/index'
 4 | import Keystore from './pages/keystore'
 5 | import Terminal from './pages/terminal'
 6 | 
 7 | Vue.use(VueRouter)
 8 | const router = new VueRouter({
 9 |   routes: [
10 |     { path: '/', component: Index },
11 |     { path: '/keystore', component: Keystore },
12 |     { path: '/terminal', name:'terminal', component: Terminal },
13 |     { path: '/terminal/:n', component: Terminal },
14 |   ]
15 | })
16 | 
17 | export default router
18 | 


--------------------------------------------------------------------------------
/src/popup/App/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <component :is="layout || 'default'">
 3 |     </component>
 4 | </template>
 5 | 
 6 | <script>
 7 |   import '../../styles/global.scss'
 8 |   import Default from '../../layouts/default'
 9 |   import Terminal from '../../layouts/terminal'
10 |   import Error from '../../layouts/error'
11 | 
12 |   export default {
13 |     name: 'app',
14 |     components: {Default,Error,Terminal},
15 |     data() {
16 |       return {
17 |         layout : this.$router.getMatchedComponents()[0].layout,
18 |       }
19 |     },
20 | 
21 |     methods: {
22 | 
23 |     }
24 |   }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/src/store/common.js:
--------------------------------------------------------------------------------
 1 | const state = {
 2 |   confirmDialog: {
 3 |     visible: false,
 4 |     title: '',
 5 |     content: '',
 6 |   }
 7 | }
 8 | 
 9 | const getters = {}
10 | 
11 | const mutations = {
12 |   setConfirmDialog(state, data) {
13 |     state.confirmDialog.visible = data.visible
14 |     state.confirmDialog.title = data.title
15 |     state.confirmDialog.content = data.content
16 |   },
17 | }
18 | const actions = {
19 |   async showConfirmDialog({commit}, {title, content}) {
20 |     commit('setConfirmDialog', {visible: true, title, content})
21 |   }
22 | }
23 | export default {
24 |   state: () => state,
25 |   getters,
26 |   actions,
27 |   mutations
28 | }
29 | 


--------------------------------------------------------------------------------
/src/options/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <title>Options</title>
 8 |     <link rel="shortcut icon" type="image/png" href="/assets/logo.png">
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong
13 |         >We're sorry but test-dir doesn't work properly without JavaScript
14 |         enabled. Please enable it to continue.</strong
15 |       >
16 |     </noscript>
17 |     <div id="app"></div>
18 |     <!-- built files will be auto injected -->
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/popup/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <title>Index</title>
 8 |     <link rel="shortcut icon" type="image/png" href="/assets/logo@128x128.png">
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong
13 |         >We're sorry but test-dir doesn't work properly without JavaScript
14 |         enabled. Please enable it to continue.</strong
15 |       >
16 |     </noscript>
17 |     <div id="app"></div>
18 |     <!-- built files will be auto injected -->
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/popup/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import store from '../store'
 3 | import router from '../routes'
 4 | import AppComponent from './App/App.vue'
 5 | import vuetify from '../plugins/vuetify'
 6 | import I18nHelper from '../helpers/i18n.helper'
 7 | import {rules} from '../helpers/validation.helper'
 8 | import SyncStorage from '../helpers/syncStorage.helper'
 9 | 
10 | Vue.prototype.$syncStorage = new SyncStorage()
11 | Vue.prototype.$rules = rules
12 | Vue.prototype.$i18n = I18nHelper
13 | Vue.component("app-component", AppComponent)
14 | 
15 | new Vue({
16 |   el: "#app",
17 |   store,
18 |   router,
19 |   vuetify,
20 |   render: createElement => {
21 |     return createElement(AppComponent);
22 |   }
23 | });
24 | 


--------------------------------------------------------------------------------
/src/layouts/terminal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <v-app>
 3 |         <v-content>
 4 |             <router-view/>
 5 |         </v-content>
 6 |     </v-app>
 7 | </template>
 8 | 
 9 | <script>
10 |   import Footer from '../components/Footer'
11 |   import '../styles/global.scss'
12 | 
13 |   export default {
14 |     name: 'terminal',
15 |     components: {Footer},
16 |     data() {
17 |       return {
18 |         message: 'hello'
19 |       }
20 |     },
21 |     methods: {
22 |       newWindow() {
23 |         chrome.windows.create({'url': chrome.extension.getURL('popup.html'), type: 'popup'}, function (tab) {
24 | 
25 |         })
26 |       },
27 |       newTab(){
28 |         chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function (tab) {
29 | 
30 |         })
31 |       }
32 |     }
33 |   }
34 | </script>
35 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuetify from 'vuetify'
 3 | import 'vuetify/dist/vuetify.min.css'
 4 | import '@mdi/font/css/materialdesignicons.css'
 5 | import { library } from '@fortawesome/fontawesome-svg-core'
 6 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 7 | import { fas } from '@fortawesome/free-solid-svg-icons'
 8 | import { fab } from '@fortawesome/free-brands-svg-icons'
 9 | import { far } from '@fortawesome/free-regular-svg-icons'
10 | 
11 | Vue.component('font-awesome-icon', FontAwesomeIcon)
12 | library.add(fas, fab, far)
13 | Vue.use(Vuetify)
14 | 
15 | export default new Vuetify({
16 |   icons: {
17 |     iconfont: 'faSvg',
18 |   },
19 |   theme: {
20 |     options: {
21 |       customProperties: true,
22 |     },
23 |     themes: {
24 | 
25 |     },
26 |   },
27 | });
28 | 


--------------------------------------------------------------------------------
/src/components/Terminal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div ref="terminal"></div>
 3 | </template>
 4 | <script>
 5 |   import { Terminal } from 'xterm'
 6 |   import { FitAddon } from 'xterm-addon-fit'
 7 |   import { WebLinksAddon } from 'xterm-addon-web-links'
 8 |   import 'xterm/css/xterm.css'
 9 |   export default {
10 |     name: 'terminal',
11 |     props: {
12 |     },
13 |     data: () => ({
14 | 
15 |     }),
16 |     mounted() {
17 |       const terminal = new Terminal()
18 |       const fitAddon = new FitAddon()
19 |       terminal.loadAddon(new WebLinksAddon())
20 |       terminal.loadAddon(fitAddon)
21 |       terminal.open(this.$refs.terminal)
22 |       fitAddon.fit()
23 |       terminal.focus()
24 |       this.$emit('input', terminal)
25 | 
26 |       window.onresize = () => {
27 |         fitAddon.fit()
28 |       }
29 |     },
30 |     methods: {
31 | 
32 |     }
33 |   }
34 | </script>
35 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const CopyWebpackPlugin = require('copy-webpack-plugin');
 2 | const path = require('path');
 3 | 
 4 | // Generate pages object
 5 | const pagesObj = {};
 6 | 
 7 | const chromeName = ['popup', 'options', 'background'];
 8 | 
 9 | chromeName.forEach(name => {
10 |   pagesObj[name] = {
11 |     entry: `src/${name}/index.js`,
12 |     template: 'public/index.html',
13 |     filename: `${name}.html`
14 |   };
15 | });
16 | 
17 | const plugins =
18 |   process.env.NODE_ENV === 'production'
19 |     ? [
20 |       {
21 |         from: path.resolve('src/manifest.production.json'),
22 |         to: `${path.resolve('dist')}/manifest.json`
23 |       }
24 |     ]
25 |     : [
26 |       {
27 |         from: path.resolve('src/manifest.development.json'),
28 |         to: `${path.resolve('dist')}/manifest.json`
29 |       }
30 |     ];
31 | 
32 | module.exports = {
33 |   pages: pagesObj,
34 |   configureWebpack: {
35 |     plugins: [CopyWebpackPlugin(plugins)]
36 |   }
37 | };
38 | 


--------------------------------------------------------------------------------
/src/manifest.production.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "manifest_version": 2,
 3 |     "name": "__MSG_extensionName__",
 4 |     "description": "__MSG_extensionDescription__",
 5 |     "version": "0.1.1",
 6 |     "homepage_url": "https://github.com/nknorg/nshell-chrome-extension.git",
 7 |     "author": "heron",
 8 |     "default_locale": "en",
 9 |     "icons": {
10 |         "16": "assets/logo@128x128.png",
11 |         "32": "assets/logo@128x128.png",
12 |         "48": "assets/logo@128x128.png",
13 |         "128": "assets/logo@128x128.png"
14 |     },
15 |     "permissions": [
16 |         "storage"
17 |     ],
18 |     "browser_action": {
19 |         "default_icon": {
20 |             "16": "assets/logo.png",
21 |             "32": "assets/logo.png",
22 |             "48": "assets/logo.png",
23 |             "128": "assets/logo.png"
24 |         },
25 |         "default_popup": "popup.html"
26 |     },
27 |     "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-footer class="px-0 pt-0 pb-0 footer" height="auto">
 3 |     <v-card flat dark tile class="indigo lighten-1 text-center" width="100%">
 4 |       <v-divider></v-divider>
 5 | 
 6 |       <v-card-text class="white--text">
 7 |         Copyright &copy; 2020 — <strong>nShell</strong>
 8 |       </v-card-text>
 9 |     </v-card>
10 |   </v-footer>
11 | </template>
12 | <script>
13 |   export default {
14 |     data:() =>({
15 |       icons: [
16 |         {icon: 'fab fa-github', tooltip: 'GitHub', url: 'https://github.com/nknorg'},
17 |         {icon: 'fab fa-discord', tooltip: 'Discord', url: 'https://discord.gg/hrZvrVa'},
18 |         {icon: 'fab fa-twitter', tooltip: 'Twitter', url: 'https://twitter.com/NKN_ORG'},
19 |         {icon: 'fas fa-comments', tooltip: 'Forum', url: 'https://forum.nkn.org/'},
20 |         {icon: 'fab fa-youtube', tooltip: 'Youtube', url: 'http://www.youtube.com/c/NKNORG'},
21 |         {icon: 'fab fa-telegram', tooltip: 'Telegram', url: 'https://t.me/nknorg'},
22 |         {icon: 'fab fa-medium', tooltip: 'Medium', url: 'https://medium.com/nknetwork'},
23 |       ]
24 |     })
25 |   }
26 | </script>
27 | 


--------------------------------------------------------------------------------
/src/manifest.development.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "manifest_version": 2,
 3 |     "name": "__MSG_extensionName__",
 4 |     "description": "__MSG_extensionDescription__",
 5 |     "version": "0.1.1",
 6 |     "homepage_url": "https://github.com/nknorg/nshell-chrome-extension.git",
 7 |     "author": "heron",
 8 |     "default_locale": "en",
 9 |     "icons": {
10 |         "16": "assets/logo@128x128.png",
11 |         "32": "assets/logo@128x128.png",
12 |         "48": "assets/logo@128x128.png",
13 |         "128": "assets/logo@128x128.png"
14 |     },
15 |     "permissions": [
16 |         "storage"
17 |     ],
18 |     "background": {
19 |         "scripts": ["background.js"]
20 |     },
21 |     "options_ui": {
22 |         "page": "options.html",
23 |         "chrome_style": true
24 |     },
25 |     "browser_action": {
26 |         "default_icon": {
27 |             "16": "assets/logo.png",
28 |             "32": "assets/logo.png",
29 |             "48": "assets/logo.png",
30 |             "128": "assets/logo.png"
31 |         },
32 |         "default_popup": "popup.html"
33 |     },
34 |     "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
35 | }
36 | 


--------------------------------------------------------------------------------
/src/components/dialog/Snackbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-snackbar v-model="visible"
 3 |               :color="type"
 4 |               multi-line
 5 |               :timeout="timeout"
 6 |               left
 7 |   >
 8 |     {{ message }}
 9 |     <v-btn dark text @click="cancel">
10 |       Close
11 |     </v-btn>
12 |   </v-snackbar>
13 | </template>
14 | 
15 | <script>
16 |   import { mapActions, mapMutations, mapState } from 'vuex'
17 | 
18 |   export default {
19 |     name: 'Snackbar',
20 |     computed: {
21 |       ...mapState({
22 |         snackbar: state => state.snackbar,
23 |         type: state => state.snackbarType,
24 |         message: state => state.snackbarMessage,
25 |       })
26 |     },
27 | 
28 |     data() {
29 |       return {
30 |         timeout: 3000,
31 |         visible: this.snackbar
32 |       }
33 |     },
34 |     methods: {
35 |       ...mapMutations(['setSnackbar']),
36 |       cancel() {
37 |         this.setSnackbar({snackbar: false})
38 |       }
39 |     },
40 |     watch: {
41 |       visible(v) {
42 |         if (!v)
43 |           this.cancel()
44 |       },
45 |       snackbar(v) {
46 |         this.visible = v
47 |       }
48 |     }
49 |   }
50 | </script>
51 | 
52 | 


--------------------------------------------------------------------------------
/src/components/Markdown.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-card class="markdown" style="background-color:#272822;" dark>
 3 |     <v-card-title class="pa-0">
 4 |       <v-layout>
 5 |         <v-flex>
 6 |           <v-tabs v-model="currentTab" background-color="transparent" dark>
 7 |             <v-tab v-for="tab in tabs" :key="tab">
 8 |               {{ tab }}
 9 |             </v-tab>
10 |           </v-tabs>
11 |         </v-flex>
12 |         <v-flex shrink align-center class="px-2 d-flex">
13 |           <v-btn icon small @click="copy">
14 |             <v-icon dark class="far fa-copy" small></v-icon>
15 |           </v-btn>
16 |         </v-flex>
17 |       </v-layout>
18 | 
19 | 
20 |     </v-card-title>
21 |     <v-divider/>
22 |     <v-card-text>
23 |       <v-tabs-items v-model="currentTab" dark style="background-color:#272822;">
24 |         <v-tab-item v-for="code in codes" :key="code">
25 |           <div ref="markdown" v-html="code" v-highlight></div>
26 |         </v-tab-item>
27 |       </v-tabs-items>
28 | 
29 |     </v-card-text>
30 |   </v-card>
31 | </template>
32 | <script>
33 |   import '~/styles/markdown.scss'
34 | 
35 |   export default {
36 |     props: {
37 |       tabs: {
38 |         type: Array
39 |       },
40 |       codes: {
41 |         type: Array
42 |       },
43 |     },
44 |     data: () => ({
45 |       currentTab: undefined
46 |     }),
47 |     methods: {
48 |       copy() {
49 |         this.$copyText(this.$refs.markdown[this.currentTab].innerText)
50 |       }
51 |     }
52 |   }
53 | </script>
54 | 


--------------------------------------------------------------------------------
/src/layouts/error.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <v-app>
 3 |         <v-app-bar
 4 |                 app
 5 |                 color="indigo"
 6 |                 dark
 7 |         >
 8 |             <v-toolbar-title>nShell</v-toolbar-title>
 9 |             <v-spacer/>
10 |             <v-btn icon to="/">
11 |                 <font-awesome-icon :icon="['fas', 'terminal']" size="2x"/>
12 |             </v-btn>
13 | 
14 |             <v-btn icon to="/seed">
15 |                 <v-icon large>mdi-fingerprint</v-icon>
16 |             </v-btn>
17 | 
18 |             <v-divider class="mx-4" inset vertical/>
19 |             <v-btn icon>
20 |                 <v-icon>mdi-tab</v-icon>
21 |             </v-btn>
22 |             <v-btn icon>
23 |                 <v-icon large>mdi-fullscreen</v-icon>
24 |             </v-btn>
25 |         </v-app-bar>
26 |         <v-content>
27 |             error
28 |             <router-view/>
29 |         </v-content>
30 |         <Footer/>
31 |     </v-app>
32 | </template>
33 | 
34 | <script>
35 |   import Footer from '../components/Footer'
36 |   import '../styles/global.scss'
37 | 
38 |   export default {
39 |     name: 'error',
40 |     components: {Footer},
41 |     data() {
42 |       return {
43 |         message: 'hello'
44 |       }
45 |     },
46 |     methods: {
47 |       test() {
48 |         // this.message= this.$bg.test()
49 |         chrome.windows.create({'url': chrome.extension.getURL('popup.html'), type: 'popup'}, function (tab) {
50 |           console.log(tab)
51 |         })
52 |       }
53 |     }
54 |   }
55 | </script>
56 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nshell-chrome-extension",
 3 |   "version": "0.1.1",
 4 |   "private": false,
 5 |   "license": "Apache-2.0",
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "vue-cli-service build",
 9 |     "build-watch": "vue-cli-service build-watch"
10 |   },
11 |   "dependencies": {
12 |     "core-js": "^2.6.5",
13 |     "lodash": "^4.17.15",
14 |     "moment": "^2.24.0",
15 |     "nkn-multiclient": "^0.1.1",
16 |     "nkn-wallet": "^0.4.8",
17 |     "register-service-worker": "^1.6.2",
18 |     "vue": "^2.6.10",
19 |     "vue-json-pretty": "^1.6.3",
20 |     "vue-moment": "^4.1.0",
21 |     "vue-router": "^3.1.3",
22 |     "vuetify": "^2.1.0",
23 |     "vuex": "^3.0.1",
24 |     "xterm": "^4.3.0",
25 |     "xterm-addon-fit": "^0.3.0",
26 |     "xterm-addon-web-links": "^0.2.1"
27 |   },
28 |   "devDependencies": {
29 |     "@fortawesome/fontawesome-free": "^5.12.0",
30 |     "@fortawesome/fontawesome-svg-core": "^1.2.26",
31 |     "@fortawesome/free-brands-svg-icons": "^5.12.0",
32 |     "@fortawesome/free-regular-svg-icons": "^5.12.0",
33 |     "@fortawesome/free-solid-svg-icons": "^5.12.0",
34 |     "@fortawesome/vue-fontawesome": "^0.1.9",
35 |     "@mdi/font": "^4.7.95",
36 |     "@vue/cli-plugin-babel": "^3.12.0",
37 |     "@vue/cli-service": "^3.12.0",
38 |     "copy-webpack-plugin": "^4.6.0",
39 |     "node-sass": "^4.13.0",
40 |     "sass-loader": "^8.0.0",
41 |     "vue-cli-plugin-chrome-ext": "^0.0.5",
42 |     "vue-cli-plugin-vuetify": "^2.0.2",
43 |     "vue-template-compiler": "^2.6.10"
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/pages/terminal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <terminal-component v-model="term" style="width:100%;height:100%;"/>
 3 | </template>
 4 | 
 5 | <script>
 6 |   import Client from 'nkn-multiclient'
 7 |   import TerminalComponent from '../components/Terminal'
 8 | 
 9 |   export default {
10 |     layout: 'terminal',
11 |     name: 'terminal',
12 |     components: {TerminalComponent},
13 |     data() {
14 |       return {
15 |         term: undefined
16 |       }
17 |     },
18 |     async mounted() {
19 |       let seed = this.$route.params.seed
20 |       let n = parseInt(this.$route.params.n)
21 |       let shells = await this.$syncStorage.getShell()
22 |       let shell = shells[n]
23 |       if(!seed) {
24 |         seed = shell.seed
25 |       }
26 |       let client = Client({
27 |         seed: seed,
28 |         identifier: shell.identifier,
29 |       })
30 |       this.term.onResize((size) => {
31 |         client.send(shell.remoteAddr, JSON.stringify({resize: size}))
32 |       });
33 |       this.term.onKey((e) => {
34 |         client.send(shell.remoteAddr, JSON.stringify({cmd: e.key}));
35 |       });
36 |       this.term.textarea.addEventListener('paste', (e) => {
37 |         client.send(shell.remoteAddr, JSON.stringify({cmd: e.clipboardData.getData('text/plain')}));
38 |       });
39 |       client.on('connect', () => {
40 |         client.send(shell.remoteAddr, JSON.stringify({
41 |           resize: {cols: this.term.cols, rows: this.term.rows},
42 |           cmd: '\x0c',
43 |         }))
44 |       });
45 |       client.on('message', (src, payload, payloadType, encrypt) => {
46 |         this.term.write(JSON.parse(payload).stdout)
47 |       });
48 |     },
49 |     methods: {}
50 |   }
51 | </script>
52 | 


--------------------------------------------------------------------------------
/src/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <v-app>
 3 |         <v-app-bar app color="indigo" dark>
 4 | 
 5 |             <v-toolbar-title>
 6 |                 <router-link tag="h3" to="/">
 7 |                     <v-avatar tile size="35">
 8 |                         <img src="/assets/logo.png" alt="avatar">
 9 |                     </v-avatar>
10 |                     nShell
11 |                 </router-link>
12 |             </v-toolbar-title>
13 | 
14 |             <v-spacer/>
15 |             <v-btn icon to="/">
16 |                 <font-awesome-icon :icon="['fas', 'terminal']" size="2x"/>
17 |             </v-btn>
18 | 
19 |             <v-btn icon to="/keystore">
20 |                 <v-icon large>mdi-fingerprint</v-icon>
21 |             </v-btn>
22 | 
23 |             <v-divider class="mx-4" inset vertical/>
24 |             <v-btn icon @click="newTab">
25 |                 <v-icon>mdi-tab</v-icon>
26 |             </v-btn>
27 |             <v-btn icon @click="newWindow">
28 |                 <v-icon large>mdi-fullscreen</v-icon>
29 |             </v-btn>
30 |         </v-app-bar>
31 |         <v-content>
32 |             <router-view/>
33 |         </v-content>
34 |         <Footer/>
35 |     </v-app>
36 | </template>
37 | 
38 | <script>
39 |   import Footer from '../components/Footer'
40 |   import '../styles/global.scss'
41 | 
42 |   export default {
43 |     name: 'default',
44 |     components: {Footer},
45 |     data() {
46 |       return {
47 |         message: 'hello'
48 |       }
49 |     },
50 |     methods: {
51 |       newWindow() {
52 |         chrome.windows.create({'url': chrome.extension.getURL('popup.html'), type: 'popup'}, function (tab) {
53 | 
54 |         })
55 |       },
56 |       newTab(){
57 |         chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function (tab) {
58 | 
59 |         })
60 |       }
61 |     }
62 |   }
63 | </script>
64 | 


--------------------------------------------------------------------------------
/src/components/dialog/Confirm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <v-dialog v-model="visible" max-width="400px">
 3 |         <v-card>
 4 |             <v-card-title>
 5 |                 <span class="headline">{{title}}</span>
 6 |                 <v-spacer/>
 7 |                 <v-btn class="mr-0" icon small @click="cancel">
 8 |                     <v-icon class="fas fa-times" color="grey darken-2" small/>
 9 |                 </v-btn>
10 |             </v-card-title>
11 |             <div class="divider"></div>
12 |           <v-card-text>
13 |             {{message}}
14 |           </v-card-text>
15 | 
16 |             <v-card-actions class="pa-3">
17 |                 <v-btn color="blue darken-1" text @click="cancel">{{('CANCEL')}}</v-btn>
18 |                 <v-spacer/>
19 |                 <v-btn color="primary" @click="next">{{('OK')}}</v-btn>
20 |             </v-card-actions>
21 |         </v-card>
22 |     </v-dialog>
23 | </template>
24 | 
25 | <script>
26 |   export default {
27 |     name: "Confirm",
28 |     components: {},
29 |     props: {
30 |       value: {
31 |         type: Boolean,
32 |         default: false
33 |       },
34 |       title:{
35 |         type: String
36 |       },
37 |       message:{
38 |         type: String
39 |       },
40 |       onSuccess: {
41 |         type: Function
42 |       }
43 |     },
44 |     data() {
45 |       return {
46 |         visible: this.value,
47 | 
48 |       }
49 |     },
50 |     watch: {
51 |       value(val) {
52 |         this.visible = val
53 |       },
54 |       visible(val) {
55 |         this.$emit('input', val)
56 |       }
57 |     },
58 |     methods: {
59 |       cancel() {
60 |         this.visible = false
61 |         this.$emit('input', this.visible)
62 |       },
63 | 
64 |       async next() {
65 |         if (typeof this.onSuccess === 'function') {
66 |           this.onSuccess()
67 |         }
68 |         this.cancel()
69 |       }
70 |     }
71 |   }
72 | </script>
73 | 
74 | 


--------------------------------------------------------------------------------
/public/_locales/zh_CN/messages.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "language": {
  3 |     "message": "简体中文"
  4 |   },
  5 |   "extensionName": {
  6 |     "message": "nShell"
  7 |   },
  8 |   "extensionDescription": {
  9 |     "message": "nShell."
 10 |   },
 11 |   "MY_KEYSTORE": {
 12 |     "message": "我的身份"
 13 |   },
 14 |   "ADD_KEYSTORE": {
 15 |     "message": "添加身份"
 16 |   },
 17 |   "EDIT_KEYSTORE": {
 18 |     "message": "编辑 Keystore"
 19 |   },
 20 |   "ADD_NSHELL": {
 21 |     "message": "添加 nShell"
 22 |   },
 23 |   "EDIT_NSHELL": {
 24 |     "message": "编辑 nShell"
 25 |   },
 26 |   "REQUIRED": {
 27 |     "message": "必填项"
 28 |   },
 29 |   "FIELD_REQUIRED": {
 30 |     "message": "$field$ 是必须的",
 31 |     "placeholders": {
 32 |       "field": {
 33 |         "content": "$1"
 34 |       }
 35 |     }
 36 |   },
 37 |   "OK": {
 38 |     "message": "确定"
 39 |   },
 40 |   "CANCEL": {
 41 |     "message": "取消"
 42 |   },
 43 |   "NEXT": {
 44 |     "message": "下一步"
 45 |   },
 46 |   "SUBMIT": {
 47 |     "message": "提交"
 48 |   },
 49 |   "TAG": {
 50 |     "message": "Tag"
 51 |   },
 52 |   "SEED": {
 53 |     "message": "Seed"
 54 |   },
 55 |   "KEYSTORE": {
 56 |     "message": "Keystore"
 57 |   },
 58 |   "INVALID_SEED": {
 59 |     "message": "Seed 格式不正确"
 60 |   },
 61 |   "CONFIRM_TITLE": {
 62 |     "message": "提示"
 63 |   },
 64 |   "CONFIRM_DELETE": {
 65 |     "message": "确认要删除此项吗?"
 66 |   },
 67 |   "SERVER_ADDRESS": {
 68 |     "message": "Server Address"
 69 |   },
 70 |   "REMOTE_ADDRESS": {
 71 |     "message": "Remote Address"
 72 |   },
 73 |   "CLIENT_ADDRESS": {
 74 |     "message": "Client Address"
 75 |   },
 76 |   "ADDRESS": {
 77 |     "message": "Address"
 78 |   },
 79 |   "IDENTIFIER": {
 80 |     "message": "Identifier"
 81 |   },
 82 |   "CLIENT": {
 83 |     "message": "Client"
 84 |   },
 85 |   "NAME": {
 86 |     "message": "名称"
 87 |   },
 88 |   "WALLET": {
 89 |     "message": "钱包"
 90 |   },
 91 |   "UPLOAD_WALLET": {
 92 |     "message": "上传钱包文件"
 93 |   },
 94 |   "PASSWORD": {
 95 |     "message": "密码"
 96 |   },
 97 |   "PASSWORD_HINT": {
 98 |     "message": "请输入钱包密码."
 99 |   },
100 |   "PASSWORD_ERROR": {
101 |     "message": "密码错误."
102 |   }
103 | }
104 | 


--------------------------------------------------------------------------------
/src/components/dialog/Modal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-dialog v-model="visible" max-width="600px">
 3 |     <v-card>
 4 |       <v-card-title>
 5 |         <span class="headline">{{title}}</span>
 6 |         <v-spacer></v-spacer>
 7 |         <v-btn class="mr-0" icon small @click="cancel">
 8 |           <v-icon class="fas fa-times" color="grey darken-2" small></v-icon>
 9 |         </v-btn>
10 |       </v-card-title>
11 |       <div class="divider"></div>
12 | 
13 |       <v-card-text v-if="!!json">
14 |         <vue-json-pretty
15 |           :data="json"
16 |           highlightMouseoverNode
17 |           highlightSelectedNode
18 |         >
19 |         </vue-json-pretty>
20 |       </v-card-text>
21 |       <v-card-text v-else>
22 |         {{content}}
23 |       </v-card-text>
24 | 
25 |       <v-card-actions class="pa-3">
26 |         <v-btn color="blue darken-1" text @click="cancel">{{$t('CANCEL')}}</v-btn>
27 |         <v-spacer></v-spacer>
28 |         <v-btn color="primary" @click="next">{{$t('OK')}}</v-btn>
29 |       </v-card-actions>
30 |     </v-card>
31 |   </v-dialog>
32 | </template>
33 | 
34 | <script>
35 |   import VueJsonPretty from 'vue-json-pretty'
36 |   import { mapActions, mapMutations, mapState } from 'vuex'
37 | 
38 |   export default {
39 |     name: 'Modal',
40 |     components: {
41 |       VueJsonPretty
42 |     },
43 |     computed: {
44 |       ...mapState({
45 |         modal: state => state.modal,
46 |         title: state => state.modalTitle,
47 |         content: state => state.modalContent,
48 |         json: state => state.modalJson
49 |       })
50 |     },
51 |     data() {
52 |       return {
53 |         visible: this.modal
54 |       }
55 |     },
56 |     methods: {
57 |       ...mapMutations(['setModal']),
58 |       cancel() {
59 |         this.setModal({modal: false})
60 |       },
61 | 
62 |       async next() {
63 |         if (typeof this.onSuccess === 'function') {
64 |           this.onSuccess()
65 |         }
66 |         this.cancel()
67 |       }
68 |     },
69 |     watch: {
70 |       visible(v) {
71 |         if (!v)
72 |           this.cancel()
73 |       },
74 |       modal(v) {
75 |         this.visible = v
76 |       }
77 |     }
78 |   }
79 | </script>
80 | 
81 | <style scoped>
82 | 
83 | </style>
84 | 


--------------------------------------------------------------------------------
/src/helpers/syncStorage.helper.js:
--------------------------------------------------------------------------------
 1 | const SEED_KEY = 'SEEDS'
 2 | const SHELL_KEY = 'SHELLS'
 3 | 
 4 | export default class SyncStorage {
 5 |   async get(key) {
 6 |     return new Promise((resolve, reject) => {
 7 |       chrome.storage.local.get([key], (item) => {
 8 |         resolve(item[key])
 9 |       })
10 |     })
11 |   }
12 | 
13 |   async set(obj) {
14 |     return new Promise((resolve, reject) => {
15 |       chrome.storage.local.set(obj, function () {
16 |         resolve(true)
17 |       })
18 |     })
19 |   }
20 | 
21 |   async setSeed(n, {seed, keystore, tags}) {
22 |     let seeds = await this.getSeeds()
23 |     seeds[n] = {seed, keystore, tags}
24 | 
25 |     let obj = {}
26 |     obj[SEED_KEY] = seeds
27 |     return await this.set(obj)
28 |   }
29 | 
30 |   async addSeed({seed, keystore, tags}) {
31 |     let seeds = await this.getSeeds()
32 |     seeds.push({seed, keystore, tags})
33 | 
34 |     let obj = {}
35 |     obj[SEED_KEY] = seeds
36 |     return await this.set(obj)
37 |   }
38 | 
39 |   async getSeeds() {
40 |     return await this.get(SEED_KEY) || []
41 |   }
42 | 
43 |   async removeSeedOfIndex(n) {
44 |     let seeds = await this.getSeeds()
45 | 
46 |     if (n > -1) {
47 |       seeds.splice(n, 1)
48 |     }
49 |     let obj = {}
50 |     obj[SEED_KEY] = seeds
51 |     return await this.set(obj)
52 |   }
53 | 
54 |   async getShell() {
55 |     return await this.get(SHELL_KEY) || []
56 |   }
57 | 
58 |   async setShell(n, {name, remoteAddr, identifier, seed, keystore, tags}) {
59 |     let shells = await this.getShell()
60 |     shells[n] = ({name, remoteAddr, identifier, seed, keystore, tags})
61 |     let obj = {}
62 |     obj[SHELL_KEY] = shells
63 |     return await this.set(obj)
64 |   }
65 | 
66 |   async addShell({name, remoteAddr, identifier, seed, keystore, tags}) {
67 |     let shells = await this.getShell()
68 |     shells.push({name, remoteAddr, identifier, seed, keystore, tags})
69 |     let obj = {}
70 |     obj[SHELL_KEY] = shells
71 |     return await this.set(obj)
72 |   }
73 | 
74 |   async removeShellOfIndex(n) {
75 |     let shells = await this.getShell()
76 | 
77 |     if (n > -1) {
78 |       shells.splice(n, 1)
79 |     }
80 |     let obj = {}
81 |     obj[SHELL_KEY] = shells
82 |     return await this.set(obj)
83 |   }
84 | 
85 | }
86 | 


--------------------------------------------------------------------------------
/public/_locales/en/messages.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "language": {
  3 |     "message": "English"
  4 |   },
  5 |   "extensionName": {
  6 |     "message": "nShell"
  7 |   },
  8 |   "extensionDescription": {
  9 |     "message": "nShell."
 10 |   },
 11 |   "MY_KEYSTORE": {
 12 |     "message": "My Keystore"
 13 |   },
 14 |   "ADD_KEYSTORE": {
 15 |     "message": "Add Keystore"
 16 |   },
 17 |   "EDIT_KEYSTORE": {
 18 |     "message": "Edit Keystore"
 19 |   },
 20 |   "ADD_NSHELL": {
 21 |     "message": "Add nShell"
 22 |   },
 23 |   "EDIT_NSHELL": {
 24 |     "message": "Edit nShell"
 25 |   },
 26 |   "REQUIRED": {
 27 |     "message": "Required"
 28 |   },
 29 |   "FIELD_REQUIRED": {
 30 |     "message": "$field$ is required",
 31 |     "placeholders": {
 32 |       "field": {
 33 |         "content": "$1"
 34 |       }
 35 |     }
 36 |   },
 37 |   "OK": {
 38 |     "message": "OK"
 39 |   },
 40 |   "CANCEL": {
 41 |     "message": "Cancel"
 42 |   },
 43 |   "NEXT": {
 44 |     "message": "Next"
 45 |   },
 46 |   "SUBMIT": {
 47 |     "message": "Submit"
 48 |   },
 49 |   "TAG": {
 50 |     "message": "Tag"
 51 |   },
 52 |   "SEED": {
 53 |     "message": "Seed"
 54 |   },
 55 |   "KEYSTORE": {
 56 |     "message": "Keystore"
 57 |   },
 58 |   "INVALID_SEED": {
 59 |     "message": "Invalid Seed"
 60 |   },
 61 |   "CONFIRM_TITLE": {
 62 |     "message": "Info"
 63 |   },
 64 |   "CONFIRM_DELETE": {
 65 |     "message": "Are you sure want to delete it?"
 66 |   },
 67 |   "SERVER_ADDRESS": {
 68 |     "message": "Server Address"
 69 |   },
 70 |   "REMOTE_ADDRESS": {
 71 |     "message": "Remote Address"
 72 |   },
 73 |   "CLIENT_ADDRESS": {
 74 |     "message": "Client Address"
 75 |   },
 76 |   "ADDRESS": {
 77 |     "message": "Address"
 78 |   },
 79 |   "IDENTIFIER": {
 80 |     "message": "Identifier"
 81 |   },
 82 |   "CLIENT": {
 83 |     "message": "Client"
 84 |   },
 85 |   "NAME": {
 86 |     "message": "Name"
 87 |   },
 88 |   "WALLET": {
 89 |     "message": "Wallet"
 90 |   },
 91 |   "UPLOAD_WALLET": {
 92 |     "message": "Upload wallet file"
 93 |   },
 94 |   "PASSWORD": {
 95 |     "message": "Password"
 96 |   },
 97 |   "PASSWORD_HINT": {
 98 |     "message": "Please enter wallet password."
 99 |   },
100 |   "PASSWORD_ERROR": {
101 |     "message": "Invalid password."
102 |   }
103 | 
104 | }
105 | 


--------------------------------------------------------------------------------
/src/components/Textbox.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <v-text-field
  3 |             v-model="localValue"
  4 |             :label="label"
  5 |             persistent-hint
  6 |             :hide-details="hideDetails"
  7 |             :readonly="readonly"
  8 |             :placeholder="placeholder"
  9 |             :rules="localRule"
 10 |             :error="error"
 11 |             :error-messages="errorMessage"
 12 |     >
 13 |         <template v-slot:append>
 14 | 
 15 |         </template>
 16 |     </v-text-field>
 17 | </template>
 18 | <script>
 19 |   export default {
 20 |     name: 'Textbox',
 21 |     props: {
 22 |       value: {
 23 |         type: String
 24 |       },
 25 |       label: {
 26 |         type: String
 27 |       },
 28 |       placeholder: {
 29 |         type: String
 30 |       },
 31 |       hideDetails: {
 32 |         type: Boolean
 33 |       },
 34 |       readonly: {
 35 |         type: Boolean
 36 |       },
 37 |       rule: {
 38 |         type: Array
 39 |       },
 40 |       required: {
 41 |         type: Boolean
 42 |       },
 43 |       email: {
 44 |         type: Boolean
 45 |       },
 46 |       nkn_addr: {
 47 |         type: Boolean
 48 |       },
 49 | 
 50 |     },
 51 |     computed: {
 52 |       localValue: {
 53 |         get: function () {
 54 |           return this.value
 55 |         },
 56 |         set: function (value) {
 57 |           this.$emit('input', value)
 58 |         }
 59 |       }
 60 |     },
 61 |     created() {
 62 |       this.init()
 63 |     },
 64 |     data: () => ({
 65 |       localRule: undefined,
 66 |       error: false,
 67 |       errorMessage: ''
 68 |     }),
 69 |     watch: {
 70 |       required(val) {
 71 |         this.init()
 72 |       },
 73 |       rule(val) {
 74 |         this.init()
 75 |       },
 76 |       email(val) {
 77 |         this.init()
 78 |       },
 79 |       nkn_addr(val) {
 80 |         this.init()
 81 |       },
 82 |       seed(val) {
 83 |         this.init()
 84 |       }
 85 |     },
 86 |     methods: {
 87 |       init() {
 88 |         this.localRule = this.rule || []
 89 |         if (this.required) {
 90 |           this.localRule = [
 91 |             ...this.localRule,
 92 |             v => !!v || this.$t('FIELD_REQUIRED')
 93 |           ]
 94 |         }
 95 | 
 96 |         if (this.email) {
 97 |           this.localRule = [
 98 |             ...this.localRule,
 99 |             v => !v || /.+@.+\..+/.test(v) || this.$t('rule.EMAIL_ERROR_VALID'),
100 |           ]
101 |         } else if (this.nkn_addr) {
102 |           this.localRule = [
103 |             ...this.localRule,
104 |             v => !v || /^([0-9a-f]{64}|([^.]*\.)+[0-9a-f]{64})$/.test(v) || this.$t('rule.NKN_ADDR_ERROR_VALID'),
105 |           ]
106 |         }
107 | 
108 |       },
109 | 
110 |     }
111 |   }
112 | </script>
113 | 


--------------------------------------------------------------------------------
/src/components/widget/SeedSelect.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <v-combobox
  3 |             v-model="seed"
  4 |             :label="$i18n.getMessage('SEED')"
  5 |             :items="seeds"
  6 |             hide-no-data
  7 |             persistent-hint
  8 |             small-chips
  9 |             hide-details
 10 |     >
 11 |         <template v-slot:selection="{ attrs, item, parent, selected }">
 12 |             <v-chip v-if="typeof item === 'object' && item.seed" v-bind="attrs" small>
 13 |                 {{item.seed.replace(/^(\w{3}).*(\w{3})$/,
 14 |                 '$1**********************************************************$2') }}
 15 |             </v-chip>
 16 |             <v-chip v-else-if="item.keystore" v-bind="attrs" small>
 17 |                 {{$i18n.getMessage('KEYSTORE')}}: {{ item.address}}
 18 |             </v-chip>
 19 |             <v-chip v-else v-bind="attrs" small>
 20 |                 {{displaySeed(item)}}
 21 |             </v-chip>
 22 |         </template>
 23 |         <template v-slot:item="{ index, item }">
 24 |             <div v-if="item.seed">
 25 |                 <v-chip class="mx-1" color="warning" small v-for="tag in item.tags">{{$i18n.getMessage('SEED')}}
 26 |                 </v-chip>
 27 |                 {{item.seed.replace(/^(\w{3}).*(\w{3})$/,
 28 |                 '$1**********************************************************$2')}}
 29 |             </div>
 30 |             <div v-else>
 31 |                 <v-chip class="mx-1" color="success" small v-for="tag in item.tags">{{$i18n.getMessage('KEYSTORE')}}
 32 |                 </v-chip>
 33 |                 {{item.address}}
 34 |             </div>
 35 |             <v-spacer/>
 36 |             <v-chip class="mx-1" small v-for="tag in item.tags">{{tag}}</v-chip>
 37 |         </template>
 38 |     </v-combobox>
 39 | </template>
 40 | 
 41 | <script>
 42 | 
 43 |   import { parseKeystore } from '../../helpers/utils.helper'
 44 | 
 45 |   export default {
 46 |     name: 'SeedSelect',
 47 |     components: {},
 48 |     props: {
 49 |       value: {
 50 |         type: String,
 51 |         default: ''
 52 |       },
 53 |     },
 54 |     data() {
 55 |       return {
 56 |         seed: this.value,
 57 |         seeds: []
 58 |       }
 59 |     },
 60 |     watch: {
 61 |       value(val) {
 62 |         this.seed = val
 63 |       },
 64 |       seed(val) {
 65 |         if (typeof val === 'object' && val.seed) {
 66 |           this.$emit('input', val.seed)
 67 |         } else if (val.keystore) {
 68 |           this.$emit('input', val.keystore)
 69 |         } else {
 70 |           this.$emit('input', val)
 71 |         }
 72 | 
 73 |       }
 74 |     },
 75 |     async created() {
 76 |       this.seeds = await this.$syncStorage.getSeeds()
 77 |       this.seeds.map(x => {
 78 |         if (x.keystore) {
 79 |           try {
 80 |             let keystore = parseKeystore(x.keystore)
 81 |             x.address = keystore.Address
 82 |           } catch (e) {
 83 |             console.log(e)
 84 |           }
 85 |         }
 86 |       })
 87 |     },
 88 |     methods: {
 89 |       displaySeed(seed){
 90 |         let keystore = parseKeystore(seed)
 91 |         if(keystore){
 92 |           return this.$i18n.getMessage('KEYSTORE') + ': ' + keystore.Address
 93 |         }else{
 94 |           return seed
 95 |         }
 96 |       }
 97 |     }
 98 |   }
 99 | </script>
100 | 


--------------------------------------------------------------------------------
/src/components/dialog/VerificationPassword.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <v-dialog v-model="visible" max-width="600px">
  3 |         <v-card>
  4 |             <v-card-title>
  5 |                 <span class="headline">{{$i18n.getMessage('WALLET')}}</span>
  6 |                 <v-spacer/>
  7 |                 <v-btn class="mr-0" icon @click="cancel">
  8 |                     <font-awesome-icon :icon="['fas', 'times']" style="font-size: 20px;"/>
  9 |                 </v-btn>
 10 |             </v-card-title>
 11 | 
 12 |             <v-card-text>
 13 |                 <v-form ref="form" @submit.prevent="next">
 14 |                     <v-card-text>
 15 |                         <v-text-field autofocus
 16 |                                       ref="password"
 17 |                                       v-model="password"
 18 |                                       :label="$i18n.getMessage('PASSWORD')"
 19 |                                       persistent-hint
 20 |                                       :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
 21 |                                       :type="showPassword ? 'text' : 'password'"
 22 |                                       :error="passwordError"
 23 |                                       :error-messages="passwordErrorMessage"
 24 |                                       @click:append="showPassword = !showPassword"
 25 |                         />
 26 |                     </v-card-text>
 27 |                 </v-form>
 28 |             </v-card-text>
 29 | 
 30 |             <v-card-actions class="pa-3">
 31 |                 <v-btn color="blue darken-1" text @click="cancel">{{$i18n.getMessage('CANCEL')}}</v-btn>
 32 |                 <v-spacer/>
 33 |                 <v-btn color="primary" @click="next">{{$i18n.getMessage('NEXT')}}</v-btn>
 34 |             </v-card-actions>
 35 |         </v-card>
 36 |     </v-dialog>
 37 | </template>
 38 | 
 39 | <script>
 40 | 
 41 |   export default {
 42 |     name: 'VerificationPassword',
 43 |     components: {},
 44 |     props: {
 45 |       value: {
 46 |         type: Boolean,
 47 |         default: false
 48 |       },
 49 |       validate: {
 50 |         type: Function
 51 |       },
 52 |       onSuccess: {
 53 |         type: Function
 54 |       }
 55 |     },
 56 |     data() {
 57 |       return {
 58 |         visible: this.value,
 59 |         password: '',
 60 |         passwordError: false,
 61 |         passwordErrorMessage: '',
 62 |         showPassword: false,
 63 |       }
 64 |     },
 65 |     watch: {
 66 |       value(val) {
 67 |         this.visible = val
 68 |       },
 69 | 
 70 |       visible(val) {
 71 |         this.$emit('input', val)
 72 |       },
 73 |     },
 74 |     methods: {
 75 |       cancel() {
 76 |         this.visible = false
 77 |         this.$emit('input', this.visible)
 78 |       },
 79 | 
 80 |       async next() {
 81 |         if (this.validate) {
 82 |           let flag = this.validate(this.password)
 83 |           if (flag) {
 84 |             this.passwordError = false
 85 |             this.passwordErrorMessage = ''
 86 |             if(this.onSuccess){
 87 |               this.onSuccess()
 88 |             }
 89 |             this.cancel()
 90 |           }else{
 91 |             this.passwordError = true
 92 |             this.passwordErrorMessage = this.$i18n.getMessage('PASSWORD_ERROR')
 93 |           }
 94 |         }
 95 | 
 96 |       }
 97 |     }
 98 |   }
 99 | </script>
100 | 


--------------------------------------------------------------------------------
/src/components/dialog/AddNShell.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <v-dialog v-model="visible" max-width="1200px" @click:outside="">
  3 |         <v-form ref="form" @submit.prevent="next">
  4 |             <v-card>
  5 |                 <v-card-title>
  6 |                     <span class="headline" v-if="currentIndex!=null && currentIndex>-1">{{$i18n.getMessage('EDIT_NSHELL')}}</span>
  7 |                     <span class="headline" v-else>{{$i18n.getMessage('ADD_NSHELL')}}</span>
  8 |                     <v-spacer/>
  9 |                     <v-btn class="mr-0" icon @click="cancel">
 10 |                         <font-awesome-icon :icon="['fas', 'times']" style="font-size: 20px;"/>
 11 |                     </v-btn>
 12 |                 </v-card-title>
 13 |                 <v-divider/>
 14 |                 <v-card-text class="pt-10">
 15 |                     <v-text-field
 16 |                             v-model="name"
 17 |                             :label="$i18n.getMessage('NAME')"
 18 |                             persistent-hint
 19 |                             :rules="[$rules.fieldRequired($i18n.getMessage('NAME'))]"
 20 |                     />
 21 |                     <v-text-field
 22 |                             v-model="remoteAddr"
 23 |                             :label="$i18n.getMessage('REMOTE_ADDRESS')"
 24 |                             persistent-hint
 25 |                             :rules="[$rules.fieldRequired($i18n.getMessage('REMOTE_ADDRESS'))]"
 26 |                     />
 27 | 
 28 |                     <v-row>
 29 |                         <v-col cols="3">
 30 |                             <v-text-field
 31 |                                     v-model="identifier"
 32 |                                     :label="$i18n.getMessage('IDENTIFIER')"
 33 |                                     persistent-hint
 34 |                                     hide-details
 35 |                             />
 36 | 
 37 | 
 38 |                         </v-col>
 39 |                         <v-layout shrink align-center style="font-size: 50px;">.</v-layout>
 40 |                         <v-col>
 41 |                             <seed-select v-model="seed"/>
 42 |                         </v-col>
 43 |                     </v-row>
 44 | 
 45 | 
 46 |                     <v-combobox multiple
 47 |                                 v-model="tags"
 48 |                                 :label="$i18n.getMessage('TAG')"
 49 |                                 hide-no-data
 50 |                                 small-chips
 51 |                     />
 52 |                 </v-card-text>
 53 | 
 54 |                 <v-card-actions class="pa-3">
 55 |                     <v-btn color="blue darken-1" text @click="cancel">{{$i18n.getMessage('CANCEL')}}</v-btn>
 56 |                     <v-spacer/>
 57 |                     <v-btn color="primary" @click="next">{{$i18n.getMessage('OK')}}</v-btn>
 58 |                 </v-card-actions>
 59 |             </v-card>
 60 |         </v-form>
 61 |     </v-dialog>
 62 | </template>
 63 | 
 64 | <script>
 65 |   import SeedSelect from '../../components/widget/SeedSelect'
 66 |   import Seed from '../../pages/keystore'
 67 |   import { isSeed, rules } from '../../helpers/validation.helper'
 68 | 
 69 |   export default {
 70 |     name: 'AddNShell',
 71 |     components: {Seed, SeedSelect},
 72 |     props: {
 73 |       value: {
 74 |         type: Boolean,
 75 |         default: false
 76 |       },
 77 |       currentIndex: {
 78 |         type: Number
 79 |       },
 80 |       item: {
 81 |         type: Object
 82 |       },
 83 |       onSuccess: {
 84 |         type: Function
 85 |       }
 86 |     },
 87 |     data() {
 88 |       return {
 89 |         visible: false,
 90 |         name: '',
 91 |         remoteAddr: '',
 92 |         identifier: '',
 93 |         seed: '',
 94 |         tags: []
 95 |       }
 96 |     },
 97 |     watch: {
 98 |       value(val) {
 99 |         this.visible = val
100 |       },
101 |       visible(val) {
102 |         this.$emit('input', val)
103 |       },
104 |       item(val) {
105 |         if (val) {
106 |           if(val.seed){
107 |             this.seed = val.seed
108 |           }else if(val.keystore){
109 |             this.seed = val.keystore
110 |           }
111 | 
112 |           this.name = val.name
113 |           this.remoteAddr = val.remoteAddr
114 |           this.identifier = val.identifier
115 |           this.tags = val.tags
116 |         } else {
117 |           this.init()
118 |         }
119 |       }
120 |     },
121 | 
122 |     methods: {
123 |       init() {
124 |         this.name = ''
125 |         this.remoteAddr = ''
126 |         this.identifier = ''
127 |         this.seed = ''
128 |         this.tags = []
129 |       },
130 |       cancel() {
131 |         this.visible = false
132 |       },
133 |       async next() {
134 |         if (this.$refs.form.validate()) {
135 |           let data = {
136 |             name: this.name,
137 |             remoteAddr: this.remoteAddr,
138 |             identifier: this.identifier,
139 |             tags: this.tags
140 |           }
141 | 
142 |           if (isSeed(this.seed) === true) {
143 |             data.seed = this.seed
144 |           } else {
145 |             data.keystore = this.seed
146 |           }
147 | 
148 |           if (this.currentIndex != null && this.currentIndex > -1) {
149 |             await this.$syncStorage.setShell(this.currentIndex, data)
150 |           } else {
151 |             await this.$syncStorage.addShell(data)
152 |           }
153 | 
154 |           this.cancel()
155 |           if (this.onSuccess) {
156 |             this.onSuccess()
157 |           }
158 |         }
159 |       }
160 |     }
161 |   }
162 | </script>
163 | 
164 | <style scoped>
165 | 
166 | </style>
167 | 


--------------------------------------------------------------------------------
/src/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <v-container>
  3 |         <v-row>
  4 | 
  5 |             <v-col cols="12" sm="6" md="4" v-for="(item, i) in shells">
  6 |                 <v-card outlined>
  7 |                     <v-card-text>
  8 |                         <h3>{{item.name}}</h3>
  9 | 
 10 |                         <v-text-field v-model="item.remoteAddr"
 11 |                                       :label="$i18n.getMessage('REMOTE_ADDRESS')"
 12 |                                       persistent-hint
 13 |                                       hide-details
 14 |                                       readonly
 15 |                         />
 16 | 
 17 |                         <v-text-field v-if="item.seed" :value="item.identifier +'.' + item.publicKey"
 18 |                                       :label="$i18n.getMessage('CLIENT_ADDRESS')"
 19 |                                       persistent-hint
 20 |                                       hide-details
 21 |                                       readonly
 22 |                         />
 23 |                         <v-text-field v-else-if="item.keystore" :value="item.identifier"
 24 |                                       :label="$i18n.getMessage('CLIENT') + ' ' + $i18n.getMessage('IDENTIFIER')"
 25 |                                       persistent-hint
 26 |                                       hide-details
 27 |                                       readonly
 28 |                         />
 29 | 
 30 |                         <v-layout class="mt-2">
 31 |                             <v-chip class="mx-1" small v-for="tag in item.tags">{{tag}}</v-chip>
 32 |                         </v-layout>
 33 |                     </v-card-text>
 34 |                     <v-divider class="mt-2 mx-0"/>
 35 |                     <v-card-actions>
 36 |                         <v-btn color="error" text fab small @click="showConfirm(i)">
 37 |                             <v-icon>mdi-delete</v-icon>
 38 |                         </v-btn>
 39 |                         <v-btn color="green" text fab small @click="editNShell(i)">
 40 |                             <font-awesome-icon :icon="['fas', 'edit']" style="font-size: 20px;"/>
 41 |                         </v-btn>
 42 | 
 43 |                         <v-spacer/>
 44 |                         <v-btn v-if="item.seed" color="primary" text :to="'/terminal/' + i" target="_blank">Connect
 45 |                         </v-btn>
 46 |                         <v-btn v-else-if="item.keystore" color="primary" text @click="connect(i)">Connect</v-btn>
 47 |                     </v-card-actions>
 48 |                 </v-card>
 49 |             </v-col>
 50 | 
 51 |             <v-col
 52 |                     cols="12"
 53 |                     sm="6"
 54 |                     md="4"
 55 |             >
 56 | 
 57 |                 <v-card outlined>
 58 |                     <v-skeleton-loader class="mx-auto" type="article, actions"/>
 59 |                     <v-fade-transition>
 60 |                         <v-overlay absolute color="black">
 61 |                             <v-btn color="primary" @click="addNShell">
 62 |                                 <v-icon>mdi-plus</v-icon>
 63 |                                 {{$i18n.getMessage('ADD_NSHELL')}}
 64 |                             </v-btn>
 65 |                         </v-overlay>
 66 |                     </v-fade-transition>
 67 |                 </v-card>
 68 | 
 69 |             </v-col>
 70 |         </v-row>
 71 |         <add-n-shell v-model="showAddNShell" :current-index="currentIndex" :item="editItem"
 72 |                      :on-success="onAddKeyStoreSuccess"/>
 73 |         <confirm v-model="confirmDialog" :title="$i18n.getMessage('CONFIRM_TITLE')"
 74 |                  :message="$i18n.getMessage('CONFIRM_DELETE')" :on-success="onConfirmSuccess"/>
 75 |         <verification-password v-model="showVerificationPasswordDialog" :validate="validate"
 76 |                                :on-success="onValidateSuccess"/>
 77 |     </v-container>
 78 | </template>
 79 | 
 80 | <script>
 81 |   import AddNShell from '../components/dialog/AddNShell'
 82 |   import Confirm from '../components/dialog/Confirm'
 83 |   import VerificationPassword from '../components/dialog/VerificationPassword'
 84 |   import Wallet from 'nkn-wallet'
 85 |   import { parseKeystore } from '../helpers/utils.helper'
 86 | 
 87 |   export default {
 88 |     name: 'index',
 89 |     components: {AddNShell, Confirm, VerificationPassword},
 90 |     data() {
 91 |       return {
 92 |         shells: [],
 93 |         showVerificationPasswordDialog: false,
 94 |         confirmDialog: false,
 95 |         showAddNShell: false,
 96 |         editItem: undefined,
 97 |         currentIndex: undefined,
 98 |         validate: undefined
 99 |       }
100 |     },
101 |     async created() {
102 |       this.init()
103 |     },
104 |     methods: {
105 |       async init() {
106 |         this.currentIndex = undefined
107 |         this.editItem = undefined
108 |         this.shells = await this.$syncStorage.getShell()
109 | 
110 |         this.shells.map(x => {
111 |           if (x.seed) {
112 |             try {
113 |               x.publicKey = Wallet.restoreWalletBySeed(x.seed, '').getPublicKey()
114 |             } catch (e) {
115 |               console.log(e)
116 |             }
117 |           } else if (x.keystore) {
118 |             let keystore = parseKeystore(x.keystore)
119 | 
120 |           }
121 |         })
122 |       },
123 |       onAddKeyStoreSuccess() {
124 |         this.init()
125 |       },
126 |       async del(n) {
127 |         await this.$syncStorage.removeShellOfIndex(n)
128 |         this.init()
129 |       },
130 |       showConfirm(n) {
131 |         this.confirmDialog = true
132 |         this.currentIndex = n
133 |       },
134 |       onConfirmSuccess() {
135 |         this.del(this.currentIndex)
136 |       },
137 |       editNShell(n) {
138 |         this.editItem = this.shells[n]
139 |         this.currentIndex = n
140 |         this.showAddNShell = true
141 |       },
142 |       addNShell() {
143 |         this.currentIndex = undefined
144 |         this.editItem = undefined
145 |         this.showAddNShell = true
146 |       },
147 |       connect(n) {
148 |         let shell = this.shells[n]
149 |         if (shell.keystore) {
150 |           this.showVerificationPasswordDialog = true
151 |           this.validate = (pass) => {
152 |             try {
153 |               let wallet = Wallet.loadJsonWallet(shell.keystore, pass)
154 |               this.$router.push({name: 'terminal', params: {seed:wallet.getSeed(), n: n}})
155 |               return true
156 |             } catch (e) {
157 |               return false
158 |             }
159 |           }
160 |         }
161 | 
162 |       },
163 |       onValidateSuccess() {
164 | 
165 |       },
166 |       openTerminal(params) {
167 |         const {href} = this.$router.resolve({
168 |           path: '/terminal',
169 |           ...params
170 |         })
171 |         window.open(href, '_blank')
172 | 
173 |       }
174 |     }
175 |   }
176 | </script>
177 | 


--------------------------------------------------------------------------------
/src/components/dialog/AddKeystore.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <v-dialog v-model="visible" max-width="1200px" @click:outside="">
  3 | 
  4 |         <v-card>
  5 |             <v-toolbar flat>
  6 |                 <v-toolbar-title class="mr-4">
  7 |                     <span class="headline" v-if="currentIndex!=null && currentIndex>-1">{{$i18n.getMessage('EDIT_KEYSTORE')}}</span>
  8 |                     <span class="headline" v-else>{{$i18n.getMessage('ADD_KEYSTORE')}}</span>
  9 |                 </v-toolbar-title>
 10 | 
 11 |                 <v-toolbar-items>
 12 |                     <v-btn text @click="selectTab(0)">{{$i18n.getMessage('SEED')}}</v-btn>
 13 |                     <v-btn text @click="selectTab(1)">{{$i18n.getMessage('KEYSTORE')}}</v-btn>
 14 |                 </v-toolbar-items>
 15 |                 <v-spacer/>
 16 |                 <template v-if="$vuetify.breakpoint.smAndUp">
 17 |                     <v-btn class="mr-0" icon @click="cancel">
 18 |                         <font-awesome-icon :icon="['fas', 'times']" style="font-size: 20px;"/>
 19 |                     </v-btn>
 20 |                 </template>
 21 |             </v-toolbar>
 22 |             <v-divider/>
 23 |             <v-card-text class="pt-10">
 24 |                 <v-tabs-items v-model="tab">
 25 |                     <v-tab-item>
 26 |                         <v-form ref="form1">
 27 |                             <v-text-field autofocus
 28 |                                           v-model="seed"
 29 |                                           :label="$i18n.getMessage('SEED')"
 30 |                                           persistent-hint
 31 |                                           :rules="[$rules.fieldRequired($i18n.getMessage('SEED')),$rules.seed]"
 32 |                             />
 33 |                         </v-form>
 34 |                     </v-tab-item>
 35 |                     <v-tab-item>
 36 |                         <v-form ref="form2">
 37 |                             <v-file-input v-model="file" label="File input" accept="application/json"
 38 |                                           placeholder="Upload your documents"
 39 |                                           prepend-icon="mdi-paperclip"
 40 |                                           :error="fileError"
 41 |                                           :error-messages="fileErrorMessage"
 42 |                                           :rules="[$rules.fieldRequired($i18n.getMessage('KEYSTORE'))]"
 43 |                             >
 44 |                                 <template v-slot:selection="{ text }">
 45 |                                     <v-chip small label color="primary">
 46 |                                         {{ text }}
 47 |                                     </v-chip>
 48 |                                 </template>
 49 |                             </v-file-input>
 50 |                         </v-form>
 51 |                     </v-tab-item>
 52 |                 </v-tabs-items>
 53 | 
 54 |                 <v-combobox multiple
 55 |                             v-model="tags"
 56 |                             :label="$i18n.getMessage('TAG')"
 57 |                             hide-no-data
 58 |                             small-chips
 59 |                 />
 60 |             </v-card-text>
 61 | 
 62 |             <v-card-actions class="pa-3">
 63 |                 <v-btn color="blue darken-1" text @click="cancel">{{$i18n.getMessage('CANCEL')}}</v-btn>
 64 |                 <v-spacer/>
 65 |                 <v-btn color="primary" @click="next">{{$i18n.getMessage('OK')}}</v-btn>
 66 |             </v-card-actions>
 67 |         </v-card>
 68 | 
 69 |     </v-dialog>
 70 | </template>
 71 | 
 72 | <script>
 73 |   import isNumber from 'lodash/isNumber'
 74 | 
 75 |   export default {
 76 |     name: 'AddKeystore',
 77 |     components: {},
 78 |     props: {
 79 |       value: {
 80 |         type: Boolean,
 81 |         default: false
 82 |       },
 83 |       currentIndex: {
 84 |         type: Number
 85 |       },
 86 |       item: {
 87 |         type: Object
 88 |       },
 89 |       onSuccess: {
 90 |         type: Function
 91 |       }
 92 |     },
 93 |     data() {
 94 |       return {
 95 |         visible: this.value,
 96 |         seed: '',
 97 |         file: undefined,
 98 |         fileError: false,
 99 |         fileErrorMessage: '',
100 |         tags: [],
101 |         tab: 0
102 |       }
103 |     },
104 |     watch: {
105 |       value(val) {
106 |         this.visible = val
107 |       },
108 |       visible(val) {
109 |         this.$emit('input', val)
110 |       },
111 |       item(val) {
112 |         if (val) {
113 |           this.seed = val.seed
114 |           this.tags = val.tags
115 |         } else {
116 |           this.init()
117 |         }
118 |       },
119 |       file(val) {
120 |         if (!val) {
121 |           this.fileError = true
122 |           this.fileErrorMessage = this.$i18n.getMessage('FIELD_REQUIRED', this.$i18n.getMessage('KEYSTORE'))
123 |         } else {
124 |           this.fileError = false
125 |           this.fileErrorMessage = ''
126 |         }
127 |       }
128 |     },
129 | 
130 |     methods: {
131 |       init() {
132 |         this.seed = ''
133 |         this.tags = []
134 |       },
135 |       selectTab(n) {
136 |         this.tab = n
137 |       },
138 |       cancel() {
139 |         this.visible = false
140 |       },
141 |       async next() {
142 | 
143 |         if (this.tab === 0) {
144 |           if (!this.$refs.form1.validate()) {
145 |             return
146 |           }
147 |           let data = {seed: this.seed, tags: this.tags}
148 |           if (isNumber(this.currentIndex)) {
149 |             await this.$syncStorage.setSeed(this.currentIndex, data)
150 |           } else {
151 |             await this.$syncStorage.addSeed(data)
152 |           }
153 |           this.cancel()
154 |           if (this.onSuccess) {
155 |             this.onSuccess()
156 |           }
157 |         } else if (this.tab === 1) {
158 |           if (!this.$refs.form2.validate()) {
159 |             return
160 |           }
161 |           if (!this.file) {
162 |             this.fileError = true
163 |             this.fileErrorMessage = this.$i18n.getMessage('FIELD_REQUIRED', this.$i18n.getMessage('KEYSTORE'))
164 |             return
165 |           }
166 | 
167 |           let reader = new FileReader()
168 |           reader.readAsText(this.file, 'UTF-8')
169 | 
170 |           reader.onload = async (evt) => {
171 |             let walletJson = evt.target.result
172 |             let data = {keystore: walletJson, tags: this.tags}
173 |             if (isNumber(this.currentIndex)) {
174 |               await this.$syncStorage.setSeed(this.currentIndex, data)
175 |             } else {
176 |               await this.$syncStorage.addSeed(data)
177 |             }
178 |             this.cancel()
179 |             if (this.onSuccess) {
180 |               this.onSuccess()
181 |             }
182 |           }
183 |         }
184 | 
185 | 
186 |       }
187 |     }
188 |   }
189 | </script>
190 | 
191 | <style scoped>
192 | 
193 | </style>
194 | 


--------------------------------------------------------------------------------
/src/pages/keystore.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <v-container>
  3 |         <v-card>
  4 |             <v-list>
  5 |                 <v-subheader>{{$i18n.getMessage('MY_KEYSTORE')}}
  6 |                     <v-btn class="mx-2" fab dark small color="primary" @click="addKeystore">
  7 |                         <v-icon dark>mdi-plus</v-icon>
  8 |                     </v-btn>
  9 |                 </v-subheader>
 10 | 
 11 |                 <v-list-item
 12 |                         v-for="(item, i) in seeds"
 13 |                         :key="i"
 14 |                 >
 15 |                     <v-list-item-content v-if="!!item.seed">
 16 |                         <v-list-item-title>
 17 |                             <v-row align="center" justify="center">
 18 |                                 <v-col>
 19 |                                     <v-text-field v-model="item.address"
 20 |                                                   :label="$i18n.getMessage('ADDRESS')"
 21 |                                                   persistent-hint
 22 |                                                   hide-details
 23 |                                                   readonly
 24 |                                     />
 25 |                                     <v-text-field v-model="item.seedDisplay"
 26 |                                                   :label="$i18n.getMessage('SEED')"
 27 |                                                   persistent-hint
 28 |                                                   hide-details
 29 |                                                   readonly
 30 |                                     />
 31 | 
 32 |                                 </v-col>
 33 |                                 <v-col class="shrink" align-self="end">
 34 |                                     <v-btn color="primary" text fab small @click="toggleSeed(i)">
 35 |                                         <v-icon v-if="item.show">mdi-eye-off</v-icon>
 36 |                                         <v-icon v-else>mdi-eye</v-icon>
 37 |                                     </v-btn>
 38 |                                     <v-btn color="green" text fab small @click="editKeystore(i)">
 39 |                                         <font-awesome-icon :icon="['fas', 'edit']" style="font-size: 20px;"/>
 40 |                                     </v-btn>
 41 |                                     <v-btn color="error" text fab small @click="showConfirm(i)">
 42 |                                         <v-icon>mdi-delete</v-icon>
 43 |                                     </v-btn>
 44 |                                 </v-col>
 45 |                             </v-row>
 46 |                         </v-list-item-title>
 47 |                         <v-list-item-subtitle>
 48 |                             <v-chip class="mx-1" small v-for="tag in item.tags">{{tag}}</v-chip>
 49 |                         </v-list-item-subtitle>
 50 |                     </v-list-item-content>
 51 |                     <v-list-item-content v-else>
 52 |                         <v-list-item-title>
 53 |                             <v-row align="center" justify="center">
 54 |                                 <v-col>
 55 |                                     <v-text-field v-model="item.address"
 56 |                                                   :label="$i18n.getMessage('ADDRESS')"
 57 |                                                   persistent-hint
 58 |                                                   hide-details
 59 |                                                   readonly
 60 |                                     />
 61 | 
 62 |                                 </v-col>
 63 |                                 <v-col class="shrink" align-self="end">
 64 | 
 65 |                                     <v-btn color="green" text fab small @click="editKeystore(i)">
 66 |                                         <font-awesome-icon :icon="['fas', 'edit']" style="font-size: 20px;"/>
 67 |                                     </v-btn>
 68 |                                     <v-btn color="error" text fab small @click="showConfirm(i)">
 69 |                                         <v-icon>mdi-delete</v-icon>
 70 |                                     </v-btn>
 71 |                                 </v-col>
 72 |                             </v-row>
 73 |                         </v-list-item-title>
 74 |                         <v-list-item-subtitle>
 75 |                             <v-chip class="mx-1" small v-for="tag in item.tags">{{tag}}</v-chip>
 76 |                         </v-list-item-subtitle>
 77 |                     </v-list-item-content>
 78 |                 </v-list-item>
 79 | 
 80 |             </v-list>
 81 |         </v-card>
 82 | 
 83 |         <add-keystore v-model="showAddKeystore" :current-index="currentIndex" :item="editItem"
 84 |                       :on-success="onAddKeyStoreSuccess"/>
 85 |         <confirm v-model="confirmDialog" :title="$i18n.getMessage('CONFIRM_TITLE')"
 86 |                  :message="$i18n.getMessage('CONFIRM_DELETE')" :on-success="onConfirmSuccess"/>
 87 |     </v-container>
 88 | </template>
 89 | 
 90 | <script>
 91 |   import AddKeystore from '../components/dialog/AddKeystore'
 92 |   import Confirm from '../components/dialog/Confirm'
 93 |   import Wallet from 'nkn-wallet'
 94 |   import { parseKeystore } from '../helpers/utils.helper'
 95 | 
 96 |   export default {
 97 |     name: 'seed',
 98 |     components: {
 99 |       AddKeystore,
100 |       Confirm,
101 |     },
102 |     data() {
103 |       return {
104 |         confirmDialog: false,
105 |         showAddKeystore: false,
106 |         seeds: [],
107 |         currentIndex: undefined,
108 |         editItem: undefined
109 |       }
110 |     },
111 |     async created() {
112 |       this.init()
113 | 
114 |     },
115 |     methods: {
116 |       async init() {
117 |         this.currentIndex = undefined
118 |         this.seeds = await this.$syncStorage.getSeeds()
119 | 
120 |         this.seeds.map(x => {
121 |           if (x.seed) {
122 |             x.address = Wallet.restoreWalletBySeed(x.seed, '').address
123 |             x.seedDisplay = x.seed.replace(/^(\w{3}).*(\w{3})$/, '$1**********************************************************$2')
124 |             x.show = false
125 |           } else {
126 |             try {
127 |               let keystore = parseKeystore(x.keystore)
128 |               x.address = keystore.Address
129 |             } catch (e) {
130 |               console.log(e)
131 |             }
132 | 
133 |           }
134 | 
135 |         })
136 |       },
137 |       onAddKeyStoreSuccess() {
138 |         this.init()
139 |       },
140 |       async del(n) {
141 |         await this.$syncStorage.removeSeedOfIndex(n)
142 |         this.init()
143 |       },
144 |       showConfirm(n) {
145 |         this.confirmDialog = true
146 |         this.currentIndex = n
147 |       },
148 |       onConfirmSuccess() {
149 |         this.del(this.currentIndex)
150 |       },
151 |       toggleSeed(n) {
152 |         let item = this.seeds[n]
153 |         if (!!item.show) {
154 |           item.seedDisplay = item.seed.replace(/^(\w{3}).*(\w{3})$/, '$1**********************************************************$2')
155 |         } else {
156 |           item.seedDisplay = item.seed
157 |         }
158 |         this.$set(this.seeds, n, item)
159 |         item.show = !item.show
160 |       },
161 |       editKeystore(n) {
162 |         this.editItem = this.seeds[n]
163 |         this.currentIndex = n
164 |         this.showAddKeystore = true
165 |       },
166 |       addKeystore() {
167 |         this.currentIndex = undefined
168 |         this.editItem = undefined
169 |         this.showAddKeystore = true
170 |       }
171 |     }
172 |   }
173 | </script>
174 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    Copyright 2017 - Now NKN Labs
179 |    Copyright 2016 - 2017 DNA Dev team
180 | 
181 |    APPENDIX: How to apply the Apache License to your work.
182 | 
183 |       To apply the Apache License to your work, attach the following
184 |       boilerplate notice, with the fields enclosed by brackets "[]"
185 |       replaced with your own identifying information. (Don't include
186 |       the brackets!)  The text should be enclosed in the appropriate
187 |       comment syntax for the file format. We also recommend that a
188 |       file or class name and description of purpose be included on the
189 |       same "printed page" as the copyright notice for easier
190 |       identification within third-party archives.
191 | 
192 |    Copyright [yyyy] [name of copyright owner]
193 | 
194 |    Licensed under the Apache License, Version 2.0 (the "License");
195 |    you may not use this file except in compliance with the License.
196 |    You may obtain a copy of the License at
197 | 
198 |        https://www.apache.org/licenses/LICENSE-2.0
199 | 
200 |    Unless required by applicable law or agreed to in writing, software
201 |    distributed under the License is distributed on an "AS IS" BASIS,
202 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
203 |    See the License for the specific language governing permissions and
204 |    limitations under the License.
205 | 


--------------------------------------------------------------------------------