classic-ui/modules/account/modals/SetupAccount.vue
Danil Kovtonyuk 44f31f8b9f
init
2022-04-22 13:14:19 +10:00

135 lines
3.7 KiB
Vue

<template>
<div class="modal-card box box-modal">
<header class="box-modal-header is-spaced">
<div class="box-modal-title">{{ $t('account.modals.setupAccount.title') }}</div>
<button type="button" class="delete" @click="$emit('close')" />
</header>
<div class="note">{{ $t('account.modals.setupAccount.description') }}</div>
<div class="field">
<div class="label-with-buttons">
<div class="label">{{ $t('account.modals.setupAccount.label') }}</div>
<b-button v-clipboard:copy="recoveryKey" v-clipboard:success="onCopy" type="is-primary-text">
{{ $t('copy') }}
</b-button>
</div>
<div class="notice is-recovery-key">
<div class="notice__p">{{ recoveryKey }}</div>
</div>
</div>
<b-notification class="main-notification" type="is-info" :closable="false">
{{ $t('account.modals.setupAccount.isNotSupportedWithHw') }}
</b-notification>
<b-checkbox v-model="isSaveOnChain" :disabled="isPartialSupport">{{
$t('account.modals.setupAccount.saveOnChain')
}}</b-checkbox>
<b-checkbox v-if="!isSaveOnChain" v-model="isBackuped">{{
$t('account.modals.setupAccount.backedUp')
}}</b-checkbox>
<b-notification
v-if="!isSaveOnChain && warningMessage"
class="main-notification"
type="is-warning"
:closable="false"
>
{{ warningMessage }}
</b-notification>
<b-notification
v-if="setupAccountRequest.isError"
class="main-notification"
type="is-warning"
:closable="false"
>
{{ setupAccountRequest.errorMessage }}
</b-notification>
<b-button
v-if="!isBackuped && isSaveOnChain"
type="is-primary is-fullwidth"
:loading="setupAccountRequest.isFetching"
@click="onSetupAccount"
>
{{ $t('account.modals.setupAccount.setupAccount') }}
</b-button>
<b-button v-else type="is-primary is-fullwidth" :disabled="!isBackuped" @click="setAccount">
{{ $t('account.modals.setupAccount.setAccount') }}
</b-button>
</div>
</template>
<script>
import { setupMethods, setupComputed } from '../injectors'
export default {
data() {
return {
timer: null,
recoveryKey: '',
isBackuped: false,
isSaveOnChain: true,
warningMessage: ''
}
},
computed: {
...setupComputed
},
watch: {
isSaveOnChain() {
if (this.isSaveOnChain) {
this.isBackuped = false
}
}
},
beforeUpdate() {
if (this.setupAccountRequest.isSuccess) {
this.$parent.close()
}
},
mounted() {
this.recoveryKey = this.$provider.web3.eth.accounts.create().privateKey.slice(2)
if (this.isPartialSupport) {
this.isSaveOnChain = false
}
this.timer = setTimeout(() => {
this.saveRecoveryKeyOnFile({ recoveryKey: this.recoveryKey })
}, 1500)
},
beforeDestroy() {
clearTimeout(this.timer)
this.clearState({ key: 'setupAccount' })
},
methods: {
...setupMethods,
onCopy() {
this.addNoticeWithInterval({
notice: {
title: 'copied',
type: 'info'
},
interval: 2000
})
},
async setAccount() {
try {
await this.recoverAccountFromKey({ recoveryKey: this.recoveryKey })
this.$emit('close')
} catch (err) {
this.warningMessage = err.message
}
},
async onSetupAccount() {
if (!this.isSaveOnChain) {
this.warningMessage = this.$t('account.modals.setupAccount.yourRecoveryKeyWontBeSaved')
return
}
try {
await this.setupAccount({ privateKey: this.recoveryKey })
} catch (err) {
this.warningMessage = err.message
}
}
}
}
</script>