Improved: code to redirect the user to SSO screen when enabled otherwise redirect to login, and added support to loader for custom message in case of logout

src/App.vue

@@ -25,13 +25,16 @@ export default defineComponent({
     }
   },
   methods: {
-    async presentLoader() {
+    async presentLoader(options = { message: '', backdropDismiss: true } as any) {
+      // When having a custom message remove already existing loader
+      if(options.message && this.loader) this.dismissLoader();
+
       if (!this.loader) {
         this.loader = await loadingController
           .create({
-            message: this.$t("Click the backdrop to dismiss."),
+            message: options.message ? this.$t(options.message) : this.$t("Click the backdrop to dismiss."),
             translucent: true,
-            backdropDismiss: true
+            backdropDismiss: options.backdropDismiss
           });
       }
       this.loader.present();
@@ -67,7 +70,7 @@ export default defineComponent({
     },
     async unauthorized() {
       // Mark the user as unauthorised, this will help in not making the logout api call in actions
-      this.authStore.logout({ isUserUnauthorised: true })
+      await this.authStore.logout({ isUserUnauthorised: true })
       this.router.push("/login")
     }
   },
@@ -87,6 +90,20 @@ export default defineComponent({
       }
     })
   },
+  async mounted() {
+    this.loader = await loadingController
+    .create({
+      message: this.$t("Click the backdrop to dismiss."),
+      translucent: true,
+      backdropDismiss: true
+    });
+    emitter.on('presentLoader', this.presentLoader)
+    emitter.on('dismissLoader', this.dismissLoader)
+  },
+  unmounted() {
+    emitter.off('presentLoader', this.presentLoader)
+    emitter.off('dismissLoader', this.dismissLoader)
+  },
   setup () {
     const router = useRouter();
     const authStore = useAuthStore();

src/locales/en.json

@@ -1,9 +1,11 @@
 {
   "Already active session": "Already active session",
   "A session for is already active for. Do you want to continue or login again?": "A session for {partyName} is already active for {oms}. Do you want to continue or login again?",
+  "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
   "Continue": "Continue",
   "Re-login": "Re-login",
   "Launch Pad": "Launch Pad",
+  "Logging out": "Logging out",
   "Login": "Login",
   "Logout": "Logout",
   "Next": "Next",

src/store/auth.ts

@@ -4,6 +4,7 @@
 import { hasError, logout, updateInstanceUrl, updateToken } from '@/adapter';
 import { showToast } from '@/util';
 import { translate } from '@/i18n'
+import emitter from '@/event-bus';
 
 export const useAuthStore = defineStore('authStore', {
   state: () => ({
@@ -45,7 +46,7 @@
         const resp = await UserService.login(username, password);
         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_));
         }
 
@@ -65,7 +66,7 @@
         // 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.
         showToast(translate('Something went wrong while login. Please contact administrator.'));
         console.error("error: ", error);
         return Promise.reject(new Error(error))
       }
     },
@@ -82,15 +83,27 @@
         // 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.
         showToast(translate('Something went wrong while login. Please contact administrator.'));
         console.error("error: ", error);
         return Promise.reject(new Error(error))
       }
     },
     async logout(payload?: any) {
+      // store the url on which we need to redirect the user after logout api completes in case of SSO enabled
+      let redirectionUrl = ''
+
+      emitter.emit('presentLoader', { message: 'Logging out', backdropDismiss: false })
+
       // Calling the logout api to flag the user as logged out, only when user is authorised
       // if the user is already unauthorised then not calling the logout api as it returns 401 again that results in a loop, thus there is no need to call logout api if the user is unauthorised
       if(!payload?.isUserUnauthorised) {
-        await logout();
+        let resp = await logout();
+
+        // Added logic to remove the `//` from the resp as in case of get request we are having the extra characters and in case of post we are having 403
+        resp = JSON.parse(resp.startsWith('//') ? resp.replace('//', '') : resp)
+
+        if(resp.logoutAuthType == 'SAML2SSO') {
+          redirectionUrl = resp.logoutUrl
+        }
       }
 
       // resetting the whole state except oms
@@ -102,6 +115,14 @@
       }
       this.redirectUrl = ''
       updateToken('');
+
+      // If we get any url in logout api resp then we will redirect the user to the url
+      if(redirectionUrl) {
+        window.location.href = redirectionUrl
+      }
+
+      emitter.emit('dismissLoader')
+      return redirectionUrl;
     }
   },
   persist: true

src/views/Login.vue

@@ -126,7 +126,7 @@
       // logout from Launchpad if logged out from the app
       if (this.$route.query?.isLoggedOut === 'true') {
         // We will already mark the user as unuauthorised when log-out from the app
-        this.authStore.logout({ isUserUnauthorised: true })
+        await this.authStore.logout({ isUserUnauthorised: true })
       }
 
       // fetch login options only if OMS is there as API calls require OMS
@@ -224,7 +224,7 @@
         this.toggleOmsInput()
       }
     },
     async login() {
       const { username, password } = this;
       if (!username || !password) {
         showToast(translate('Please fill in the user details'));
@@ -245,7 +245,7 @@
         console.error(error)
       }
     },
     async samlLogin() {
       try {
         const { token, expirationTime } = this.$route.query as any
         await this.authStore.samlLogin(token, expirationTime)
@@ -258,7 +258,7 @@
         console.error(error)
       }
     },
     async confirmActvSessnLoginOnRedrct() {
       this.isConfirmingForActiveSession = true
       const alert = await alertController
         .create({
@@ -276,9 +276,11 @@
             text: translate('Re-login'),
             handler: async () => {
               const redirectUrl = this.authStore.getRedirectUrl
-              await this.authStore.logout()
+              let redirectionUrl = await this.authStore.logout()
+              if(!redirectionUrl) {
+                this.isConfirmingForActiveSession = false;
+              }
               this.authStore.setRedirectUrl(redirectUrl)
-              this.isConfirmingForActiveSession = false;
             }
           }]
         });