fix: Allow users to login even if they have access to more than 15 accounts (#4475)

app/javascript/dashboard/store/modules/auth.js

@@ -1,28 +1,20 @@
-/* eslint no-param-reassign: 0 */
-import axios from 'axios';
 import Vue from 'vue';
-import * as types from '../mutation-types';
+import types from '../mutation-types';
 import authAPI from '../../api/auth';
-import createAxios from '../../helper/APIHelper';
-import actionCable from '../../helper/actionCable';
-import { setUser, getHeaderExpiry, clearCookiesOnLogout } from '../utils/api';
+import { setUser, clearCookiesOnLogout } from '../utils/api';
 import { getLoginRedirectURL } from '../../helper/URLHelper';
 
-const state = {
+const initialState = {
   currentUser: {
     id: null,
     account_id: null,
-    channel: null,
+    accounts: [],
     email: null,
     name: null,
-    provider: null,
-    uid: null,
-    subscription: {
-      state: null,
-      expiry: null,
-    },
   },
-  currentAccountId: null,
+  uiFlags: {
+    isFetching: true,
+  },
 };
 
 // getters
@@ -31,18 +23,22 @@ export const getters = {
     return !!$state.currentUser.id;
   },
 
-  getCurrentUserID(_state) {
-    return _state.currentUser.id;
+  getCurrentUserID($state) {
+    return $state.currentUser.id;
   },
 
-  getUISettings(_state) {
-    return _state.currentUser.ui_settings || {};
+  getUISettings($state) {
+    return $state.currentUser.ui_settings || {};
   },
 
-  getCurrentUserAvailability(_state) {
-    const { accounts = [] } = _state.currentUser;
+  getAuthUIFlags($state) {
+    return $state.uiFlags;
+  },
+
+  getCurrentUserAvailability($state, $getters) {
+    const { accounts = [] } = $state.currentUser;
     const [currentAccount = {}] = accounts.filter(
-      account => account.id === _state.currentAccountId
+      account => account.id === $getters.getCurrentAccountId
     );
     return currentAccount.availability;
   },
@@ -54,49 +50,45 @@ export const getters = {
     return null;
   },
 
-  getCurrentRole(_state) {
-    const { accounts = [] } = _state.currentUser;
+  getCurrentRole($state, $getters) {
+    const { accounts = [] } = $state.currentUser;
     const [currentAccount = {}] = accounts.filter(
-      account => account.id === _state.currentAccountId
+      account => account.id === $getters.getCurrentAccountId
     );
     return currentAccount.role;
   },
 
-  getCurrentUser(_state) {
-    return _state.currentUser;
+  getCurrentUser($state) {
+    return $state.currentUser;
   },
 
-  getMessageSignature(_state) {
-    const { message_signature: messageSignature } = _state.currentUser;
+  getMessageSignature($state) {
+    const { message_signature: messageSignature } = $state.currentUser;
 
     return messageSignature || '';
   },
 
-  getCurrentAccount(_state) {
-    const { accounts = [] } = _state.currentUser;
+  getCurrentAccount($state, $getters) {
+    const { accounts = [] } = $state.currentUser;
     const [currentAccount = {}] = accounts.filter(
-      account => account.id === _state.currentAccountId
+      account => account.id === $getters.getCurrentAccountId
     );
     return currentAccount || {};
   },
 
-  getUserAccounts(_state) {
-    const { accounts = [] } = _state.currentUser;
+  getUserAccounts($state) {
+    const { accounts = [] } = $state.currentUser;
     return accounts;
   },
 };
 
 // actions
 export const actions = {
-  login({ commit }, { ssoAccountId, ...credentials }) {
+  login(_, { ssoAccountId, ...credentials }) {
     return new Promise((resolve, reject) => {
       authAPI
         .login(credentials)
         .then(response => {
-          commit(types.default.SET_CURRENT_USER);
-          window.axios = createAxios(axios);
-          actionCable.init(Vue);
-
           window.location = getLoginRedirectURL(ssoAccountId, response.data);
           resolve();
         })
@@ -108,43 +100,40 @@ export const actions = {
   async validityCheck(context) {
     try {
       const response = await authAPI.validityCheck();
-      setUser(response.data.payload.data, getHeaderExpiry(response), {
-        setUserInSDK: true,
-      });
-      context.commit(types.default.SET_CURRENT_USER);
+      const currentUser = response.data.payload.data;
+      setUser(currentUser);
+      context.commit(types.SET_CURRENT_USER, currentUser);
     } catch (error) {
       if (error?.response?.status === 401) {
         clearCookiesOnLogout();
       }
     }
   },
-  setUser({ commit, dispatch }) {
-    if (authAPI.isLoggedIn()) {
-      commit(types.default.SET_CURRENT_USER);
-      dispatch('validityCheck');
+  async setUser({ commit, dispatch }) {
+    if (authAPI.hasAuthCookie()) {
+      await dispatch('validityCheck');
     } else {
-      commit(types.default.CLEAR_USER);
+      commit(types.CLEAR_USER);
     }
+    commit(types.SET_CURRENT_USER_UI_FLAGS, { isFetching: false });
   },
   logout({ commit }) {
-    commit(types.default.CLEAR_USER);
+    commit(types.CLEAR_USER);
   },
 
   updateProfile: async ({ commit }, params) => {
     // eslint-disable-next-line no-useless-catch
     try {
       const response = await authAPI.profileUpdate(params);
-      setUser(response.data, getHeaderExpiry(response));
-      commit(types.default.SET_CURRENT_USER);
+      commit(types.SET_CURRENT_USER, response.data);
     } catch (error) {
       throw error;
     }
   },
 
-  deleteAvatar: async ({ commit }) => {
+  deleteAvatar: async () => {
     try {
       await authAPI.deleteAvatar();
-      commit(types.default.SET_CURRENT_USER);
     } catch (error) {
       // Ignore error
     }
@@ -152,10 +141,9 @@ export const actions = {
 
   updateUISettings: async ({ commit }, params) => {
     try {
-      commit(types.default.SET_CURRENT_USER_UI_SETTINGS, params);
+      commit(types.SET_CURRENT_USER_UI_SETTINGS, params);
       const response = await authAPI.updateUISettings(params);
-      setUser(response.data, getHeaderExpiry(response));
-      commit(types.default.SET_CURRENT_USER);
+      commit(types.SET_CURRENT_USER, response.data);
     } catch (error) {
       // Ignore error
     }
@@ -166,45 +154,32 @@ export const actions = {
       const response = await authAPI.updateAvailability(params);
       const userData = response.data;
       const { id } = userData;
-      setUser(userData, getHeaderExpiry(response));
-      commit(types.default.SET_CURRENT_USER);
+      commit(types.SET_CURRENT_USER, response.data);
       dispatch('agents/updatePresence', { [id]: params.availability });
     } catch (error) {
       // Ignore error
     }
   },
 
-  setCurrentAccountId({ commit }, accountId) {
-    commit(types.default.SET_CURRENT_ACCOUNT_ID, accountId);
-  },
-
   setCurrentUserAvailability({ commit, state: $state }, data) {
     if (data[$state.currentUser.id]) {
-      commit(
-        types.default.SET_CURRENT_USER_AVAILABILITY,
-        data[$state.currentUser.id]
-      );
+      commit(types.SET_CURRENT_USER_AVAILABILITY, data[$state.currentUser.id]);
     }
   },
 };
 
 // mutations
 export const mutations = {
-  [types.default.SET_CURRENT_USER_AVAILABILITY](_state, availability) {
+  [types.SET_CURRENT_USER_AVAILABILITY](_state, availability) {
     Vue.set(_state.currentUser, 'availability', availability);
   },
-  [types.default.CLEAR_USER](_state) {
-    _state.currentUser.id = null;
+  [types.CLEAR_USER](_state) {
+    _state.currentUser = initialState.currentUser;
   },
-  [types.default.SET_CURRENT_USER](_state) {
-    const currentUser = {
-      ...authAPI.getAuthData(),
-      ...authAPI.getCurrentUser(),
-    };
-
+  [types.SET_CURRENT_USER](_state, currentUser) {
     Vue.set(_state, 'currentUser', currentUser);
   },
-  [types.default.SET_CURRENT_USER_UI_SETTINGS](_state, { uiSettings }) {
+  [types.SET_CURRENT_USER_UI_SETTINGS](_state, { uiSettings }) {
     Vue.set(_state, 'currentUser', {
       ..._state.currentUser,
       ui_settings: {
@@ -213,13 +188,14 @@ export const mutations = {
       },
     });
   },
-  [types.default.SET_CURRENT_ACCOUNT_ID](_state, accountId) {
-    Vue.set(_state, 'currentAccountId', Number(accountId));
+
+  [types.SET_CURRENT_USER_UI_FLAGS](_state, { isFetching }) {
+    Vue.set(_state, 'uiFlags', { isFetching });
   },
 };
 
 export default {
-  state,
+  state: initialState,
   getters,
   actions,
   mutations,