Init login page. Updated router, store, login and logout features.

Author: 4ban

src/css/app.styl

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap');
+
 .code {
   font-family: 'Source Code Pro', monospace;
 }

src/pages/Index.vue

@@ -36,6 +36,7 @@
               </q-banner> -->
               <q-btn color="vgreen" class="text-vdark q-mx-xs" label="Get the vDex node" @click=getInstaller />
               <q-btn color="vdark" class="text-vgrey q-mx-xs" label="Chat" @click="chatDialog=true" />
+              <q-btn color="vdark" class="text-vgrey q-mx-xs" label="Logout" @click="$utils.logout()" />
             </div>
           </div>
         </div>

src/pages/Login.vue

@@ -0,0 +1,46 @@
+<template>
+  <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>
+          <div class="col bg-vgrey window-height q-pa-xl">
+            <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" />
+          </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/router/index.js

@@ -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/routes.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/store/index.js

@@ -11,43 +11,43 @@ Vue.use(Vuex)
 
 function initialState () {
   return {
-    loggedIn: false
+    loggedIn: false,
+    identity: {}
   }
 }
 
 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())
     },
+    login: (state, privateKey) => {
+      state.identity.privateKey = privateKey
+    },
     setLoggedIn: state => {
       state.loggedIn = true
     }
   },
   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 }, privateKey) {
+      return new Promise((resolve, reject) => {
+        commit('login', privateKey)
+        commit('setLoggedIn')
+        resolve()
+      })
+    },
+    logout ({ commit }) {
+      return new Promise((resolve, reject) => {
+        commit('logout')
+        resolve()
+      })
+    }
   }
 })
 

src/util/utils.js

@@ -1,5 +1,6 @@
 import { shell } from 'electron'
 import store from '@/store'
+import router from '@/router'
 
 /**
  * Function returns an array with removed duplicates by any field in the object
@@ -66,10 +67,26 @@ function formatBytes (bytes, decimals) {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
 }
 
+function login (privateKey) {
+  store.dispatch('login', { privateKey }).then(() => {
+    router.push('/')
+  }).catch(err => {
+    console.log(err)
+  })
+}
+
+function logout () {
+  store.dispatch('logout').then(() => {
+    router.push('/login')
+  })
+}
+
 export {
   getUnique,
   sortByKey,
   openExternal,
   formatBytes,
-  getUniqueLocations
+  getUniqueLocations,
+  login,
+  logout
 }