fixed bugs, fixed tests, test for listcatalogs

als-computing · Jul 30, 2020 · 8e91346 · 8e91346
1 parent 91f1bef
commit 8e91346
Show file tree

Hide file tree

Showing 13 changed files with 216 additions and 158 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,8 +5,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <meta name="google-signin-client_id" content="160817052361-5qh5p7e57jq2t537c36umh64qnlsvo2k.apps.googleusercontent.com">
-    <script src="https://apis.google.com/js/platform.js" async defer></script>
     <title>Splash</title>
   </head>
   <body>

diff --git a/src/main.js b/src/main.js
@@ -4,19 +4,13 @@ import BootstrapVue from 'bootstrap-vue';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap-vue/dist/bootstrap-vue.css';
 import axios from 'axios';
-import GAuth from 'vue-google-oauth2';
 // import { Plotly } from "vue-plotly"
 import App from './App.vue';
+import FiveHundred from './views/500.vue';
 import router from './router';
 import store from './store';
 import './assets/css/main.css';
 
-const gauthOption = {
-  clientId: process.env.VUE_APP_CLIENT_ID.concat('.apps.googleusercontent.com'),
-  scope: 'profile email',
-  prompt: 'select_account',
-};
-Vue.use(GAuth, gauthOption);
 Vue.use(BootstrapVue);
 Vue.use(Router);
 // Vue.component('plotly', Plotly);
@@ -50,8 +44,55 @@ Vue.use({
   },
 });
 
-new Vue({
-  router,
-  store,
-  render: (h) => h(App),
-}).$mount('#app');
+
+function onGoogleError() {
+  new Vue({
+    router,
+    store,
+    render: (h) => h(FiveHundred),
+  }).$mount('#app');
+}
+
+async function onGoogleLoad() {
+  // This function is called when the google auth library has loaded into
+  // the page
+
+  // asyncified the load method inspired by:
+  // https://stackoverflow.com/a/51939030/8903570
+  // This loads the auth2 part of the google auth library,
+  // Necessary for functionality like programatically logging the user out
+  // of the app: https://developers.google.com/identity/sign-in/web/reference
+  await new Promise((resolve) => window.gapi.load('auth2', resolve));
+  try {
+  // Initializes it with the correct client ID
+    await window.gapi.auth2.init({
+      client_id: process.env.VUE_APP_CLIENT_ID.concat(
+        '.apps.googleusercontent.com',
+      ),
+    });
+  } catch (e) {
+    console.log(e);
+    onGoogleError();
+    return;
+  }
+  // only AFTER this has all been loaded
+  // do we mount the app. The google functionality is
+  // _essential_ to our app, we want to ensure that the
+  // google library is loaded before anything else.
+  new Vue({
+    router,
+    store,
+    render: (h) => h(App),
+  }).$mount('#app');
+}
+
+
+// Construct src element for google sign in script
+const script = document.createElement('script');
+script.src = 'https://apis.google.com/js/platform.js';
+script.async = true;
+script.defer = true;
+
+script.onload = onGoogleLoad; // When the script loads we call this function
+script.onerror = onGoogleError; // When there's an error, call this function
+document.head.appendChild(script); // Inject the script
diff --git a/src/routes.js b/src/routes.js
@@ -10,6 +10,7 @@ import RunDataCJS from './views/RunDataCJS.vue';
 import RunDataD3 from './views/RunDataD3.vue';
 import ListCatalogs from './views/runs/ListCatalogs.vue';
 import ListRuns from './views/runs/ListRuns.vue';
+import NotFound from './views/404.vue';
 
 export default [
   {
@@ -94,5 +95,10 @@ export default [
     },
     // component: RunData,
   },
+  {
+    path: '*',
+    name: '404',
+    component: NotFound,
+  },
 
 ];
