Implemented: single sign on functionality

.env.example

@@ -12,4 +12,6 @@ VUE_APP_ORDER_IN_BRKRNG_FILTERS=["orderTypeId: SALES_ORDER", "facilityId: _NA_",
 VUE_APP_PERMISSION_ID=
 VUE_APP_ALIAS=
 VUE_APP_CTGRY_AND_BRKRNG_JOB=["JOB_REL_PREODR_CAT", "JOB_BKR_ORD", "JOB_RLS_ORD_DTE"]
-VUE_APP_DEFAULT_ALIAS=
+VUE_APP_DEFAULT_ALIAS=
+VUE_APP_DEFAULT_LOG_LEVEL="error"
+VUE_APP_LOGIN_URL="http://launchpad.hotwax.io/login"

package.json

@@ -18,6 +18,7 @@
     "@capacitor/ios": "^2.5.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.3",
+    "@hotwax/dxp-components": "^1.3.4",
     "@hotwax/oms-api": "^1.6.0",
     "@ionic/core": "6.7.5",
     "@ionic/vue": "6.7.5",

src/App.vue

@@ -66,7 +66,8 @@ export default defineComponent({
     },
     async unauthorised() {
       this.store.dispatch("user/logout");
-      this.router.push("/login")
+      const redirectUrl = window.location.origin + '/login';
+      window.location.href = `${process.env.VUE_APP_LOGIN_URL}?redirectUrl=${redirectUrl}`;
     }
   },
   created() {

src/i18n/locales/en.json

@@ -12,6 +12,7 @@
     "ATP": "ATP",
     "Auto": "Auto",
     "Auto releasing": "Auto releasing",
+    "Authenticating": "Authenticating",
     "Available": "Available",
     "Available purchase order": "Available purchase order",
     "Available to promise": "Available to promise",
@@ -56,6 +57,7 @@
     "from date": "from date",
     "Failed to update configuration": "Failed to update configuration",
     "Failed to get pre-order/backorder categories": "Failed to get pre-order/backorder categories",
+    "Go to Launchpad": "Go to Launchpad",
     "Go to OMS": "Go to OMS",
     "History": "History",
     "Hold pre-order physical inventory": "Hold pre-order physical inventory",
@@ -83,6 +85,7 @@
     "Listed on store(s)": "Listed on {count} store(s)",
     "Loading": "Loading",
     "Login": "Login",
+    "Logging in": "Logging in",
     "Logout": "Logout",
     "Loyalty status": "Loyalty status",
     "Never in any category": "Never in any category",

src/main.ts

@@ -28,14 +28,22 @@ import '@ionic/vue/css/display.css';
 
 /* Theme variables */
 import './theme/variables.css';
+import { dxpComponents } from '@hotwax/dxp-components'
+import { login, logout, loader } from './user-utils';
 
 const app = createApp(App)
   .use(IonicVue, {
     mode: 'md'
   })
   .use(router)
   .use(i18n)
-  .use(store);
+  .use(store)
+  .use(dxpComponents, {
+    login,
+    logout,
+    loader,
+    appLoginUrl: process.env.VUE_APP_LOGIN_URL as string
+  });
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters
 app.config.globalProperties.$filters = {

src/router/index.ts

@@ -1,32 +1,35 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import Login from '../views/login.vue'
 import Products from '../views/products.vue'
 import ProductDetails from '../views/product-details.vue'
 import CatalogProductDetails from '../views/catalog-product-details.vue'
 import Orders from '../views/orders.vue'
 import Catalog from '../views/catalog.vue'
 import Settings from '../views/settings.vue'
-import store from '@/store'
+import store from '@/store';
+import { Login, useAuthStore } from '@hotwax/dxp-components';
+import { loader } from '@/user-utils';
 
-
-const authGuard = (to: any, from: any, next: any) => {
-  if (store.getters['user/isAuthenticated']) {
-      next()
-  } else {
-    next("/login")
+const authGuard = async (to: any, from: any, next: any) => {
+  const authStore = useAuthStore()
+  if (!authStore.isAuthenticated || !store.getters['user/isAuthenticated']) {
+    await loader.present('Authenticating')
+    // TODO use authenticate() when support is there
+    const redirectUrl = window.location.origin + '/login'
+    window.location.href = `${process.env.VUE_APP_LOGIN_URL}?redirectUrl=${redirectUrl}`
+    loader.dismiss()
   }
+  next()
 };
 
 const loginGuard = (to: any, from: any, next: any) => {
-  if (!store.getters['user/isAuthenticated']) {
-      next()
-  } else {
-    next("/")
+  const authStore = useAuthStore()
+  if (authStore.isAuthenticated && !to.query?.token && !to.query?.oms) {
+    next('/')
   }
+  next();
 };
 
-
 const routes: Array<RouteRecordRaw> = [
    {
     path: '/',

src/store/modules/user/actions.ts

@@ -7,72 +7,61 @@ import { hasError, showToast } from '@/utils'
 import { translate } from '@/i18n'
 import { Settings } from 'luxon'
 import { updateInstanceUrl, updateToken, resetConfig } from '@/adapter'
+import { useAuthStore } from '@hotwax/dxp-components';
 
 const actions: ActionTree<UserState, RootState> = {
 
   /**
  * Login user and return token
  */
-  async login ({ commit, dispatch }, { username, password }) {
+  async login ({ commit, dispatch }, payload) {
+
+    const { token, oms } = payload;
+    dispatch("setUserInstanceUrl", oms);
+
     try {
-      const resp = await UserService.login(username, password)
-      if (resp.status === 200 && resp.data) {
-        if (resp.data.token) {
+        if (token) {
           const permissionId = process.env.VUE_APP_PERMISSION_ID;
           if (permissionId) {
             const checkPermissionResponse = await UserService.checkPermission({
               data: {
                 permissionId
               },
               headers: {
-                Authorization:  'Bearer ' + resp.data.token,
+                Authorization:  'Bearer ' + token,
                 'Content-Type': 'application/json'
               }
             });
 
             if (checkPermissionResponse.status === 200 && !hasError(checkPermissionResponse) && checkPermissionResponse.data && checkPermissionResponse.data.hasPermission) {
-              commit(types.USER_TOKEN_CHANGED, { newToken: resp.data.token })
-              updateToken(resp.data.token)
+              commit(types.USER_TOKEN_CHANGED, { newToken: token })
+              updateToken(token)
               await dispatch('getProfile')
-              if (resp.data._EVENT_MESSAGE_ && resp.data._EVENT_MESSAGE_.startsWith("Alert:")) {
-                // TODO Internationalise text
-                showToast(translate(resp.data._EVENT_MESSAGE_));
-              }
-              return resp.data;
             } else {
               const permissionError = 'You do not have permission to access the app.';
               showToast(translate(permissionError));
               console.error("error", permissionError);
               return Promise.reject(new Error(permissionError));
             }
           } else {
-            commit(types.USER_TOKEN_CHANGED, { newToken: resp.data.token })
-            updateToken(resp.data.token)
+            commit(types.USER_TOKEN_CHANGED, { newToken: token })
+            updateToken(token)
             await dispatch('getProfile')
-            return resp.data;
           }
-        } else if (hasError(resp)) {
-          showToast(translate('Sorry, your username or password is incorrect. Please try again.'));
-          console.error("error", resp.data._ERROR_MESSAGE_);
-          return Promise.reject(new Error(resp.data._ERROR_MESSAGE_));
         }
-      } else {
-        showToast(translate('Something went wrong'));
-        console.error("error", resp.data._ERROR_MESSAGE_);
-        return Promise.reject(new Error(resp.data._ERROR_MESSAGE_));
-      }
     } catch (err: any) {
       showToast(translate('Something went wrong'));
       console.error("error", err);
       return Promise.reject(new Error(err))
     }
-    // return resp
   },
 
   /**
    * Logout user
    */
   async logout ({ commit }) {
+    const authStore = useAuthStore()
+
     // TODO add any other tasks if need
     commit(types.USER_END_SESSION)
     resetConfig();
@@ -81,6 +70,9 @@ const actions: ActionTree<UserState, RootState> = {
     this.dispatch("order/resetOrderQuery")
     this.dispatch("job/clearCtgryAndBrkrngJobs")
     this.dispatch("util/clearInvConfigs")
+
+    // reset plugin state on logout
+    authStore.$reset()
   },
 
   /**

src/user-utils/index.ts

@@ -0,0 +1,34 @@
+import { translate } from '@/i18n'
+import store from '@/store'
+import { loadingController } from '@ionic/vue'
+
+const login = async (payload: any) => store.dispatch('user/login', payload);
+
+const logout = async () => store.dispatch('user/logout');
+
+const loader = {
+  value: null as any,
+  present: async (message: string) => {
+    if (!loader.value) {
+      loader.value = await loadingController
+        .create({
+          message: translate(message),
+          translucent: false,
+          backdropDismiss: false
+        });
+    }
+    loader.value.present();
+  },
+  dismiss: () => {
+    if (loader.value) {
+      loader.value.dismiss();
+      loader.value = null as any;
+    }
+  }
+}
+
+export {
+  login,
+  loader,
+  logout
+}