Skip to content

Commit

Permalink
gh-37: Connect the Header, Landing Page and Router to the vuex …
Browse files Browse the repository at this point in the history 
…store

This fixes #37
  • Loading branch information
@dinukadesilva
dinukadesilva committed Nov 30, 2020
1 parent 0bf8024 commit 17750ce
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 114 deletions.
49 changes: 23 additions & 26 deletions custos-demo-gateway/src/components/Header.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div v-if="showHeader()">
<div v-if="authenticated">
<div class="header p-3">
<div class="custos-logo">
<img src="../assets/custos-logo_custos-logo-color-v1.png" style="width: 140px;">
Expand Down Expand Up @@ -62,52 +62,43 @@

<script>
import config from "@/config";
import {mapGetters} from 'vuex';
import store from "../store"
export default {
name: "Header",
store: store,
data: function () {
return {
isAdmin: false,
user: null,
authenticated: false
user: null
}
},
computed: {
...mapGetters({
authenticated: 'identity/isAuthenticated',
currentUserName: 'identity/getCurrentUserName',
})
},
methods: {
showHeader() {
return this.authenticated
},
async logout() {
await this.$store.dispatch('identity/logout', {
client_id: config.value('clientId'),
client_sec: config.value('clientSec'),
})
await this.$router.push("/")
await this.$store.dispatch('agent/reset')
await this.$store.dispatch('group/reset')
await this.$store.dispatch('secret/reset')
await this.$store.dispatch('sharing/reset')
await this.$store.dispatch('user/reset')
},
async validateAuthentication() {
this.authenticated = await this.$store.dispatch('identity/isAuthenticated', {
client_id: config.value('clientId'),
client_sec: config.value('clientSec')
}) === true
return this.authenticated
},
async fetchAuthenticatedUser() {
this.isAdmin = await this.$store.dispatch('identity/isLoggedUserHasAdminAccess')
let currentUserName = await this.$store.dispatch('identity/getCurrentUserName')
if (await this.validateAuthentication() && (!this.user || this.user.username !== currentUserName)) {
if (await this.validateAuthentication() && (!this.user || this.user.username !== this.currentUserName)) {
let resp = await this.$store.dispatch('user/users', {
offset: 0,
limit: 1,
client_id: config.value('clientId'),
client_sec: config.value('clientSec'),
username: currentUserName
username: this.currentUserName
})
if (Array.isArray(resp) && resp.length > 0) {
resp.forEach(obj => {
Expand All @@ -126,12 +117,18 @@
}
},
watch: {
$route() {
this.authenticated = false
this.fetchAuthenticatedUser()
async authenticated() {
if (this.authenticated !== true) {
await this.$router.push('/')
}
},
currentUserName() {
if (this.currentUserName) {
this.fetchAuthenticatedUser()
}
}
},
async beforeMount() {
beforeMount() {
this.fetchAuthenticatedUser()
}
}
Expand Down
54 changes: 24 additions & 30 deletions custos-demo-gateway/src/components/landing/Landing.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,13 @@
</template>

<script>
import config from "@/config";
import {mapGetters} from "vuex";
import store from "@/store";
export default {
name: 'Landing',
store: store,
props: {
msg: String,
seen: Boolean,
Expand All @@ -71,32 +72,27 @@
return {
username: "",
password: "",
custosId: null,
custosSec: null,
loginDisabled: false,
redirectURI: null,
loginError: false
}
},
computed: {
...mapGetters({
authenticated: 'identity/isAuthenticated'
})
},
methods: {
async login() {
this.loginDisabled = true
if (this.username != null && this.username != '' && this.password != null && this.password != '') {
let params = {
client_id: this.custosId, client_sec: this.custosSec, username: this.username,
password: this.password, token_endpoint: this.tokenEndpoint
client_id: config.value('clientId'),
client_sec: config.value('clientSec'),
username: this.username,
password: this.password,
token_endpoint: "https://custos.scigap.org/apiserver/identity-management/v1.0.0/token"
};
let data = {
client_id: this.custosId,
client_sec: this.custosSec
}
await this.$store.dispatch('identity/authenticateLocally', params)
let resp = await this.$store.dispatch('identity/isAuthenticated', data)
if (resp) {
await this.$router.push('workspace')
} else {
this.loginError = true
}
await this.$store.dispatch('identity/authenticateLocally', params);
} else {
this.loginError = true
}
Expand All @@ -106,28 +102,26 @@
this.loginError = false
},
async loadAuthURL() {
let params = {client_id: this.custosId, redirect_uri: this.redirectURI};
let params = {client_id: this.custosId, redirect_uri: config.value('redirectURI')};
await this.$store.dispatch('identity/fetchAuthorizationEndpoint', params)
window.location.href = this.$store.getters['identity/getAuthorizationEndpoint']
}
},
async mounted() {
this.custosId = config.value('clientId')
this.custosSec = config.value('clientSec')
this.redirectURI = config.value('redirectURI')
this.tokenEndpoint = "https://custos.scigap.org/apiserver/identity-management/v1.0.0/token"
let data = {
client_id: this.custosId,
client_sec: this.custosSec
}
if (await store.dispatch('identity/isAuthenticated', data) === true) {
await this.$router.push('workspace')
watch: {
authenticated() {
if (this.authenticated === true) {
this.$router.push('workspace')
}
}
},
mounted() {
if (this.authenticated === true) {
this.$router.push('workspace')
}
}
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h2 {
Expand Down
74 changes: 33 additions & 41 deletions custos-demo-gateway/src/router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Vue from "vue";
import Router from "vue-router";
import Landing from "./components/landing/Landing.vue";
import store from './store/index'

import config from "@/config";

Vue.use(Router)

Expand All @@ -24,11 +24,10 @@ export default new Router({
path: "/workspace",
name: "workspace",
beforeEnter: async (to, from, next) => {
let data = {
client_id: process.env.VUE_APP_CLIENT_ID,
client_sec: process.env.VUE_APP_CLIENT_SEC
}
if (await store.dispatch('identity/isAuthenticated', data) == true) {
if (await store.dispatch('identity/isAuthenticated', {
client_id: config.value('clientId'),
client_sec: config.value('clientSec'),
}) === true) {
// You can use store variable here to access globalError or commit mutation
next(true)
} else {
Expand All @@ -42,11 +41,10 @@ export default new Router({
path: "/workspace/groups",
name: "groups",
beforeEnter: async (to, from, next) => {
let data = {
client_id: process.env.VUE_APP_CLIENT_ID,
client_sec: process.env.VUE_APP_CLIENT_SEC
}
if (await store.dispatch('identity/isAuthenticated', data) == true) {
if (await store.dispatch('identity/isAuthenticated', {
client_id: config.value('clientId'),
client_sec: config.value('clientSec'),
}) === true) {
// You can use store variable here to access globalError or commit mutation
next(true)
} else {
Expand All @@ -60,11 +58,10 @@ export default new Router({
path: "/workspace/profile",
name: "profile",
beforeEnter: async (to, from, next) => {
let data = {
client_id: process.env.VUE_APP_CLIENT_ID,
client_sec: process.env.VUE_APP_CLIENT_SEC
}
if (await store.dispatch('identity/isAuthenticated', data) == true) {
if (await store.dispatch('identity/isAuthenticated', {
client_id: config.value('clientId'),
client_sec: config.value('clientSec'),
}) === true) {
// You can use store variable here to access globalError or commit mutation
next(true)
} else {
Expand All @@ -78,11 +75,10 @@ export default new Router({
path: "/workspace/logs",
name: "logs",
beforeEnter: async (to, from, next) => {
let data = {
client_id: process.env.VUE_APP_CLIENT_ID,
client_sec: process.env.VUE_APP_CLIENT_SEC
}
if (await store.dispatch('identity/isAuthenticated', data) == true) {
if (await store.dispatch('identity/isAuthenticated', {
client_id: config.value('clientId'),
client_sec: config.value('clientSec'),
}) === true) {
// You can use store variable here to access globalError or commit mutation
next(true)
} else {
Expand All @@ -96,11 +92,10 @@ export default new Router({
path: "/workspace/secrets",
name: "secrets",
beforeEnter: async (to, from, next) => {
let data = {
client_id: process.env.VUE_APP_CLIENT_ID,
client_sec: process.env.VUE_APP_CLIENT_SEC
}
if (await store.dispatch('identity/isAuthenticated', data) == true) {
if (await store.dispatch('identity/isAuthenticated', {
client_id: config.value('clientId'),
client_sec: config.value('clientSec'),
}) === true) {
// You can use store variable here to access globalError or commit mutation
next(true)
} else {
Expand All @@ -114,11 +109,10 @@ export default new Router({
path: "/workspace/sharings",
name: "sharings",
beforeEnter: async (to, from, next) => {
let data = {
client_id: process.env.VUE_APP_CLIENT_ID,
client_sec: process.env.VUE_APP_CLIENT_SEC
}
if (await store.dispatch('identity/isAuthenticated', data) == true) {
if (await store.dispatch('identity/isAuthenticated', {
client_id: config.value('clientId'),
client_sec: config.value('clientSec'),
}) === true) {
// You can use store variable here to access globalError or commit mutation
next(true)
} else {
Expand All @@ -132,11 +126,10 @@ export default new Router({
path: "/workspace/users",
name: "users",
beforeEnter: async (to, from, next) => {
let data = {
client_id: process.env.VUE_APP_CLIENT_ID,
client_sec: process.env.VUE_APP_CLIENT_SEC
}
if (await store.dispatch('identity/isAuthenticated', data) == true) {
if (await store.dispatch('identity/isAuthenticated', {
client_id: config.value('clientId'),
client_sec: config.value('clientSec'),
}) === true) {
// You can use store variable here to access globalError or commit mutation
next(true)
} else {
Expand All @@ -150,11 +143,10 @@ export default new Router({
path: "/workspace/agents",
name: "agents",
beforeEnter: async (to, from, next) => {
let data = {
client_id: process.env.VUE_APP_CLIENT_ID,
client_sec: process.env.VUE_APP_CLIENT_SEC
}
if (await store.dispatch('identity/isAuthenticated', data) == true) {
if (await store.dispatch('identity/isAuthenticated', {
client_id: config.value('clientId'),
client_sec: config.value('clientSec'),
}) === true) {
// You can use store variable here to access globalError or commit mutation
next(true)
} else {
Expand Down
Loading

0 comments on commit 17750ce

Please sign in to comment.