Add 'Save Keystore' feature

package-lock.json

@@ -2507,6 +2507,11 @@
         "is-obj": "1.0.1"
       }
     },
+    "downloadjs": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz",
+      "integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw="
+    },
     "drbg.js": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/drbg.js/-/drbg.js-1.0.1.tgz",
@@ -5361,6 +5366,11 @@
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
     },
+    "jquery": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
+    },
     "js-base64": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.0.tgz",
@@ -8259,6 +8269,14 @@
         "jsesc": "0.5.0"
       }
     },
+    "remodal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/remodal/-/remodal-1.1.1.tgz",
+      "integrity": "sha1-APWAsJQXsrfnpCWxcyfsEPPVlsM=",
+      "requires": {
+        "jquery": "3.3.1"
+      }
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",

package.json

@@ -11,11 +11,13 @@
     "bootstrap": "^4.0.0",
     "cross-env": "^5.0.5",
     "css-loader": "^0.28.7",
+    "downloadjs": "^1.4.7",
     "ethereumjs-util": "^5.1.2",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.6",
     "node-sass": "^4.5.3",
     "randombytes": "^2.0.6",
+    "remodal": "^1.1.1",
     "sass-loader": "^6.0.6",
     "url-loader": "^0.6.2",
     "uuid": "^3.2.1",

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="remodal-bg">
         <div class="container" id="content">
             <!--Headline-->
             <headline></headline>
@@ -40,6 +40,9 @@
             </div>
         </div>
 
+        <!--Save modal-->
+        <save :private-key="result.privateKey"></save>
+
         <!--Footer-->
         <foot></foot>
 
@@ -57,11 +60,12 @@
     import UserInput from './vue/Input';
     import Statistics from './vue/Statistics';
     import Result from './vue/Result';
