#300: Refactor FE with auth flow implementation

app/src/assets/css/modules/_button.scss

@@ -132,3 +132,18 @@ a.btn-text,
         transform: translateY(0);
     }
 }
+
+.md-icon-button.large {
+    width: 140px;
+    min-width: 120px;
+    text-align: right;
+    @include respond(tab-land){
+        width: 120px;
+        min-width: 100px;
+    }
+
+    &:hover {
+        text-decoration: none;
+        cursor: pointer;
+    }
+}

app/src/auth/auth.vue

@@ -0,0 +1,9 @@
+<template></template>
+<script>
+export default {
+  name: 'Auth',
+  created() {
+	return this.$store.dispatch('auth/authProcessor', this.$route.params.auth)
+  }
+}
+</script>

app/src/components/Drawer.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <md-toolbar class="md-transparent" md-elevation="0">Welcome Stewart</md-toolbar>
+    <md-toolbar class="md-transparent" md-elevation="0">Welcome {{ name }}</md-toolbar>
     <md-list md-expand-single=true class="utility-transparentbg">
       <md-list-item md-expand>
         <md-icon class="utility-navfonticon">home</md-icon>
@@ -83,19 +83,26 @@
           </router-link>
         </md-list>
       </md-list-item>
-      <md-list-item>
+      <md-list-item v-if="isAuth">
         <md-icon class="utility-navfonticon">logout</md-icon>
         <span class="md-list-item-text utility-navfont">Log out</span>
       </md-list-item>
-      <md-list-item>
+      <md-list-item v-if="!isAuth">
         <md-icon class="utility-navfonticon">login</md-icon>
-        <span class="md-list-item-text utility-navfont">Login</span>
+        <span class="md-list-item-text utility-navfont"><a href="/secure">Login</a></span>
       </md-list-item>
     </md-list>
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex'
 export default {
-  name: 'Drawers'
+  name: 'Drawers',
+  computed: {
+    ...mapGetters({
+      isAuth: 'auth/isAuthenticated',
+      name: 'auth/displayName',
+    })
+  },
 }
 </script>

app/src/components/Snackbar.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <md-snackbar :md-position="position" :md-active.sync="show">
+    <md-snackbar :md-position="position" :md-active.sync="show" :md-duration="!duration ? Infinity : duration">
       {{message}}
       <span>
-        <md-button v-if="action" id="snackbarAction" class="md-primary" @click.native="callAction">Retry</md-button>
-        <md-button v-else id="snackbarRefresh" class="md-primary" @click.native="refresh">Refresh</md-button>
-        <md-button id="snackbarClose" class="md-primary" @click.native="show = false">Close</md-button>
+        <md-button v-if="action && !duration" id="snackbarAction" class="md-primary" @click.native="callAction">Retry</md-button>
+        <!-- <md-button v-else id="snackbarRefresh" class="md-primary" @click.native="refresh">Refresh</md-button>
+        <md-button id="snackbarClose" class="md-primary" @click.native="show = false">Close</md-button> -->
       </span>
     </md-snackbar>
   </div>
