diff --git a/package-lock.json b/package-lock.json index 2cba43c..bbbd796 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12881,6 +12881,11 @@ } } }, + "vue-cookies": { + "version": "1.5.13", + "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.5.13.tgz", + "integrity": "sha512-8pjpXnvbNWx1Lft0t3MJnW+ylv0Wa2Tb6Ch617u/pQah3+SfXUZZdkh3EL3bSpe/Sw2Wdw3+DhycgQsKANSxXg==" + }, "vue-flag-icon": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/vue-flag-icon/-/vue-flag-icon-1.0.6.tgz", diff --git a/package.json b/package.json index b1f3027..6039e56 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "vue": "^2.6.6", "vue-axios": "^2.1.4", "vue-class-component": "^6.0.0", + "vue-cookies": "^1.5.13", "vue-flag-icon": "^1.0.6", "vue-i18n": "^8.9.0", "vue-property-decorator": "^7.0.0", diff --git a/src/api/index.ts b/src/api/index.ts index eca273f..70ce73d 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -15,7 +15,7 @@ export function saveSurveyResponse (surveyResponse: any) { } export function postNewSurvey (survey: any, jwt: any) { - return axios.post(`${API_URL}/surveys/`, survey, { headers: { Authorization: `Bearer: ${jwt}` } }) + return axios.post(`${API_URL}/surveys/`, survey, { headers: { Authorization: `Bearer ${jwt}` } }) } export function authenticate (userData: any) { @@ -26,6 +26,21 @@ export function register (userData: any) { return axios.post(`${API_URL}/auth/register`, userData) } +// This function probably isn't really useful here, as a user must be redirected to the actual OIDC provider. +// -> So login involves user interaction through the frontend (and not just API calls). +export function oidc_login (redirection_url: any) { + return axios.get(`${API_URL}/auth/oidc`, redirection_url) +} + +export function getFreshToken (refresh_token: any) { + return axios.get(`${API_URL}/auth/fresh`, refresh_token) +} + export function getProviders () { return axios.get(`${API_URL}/auth/providers`) -} \ No newline at end of file +} + +export function fetchUsers (jwt: any) { + console.log("JWT: " + jwt); + return axios.get(`${API_URL}/v1/user`, { headers: { Authorization: `Bearer ${jwt}` } }) +} diff --git a/src/components/Login.vue b/src/components/Login.vue index 9fdfe83..f9a5757 100644 --- a/src/components/Login.vue +++ b/src/components/Login.vue @@ -13,6 +13,15 @@ {{ index }} ({{provider.type}}) + +

Users

