[MAJOR] #300: Shibb auth (#308)

* #300: Add names for each container * 🔥[hotfix]: FE Bug fixes * 🔥[hotfix]: Linter fixes * #300: BE auth service setup * #300: Refactor FE with auth flow implementation * #300: Add auth service to proxy * #300: Update docker environment variables * #300: Linter fix * #300: Refactor failing component and fix test failures * #300: Fixed merged conflict * #300: Add additional logger to auth service * #300: Add additional logger to auth service * #300: Remove unused logger from auth service * #300: Remove unused logger from auth service * #300: Update failed auth response * #300: Refactor login button * #300: Remove sparql query menu * #300: Update logout actions * #300: Update unit test assertions * #300: Remove skipped unit test
Duke-MatSci · Feb 21, 2023 · 9b330bc · 9b330bc
1 parent bfc31fc
commit 9b330bc
Show file tree

Hide file tree

Showing 39 changed files with 960 additions and 345 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/src/assets/css/modules/_button.scss b/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;
+    }
+}
diff --git a/app/src/assets/css/modules/_visualize.scss b/app/src/assets/css/modules/_visualize.scss
@@ -38,10 +38,6 @@
         }
         &-right {
             right: 0;
-
-            @include respond(phone) {
-                right: -0.5rem;
-            }
         }
     }
 
@@ -61,6 +57,10 @@
                 margin: 4rem 0 1.4rem 0;
             }
 
+            @include respond(tab-port){
+                margin: -1.4rem 0 1.4rem 0;
+            }
+
             @include respond(phone){
                 font-size: 2.8rem;
                 margin: 1rem 0 1rem 0;

diff --git a/app/src/auth/auth.vue b/app/src/auth/auth.vue
@@ -0,0 +1,9 @@
+<template><div></div></template>
+<script>
+export default {
+  name: 'Auth',
+  created () {
+    return this.$store.dispatch('auth/authProcessor', this.$route.params.auth)
+  }
+}
+</script>
diff --git a/app/src/components/Drawer.vue b/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" @click="$store.dispatch('auth/logout')">
         <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>
diff --git a/app/src/components/Snackbar.vue b/app/src/components/Snackbar.vue
@@ -1,11 +1,9 @@
 <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>
       </span>
     </md-snackbar>
   </div>
@@ -26,7 +24,8 @@ export default {
     return {
       show: false,
       message: '',
-      action: null
+      action: null,
+      duration: false
     }
   },
   computed: {
@@ -41,7 +40,10 @@ export default {
     // If an action has been passed through vuex as a callback, call it
     callAction () {
       if (this.action) {
+        // Toggle the snackbar before calling the action to reload it's timer
+        this.show = false
         this.action()
+        this.show = false
       }
     }
   },
@@ -51,6 +53,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', '')
       }

diff --git a/app/src/components/explorer/Header.vue b/app/src/components/explorer/Header.vue
@@ -11,38 +11,45 @@
         </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"> 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>
+          <!-- Add _ to _menutabs as this is just a class selector for testing purposes only -->
+          <md-tab class="_menutabs" to="/explorer" id="tab-home" md-label="Search" exact> </md-tab>
+          <md-tab class="_menutabs" to="/explorer/visualization" id="tab-visualization" md-label="Visualization" exact> </md-tab>
+          <md-tab class="_menutabs" to="/explorer/curate" id="tab-curate" md-label="Curate" exact> </md-tab>
+          <md-tab class="_menutabs" to="/explorer/parameterized_query" id="tab-query" md-label="Parameterized Query" exact> </md-tab>
+          <!-- <md-tab class="_menutabs" 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']

diff --git a/app/src/components/nanomine/PageHeader.vue b/app/src/components/nanomine/PageHeader.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <md-app-toolbar class="md-dense md-primary" id="reset_bg">
-            <div class="md-toolbar-row">
+            <div class="md-toolbar-row viz-u-postion__rel">
                 <div class="md-toolbar-section-start">
                     <md-button class="md-icon-button" @click="toggler">
                         <md-icon>menu</md-icon>
@@ -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>
+                                <span class="nav_menu--siblings-lists" @click="$store.dispatch('auth/logout')"><a id="authmenu">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" id="authmenu">Login/Register</a>
                         </div>
                     </div>
                 </div>
@@ -47,7 +47,7 @@
             </div>
             <div class="section_banner__nav">
                 <nav class="nav_menu">
-                    <ul class="nav_ul">
+                    <ul>
                         <li class="u_margin-right-small">
                             <div class="nav_menu--container">
                                 <a class="u--default-size nav_menu--handler" href="#">About</a>
@@ -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'
     })
   }
 }

diff --git a/app/src/mixins/explorerSearch.js b/app/src/mixins/explorerSearch.js
@@ -6,26 +6,21 @@ import { mapMutations, mapGetters } from 'vuex'
  * Both: 'Keyword Search' & 'Autosuggest'
  */
 export default {
-  data () {
-    return {
-      enableAutosuggest: true
-    }
-  },
   computed: {
     searchWord: {
       get () {
         return this.$store.getters['explorer/getSearchKeyword']
       },
       async set (payload) {
-        this.enableAutosuggest = true
+        await this.$store.commit('explorer/setEnableAutosuggest', true)
         await this.$store.commit('explorer/setSearchKeyword', payload)
         await this.requestSearch(payload)
       }
     },
     searchEnabled () {
       return this.$store.getters['explorer/getSearching']
     },
-    ...mapGetters({ suggestions: 'explorer/results/getSuggestions' })
+    ...mapGetters({ suggestions: 'explorer/results/getSuggestions', enableAutosuggest: 'explorer/getAutosuggest' })
   },
   methods: {
     ...mapMutations('explorer', ['setResultsTab', 'setSearching', 'setSearchKeyword']),

diff --git a/app/src/pages/NotFound.vue b/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>

diff --git a/app/src/pages/explorer/Home.vue b/app/src/pages/explorer/Home.vue
@@ -1,7 +1,5 @@
 <template>
 	<div @click="disableRender">
-		<!-- <facet-panel :searchEnabled="searchEnabled" class="facet_panel" /> -->
-		<facet-panel class="facet_panel" />
 		<div class="section_teams" v-if="!searchEnabled">
 			<div class="search_box">
 				<h2 class="search_box_header">Welcome to MM Explorer</h2>
@@ -54,7 +52,6 @@
 
 <script>
 import explorerSearch from '@/mixins/explorerSearch'
-import FacetPanel from '@/components/explorer/Facet.vue'
 import SearchHeader from '@/components/explorer/SearchHeader.vue'
 import SearchResultsTable from '@/components/explorer/SearchResultsTable.vue'
 
@@ -71,19 +68,14 @@ export default {
     }
   },
   components: {
-    FacetPanel,
     SearchHeader,
     SearchResultsTable
   },
-  // Todo: Remove later! This is not required anymore. It feeds the facet dialog with materials data
-  //   async mounted () {
-  //     await this.$store.dispatch('explorer/facetFilterMaterials')
-  //   },
   methods: {
     async disableRender (e) {
       const selected = e.target.closest('.search_box')
       if (!selected) {
-        this.enableAutosuggest = false
+        await this.$store.commit('explorer/setEnableAutosuggest', false)
       }
     }
   }

diff --git a/app/src/pages/explorer/parameterized-query/parameterized-query-page.vue b/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">

diff --git a/app/src/pages/metamine/Base.vue b/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