Merge pull request #268 from sanskar345/bopis/#267

Implemented: single sign on

.env.example

@@ -10,4 +10,6 @@ VUE_APP_PERMISSION_ID=
 VUE_APP_LOCALES={"en": "English", "ja": "日本語", "es": "Español"}
 VUE_APP_ALIAS=
 VUE_APP_CURRENCY_FORMATS={"en": {"currency": {"style": "currency","currency": "USD"}}, "ja": {"currency": {"style": "currency", "currency": "JPY"}}, "es": {"currency": {"style": "currency","currency": "ESP"}}}
-VUE_APP_RF_CNFG_MPNG={ "allowDeliveryMethodUpdate": "CUST_DLVRMTHD_UPDATE", "allowDeliveryAddressUpdate": "CUST_DLVRADR_UPDATE", "allowPickupUpdate": "CUST_PCKUP_UPDATE", "allowCancel": "CUST_ALLOW_CNCL", "shippingMethod": "RF_SHIPPING_METHOD"}
+VUE_APP_RF_CNFG_MPNG={ "allowDeliveryMethodUpdate": "CUST_DLVRMTHD_UPDATE", "allowDeliveryAddressUpdate": "CUST_DLVRADR_UPDATE", "allowPickupUpdate": "CUST_PCKUP_UPDATE", "allowCancel": "CUST_ALLOW_CNCL", "shippingMethod": "RF_SHIPPING_METHOD"}
+VUE_APP_DEFAULT_LOG_LEVEL="error"
+VUE_APP_LOGIN_URL="http://launchpad.hotwax.io/login"

package.json

@@ -18,6 +18,7 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.1.0",
+    "@hotwax/dxp-components": "^1.3.4",
     "@hotwax/oms-api": "^1.7.0",
     "@ionic/core": "6.7.5",
     "@ionic/vue": "6.7.5",

src/App.vue

