Implemented: Single Sign On

.env.example

@@ -5,3 +5,5 @@ VUE_APP_VIEW_SIZE=15
 VUE_APP_BASE_URL=
 VUE_APP_PERMISSION_ID=
 VUE_APP_ALIAS={}
+VUE_APP_DEFAULT_LOG_LEVEL="error"
+VUE_APP_LOGIN_URL="http://launchpad.hotwax.io/login"

package.json

@@ -17,6 +17,7 @@
     "@capacitor/ios": "^2.5.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.1.0",
+    "@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

@@ -51,7 +51,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/locales/en.json

@@ -1,5 +1,6 @@
 {
   "App": "App",
+  "Authenticating": "Authenticating",
   "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to {timeZoneId}?",
   "product barcode": "product barcode",
   "Cancel": "Cancel",
@@ -15,10 +16,12 @@
   "Facility": "Facility",
   "Filters": "Filters",
   "Go to OMS": "Go to OMS",
+  "Go to Launchpad": "Go to Launchpad",
   "Hide completed picklists": "Hide completed picklists",
   "In progress": "In progress",
   "Loading": "Loading",
   "Login": "Login",
+  "Logging in": "Logging in",
   "Logout": "Logout",
   "No item has been picked": "No item has been picked",
   "No permission": "No permission",

src/main.ts

@@ -28,14 +28,22 @@ import '@hotwax/apps-theme';
 
 import i18n from './i18n'
 import store from './store'
+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,23 +1,28 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import Login from '@/views/Login.vue'
 import store from '@/store'
 import Tabs from '../views/Tabs.vue'
+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> = [

src/store/modules/user/actions.ts

@@ -7,60 +7,46 @@ 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) {
     try {
-      const resp = await UserService.login(username, password)
-      if (resp.status === 200 && resp.data) {
-        if (resp.data.token) {
-          const permissionId = process.env.VUE_APP_PERMISSION_ID;
-          if (permissionId) {
-            const checkPermissionResponse = await UserService.checkPermission({
-              data: {
-                permissionId
-              },
-              headers: {
-                Authorization:  'Bearer ' + resp.data.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)
-              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));
+      const {token, oms} = payload;
+      dispatch("setUserInstanceUrl", oms);
+      if (token) {
+        const permissionId = process.env.VUE_APP_PERMISSION_ID;
+        if (permissionId) {
+          const checkPermissionResponse = await UserService.checkPermission({
+            data: {
+              permissionId
+            },
+            headers: {
+              Authorization:  'Bearer ' + token,
+              'Content-Type': 'application/json'
             }
-          } else {
-            commit(types.USER_TOKEN_CHANGED, { newToken: resp.data.token })
-            updateToken(resp.data.token)
+          });
+
+          if (checkPermissionResponse.status === 200 && !hasError(checkPermissionResponse) && checkPermissionResponse.data && checkPermissionResponse.data.hasPermission) {
+            commit(types.USER_TOKEN_CHANGED, { newToken: token })
+            updateToken(token)
             await dispatch('getProfile')
-            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 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 {
+          commit(types.USER_TOKEN_CHANGED, { newToken: token })
+          updateToken(token)
+          await dispatch('getProfile')
         }
-      } 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);
@@ -73,13 +59,17 @@ const actions: ActionTree<UserState, RootState> = {
    * Logout user
    */
   async logout ({ commit }) {
+    const authStore = useAuthStore() 
     // TODO add any other tasks if need
     commit(types.USER_END_SESSION)
     resetConfig();
     this.dispatch('picklist/setFilters', {
       hideCompletedPicklists: false,
       showMyPicklists: false
     });
+
+    // 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
+}