Displayed user info in UI

vospace-ui-frontend/src/App.vue

@@ -31,6 +31,7 @@ export default {
   },
   mounted() {
     this.$store.dispatch('loadJobs');
+    this.$store.dispatch('loadUserInfo');
   }
 }
 </script>

vospace-ui-frontend/src/api/mock/data/user.json

+{
+  "username": "anonymous"
+}

vospace-ui-frontend/src/api/mock/index.js

@@ -3,6 +3,8 @@ import folder1 from 'raw-loader!./data/nodes/folder1.html';
 import folder2 from 'raw-loader!./data/nodes/folder2.html';
 import job from './data/job';
 import jobs from './data/jobs';
+import user from './data/user';
+
 import store from '../../store';
 
 const fetch = (mockData, showLoading = true, time = 500) => {
@@ -40,5 +42,8 @@ export default {
   },
   loadJobs() {
     return fetch(jobs, false);
+  },
+  getUserInfo() {
+    return fetch(user, false);
   }
 }

vospace-ui-frontend/src/api/server/index.js

@@ -50,5 +50,27 @@ export default {
         'Cache-Control': 'no-cache'
       }
     }, true, true);
+  },
+  loadJobs() {
+    let url = BASE_API_URL + 'jobs';
+    return apiRequest({
+      method: 'GET',
+      url: url,
+      withCredentials: true,
+      headers: {
+        'Cache-Control': 'no-cache'
+      }
+    }, false, true);
+  },
+  getUserInfo() {
+    let url = BASE_API_URL + 'user';
+    return apiRequest({
+      method: 'GET',
+      url: url,
+      withCredentials: true,
+      headers: {
+        'Cache-Control': 'no-cache'
+      }
+    }, false, false);
   }
 }

vospace-ui-frontend/src/components/TopMenu.vue

@@ -3,6 +3,12 @@
   <b-navbar toggleable="lg" type="dark" id="top-menu">
     <b-navbar-brand href="#/" class="d-none d-md-block">VOSpace</b-navbar-brand>
     <JobsMenuItem />
+    <b-navbar-nav class="ml-auto">
+      <b-nav-item href="login" target="blank_" class="mr-4" v-if="user === 'anonymous'">Login</b-nav-item>
+      <b-nav-item-dropdown :text="user" right v-if="user !== 'anonymous'">
+        <b-dropdown-item href="vospace-logout">Logout</b-dropdown-item>
+      </b-nav-item-dropdown>
+    </b-navbar-nav>
   </b-navbar>
 </div>
 </template>
@@ -13,6 +19,9 @@ import JobsMenuItem from './JobsMenuItem.vue';
 export default {
   components: {
     JobsMenuItem
+  },
+  computed: {
+    user() { return this.$store.state.user }
   }
 }
 </script>

vospace-ui-frontend/src/store.js

@@ -12,7 +12,8 @@ export default new Vuex.Store({
     path: '',
     loading: true,
     tapeButtonEnabled: false,
-    jobs: []
+    jobs: [],
+    user: 'anonymous'
   },
   mutations: {
     setLoading(state, loading) {
@@ -37,6 +38,9 @@ export default new Vuex.Store({
     },
     addJob(state, job) {
       state.jobs.push(job);
+    },
+    setUsername(state, username) {
+      state.user = username;
     }
   },
   actions: {
@@ -72,6 +76,10 @@ export default new Vuex.Store({
     loadJobs({ commit }) {
       client.loadJobs()
         .then(jobs => commit('setJobs', jobs));
+    },
+    loadUserInfo({ commit }) {
+      client.getUserInfo()
+        .then(res => commit('setUsername', res.username));
     }
   }
 });