Complete redesign of the app. Add store, changed the flow.

Author: 4ban

quasar.conf.js

@@ -61,7 +61,8 @@ module.exports = function (ctx) {
         'QBanner',
         'QSpace',
         'QTooltip',
-        'QChatMessage'
+        'QChatMessage',
+        'QForm'
       ],
 
       directives: [

src/css/app.styl

@@ -6,12 +6,15 @@
 .blink {
   animation: blinker 1s linear infinite;
 }
-
 @keyframes blinker {
   50% {
     opacity: 0;
   }
 }
+.background-gradient {
+  background-image: linear-gradient(to bottom right, #00F7A9, #A000FD);
+}
+
 // app global css
 .bg-vgrey {
   background: #CECFD0;

src/pages/Index.vue

@@ -2,22 +2,23 @@
   <q-layout>
     <q-page-container>
       <q-page class="bg-vblack">
-        <q-icon name="fas fa-angle-right" class="text-vgreen fixed-center" style="font-size: 5rem;" />
         <div class="row">
-          <div class="col bg-vblack window-height q-pa-xl text-center">
-            <q-img src="statics/icons/icon-512x512.png" spinner-color="vgrey" style="height: 150px; max-width: 150px" />
-            <div class="text-h5 text-vgrey"><span class="text-weight-bolder">vDexNode</span> dashboard</div>
-            <div class="text-subtitle1 text-vgrey">Rent your computer to earn VTX</div>
+          <div class="col background-gradient q-pa-xl text-center window-height">
+            <q-img src="statics/icons/icon-512x512.png" spinner-color="vdark" style="height: 150px; max-width: 150px" />
+            <div class="text-h5 text-vdark"><span class="text-weight-bolder">vDexNode</span> dashboard</div>
+            <div class="text-subtitle1 text-vdark">Rent your computer to earn VTX</div>
           </div>
-          <div class="col bg-vgrey window-height q-pa-xl">
+          <div class="col bg-white q-pa-xl window-height">
             <div class="text-h5">Import private key</div>
             <div class="text-subtitle2">Please enter your private key below to start working with vDexNode Dashboard. We will never save or transmit your your key.</div>
-            <q-input dense v-model="privateKey" :type="isPwd ? 'password' : 'text'" counter color="vdark" ref="input" @keyup.enter="updatePrivate" >
-              <template v-slot:append>
-                <q-icon :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="isPwd = !isPwd" />
-              </template>
-            </q-input>
-            <q-btn color="black" unelevated rounded outline class="full-width q-mt-md" label="Continue" @click="login" />
+            <q-form @submit="login()">
+              <q-input dense v-model="privateKey" :type="isPwd ? 'password' : 'text'" counter color="vdark" ref="input" @keyup.enter="login" label="Your private key" :rules="[ val => val && val.length <= 51 || 'Wrong key']">
+                <template v-slot:append>
+                  <q-icon :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="isPwd = !isPwd" />
+                </template>
+              </q-input>
+              <q-btn color="black" :disabled="privateKey ? false: true" unelevated rounded outline class="full-width q-mt-md" label="Continue" type="submit" />
+            </q-form>
           </div>
         </div>
       </q-page>

src/pages/Login.vue

@@ -12,7 +12,10 @@ Vue.use(Vuex)
 function initialState () {
   return {
     loggedIn: false,
-    identity: {}
+    identity: {
+      voted_i: [],
+      voted_for: []
+    }
   }
 }
 
@@ -27,17 +30,46 @@ const store = new Vuex.Store({
     logout: (state) => {
       Object.assign(state, initialState())
     },
-    login: (state, privateKey) => {
+    setPrivateKey: (state, privateKey) => {
       state.identity.privateKey = privateKey
     },
+    setPublicKey: (state, publicKey) => {
+      state.identity.publicKey = publicKey
+    },
+    setAccountName: (state, accountName) => {
+      state.identity.accountName = accountName
+    },
     setLoggedIn: state => {
       state.loggedIn = true
+    },
+    setBalance: (state, balance) => {
+      state.identity.balance = balance
+    },
+    setRank: (state, rank) => {
+      state.identity.rank = rank
+    },
+    setTotalRanks: (state, total) => {
+      state.identity.totalRanks = total
+    },
+    setUptime: (state, uptime) => {
+      state.identity.uptime = uptime
+    },
+    setEarned: (state, earned) => {
+      state.identity.earned = earned
+    },
+    setVotedI: (state, data) => {
+      state.identity.voted_i = data
+    },
+    setVotedFor: (state, data) => {
+      state.identity.voted_for = data
     }
   },
   actions: {
-    login ({ commit }, privateKey) {
+    login ({ commit }, data) {
       return new Promise((resolve, reject) => {
-        commit('login', privateKey)
+        commit('setPrivateKey', data.privateKey)
+        commit('setPublicKey', data.publicKey)
+        commit('setAccountName', data.accountName)
         commit('setLoggedIn')
         resolve()
       })

src/store/index.js

@@ -1,6 +1,13 @@
+import Vue from 'vue'
 import { shell } from 'electron'
+import EosWrapper from '@/util/EosWrapper'
+import { userError } from '@/util/errorHandler'
+import { userResult } from '@/util/resultHandler'
+import axios from 'axios'
 import store from '@/store'
 import router from '@/router'
+const { app, dialog } = require('electron').remote
+const fs = require('fs')
 
 /**
  * Function returns an array with removed duplicates by any field in the object
@@ -67,11 +74,38 @@ function formatBytes (bytes, decimals) {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
 }
 
-function login (privateKey) {
-  store.dispatch('login', { privateKey }).then(() => {
+async function login (privateKey) {
+  try {
+    var eos = new EosWrapper(privateKey)
+    Vue.prototype.$eos = eos
+  } catch (error) {
+    userError(error, 'Login action: instance of EosWrapper')
+    throw error
+  }
+
+  try {
+    var publicKey = eos.privateToPublic(privateKey)
+  } catch (error) {
+    userError(error, 'Login action: get public key')
+    throw error
+  }
+
+  try {
+    let accounts = await eos.getAccounts(publicKey)
+    var accountName = accounts.account_names[0] ? accounts.account_names[0] : ''
+    if (!accountName) {
+      userError('Seems like you don\'t have an EOS account. An account is required to work with a vDexNode. Please create one using your public key.', 'Login action: get account name')
+      throw new Error('EOS account is required')
+    }
+  } catch (error) {
+    userError(error, 'Login action: get account name')
+    throw error
+  }
+
+  store.dispatch('login', { privateKey, publicKey, accountName }).then(() => {
     router.push('/')
-  }).catch(err => {
-    console.log(err)
+  }).catch(error => {
+    userError(error, 'Login action: Saving')
   })
 }
 
@@ -81,12 +115,47 @@ function logout () {
   })
 }
 
+function getInstaller () {
+  let way = process.env.NODE_WAY
+  if (way.includes('readme')) {
+    require('electron').shell.openExternal(process.env.README)
+  } else if (way.includes('installer')) {
+    axios({
+      method: 'get',
+      url: process.env.INSTALLER,
+      responseType: 'arraybuffer'
+    }).then(response => {
+      forceFileDownload(response)
+    }).catch((error) => {
+      userError(error, 'Get Installer action')
+      throw error
+    })
+  }
+}
+
+function forceFileDownload (response) {
+  var options = {
+    title: 'Save installer',
+    defaultPath: 'installer',
+    buttonLabel: 'Save',
+
+    filters: [
+      { name: 'sh', extensions: ['sh'] }
+    ]
+  }
+
+  dialog.showSaveDialog(options, (filename) => {
+    fs.writeFileSync(filename, response.data, 'utf-8')
+  })
+}
+
 export {
   getUnique,
   sortByKey,
   openExternal,
   formatBytes,
   getUniqueLocations,
   login,
-  logout
+  logout,
+  getInstaller
 }