@@ -26,7 +26,8 @@ export default {
     return {
       show: false,
       message: '',
-      action: null
+      action: null,
+      duration: false
     }
   },
   computed: {
@@ -51,6 +52,7 @@ export default {
         this.show = true
         this.message = this.snackbar.message
         this.action = this.snackbar.action || null
+        this.duration = val.duration ? val.duration : false
         // Reset
         this.$store.commit('setSnackbar', '')
       }

app/src/components/explorer/Header.vue

@@ -11,38 +11,46 @@
         </div>
 
         <div class="md-toolbar-section-end">
-          <md-badge id="header-badge" class="md-primary" md-content="12">
+          <md-badge v-if="isAuth && showBadge" id="header-badge" class="md-primary" md-content="12">
             <md-button class="md-icon-button">
-              <md-icon>person</md-icon>
+              Hi {{ displayName }}
             </md-button>
           </md-badge>
+          <md-button v-if="isAuth" class="md-icon-button">
+            Hi {{ displayName }}
+          </md-button>
+          <a v-if="!isAuth" class="md-icon-button large" href="/secure">
+            Login
+          </a>
         </div>
       </div>
       <!-- Toolbar -->
       <div class="md-toolbar-row u_margin-top-med">
-        <md-tabs class="md-primary" id="reset_tab_bg">
-          <router-link  class="tabs" to="/explorer" v-slot="{navigate, href}" custom>
-            <md-tab :href="href" @click="href === '/explorer' ? setSearching : navigate" id="tab-home" md-label="Search"> </md-tab>
-          </router-link>
-          <router-link class="tabs" to="/explorer/visualization" v-slot="{navigate, href}" custom>
-            <md-tab :href="href" @click="navigate" id="tab-visualization" md-label="Visualization"> </md-tab>
-          </router-link>
-          <router-link class="tabs" to="/explorer/curate" v-slot="{navigate, href}" custom>
-            <md-tab :href="href" @click="navigate" id="tab-curate" md-label="Curate"> </md-tab>
-          </router-link>
-          <router-link class="tabs" to="/explorer/parameterized_query" v-slot="{navigate, href}" custom>
-            <md-tab :href="href" @click="navigate" id="tab-query" md-label="Parameterized Query"> </md-tab>
-          </router-link>
+        <md-tabs class="md-primary" id="reset_tab_bg" md-sync-route>
+          <md-tab to="/explorer" id="tab-home" md-label="Search" exact> </md-tab>
+          <md-tab to="/explorer/visualization" id="tab-visualization" md-label="Visualization" exact> </md-tab>
+          <md-tab to="/explorer/curate" id="tab-curate" md-label="Curate" exact> </md-tab>
+          <md-tab to="/explorer/parameterized_query" id="tab-query" md-label="Parameterized Query" exact> </md-tab>
+          <md-tab to="/explorer/sparql" id="tab-sparql" md-label="Sparql Query" exact> </md-tab>
         </md-tabs>
       </div>
     </md-app-toolbar>
   </div>
 </template>
+
 <script>
+import { mapGetters } from 'vuex'
 export default {
   name: 'ExpHeader',
   props: ['toggler'],
+  data() {
+    return { showBadge: false }
+  },
   computed: {
+    ...mapGetters({
+      isAuth: 'auth/isAuthenticated',
+      displayName: 'auth/displayName',
+    }),
     searchTerm: {
       get () {
         return this.$store.getters['explorer/getSearchKeyword']

app/src/components/nanomine/PageHeader.vue

@@ -14,21 +14,21 @@
                 <div class="md-toolbar-section-end header_nav">
                     <div class="nav nav_menu u--inline">
                         <ul>
-                            <li><a href="/nm">NanoMine</a></li>
-                            <li><a href="/mm">MetaMine</a></li>
+                            <li><router-link to="/nm" v-slot="{navigate, href}" custom><a :href="href" @click="navigate">NanoMine</a></router-link></li>
+                            <li><router-link to="/mm" v-slot="{navigate, href}" custom><a :href="href" @click="navigate">Metamine</a></router-link></li>
                         </ul>
                     </div>
                     <div class="u--inline">
-                        <div v-if="$store.getters.isAuthenticated" class="nav_menu--container">
+                        <div v-if="isAuth" class="nav_menu--container">
                             <a class="u--default-size nav_menu--handler" style="color:#fff; font-size:1.2rem !important;">
-                                <i class="material-icons" style="vertical-align: middle;">perm_identity</i>
+                                Hi {{ displayName }}
                             </a>
                             <div class="nav_menu--siblings nav_menu--sibheader">
                                 <span class="nav_menu--siblings-lists" @click="$store.dispatch('logout')"><a>Logout</a></span>
                             </div>
                         </div>
                         <div v-else>
-                            <a class="btn btn--tertiary btn--noradius">Login/Register</a>
+                            <a class="btn btn--tertiary btn--noradius" href="/secure">Login/Register</a>
                         </div>
                     </div>
                 </div>
@@ -97,7 +97,7 @@
                                 </div>
                             </div>
                         </li>
-                        <li class="u_margin-right-small" v-if="$store.getters.isAuthenticated">
+                        <li class="u_margin-right-small" v-if="isAuth">
                             <div class="nav_menu--container">
                                 <a class="u--default-size" href="/mypage">My Portal</a>
                             </div>
@@ -115,7 +115,9 @@ export default {
   props: ['toggler'],
   computed: {
     ...mapGetters({
-      info: 'appHeaderInfo'
+      info: 'appHeaderInfo',
+      isAuth: 'auth/isAuthenticated',
+      displayName: 'auth/displayName',
     })
   }
 }

app/src/pages/NotFound.vue

@@ -18,16 +18,17 @@
                         </ul>
                     </div>
                     <div class="u--inline">
-                        <div v-if="$store.getters.isAuthenticated" class="nav_menu--container">
+                        <div v-if="$store.getters['auth/isAuthenticated']" class="nav_menu--container">
                             <a class="u--default-size nav_menu--handler" style="color:#fff; font-size:1.2rem !important;">
                                 <i class="material-icons" style="vertical-align: middle;">perm_identity</i>
+                                {{ $store.getters['auth/displayName'] }}
                             </a>
                             <div class="nav_menu--siblings nav_menu--sibheader">
                                 <span class="nav_menu--siblings-lists" @click="$store.dispatch('logout')"><a>Logout</a></span>
                             </div>
                         </div>
                         <div v-else>
-                            <a class="btn btn--tertiary btn--noradius">Login/Register</a>
+                            <a class="btn btn--tertiary btn--noradius" href="/secure">Login/Register</a>
                         </div>
                     </div>
                 </div>

app/src/pages/explorer/parameterized-query/parameterized-query-page.vue

@@ -70,7 +70,7 @@
       </div>
       <div class="results">
         <accordion
-          :startOpen="true"
+          :startOpen="false"
           title="SPARQL Results"
         >
           <div class="results-controls">

app/src/pages/metamine/Base.vue

@@ -47,9 +47,12 @@
                         </li>
                         <li>
                           <div class="nav_menu--container">
-                            <a class="u--default-size nav_menu--handler" href="#">
+                            <a v-if="!isAuth" class="u--default-size nav_menu--handler" href="/secure">
                               <md-icon class="metamine_menu-icon">person</md-icon> LOGIN/REGISTER
                             </a>
+                            <a v-else class="u--default-size nav_menu--handler" @click="$store.dispatch('logout')">
+                              Hi {{ displayName }}
+                            </a>
                           </div>
                         </li>
                       </ul>
@@ -68,12 +71,19 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import Drawers from '@/components/Drawer.vue'
 export default {
   name: 'MetamineBase',
   components: {
     Drawers
   },
+  computed: {
+    ...mapGetters({
+      isAuth: 'auth/isAuthenticated',
+      displayName: 'auth/displayName',
+    })
+  },
   data () {
     return {
       toggleMenuVisibility: false

app/src/router/index.js

@@ -37,6 +37,10 @@ const routes = [
       ...explorerRoutes
     ]
   },
+  {
+    path: '/auth/:auth',
+    component: () => import('@/auth/auth.vue'),
+  },
   { path: '/explorer:notFound(.*)', component: NotFound },
   { path: '/mm:notFound(.*)', component: NotFound },
   { path: '/nm:notFound(.*)', component: NotFound },
@@ -46,7 +50,7 @@ const routes = [
 const router = new VueRouter({
   mode: 'history',
   routes,
-  scrollBehavior (to, from, prevPosition) {
+  scrollBehavior (to, _, prevPosition) {
     if (prevPosition) {
       return prevPosition
     }
@@ -60,11 +64,22 @@ const router = new VueRouter({
   }
 })
 
-router.beforeEach(function (to, _, next) {
-  if (to.meta.requiresAuth && !store.getters.isAuthenticated) {
-    next('/') // TODO: Develop auth component
-  } else if (to.meta.requiresUnauth && store.getters.isAuthenticated) {
-    next('/')
+router.beforeEach(async function (to, _, next) {
+  if (to.meta.requiresAuth && !store.getters['auth/isAuthenticated']) {
+    if (!store.getters['auth/isAuthenticated']) {
+      store.commit('setSnackbar', {
+        message: 'Re-authenticating...',
+        duration: 1500
+      }, { root: true })
+
+      await store.dispatch('auth/tryLogin')
+      if(store.getters['auth/isAuthenticated']) {
+        next()
+      }
+    }
+    next(false)
+  } else if (to.meta.requiresUnauth && store.getters.auth.isAuthenticated) {
+    next()
   } else {
     next()
   }

app/src/router/module/explorer.js

@@ -170,7 +170,7 @@ const explorerRoutes = [
       import(
         '@/pages/explorer/parameterized-query/parameterized-query-page.vue'
       ),
-    meta: { requiresAuth: false }
+    meta: { requiresAuth: true }
   }
 ]