Merge pull request #122 from MRVDH/120-Send-OAuth-request-token-only-…

…when-side-panel-is-opened

120 send o auth request token only when side panel is opened

client/src/App.vue

@@ -4,13 +4,20 @@
         "dismiss": "Dismiss",
 
         "request": {
-            "oauth_token": "Something went wrong while trying to get your OAuth request token.",
             "user_details": "Something went wrong while trying to get your user details.",
             "logged_in": "Something went wrong while trying to check if you are logged in.",
             "current_iteration": "Something went wrong while trying to get the current iteration."
         }
     },
-    "ko": { }
+    "ko": {
+        "dismiss": null,
+
+        "request": {
+            "user_details": null,
+            "logged_in": null,
+            "current_iteration": null
+        }
+    }
 }
 </i18n>
 
@@ -36,14 +43,14 @@
 </template>
 
 <script>
-import CustomMenuLeft from '@/components/Navigation/CustomMenuLeft';
-import CustomHeader from '@/components/Navigation/CustomHeader';
-import CustomFooter from '@/components/Navigation/CustomFooter';
+import CustomMenuLeft from '@/components/Navigation/MenuLeft';
+import CustomHeader from '@/components/Navigation/Header';
+import CustomFooter from '@/components/Navigation/Footer';
 import OAuthService from '@/services/OAuthService';
 import MapApiService from '@/services/MapApiService';
 import EventBus from '@/events/EventBus';
 import { MESSAGE_ERROR, MESSAGE_SUCCESS, MESSAGE_INFO } from '@/events/eventTypes';
