diff --git a/vospace-ui-frontend/src/App.vue b/vospace-ui-frontend/src/App.vue index 4081bffc5ea36748f96ac05a207bd3af1a5d8d33..79f9a9f20880fab1079953cf8c2f426bb16071f3 100644 --- a/vospace-ui-frontend/src/App.vue +++ b/vospace-ui-frontend/src/App.vue @@ -31,6 +31,7 @@ export default { }, mounted() { this.$store.dispatch('loadJobs'); + this.$store.dispatch('loadUserInfo'); } } </script> diff --git a/vospace-ui-frontend/src/api/mock/data/user.json b/vospace-ui-frontend/src/api/mock/data/user.json new file mode 100644 index 0000000000000000000000000000000000000000..7a8e8c58480405b599ff0decc93cd08301188370 --- /dev/null +++ b/vospace-ui-frontend/src/api/mock/data/user.json @@ -0,0 +1,3 @@ +{ + "username": "anonymous" +} diff --git a/vospace-ui-frontend/src/api/mock/index.js b/vospace-ui-frontend/src/api/mock/index.js index ed27af48f484a5dccd3357f8d1f9a127dd4d81d9..7f031754583d083c5564d470f4767fc73124a6ff 100644 --- a/vospace-ui-frontend/src/api/mock/index.js +++ b/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); } } diff --git a/vospace-ui-frontend/src/api/server/index.js b/vospace-ui-frontend/src/api/server/index.js index 6162815c32fb0916150088678cf2ca694ff4906b..0c5e4a98868a220971c8a51cfae674cc78c26e5f 100644 --- a/vospace-ui-frontend/src/api/server/index.js +++ b/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); } } diff --git a/vospace-ui-frontend/src/components/TopMenu.vue b/vospace-ui-frontend/src/components/TopMenu.vue index 813bddffec7eaebde20c57045b895b76be7a9672..707c7e7b99f334107b3a57a2357911c6552d829e 100644 --- a/vospace-ui-frontend/src/components/TopMenu.vue +++ b/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> diff --git a/vospace-ui-frontend/src/store.js b/vospace-ui-frontend/src/store.js index 14255d7346a2fa59409141033bc77ac1b4e9601f..af99d795d10fa71e9a309188a963e985d841304c 100644 --- a/vospace-ui-frontend/src/store.js +++ b/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)); } } });