@@ -47,7 +47,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}`
     }
   }, 
   computed: {

src/locales/en.json

@@ -1,10 +1,11 @@
-{
+{ 
   "App": "App",
   "All items were canceled from the order": "All items were canceled from the order",
   "An email notification will be sent to that their order is ready for pickup. This order will also be moved to the packed orders tab.": "An email notification will be sent to { customerName } that their order is ready for pickup.{ space } This order will also be moved to the packed orders tab.",
   "An email notification will be sent to that their order is ready for pickup.": "An email notification will be sent to { customerName } that their order is ready for pickup.",
   "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to?",
   "Arrived": "Arrived",
+  "Authenticating": "Authenticating",
   "Assign Pickers": "Assign Pickers",
   "Catalog": "Catalog",
   "Cancel": "Cancel",
@@ -36,6 +37,7 @@
   "First name": "First name",
   "Generate packing slips": "Generate packing slips",
   "Go to OMS": "Go to OMS",
+  "Go to Launchpad": "Go to Launchpad",
   "Handover": "Handover",
   "Inactive store": "Inactive store",
   "in stock": "in stock",
@@ -49,6 +51,7 @@
   "Learn more about unfillable items": "Learn more about unfillable items",
   "Loading": "Loading",
   "Login": "Login",
+  "Logging in": "Logging in",
   "Logout": "Logout",
   "Mismatch": "Mismatch",
   "More": "More",

src/locales/es.json

@@ -5,6 +5,7 @@
   "An email notification will be sent to that their order is ready for pickup.": "Se enviará una notificación por correo electrónico a {customerName} de que su pedido está listo para recoger.",
   "Are you sure you want to change the time zone to?": "¿Estás seguro de que quieres cambiar la zona horaria a?",
   "Arrived": "Llegó",
+  "Authenticating": "Authenticating",
   "Assign Pickers": "Asignar recolectores",
   "Catalog": "Catálogo",
   "Cancel": "Cancelar",
@@ -36,6 +37,7 @@
   "First name": "Nombre",
   "Generate packing slips": "Generar documentos de embalaje",
   "Go to OMS": "Ir a OMS",
+  "Go to Launchpad": "Go to Launchpad",
   "Handover": "Entregar",
   "Inactive store": "Tienda inactiva",
   "in stock": "en stock",
@@ -49,6 +51,7 @@
   "Learn more about unfillable items": "Obtenga más información sobre artículos que no se pueden cumplir",
   "Loading": "Cargando",
   "Login": "Iniciar sesión",
+  "Logging in": "Logging in",
   "Logout": "Cerrar sesión",
   "Mismatch": "Desajuste",
   "More": "Más",

src/locales/ja.json

@@ -5,6 +5,7 @@
   "An email notification will be sent to that their order is ready for pickup.": "{ customerName }様宛に注文の受け取り準備が完了したことをお知らするメールが送信されます。",
   "Are you sure you want to change the time zone to?": "タイムゾーンを変更してもよろしいですか？",
   "Arrived": "到着",
+  "Authenticating": "Authenticating",
   "Assign Pickers": "受け取り人の割当",
   "Catalog": "カタログ",
   "Cancel": "キャンセル",
@@ -36,6 +37,7 @@
   "First name": "名",
   "Generate packing slips": "内容明細票の作成",
   "Go to OMS": "OMSへ",
+  "Go to Launchpad": "Go to Launchpad",
   "Handover": "引き継ぐ",
   "Inactive store": "休止店舗",
   "in stock": "在庫あり",
@@ -49,6 +51,7 @@
   "Learn more about unfillable items": "記入できない項目の詳細",
   "Loading": "読み込み中",
   "Login": "ログイン",
+  "Logging in": "Logging in",
   "Logout": "ログアウト",
   "Mismatch": "不一致",
   "More": "More",

src/main.ts

@@ -31,6 +31,9 @@ import store from './store'
 import permissionPlugin from '@/authorization';
 import permissionRules from '@/authorization/Rules';
 import permissionActions from '@/authorization/Actions';
+import { dxpComponents } from '@hotwax/dxp-components'
+import { login, logout, loader } from './user-utils';
+
 
 const app = createApp(App)
   .use(IonicVue, {
@@ -42,6 +45,12 @@ const app = createApp(App)
   .use(permissionPlugin, {
     rules: permissionRules,
     actions: permissionActions
+  })
+  .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

src/router/index.ts

@@ -1,6 +1,5 @@
 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 OrderDetail from '@/views/OrderDetail.vue'
@@ -13,6 +12,8 @@ import { showToast } from '@/utils'
 import { translate } from '@/i18n'
 
 import 'vue-router'
+import { Login, useAuthStore } from '@hotwax/dxp-components';
+import { loader } from '@/user-utils';
 
 // Defining types for the meta values
 declare module 'vue-router' {
@@ -21,21 +22,24 @@ declare module 'vue-router' {
   }
 }
 
-
-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

@@ -13,34 +13,17 @@ import {
   resetPermissions,
   setPermissions
 } from '@/authorization'
+import { useAuthStore } from '@hotwax/dxp-components'
 
 const actions: ActionTree<UserState, RootState> = {
 
   /**
  * Login user and return token
  */
-  async login ({ commit }, { username, password }) {
+  async login ({ commit, dispatch }, payload) {
     try {
-      const resp = await UserService.login(username, password);
-      // Further we will have only response having 2xx status
-      // https://axios-http.com/docs/handling_errors
-      // We haven't customized validateStatus method and default behaviour is for all status other than 2xx
-      // TODO Check if we need to handle all 2xx status other than 200
-
-
-      /* ---- Guard clauses starts here --- */
-      // Know about Guard clauses here: https://learningactors.com/javascript-guard-clauses-how-you-can-refactor-conditional-logic/
-      // https://medium.com/@scadge/if-statements-design-guard-clauses-might-be-all-you-need-67219a1a981a
-
-
-      // If we have any error most possible reason is incorrect credentials.
-      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_));
-      }
-
-      const token = resp.data.token;
+      const {token, oms} = payload;
+      dispatch("setUserInstanceUrl", oms);
 
       // Getting the permissions list from server
       const permissionId = process.env.VUE_APP_PERMISSION_ID;
@@ -97,13 +80,6 @@ const actions: ActionTree<UserState, RootState> = {
       commit(types.USER_PREFERENCE_UPDATED, userPreference)
       commit(types.USER_PERMISSIONS_UPDATED, appPermissions);
       commit(types.USER_TOKEN_CHANGED, { newToken: token })
-
-      // Handling case for warnings like password may expire in few days
-      if (resp.data._EVENT_MESSAGE_ && resp.data._EVENT_MESSAGE_.startsWith("Alert:")) {
-      // TODO Internationalise text
-        showToast(translate(resp.data._EVENT_MESSAGE_));
-      }
-
     } catch (err: any) {
       // If any of the API call in try block has status code other than 2xx it will be handled in common catch block.
       // TODO Check if handling of specific status codes is required.
@@ -117,11 +93,15 @@ const actions: ActionTree<UserState, RootState> = {
    * Logout user
    */
   async logout ({ commit, dispatch }) {
+    const authStore = useAuthStore()
     // TODO add any other tasks if need
     dispatch("product/clearProducts", null, { root: true })
     commit(types.USER_END_SESSION)
     resetPermissions();
     resetConfig();
+
+    // 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
+}