+ + + OIDC with redirect
@@ -61,6 +70,9 @@ this.$store.dispatch('register', { email: this.email, password: this.password }) .then(() => this.$router.push('/')); }, + oidc_login () { + this.$store.dispatch('oidc_login', "\\oidc_login_redirection"); + }, }, mounted () { EventBus.$on('failedRegistering', (msg) => { @@ -72,12 +84,28 @@ EventBus.$on('loginProvidersLoaded', (providers) => { this.loginProviders = providers; }); + EventBus.$on('storedTokens', () => { + this.$store.dispatch('loadUsers'); + }); + this.$store.dispatch('loadLoginProviders'); + + // get tokens + if(this.$cookies.isKey("tokens")){ + this.$store.dispatch('storeTokens', JSON.parse(atob(this.$cookies.get("tokens")))); + this.$cookies.remove("tokens"); + } + console.log(this.$cookies.keys()); }, beforeDestroy () { EventBus.$off('failedRegistering'); EventBus.$off('failedAuthentication'); }, + computed: { + users () { + return this.$store.state.users; + }, + }, } diff --git a/src/main.ts b/src/main.ts index b7492a9..9a9e1bc 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,6 +4,7 @@ import VueAxios from 'vue-axios'; import App from './App.vue'; import router from './router'; import store from './store'; +import VueCookies from 'vue-cookies' import i18n from '@/plugins/i18n'; // @ts-ignore import FlagIcon from 'vue-flag-icon'; @@ -12,6 +13,7 @@ import FlagIcon from 'vue-flag-icon'; Vue.use(VueAxios, axios); Vue.use(FlagIcon); +Vue.use(VueCookies) // setup fake backend // import { configureFakeBackend } from './helpers'; diff --git a/src/store.ts b/src/store.ts index db08a1b..4058419 100644 --- a/src/store.ts +++ b/src/store.ts @@ -3,7 +3,16 @@ import Vuex from 'vuex'; // imports of AJAX functions will go here -import { fetchSurveys, fetchSurvey, getProviders, saveSurveyResponse, postNewSurvey, authenticate, register } from '@/api'; +import { + fetchSurveys, + fetchSurvey, + getProviders, + saveSurveyResponse, + postNewSurvey, + authenticate, + register, + oidc_login, fetchUsers, getFreshToken +} from '@/api'; import { isValidJwt, EventBus } from '@/utils'; Vue.use(Vuex); @@ -14,7 +23,11 @@ const state = { loginProviders: [], currentSurvey: {}, user: {}, + users: [], + access_token: '', + refresh_token: '', jwt: '', + jwt_refresh_token: '', }; const actions = { @@ -35,6 +48,19 @@ const actions = { addSurveyResponse(context: any) { return saveSurveyResponse(context.state.currentSurvey); }, + loadUsers(context: any) { + return fetchUsers(context.state.access_token) + .then((response) => { + console.log(response); + console.log(response.data); + context.commit('setUsers', { users: response.data }); + EventBus.$emit('usersLoaded', response.data); + }) + .catch((error) => { + console.log('Error loading users!', error); + EventBus.$emit('failedLoadingUsers', error); + }); + }, loadLoginProviders(context: any) { return getProviders() .then((response) => { @@ -45,12 +71,34 @@ const actions = { login(context: any, userData: any) { context.commit('setUserData', { userData }); return authenticate(userData) - .then((response) => context.commit('setJwtToken', { jwt: response.data })) + .then((response) => context.commit('setJwtToken', { tokens: response.data })) .catch((error) => { console.log('Error Authenticating: ', error); EventBus.$emit('failedAuthentication', error); }); }, + oidc_login(context: any, redirection_url: any) { + //context.commit('setUserData', { userData }); + return oidc_login(redirection_url) + .then((response) => context.commit('setJwtToken', { tokens: response.data })) + .catch((error) => { + console.log('Error Authenticating: ', error); + EventBus.$emit('failedAuthentication', error); + }); + }, + refreshToken(context: any) { + //context.commit('setUserData', { userData }); + return getFreshToken(context.state.refresh_token) + .then((response) => context.commit('setTokens', { tokens: response.data })) + .catch((error) => { + console.log('Error Refreshing token: ', error); + EventBus.$emit('failedRefreshingToken', error); + }); + }, + storeTokens(context: any, tokens: any){ + context.commit('setTokens', {tokens}); + EventBus.$emit('storedTokens'); + }, register(context: any, userData: any) { context.commit('setUserData', { userData }); return register(userData) @@ -61,7 +109,7 @@ const actions = { }); }, submitNewSurvey(context: any, survey: any) { - return postNewSurvey(survey, context.state.jwt.token); + return postNewSurvey(survey, context.state.access_token); }, }; @@ -77,6 +125,9 @@ const mutations = { } sState.currentSurvey = payload.survey; }, + setUsers(sState: any, payload: any) { + sState.users = payload.users; + }, setChoice(sState: any, payload: any) { const { questionId, choice } = payload; const nQuestions = sState.currentSurvey.questions.length; @@ -97,9 +148,17 @@ const mutations = { }, setJwtToken(sState: any, payload: any) { console.log('setJwtToken payload = ', payload); - localStorage.token = payload.jwt.token; - sState.jwt = payload.jwt; + localStorage.tokens = payload.tokens; + sState.jwt = payload.tokens.access_token; + sState.jwt_refresh_token = payload.tokens.refresh_token; }, + setTokens(sState: any, payload:any){ + console.log('setTokens payload = ', payload); + sState.access_token = payload.tokens.access_token; + sState.refresh_token = payload.tokens.refresh_token; + console.log(sState.access_token); + console.log(sState.access_token); + } }; const getters = {