custom logout action in profile section

core/examples/luigi-sample-angular/package.json

@@ -10,7 +10,7 @@
     "e2e:run": "cypress run --browser chrome -c video=false",
     "e2e:run:electron": "cypress run",
     "buildConfig": "webpack --config webpack-generateConfig.config",
-    "start": "concurrently \"npm run buildConfig -- --watch\" \"ng serve\""
+    "start": "concurrently \"npm run buildConfig -- --watch\" \"ng serve --host 0.0.0.0\""
   },
   "dependencies": {
     "@angular/animations": "^6.1.0",

core/src/Authorization.html

@@ -36,7 +36,7 @@
       </a>
     </li>
     {/each}
-    {#if isAuthorizationEnabled}
+    {#if isAuthorizationEnabled || isProfileLogoutItem}
     <li on:click="onLogoutClick()" data-testid="{getTestId(profileNav.logout)}">
       <a aria-label="Logout" class="fd-menu__item">
         {#if profileNav.logout.icon}
@@ -54,7 +54,7 @@
         <span>{$getTranslation(profileNav.logout.label)}</span>
       </a>
     </li>
-    {#if !isLoggedIn}
+    {#if !isLoggedIn && !isProfileLogoutItem}
     <li on:click="startAuthorization()">
       <a aria-label="Login" class="fd-menu__item">Login</a>
     </li>
@@ -280,11 +280,20 @@
                     'navigation.profile.items'
                   )) || []
               };
-              if (this.get().isAuthorizationEnabled) {
-                profileNavData['logout'] = {
-                  ...TOP_NAV_DEFAULTS.logout,
-                  ...logoutItem
-                };
+              profileNavData['logout'] = {
+                ...TOP_NAV_DEFAULTS.logout,
+                ...logoutItem
+              };
+              this.set({ isProfileLogoutItem: !!logoutItem });
+              this.set({ profileLogoutfnDefinded: false });
+              if (logoutItem) {
+                const profileLogoutfn = logoutItem.customLogoutFn;
+                if (
+                  profileLogoutfn &&
+                  GenericHelpers.isFunction(profileLogoutfn)
+                ) {
+                  this.set({ profileLogoutfnDefinded: true });
+                }
               }
               this.set({ profileNav: profileNavData });
             },
@@ -309,12 +318,20 @@
       },
       onLogoutClick: function() {
         this.root.getUnsavedChangesModalPromise().then(() => {
-          this.logout();
+          if (this.get().isAuthorizationEnabled) {
+            this.logout();
+          } else if (
+            this.get().isProfileLogoutItem &&
+            this.get().profileLogoutfnDefinded
+          ) {
+            this.get().profileNav.logout.customLogoutFn();
+          } else {
+            console.error('No IDP logout or customLogoutFn is defined.');
+          }
         });
       },
       logout: function() {
         const authData = AuthHelpers.getStoredAuthData();
-
         const logoutCallback = async redirectUrl => {
           await LuigiAuth.handleAuthEvent(
             'onLogout',
@@ -325,7 +342,6 @@
           this.set({ isLoggedIn: false });
           localStorage.removeItem('luigi.auth');
         };
-
         const customLogoutFn = LuigiConfig.getConfigValue(
           `auth.${LuigiConfig.getConfigValue('auth.use')}.logoutFn`
         );
@@ -337,6 +353,11 @@
           );
         } else if (GenericHelpers.isFunction(idpProviderInstance.logout)) {
           idpProviderInstance.logout(authData, logoutCallback);
+        } else if (
+          this.get().isProfileLogoutItem &&
+          this.get().profileLogoutfnDefinded
+        ) {
+          this.get().profileNav.logout.customLogoutFn();
         } else {
           logoutCallback(idpProviderInstance.settings.logoutUrl);
         }

core/src/navigation/TopNav.html

@@ -345,7 +345,7 @@
           this.set({
             authorizationEnabled: LuigiAuth.isAuthorizationEnabled(),
             profileItemsAvailable: LuigiConfig.getConfigValue(
-              'navigation.profile.items'
+              'navigation.profile'
             ),
             autologinEnabled: !Boolean(
               LuigiConfig.getConfigValue('auth.disableAutoLogin')

docs/navigation-parameters-reference.md

@@ -120,6 +120,7 @@ Luigi.setConfig({
         label: 'End session'
         // icon: "sys-cancel",
         testId: 'myTestId',
+        customLogoutFn: myLogoutFn
       },
       items: [
         {
@@ -254,6 +255,7 @@ The profile section is a configurable drop-down list available in the top naviga
   - **label** overrides the text for the logout item. The default value is "Sign Out".
   - **testId** is a string where you can define your own custom `testId`. If nothing is specified, it is the node's label written as one word and lower case (e.g. `label`).
   - **icon** overrides the icon for the logout item. The default value is [SAP UI5 log icon](https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons/?tag=logout).
+  - **customLogoutFn** defines a function to implement your own logout functionality. It is recommended to only use this function if no IDP is configured. If an IDP with a corresponding [logout function](https://github.com/SAP/luigi/blob/master/docs/authorization-configuration.md) is defined , the customLogoutFn on profile will be ignored.
 - **items** is an array of objects, each one being a link to a Luigi navigation node or an external URL. An item can have the following parameters:
   - **label** defines the text for the link.
   - **testId** is a string where you can define your own custom `testId`. If nothing is specified, it is the node's label written as one word and lower case (e.g. `label`).