init

modules/account/modals/RecoverAccount.vue

@@ -0,0 +1,90 @@
+<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>