Merge pull request #30 from Volentix/separate_login

Separate login

Author: 4ban

quasar.conf.js

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

src/components/GeoWidget.vue

@@ -1,7 +1,7 @@
 <template>
   <div class='bg-vdark inset-shadow'>
-    <q-banner dense inline-actions class="text-vdark bg-vgreen">
-      The map widget is currently disabled, the data is artificial.
+    <q-banner dense inline-actions class="text-vdark bg-vpurple">
+      Live Nodes: The map widget is currently disabled, the data is artificial.
     </q-banner>
     <div id='map'></div>
     <div id='tooltip' class='hidden bg-vgrey'>
@@ -31,7 +31,6 @@ var countries = require('../assets/geoWidgetData/countries.geo.json')
 
 export default {
   name: 'GeoWidget',
-  props: ['geoData'],
   data () {
     return {
       nodeGeoData: []

src/css/app.styl

@@ -1,16 +1,20 @@
 @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap');
+
 .code {
   font-family: 'Source Code Pro', monospace;
 }
 .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

@@ -0,0 +1,47 @@
+<template>
+  <q-layout>
+    <q-page-container>
+      <q-page class="bg-vblack">
+        <div class="row">
+          <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-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-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>
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      privateKey: '',
+      isPwd: true
+    }
+  },
+  mounted () {
+    this.$refs.input.focus()
+  },
+  methods: {
+    login () {
+      this.$utils.login(this.privateKey)
+      this.privateKey = ''
+    }
+  }
+}
+</script>

src/pages/Login.vue

@@ -1,26 +1,27 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-
+import store from '../store'
 import routes from './routes'
 
 Vue.use(VueRouter)
 
-/*
- * If not building with SSR mode, you can
- * directly export the Router instantiation
- */
-
-export default function (/* { store, ssrContext } */) {
-  const Router = new VueRouter({
-    scrollBehavior: () => ({ x: 0, y: 0 }),
-    routes,
+const router = new VueRouter({
+  scrollBehavior: () => ({ x: 0, y: 0 }),
+  routes,
+  mode: process.env.VUE_ROUTER_MODE,
+  base: process.env.VUE_ROUTER_BASE
+})
 
-    // Leave these as is and change from quasar.conf.js instead!
-    // quasar.conf.js -> build -> vueRouterMode
-    // quasar.conf.js -> build -> publicPath
-    mode: process.env.VUE_ROUTER_MODE,
-    base: process.env.VUE_ROUTER_BASE
-  })
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(record => record.meta.requiresAuth)) {
+    if (store.getters.isLoggedIn) {
+      next()
+      return
+    }
+    next('/login')
+  } else {
+    next()
+  }
+})
 
-  return Router
-}
+export default router

src/router/index.js

@@ -2,7 +2,14 @@
 const routes = [
   {
     path: '/',
-    component: () => import('pages/Index.vue')
+    component: () => import('pages/Index.vue'),
+    meta: {
+      requiresAuth: true
+    }
+  },
+  {
+    path: '/login',
+    component: () => import('pages/Login.vue')
   }
 ]
 

src/router/routes.js

@@ -11,43 +11,75 @@ Vue.use(Vuex)
 
 function initialState () {
   return {
-    loggedIn: false
+    loggedIn: false,
+    identity: {
+      voted_i: [],
+      voted_for: []
+    }
   }
 }
 
 const store = new Vuex.Store({
   // plugins: [vuexPersist.plugin],
   state: initialState,
   getters: {
-    getLoggedIn: state => {
-      return state.loggedIn
-    }
+    isLoggedIn: state => state.loggedIn,
+    getIdentity: state => state.identity
   },
   mutations: {
-    resetState: (state) => {
+    logout: (state) => {
       Object.assign(state, initialState())
     },
+    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: {
-    // logout: (context) => {
-    //   return new Promise((resolve, reject) => {
-    //     context.commit('resetState')
-    //     resolve()
-    //   })
-    // },
-    // login: ({ context }, privateKey, publicKey, accountName) => {
-    //   console.log(privateKey, publicKey, accountName)
-    //   return new Promise((resolve, reject) => {
-    //     context.commit('setLoggedIn')
-    //     context.commit('setPrivateKey', privateKey)
-    //     context.commit('setPublicKey', publicKey)
-    //     context.commit('setAccountName', accountName)
-    //     resolve()
-    //   })
-    // }
+    login ({ commit }, data) {
+      return new Promise((resolve, reject) => {
+        commit('setPrivateKey', data.privateKey)
+        commit('setPublicKey', data.publicKey)
+        commit('setAccountName', data.accountName)
+        commit('setLoggedIn')
+        resolve()
+      })
+    },
+    logout ({ commit }) {
+      return new Promise((resolve, reject) => {
+        commit('logout')
+        resolve()
+      })
+    }
   }
 })
 

src/store/index.js

@@ -1,5 +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
@@ -66,10 +74,88 @@ function formatBytes (bytes, decimals) {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
 }
 
+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(error => {
+    userError(error, 'Login action: Saving')
+  })
+}
+
+function logout () {
+  store.dispatch('logout').then(() => {
+    router.push('/login')
+  })
+}
+
+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
+  getUniqueLocations,
+  login,
+  logout,
+  getInstaller
 }