Add 'Save Keystore' feature
This commit is contained in:
Boris Kubiak
parent
5add55ff3c
commit
3d3118d9c5
8 changed files with 171 additions and 41 deletions
18
package-lock.json
generated
18
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
39
src/App.vue
39
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 --
|
||||
|
||||
|
|
|
|||
Binary file not shown.
21
src/js/keythereum.min.js
vendored
Normal file
21
src/js/keythereum.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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> Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -21,8 +26,8 @@
|
|||
watch: {
|
||||
address(addr) {
|
||||
const id = document.getElementById('identicon');
|
||||
id.innerHTML= '';
|
||||
if(addr){
|
||||
id.innerHTML = '';
|
||||
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>
|
||||
64
src/vue/Save.vue
Normal file
64
src/vue/Save.vue
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Reference in a new issue