forked from go/golangs_learn
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
275 lines
8.3 KiB
275 lines
8.3 KiB
<template>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<form ref="textareaform" @submit.prevent="form" class="container">
|
|
<div class="row">
|
|
<div class="col mx-auto login-box">
|
|
<div>
|
|
<b>Create a new wallet</b>
|
|
<br />This section will let you create a Molly Wallet to store your
|
|
<b>$DAG</b> tokens in. You simply browse to a path where you wish to save your KeyStore file, give it a name and select 'save'.
|
|
<br />
|
|
<br />Once the path is selected, you get to set up a password to protect the key store.
|
|
<br />
|
|
<br />
|
|
<ul>
|
|
<li>
|
|
<b>KeyStore File</b>
|
|
<i>- Select where to save your KeyStore File.</i>
|
|
</li>
|
|
<li>
|
|
<b>Key Alias</b>
|
|
<i>- The unique name which is used in the keystore to identify this key entry.</i>
|
|
</li>
|
|
<li>
|
|
<b>Keystore Password</b>
|
|
<i>- This password unlocks the keystore file.</i>
|
|
</li>
|
|
<li>
|
|
<b>Key Password</b>
|
|
<i>- Extra layer of security. Both passwords will be needed when accessing/restoring a wallet.</i>
|
|
</li>
|
|
<li>
|
|
<b>Wallet Label</b>
|
|
<i>
|
|
- This will set the label of your wallet. This is
|
|
<b>optional</b> and strictly for cosmetic purposes.
|
|
</i>
|
|
</li>
|
|
</ul>
|
|
<b>Important!</b> Please backup your Alias, Store Passwords, Key Password and KeyStore File (key.p12) as these will allow you to restore your wallet at any time.
|
|
</div>
|
|
</div>
|
|
<div class="col mx-auto login-box">
|
|
<div class="input-box">
|
|
<div>
|
|
<label class="control-label">
|
|
Select a directory to store your private key (key.p12) in
|
|
</label>
|
|
<file-selector
|
|
v-model="keystorePath"
|
|
action="SelectSaveFile"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<fg-input
|
|
style="margin-bottom: 0.125em"
|
|
type="text"
|
|
label="Key Alias"
|
|
v-model="alias"
|
|
:placeholder="alias"
|
|
/>
|
|
<div class="validate" v-if="!this.aliasValid">
|
|
<p v-if="!this.aliasContainsFiveCharacters">
|
|
Alias has to be atleast 5 characters long.
|
|
</p>
|
|
</div>
|
|
<div class="validate" v-else />
|
|
</div>
|
|
<div>
|
|
<password-input
|
|
v-model="keystorePassword"
|
|
label="Keystore Password"
|
|
:validate=true
|
|
v-on:valid="KeystorePasswordValid = true"
|
|
v-on:invalid="KeystorePasswordValid = false"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<password-input
|
|
v-model="KeyPassword"
|
|
label="Key Password"
|
|
:validate=true
|
|
v-on:valid="KeyPasswordValid = true"
|
|
v-on:invalid="KeyPasswordValid = false"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<fg-input
|
|
type="text"
|
|
v-model="walletLabel"
|
|
label="Wallet Label (optional)"
|
|
></fg-input>
|
|
</div>
|
|
</div>
|
|
<div class="button-box">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6 pr-md-2 mb-3">
|
|
<p-button
|
|
type="default"
|
|
block
|
|
@click.native="cancel()"
|
|
>
|
|
<span style="display: block;">
|
|
<i class="fa fa-close"></i>
|
|
CANCEL
|
|
</span>
|
|
</p-button>
|
|
</div>
|
|
<div class="col-md-6 pl-md-2 mb-3">
|
|
<p-button
|
|
type="warning"
|
|
block
|
|
:disabled="!this.isValidNewWallet"
|
|
@click.native="createWallet()"
|
|
>
|
|
<span style="display: block;">
|
|
<i v-if="!this.isValidNewWallet" class="fa fa-lock"></i>
|
|
<i v-else class="fa fa-unlock"></i>
|
|
CREATE
|
|
</span>
|
|
</p-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<page-overlay text="Loading..." :isActive="overlay" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "new-wallet-screen",
|
|
data: () => ({
|
|
aliasValid: false,
|
|
aliasLength: 0,
|
|
aliasContainsFiveCharacters: false,
|
|
keystorePassword: "",
|
|
KeystorePasswordValid: false,
|
|
KeyPassword: "",
|
|
KeyPasswordValid: false,
|
|
overlay: false
|
|
}),
|
|
computed: {
|
|
isValidNewWallet: function() {
|
|
if (
|
|
this.aliasValid &&
|
|
this.KeyPasswordValid &&
|
|
this.KeystorePasswordValid &&
|
|
this.keystorePassword !== "" &&
|
|
this.KeyPassword !== "" &&
|
|
!this.overlay
|
|
) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
keystorePath: {
|
|
get () {
|
|
return this.$store.state.wallet.keystorePath
|
|
},
|
|
set (value) {
|
|
this.$store.commit('wallet/setKeystorePath', value)
|
|
}
|
|
},
|
|
alias: {
|
|
get () {
|
|
return this.$store.state.wallet.alias
|
|
},
|
|
set (value) {
|
|
if (value.length >= 5) {
|
|
this.aliasContainsFiveCharacters = true;
|
|
this.aliasValid = true;
|
|
} else {
|
|
this.aliasContainsFiveCharacters = false;
|
|
this.aliasValid = false;
|
|
}
|
|
this.$store.commit('wallet/setAlias', value)
|
|
}
|
|
},
|
|
walletLabel: {
|
|
get () {
|
|
return this.$store.state.wallet.walletLabel
|
|
},
|
|
set (value) {
|
|
this.$store.commit('wallet/setLabel', value)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
cancel: function() {
|
|
this.$store.dispatch('wallet/reset').then(() => {
|
|
this.$router.go(-1);
|
|
})
|
|
},
|
|
createWallet: function() {
|
|
var self = this;
|
|
self.$Progress.start();
|
|
self.overlay = true;
|
|
window.backend.WalletApplication.CreateWallet(
|
|
self.keystorePath,
|
|
self.keystorePassword,
|
|
self.KeyPassword,
|
|
self.alias,
|
|
self.walletLabel
|
|
).then(walletCreated => {
|
|
if (walletCreated) {
|
|
window.backend.WalletApplication.Login(
|
|
self.keystorePath,
|
|
self.keystorePassword,
|
|
self.KeyPassword,
|
|
self.alias
|
|
).then(loggedIn => {
|
|
if (loggedIn) {
|
|
self.overlay = false;
|
|
self.$store.commit('app/setIsLoggedIn', loggedIn);
|
|
self.$router.push({
|
|
name: 'accept terms of service',
|
|
params: {message: "Terms of Service"}
|
|
});
|
|
} else {
|
|
self.overlay = false;
|
|
self.$Progress.fail();
|
|
}
|
|
});
|
|
} else {
|
|
self.overlay = false;
|
|
self.$Progress.fail();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.login-box {
|
|
max-width: 29rem;
|
|
min-width: 29rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.input-box > div {
|
|
margin-bottom: 1.875em;
|
|
}
|
|
|
|
.button-box .container {
|
|
margin-left: 0em;
|
|
margin-right: 0em;
|
|
padding-left: 0em;
|
|
padding-right: 0em;
|
|
}
|
|
|
|
.button-box .container .row {
|
|
margin-left: 0em;
|
|
margin-right: 0em;
|
|
padding-left: 0em;
|
|
padding-right: 0em;
|
|
margin-top: 1.25em;
|
|
}
|
|
|
|
.button-box .container .row [class^="col"] {
|
|
margin-left: 0em;
|
|
margin-right: 0em;
|
|
padding-left: 0em;
|
|
padding-right: 0em;
|
|
}
|
|
</style>
|
|
|