diff --git a/src/store/modules/login.js b/src/store/modules/login.js
@@ -7,33 +7,39 @@ import {
 
 const state = () => ({
   status: '',
-  user: {},
+  user: JSON.parse(localStorage.getItem('user')) || {},
   api_access_token: localStorage.getItem('api_access_token') || '',
 });
 
 const mutations = {
 
   [AUTH_SUCCESS](state, payload) {
+    localStorage.setItem('api_access_token', payload.access_token);
+    localStorage.setItem('user', JSON.stringify(payload.user));
     state.status = 'success';
     state.user = payload.user;
     state.api_access_token = payload.api_access_token;
   },
   [AUTH_ERROR](state) {
     state.status = 'error';
+    localStorage.removeItem('api_access_token');
+    localStorage.removeItem('user');
   },
   [LOGOUT](state) {
     state.status = '';
     state.user = {};
     state.api_access_token = '';
     localStorage.removeItem('api_access_token');
+    localStorage.removeItem('user');
   },
 };
 
 const actions = {
   logout({ commit }) {
+    console.log('hello');
     commit(LOGOUT);
-    const auth2 = Vue.prototype.$gAuth;
-    auth2.signOut()
+    const auth2 = window.gapi.auth2.getAuthInstance();
+    return auth2.signOut()
       .then(() => console.log('User signed out of google'))
       .catch((error) => console.error(error));
   },
@@ -47,15 +53,14 @@ const actions = {
 
     try {
       const response = await Vue.prototype.$api.post(Vue.prototype.$login_url, bodyParameters, config);
-      localStorage.setItem('api_access_token', response.data.access_token); // TODO store the refresh-token provided
+      // TODO store the refresh-token provided
       commit(AUTH_SUCCESS, {
         user: response.data.user,
         api_access_token: response.data.access_token,
       });
     } catch (error) {
       console.error('Failure!');
       commit(AUTH_ERROR, error);
-      localStorage.removeItem('api_access_token');
     }
   },
 

diff --git a/src/views/404.vue b/src/views/404.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="about">
+    <h3 class="display-1">
+        404, page not found.
+    </h3>
+  </div>
+</template>
diff --git a/src/views/500.vue b/src/views/500.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>OOPS! Looks like something bad happened. Try reloading the page.</h1>
+  </div>
+</template>
diff --git a/src/views/Login.vue b/src/views/Login.vue
@@ -1,74 +1,63 @@
 <template>
- <div class="col d-flex justify-content-center">
-   <!--The modal must have the :static="true" passed to it so that it can be tested-->
-   <b-modal v-model="userNotRegisteredError" v-b-modal.modal-center ok-only :static="true">Looks like you're not registered.</b-modal>
-   <b-modal v-model="tooManyUsers" v-b-modal.modal-center ok-only :static="true">Looks like you have multiple accounts. That shouldn't happen! Please contact the system admins.</b-modal>
-   <b-modal v-model="otherError" v-b-modal.modal-center ok-only :static="true">Something went wrong on our end. Please try again. If the problem persists contact the system admins.</b-modal>
-   <b-card
-      class=".mx-auto"
-      title="Welcome to Splash!">
-     <b-card-text>
-      Please log with a google account
-    </b-card-text>
-     <b-spinner label="Loading..." v-show=loading></b-spinner>
-      <meta name="google-signin-client_id" :content="clientId">
-      <form class="login" @submit.prevent="login">
-        <div id="google-sign-in-button" v-show='!loading'> </div>
-      </form>
-   </b-card>
-
-
- </div>
+  <div class="col d-flex justify-content-center">
+    <!--The modal must have the :static="true" passed to it so that it can be tested-->
+    <b-modal
+      v-model="userNotRegisteredError"
+      v-b-modal.modal-center
+      ok-only
+      :static="true"
+    >Looks like you're not registered.</b-modal>
+    <b-modal
+      v-model="tooManyUsers"
+      v-b-modal.modal-center
+      ok-only
+      :static="true"
+    >Looks like you have multiple accounts. That shouldn't happen! Please contact the system admins.</b-modal>
+    <b-modal
+      v-model="otherError"
+      v-b-modal.modal-center
+      ok-only
+      :static="true"
+    >Something went wrong on our end. Please try again. If the problem persists contact the system admins.</b-modal>
+    <b-card class=".mx-auto" title="Welcome to Splash!">
+      <b-card-text>Please log with a google account</b-card-text>
+      <b-spinner label="Loading..." v-show="loading"></b-spinner>
+      <div id="google-sign-in-button" v-show="!loading"></div>
+    </b-card>
+  </div>
 </template>
 
 <script>
 export default {
-
   data() {
     return {
       email: '',
       password: '',
-      clientId: process.env.VUE_APP_CLIENT_ID.concat('.apps.googleusercontent.com'),
       loading: true,
       gapiInitFailed: false,
       userNotRegisteredError: false,
       tooManyUsers: false,
       otherError: false,
-      renderButtonId: undefined,
     };
   },
 
   mounted() {
-    if (this.$gAuth === undefined) {
-      console.error('vue-google-oauth2 plugin must be used by Vue');
-      return;
-    }
-    // it checks every interval milliseconds to see if
-    // the gapi library has been initialized by the GAuth plugin (see main.js)
-    // and then will render the button if it is initialized
-    // normally one would use a watcher but for some reason they don't seem capable of
-    // detecting this change
-    const interval = 100;
-    this.renderButtonId = setInterval(() => { this.renderButton(interval); }, interval);
+    this.renderButton();
   },
 
   methods: {
     renderButton() {
-      if (typeof this.renderButtonId !== 'number') {
-        throw Error('renderButtonId must be a number');
-      } else if (this.$gAuth.isInit) {
-        window.gapi.signin2.render('google-sign-in-button', {
-          scope: 'profile email',
-          width: 240,
-          height: 50,
-          longtitle: true,
-          theme: 'dark',
-          onsuccess: this.onSignIn,
-          onfailure: this.onFailure,
-        });
-        this.loading = false;
-        clearInterval(this.renderButtonId);
-      }
+      console.log('rendered')
+      window.gapi.signin2.render('google-sign-in-button', {
+        scope: 'profile email',
+        width: 240,
+        height: 50,
+        longtitle: true,
+        theme: 'dark',
+        onsuccess: this.onSignIn,
+        onfailure: this.onFailure,
+      });
+      this.loading = false;
     },
 
     onFailure(error) {
@@ -78,19 +67,22 @@ export default {
     async onSignIn(googleUser) {
       try {
         this.loading = true;
-        const profile = googleUser.getBasicProfile();
+        // const profile = googleUser.getBasicProfile();
         const idToken = googleUser.getAuthResponse().id_token;
 
         const config = { headers: { 'Content-Type': 'application/json' } };
-        const response = await this.$api.post(this.$login_url, { token: idToken }, config);
-        localStorage.setItem('api_access_token', response.data.access_token);
+        const response = await this.$api.post(
+          this.$login_url,
+          { token: idToken },
+          config,
+        );
         this.$store.commit('login/AUTH_SUCCESS', {
           user: response.data.user,
           api_access_token: response.data.access_token,
         });
         this.loading = false;
-        this.$router.push('/');
-
+        await this.$router.push('/');
+        return;
         // this.$store.commit('login/AUTH_ERROR', error);
         // localStorage.removeItem('api_access_token')
       } catch (error) {

diff --git a/tests/unit/App.spec.js b/tests/unit/App.spec.js
@@ -17,6 +17,9 @@ localVue.use({
   },
 });
 
+// TODO: Test to ensure that the app is routing correctly to all components,
+// test to ensure that if the user is not authenticated
+// they don't have access to authenticated pages, test 404 and 500 pages
 
 describe('App.vue (Search Page)', () => {
   let getters;

diff --git a/tests/unit/components/SearchBar.spec.js b/tests/unit/components/SearchBar.spec.js
@@ -1,7 +1,7 @@
 import BootstrapVue from 'bootstrap-vue';
 import VueRouter from 'vue-router';
 import { mount, /* shallowMount, */ createLocalVue } from '@vue/test-utils';
-import mockAxios from 'axios';
+import mockAxios from 'axios'; // This comes from the __mocks__ folder
 import SearchBar from '@/components/SearchBar.vue';
 import responses from './search-responses';