init

modules/account/components/Control/Actions.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="action">
+    <Statistic />
+    <div v-for="action in actions" :key="action.description" class="action-item">
+      <b-icon :icon="action.icon" size="is-large" />
+      <div class="desc">
+        {{ $t(action.description) }}
+      </div>
+      <b-button type="is-primary" outlined @mousedown.prevent @click="action.onClick">
+        {{ $t(action.button) }}
+      </b-button>
+    </div>
+    <div class="action-item has-switch">
+      <b-icon icon="account-file" size="is-large" />
+      <div class="desc">
+        {{ $t('account.control.fileDesc') }}
+      </div>
+      <b-switch :value="isEnabledSaveFile" size="is-medium" @input="handleEnabledSaveFile" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { openDecryptModal, openShowRecoverKeyModal, openRemoveAccountModal } from '../../modals'
+import { controlComputed, controlMethods } from '../../injectors'
+import Statistic from './Statistic'
+
+export default {
+  components: {
+    Statistic
+  },
+  data() {
+    return {
+      actions: [
+        {
+          icon: 'account-notes',
+          onClick: this.getEncryptedNotes,
+          button: 'account.control.loadAll',
+          description: 'account.control.loadAllDesc'
+        },
+        {
+          icon: 'account-key',
+          onClick: this.openRecoverKeyModal,
+          button: 'account.control.showRecoveryKey',
+          description: 'account.control.showRecoveryKeyDesc'
+        },
+        {
+          icon: 'account-remove',
+          button: 'account.control.remove',
+          onClick: this.handleRemoveAccount,
+          description: 'account.control.removeDesc'
+        }
+      ]
+    }
+  },
+  computed: {
+    ...controlComputed
+  },
+  methods: {
+    ...controlMethods,
+    handleEnabledSaveFile() {
+      this.enabledSaveFile()
+    },
+    async getEncryptedNotes() {
+      const props = await this.decryptNotes()
+
+      if (props) {
+        openDecryptModal({ ...props, parent: this })
+      }
+    },
+    handleRemoveAccount() {
+      const onConfirm = () => {
+        this.addNoticeWithInterval({
+          notice: {
+            title: 'accountHasBeenDeleted',
+            type: 'info'
+          },
+          interval: 2000
+        })
+        this.removeAccount()
+      }
+
+      openRemoveAccountModal({ i18n: this.$i18n, onConfirm })
+    },
+    async openRecoverKeyModal() {
+      const recoveryKey = await this.getRecoveryKey()
+
+      if (recoveryKey) {
+        openShowRecoverKeyModal({ recoveryKey, parent: this })
+      }
+    }
+  }
+}
+</script>

modules/account/components/Control/Control.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="account-box">
+    <Header />
+    <Actions />
+  </div>
+</template>
+
+<script>
+import Header from './Header'
+import Actions from './Actions'
+
+export default {
+  components: {
+    Header,
+    Actions
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {}
+}
+</script>

modules/account/components/Control/Header.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="address">
+    <div class="address-item">
+      <div class="label">{{ $t('account.account') }}</div>
+      <div class="value">{{ accounts.encrypt }}</div>
+    </div>
+    <div class="address-item">
+      <div class="label">{{ $t('account.backedUpWith') }}</div>
+      <div class="value is-small">{{ accounts.backup }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { headerComputed } from '../../injectors'
+
+export default {
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {
+    ...headerComputed
+  },
+  methods: {}
+}
+</script>

modules/account/components/Control/Statistic.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="action-item">
+    <b-icon icon="account-balance" size="is-large" />
+    <i18n path="account.control.balance" tag="div" class="desc">
+      <template v-if="hasBalances" v-slot:value>
+        <p class="balance">
+          <span v-for="(item, index) in getBalance" :key="item.currency" class="balance-item"
+            ><NumberFormat :value="item.amount" /> {{ getSymbol(item.currency)
+            }}{{ index !== getBalance.length - 1 ? ',' : '' }}</span
+          >
+        </p>
+      </template>
+    </i18n>
+  </div>
+</template>
+
+<script>
+import { statisticComputed } from '../../injectors'
+import { NumberFormat } from '../../dependencies'
+
+export default {
+  components: {
+    NumberFormat
+  },
+  computed: {
+    ...statisticComputed,
+    getBalance() {
+      const balances = this.statistic.reduce((acc, { currency, amount }) => {
+        if (acc[currency]) {
+          acc[currency] += Number(amount)
+        } else {
+          acc[currency] = Number(amount)
+        }
+        return acc
+      }, {})
+      return Object.keys(balances).map((k) => {
+        return {
+          currency: k,
+          amount: balances[k]
+        }
+      })
+    },
+    hasBalances() {
+      return this.getBalance && this.getBalance.length
+    }
+  }
+}
+</script>

modules/account/components/Control/index.js

@@ -0,0 +1 @@
+export { default as Control } from './Control'