+    import Save from './vue/Save.vue';
     import Corner from './vue/Corner';
     import Foot from './vue/Footer';
 
     export default {
-        components: {Headline, Description, Err, UserInput, Statistics, Result, Corner, Foot},
+        components: {Headline, Description, Err, UserInput, Statistics, Result, Save, Corner, Foot},
         data: function () {
             return {
                 running: false,
@@ -256,6 +260,35 @@
         margin-top: 8em
         margin-bottom: 6em
 
+    .text-input-large
+        width: 100%
+        color: $white-text
+        background: $panel-background-clear
+        outline: none
+        font-size: 1.3em
+        padding: 0.5em
+        border: none
+        margin-bottom: 10px
+        -webkit-appearance: none
+
+    .button-large
+        border: none
+        outline: none
+        color: $white-text
+        padding: 0.6em
+        font-size: 1.3em
+        font-weight: 500
+        margin: 1.3em 0 0 0
+        cursor: pointer
+        -webkit-appearance: none
+        background: $teal
+        width: 100%
+        &:hover
+            background: $yellow
+        &:disabled
+            background: $panel-background-clear
+            cursor: auto
+
     /*-- Fonts --*/
 
     @font-face
@@ -302,6 +335,8 @@
         content: "\e901"
     .icon-ethereum:before
         content: "\e902"
+    .icon-lock:before
+        content: "\e903"
 
     /*-- Responsive design --
 

src/vue/Input.vue

@@ -2,7 +2,7 @@
     <div class="panel">
         <form :class="{error: inputError}">
             <div class="error-text">Numbers and letters from A to F only</div>
-            <input type="text" placeholder="Prefix" v-model="prefix" :disabled="running">
+            <input type="text" class="text-input-large" placeholder="Prefix" v-model="prefix" :disabled="running">
             <div class="check">
                 <label class="checkbox">
                     <input type="checkbox" name="checkbox" checked="" v-model="checksum"
@@ -12,9 +12,9 @@
                 </label>
             </div>
             <div class="threads">
-                <input type="button" class="square-btn" value="-" @click="threads--"
+                <input type="button" class="square-btn button-large" value="-" @click="threads--"
                        :disabled="running || threads <= 1">
-                <input type="button" class="square-btn arrow" value="+" @click="threads++"
+                <input type="button" class="square-btn arrow button-large" value="+" @click="threads++"
                        :disabled="running">
                 <h4 v-text="threads"></h4>
                 <span>threads</span>
@@ -22,11 +22,11 @@
             </div>
             <div class="row">
                 <div class="col-lg-6 col-sm-12">
-                    <input type="button" value="Generate" @click="startGen"
+                    <input type="button" value="Generate" class="button-large" @click="startGen"
                            :disabled="running || inputError || error">
                 </div>
                 <div class="col-lg-6 col-sm-12">
-                    <input type="button" value="Stop" @click="stopGen" :disabled="!running">
+                    <input type="button" value="Stop" class="button-large" @click="stopGen" :disabled="!running">
                 </div>
             </div>
         </form>
@@ -61,13 +61,13 @@
             }
         },
         watch: {
-            prefix: function(){
+            prefix: function () {
                 this.$emit('input-change', 'prefix', this.prefix);
             },
-            checksum : function(){
+            checksum: function () {
                 this.$emit('input-change', 'checksum', this.checksum);
             },
-            threads: function(){
+            threads: function () {
                 this.$emit('input-change', 'threads', this.threads);
             },
         }
@@ -80,43 +80,17 @@
 
 <style lang="sass" scoped>
     @import "../css/variables"
-    input
-        &[type="text"]
-            width: 100%
-            color: $white-text
-            background: $panel-background-clear
-            outline: none
-            font-size: 1.3em
-            padding: 0.5em
-            border: none
-            margin-bottom: 10px
-            -webkit-appearance: none
-        &[type="button"]
-            border: none
-            outline: none
-            color: $white-text
-            padding: 0.6em
-            font-size: 1.3em
-            font-weight: 500
-            margin: 1.3em 0 0 0
-            cursor: pointer
-            -webkit-appearance: none
-            background: $teal
-            width: 100%
-            &:hover
-                background: $yellow
-            &:disabled
-                background: $panel-background-clear
-                cursor: auto
     .error-text
         display: none
         font-size: 0.85em
         color: $red
+
     .error
         input[type="text"]
             border: 1px solid $red
         .error-text
             display: block
+
     .check
         margin: .5em 0
 

src/vue/Result.vue

@@ -6,6 +6,11 @@
                 <div>Address: <span class="output" v-text="address"></span></div>
                 <div>Private key: <span class="output" v-text="privateKey"></span></div>
             </div>
+            <div class="col-lg-2 col-12">
+                <button data-remodal-target="modal" class="save button-large" :disabled="!privateKey">
+                    <i class="icon-lock"></i>&nbsp;&nbsp;&nbsp;Save
+                </button>
+            </div>
         </div>
     </div>
 </template>
@@ -21,8 +26,8 @@
         watch: {
             address(addr) {
                 const id = document.getElementById('identicon');
-                id.innerHTML= '';
+                id.innerHTML = '';
-                if(addr){
+                if (addr) {
                     id.appendChild(blockies({seed: addr.toLocaleLowerCase(), scale: 6}));
                 }
             }
@@ -35,14 +40,25 @@
     #identicon
         width: 48px
         height: 48px
-        margin-right: 15px
+        margin: 0 15px
         background-color: $panel-background-clear
+
     .output
         font-family: monospace
         font-size: 1.2em
         color: $grey-text
         margin-left: 15px
         word-break: break-all
+
     .panel > div:not(:last-child)
         margin-bottom: 15px
+
+    .save
+        font-size: 1em
+        margin-top: 1.6em
+
+    @media screen and (min-width: 992px)
+        .save
+            margin-top: 0
+
 </style>

src/vue/Save.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="remodal" data-remodal-id="modal" data-remodal-options="hashTracking: false">
+        <button data-remodal-action="close" class="remodal-close"></button>
+        <h3 class="title">Download encrypted keystore file (UTC / JSON)</h3>
+        <div>
+            <input type="password" class="text-input-large" v-model="password" placeholder="Password">
+        </div>
+        <div>
+            <button class="button-large" @click="save" :disabled="!password || !privateKey">Save</button>
+        </div>
+    </div>
+</template>
+
+<script>
+    import * as remodal from 'remodal/src/remodal';
+    import * as keythereum from '../js/keythereum.min';
+    import * as randomBytes from 'randombytes';
+    import * as download from 'downloadjs';
+
+    export default {
+        props: {
+            privateKey: String
+        },
+        data: function () {
+            return {
+                password: '',
+            }
+        },
+        watch: {
+            privateKey: function () {
+                this.password = ''; // Reset password when new address is generated
+            }
+        },
+        methods: {
+            save() {
+                const rb = randomBytes(48);
+                window.keythereum.dump(this.password, this.privateKey, rb.slice(0, 32), rb.slice(32), {}, (obj) => {
+                    const fileName = "UTC--" + new Date().toISOString().replace(/:/g, '-') + "--" + obj.address;
+                    download(JSON.stringify(obj), fileName, "application/json");
+                });
+            },
+        }
+    }
+</script>
+
+<style lang="sass">
+    @import "~remodal/src/remodal.css"
+    @import "~remodal/src/remodal-default-theme.css"
+    @import "../css/variables"
+    .remodal-overlay
+        background: rgba(0, 0, 0, 0.85)
+
+    .remodal
+        background-color: $panel-background
+        color: $white-text
+        .title
+            margin-bottom: 45px
+        .remodal-close
+            &:before
+                font-size: 2em
+            &:hover
+                color: $white-text
+
+</style>