91 lines
2.4 KiB
Vue
91 lines
2.4 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.recoverAccount.title') }}</div>
|
|
<button type="button" class="delete" @click="$emit('close')" />
|
|
</header>
|
|
<div class="note">
|
|
{{ $t('account.modals.recoverAccount.description') }}
|
|
</div>
|
|
<div class="field">
|
|
<b-input
|
|
v-model="recoveryKey"
|
|
type="textarea"
|
|
class="is-disabled-resize"
|
|
rows="2"
|
|
:placeholder="$t('enterRecoveryKey')"
|
|
:class="{ 'is-warning': hasAndValidKey }"
|
|
@input="onInput"
|
|
></b-input>
|
|
<p v-show="hasAndValidKey" class="help is-warning">
|
|
{{ $t('account.modals.recoverAccount.warning') }}
|
|
</p>
|
|
</div>
|
|
<b-notification
|
|
v-if="recoverAccountFromKeyRequest.isError"
|
|
class="main-notification"
|
|
type="is-warning"
|
|
:closable="false"
|
|
>
|
|
{{ recoverAccountFromKeyRequest.errorMessage }}
|
|
</b-notification>
|
|
<b-button
|
|
type="is-primary is-fullwidth"
|
|
:disabled="hasAndValidKey"
|
|
:loading="recoverAccountFromKeyRequest.isFetching"
|
|
@click="handleRecoverAccount"
|
|
>
|
|
{{ $t('account.modals.recoverAccount.connect') }}
|
|
</b-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { recoverAccountComputed, recoverAccountMethods } from '../injectors'
|
|
import { debounce } from '@/utils'
|
|
|
|
export default {
|
|
props: {
|
|
getNotes: {
|
|
required: true,
|
|
type: Function
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
recoveryKey: '',
|
|
isValidRecoveryKey: true
|
|
}
|
|
},
|
|
computed: {
|
|
...recoverAccountComputed,
|
|
hasAndValidKey() {
|
|
return this.recoveryKey && !this.isValidRecoveryKey
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
this.clearState({ key: 'recoverAccountFromKey' })
|
|
},
|
|
methods: {
|
|
...recoverAccountMethods,
|
|
async handleRecoverAccount() {
|
|
await this.recoverAccountFromKey({ recoveryKey: this.recoveryKey })
|
|
this.$emit('close')
|
|
await this.getNotes()
|
|
},
|
|
onInput(recoveryKey) {
|
|
this.clearState({ key: 'recoverAccountFromKey' })
|
|
debounce(this.checkPrivateKey, recoveryKey)
|
|
},
|
|
checkPrivateKey(recoveryKey) {
|
|
try {
|
|
this.$provider.web3.eth.accounts.privateKeyToAccount(recoveryKey)
|
|
this.isValidRecoveryKey = true
|
|
} catch {
|
|
this.isValidRecoveryKey = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|