now getting login providers from backend

src/api/index.ts

@@ -26,6 +26,6 @@ export function register (userData: any) {
     return axios.post(`${API_URL}/auth/register`, userData)
 }
 
-export function getProviders (providers: any) {
-    return axios.get(`${API_URL}/auth/providers`, providers)
+export function getProviders () {
+    return axios.get(`${API_URL}/auth/providers`)
 }

src/components/Login.vue

@@ -8,6 +8,11 @@
                     <p class="subtitle error-msg">{{ errorMsg }}</p>
                 </div>
             </div>
+            <ul>
+            <li v-for="(provider, index) in loginProviders" v-bind:id="index">
+                <a :href="provider.url">{{ index }} ({{provider.type}})</a>
+            </li>
+            </ul>
         </section>
         <section class="section">
             <div class="container">
@@ -44,6 +49,7 @@
                 email: '',
                 password: '',
                 errorMsg: '',
+                loginProviders: [],
             };
         },
         methods: {
@@ -58,11 +64,15 @@
         },
         mounted () {
             EventBus.$on('failedRegistering', (msg) => {
-                this.errorMsg = msg
+                this.errorMsg = msg;
             });
             EventBus.$on('failedAuthentication', (msg) => {
-                this.errorMsg = msg
+                this.errorMsg = msg;
             });
+            EventBus.$on('loginProvidersLoaded', (providers) => {
+                this.loginProviders = providers;
+            });
+            this.$store.dispatch('loadLoginProviders');
         },
         beforeDestroy () {
             EventBus.$off('failedRegistering');

src/store.ts

@@ -3,7 +3,7 @@ import Vuex from 'vuex';
 
 
 // imports of AJAX functions will go here
-import { fetchSurveys, fetchSurvey, saveSurveyResponse, postNewSurvey, authenticate, register } from '@/api';
+import { fetchSurveys, fetchSurvey, getProviders, saveSurveyResponse, postNewSurvey, authenticate, register } from '@/api';
 import { isValidJwt, EventBus } from '@/utils';
 
 Vue.use(Vuex);
@@ -11,6 +11,7 @@ Vue.use(Vuex);
 const state = {
   // single source of data
   surveys: [],
+  loginProviders: [],
   currentSurvey: {},
   user: {},
   jwt: '',
@@ -34,7 +35,13 @@ const actions = {
   addSurveyResponse(context: any) {
     return saveSurveyResponse(context.state.currentSurvey);
   },
-
+  loadLoginProviders(context: any) {
+    return getProviders()
+        .then((response) => {
+          context.commit('setLoginProviderData', {providers: response.data});
+          EventBus.$emit('loginProvidersLoaded', response.data);
+        })
+  },
   login(context: any, userData: any) {
     context.commit('setUserData', { userData });
     return authenticate(userData)
@@ -80,6 +87,10 @@ const mutations = {
       }
     }
   },
+  setLoginProviderData(sState: any, payload: any){
+    console.log("got loginProviders = ", payload);
+    sState.loginProviders = payload.providers;
+  },
   setUserData(sState: any, payload: any) {
     console.log('setUserData payload = ', payload);
     sState.userData = payload.userData;
@@ -96,6 +107,9 @@ const getters = {
   isAuthenticated(sState: any) {
     return isValidJwt(sState.jwt.token);
   },
+  getLoginProviders(sState: any) {
+    return sState.loginProviders;
+  },
 };
 
 const store = new Vuex.Store({