-import { SET_LOGGED_IN_USER, SET_LOGIN_LINK, START_LOADING, STOP_LOADING, SET_CURRENT_ITERATION } from "@/store/mutationTypes";
+import { SET_LOGGED_IN_USER, START_LOADING, STOP_LOADING, SET_CURRENT_ITERATION } from "@/store/mutationTypes";
 
 export default {
     name: 'App',
@@ -84,24 +91,17 @@ export default {
         this.$store.dispatch(START_LOADING, 'isuserloggedin');
         OAuthService.isUserLoggedIn().then((res) => {
             if (!res.data || !res.data.isAuthenticated) {
-                this.$store.dispatch(START_LOADING, 'getrequesttoken');
-                OAuthService.getRequestToken().then((res) => {
-                    this.$store.dispatch(SET_LOGIN_LINK, res.data);
-                }).catch(() => {
-                    EventBus.$emit(MESSAGE_ERROR, this.$t('request.oauth_token'));
-                }).finally(() => {
-                    this.$store.dispatch(STOP_LOADING, 'getrequesttoken');
-                });
-            } else {
-                this.$store.dispatch(START_LOADING, 'getUserDetails');
-                OAuthService.getUserDetails().then((res) => {
-                    this.$store.dispatch(SET_LOGGED_IN_USER, res.data);
-                }).catch(() => {
-                    EventBus.$emit(MESSAGE_ERROR, this.$t('request.user_details'));
-                }).finally(() => {
-                    this.$store.dispatch(STOP_LOADING, 'getUserDetails');
-                });
+                return;
             }
+
+            this.$store.dispatch(START_LOADING, 'getUserDetails');
+            OAuthService.getUserDetails().then((res) => {
+                this.$store.dispatch(SET_LOGGED_IN_USER, res.data);
+            }).catch(() => {
+                EventBus.$emit(MESSAGE_ERROR, this.$t('request.user_details'));
+            }).finally(() => {
+                this.$store.dispatch(STOP_LOADING, 'getUserDetails');
+            });
         }).catch(() => {
             EventBus.$emit(MESSAGE_ERROR, this.$t('request.logged_in'));
         }).finally(() => {

client/src/components/Navigation/CustomFooter.vue → client/src/components/Navigation/Footer.vue

@@ -7,7 +7,7 @@
 
 <script>
 export default {
-    name: 'CustomFooter',
+    name: 'Footer',
     data () {
         return { };
     }

client/src/components/Navigation/CustomHeader.vue → client/src/components/Navigation/Header.vue

@@ -31,11 +31,11 @@
 </template>
 
 <script>
-import CustomHeaderFaq from '@/components/Navigation/CustomHeaderFaq';
+import CustomHeaderFaq from '@/components/Navigation/HeaderFaq';
 import { SET_LOCALE, TOGGLE_DARK_MODE, TOGGLE_DRAWER_LEFT, TOGGLE_DRAWER_RIGHT } from "@/store/mutationTypes";
 
 export default {
-    name: 'CustomHeader',
+    name: 'Header',
     data () {
         return {
             displayRightIcon: this.$router.currentRoute.name === 'MapPage',

client/src/components/Navigation/CustomHeaderFaq.vue → client/src/components/Navigation/HeaderFaq.vue

@@ -138,7 +138,7 @@
 
 <script>
 export default {
-    name: 'CustomHeaderFaq',
+    name: 'HeaderFaq',
     data () {
         return {
             infoDialog: false

client/src/components/Navigation/CustomMenuLeft.vue → client/src/components/Navigation/MenuLeft.vue

@@ -8,7 +8,11 @@
             "map": "Map",
             "about": "About"
         },
-        "iteration": "Iteration: {iterationTitle}"
+        "iteration": "Iteration: {iterationTitle}",
+
+        "request": {
+            "oauth_token": "Something went wrong while trying to get your OAuth request token."
+        }
     },
     "ko": {
         "button": {
@@ -18,7 +22,11 @@
             "map": "지도",
             "about": "정보"
         },
-        "iteration": "반복: {iterationTitle}"
+        "iteration": "반복: {iterationTitle}",
+
+        "request": {
+            "oauth_token": null
+        }
     }
 }
 </i18n>
@@ -97,12 +105,17 @@
 </template>
 
 <script>
-import { SET_DRAWER_LEFT } from "@/store/mutationTypes";
+import OAuthService from '@/services/OAuthService';
+import EventBus from '@/events/EventBus';
+import { MESSAGE_ERROR } from '@/events/eventTypes';
+import { SET_DRAWER_LEFT, START_LOADING, STOP_LOADING } from "@/store/mutationTypes";
 
 export default {
-    name: 'CustomMenuLeft',
+    name: 'MenuLeft',
     data () {
-        return { };
+        return {
+            loginLink: null
+        };
     },
     computed: {
         drawerLeft: {
@@ -116,9 +129,6 @@ export default {
         sectorSets () {
             return this.$store.state.sectorSets;
         },
-        loginLink () {
-            return this.$store.state.loginLink;
-        },
         loggedInUser () {
             return this.$store.state.loggedInUser;
         },
@@ -135,6 +145,22 @@ export default {
         sectorDoneCount () {
             return this.sectorSets.reduce((prev, curr) => prev + curr.completedCount, 0);
         }
+    },
+    watch: {
+        drawerLeft (drawerLeft) {
+            if (this.loginLink || !drawerLeft || this.loggedInUser) {
+                return;
+            }
+
+            this.$store.dispatch(START_LOADING, 'getrequesttoken');
+            OAuthService.getRequestToken().then((res) => {
+                this.loginLink = res.data;
+            }).catch(() => {
+                EventBus.$emit(MESSAGE_ERROR, this.$t('request.oauth_token'));
+            }).finally(() => {
+                this.$store.dispatch(STOP_LOADING, 'getrequesttoken');
+            });
+        }
     }
 };
 </script>

client/src/store/index.js

@@ -10,7 +10,6 @@ export default new Vuex.Store({
         darkMode: false,
         locale: `en`,
         loggedInUser: null,
-        loginLink: null,
         drawerLeft: false,
         drawerRight: true,
         processesWorking: [],
@@ -31,9 +30,6 @@ export default new Vuex.Store({
         [mt.SET_LOGGED_IN_USER] (state, loggedInUser) {
             state.loggedInUser = loggedInUser;
         },
-        [mt.SET_LOGIN_LINK] (state, loginLink) {
-            state.loginLink = loginLink;
-        },
         [mt.TOGGLE_DRAWER_LEFT] (state) {
             state.drawerLeft = !state.drawerLeft;
         },
@@ -84,9 +80,6 @@ export default new Vuex.Store({
         [mt.SET_LOGGED_IN_USER] ({ commit }, loggedInUser) {
             commit(mt.SET_LOGGED_IN_USER, loggedInUser);
         },
-        [mt.SET_LOGIN_LINK] ({ commit }, loginLink) {
-            commit(mt.SET_LOGIN_LINK, loginLink);
-        },
         [mt.TOGGLE_DRAWER_LEFT] ({ commit }) {
             commit(mt.TOGGLE_DRAWER_LEFT);
         },

client/src/store/mutationTypes.js

@@ -1,7 +1,6 @@
 export const TOGGLE_DARK_MODE = 'toggleDarkMode';
 export const SET_LOCALE = 'setLocale';
 export const SET_LOGGED_IN_USER = 'setLoggedInUser';
-export const SET_LOGIN_LINK = 'setLogInLink';
 export const TOGGLE_DRAWER_LEFT = 'toggleDrawerLeft';
 export const TOGGLE_DRAWER_RIGHT = 'toggleDrawerRight';
 export const SET_DRAWER_RIGHT = 'setDrawerRight';