Add user pic to userinfo (#504)

core/src/Authorization.html

@@ -151,7 +151,9 @@
           GenericHelpers.isFunction(idpProviderInstance.settings.userInfoFn)
         ) {
           idpProviderInstance.settings.userInfoFn().then(res => {
-            this.set({ isLoggedIn: true, userInfo: res });
+            const userInfo = res;
+            this.set({ isLoggedIn: true, userInfo });
+            this.fire('userInfoUpdated', userInfo);
           });
         } else {
           if (GenericHelpers.isFunction(idpProviderInstance.userInfo)) {
@@ -265,14 +267,10 @@
       }
     },
     computed: {
-      showUserInfo: ({ userInfo }) => {
-        if (userInfo !== undefined) {
-          if (userInfo.name || userInfo.email) {
-            return true;
-          }
-        }
-      }
-    }
+      showUserInfo: ({ userInfo }) =>
+        Boolean(userInfo && (userInfo.name || userInfo.email))
+    },
+    components: {}
   };
 </script>
 

core/src/navigation/TopNav.html

@@ -160,22 +160,28 @@
         class="fd-shellbar__action fd-shellbar__action--show-always"
         data-e2e="luigi-topnav-profile"
       >
-        <div class="fd-popover">
-          <div class="fd-popover__control" on:click="event.stopPropagation()">
-            <button
-              class="fd-button--shell sap-icon--customer"
-              aria-expanded="{dropDownStates.profilePopover || false}"
-              aria-haspopup="true"
-              on:click="toggleDropdownState('profilePopover')"
-            ></button>
-            <div
-              class="fd-popover__body fd-popover__body--right"
-              aria-hidden="{!(dropDownStates.profilePopover || false)}"
-              id="profilePopover"
-            >
-              <Authorization
-                on:toggleDropdownState="toggleDropdownState('profilePopover')"
-              />
+        <div class="fd-user-menu">
+          <div class="fd-popover">
+            <div class="fd-popover__control" on:click="event.stopPropagation()">
+              <div class="{userInfo.picture ? 'fd-user-menu__control' : '' }">
+                <button
+                  class="fd-button--shell {!userInfo.picture?'sap-icon--customer':'fd-identifier fd-identifier--xs fd-identifier--circle'}"
+                  style="{userInfo.picture?`background-image: url('${userInfo.picture}');background-size:30px;background-repeat: no-repeat;background-position: center;`:''}"
+                  aria-expanded="{dropDownStates.profilePopover || false}"
+                  aria-haspopup="true"
+                  on:click="toggleDropdownState('profilePopover')"
+                ></button>
+              </div>
+              <div
+                class="fd-popover__body fd-popover__body--right"
+                aria-hidden="{!(dropDownStates.profilePopover || false)}"
+                id="profilePopover"
+              >
+                <Authorization
+                  on:toggleDropdownState="toggleDropdownState('profilePopover')"
+                  on:userInfoUpdated="userInfoUpdate(event)"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -187,6 +193,7 @@
 {:else}
 <Authorization
   on:toggleDropdownState="toggleDropdownState('profilePopover')"
+  on:userInfoUpdated="userInfoUpdate(event)"
   isHidden="{true}"
 />
 {/if}
@@ -259,7 +266,8 @@
     data() {
       return {
         dropDownStates: {},
-        isLoggedIn: false
+        isLoggedIn: false,
+        userInfo: {}
       };
     },
     computed: {
@@ -306,6 +314,9 @@
       },
       burgerClicked() {
         document.body.classList.toggle('lui-leftNavToggle');
+      },
+      userInfoUpdate(userInfo) {
+        this.set(userInfo ? { userInfo } : { userInfo: {} });
       }
     },
     components: {

core/test/utilities/helpers/escaping-helpers.spec.js

@@ -0,0 +1,24 @@
+const chai = require('chai');
+const assert = chai.assert;
+const sinon = require('sinon');
+const EscapingHelpers = require('../../../src/utilities/helpers/escaping-helpers');
+
+describe('Iframe-helpers', () => {
+  it('sanitizeHtml', () => {
+    const text = '&<>"\'';
+    const sanitizedHtml = EscapingHelpers.sanitizeHtml(text);
+    assert.equal(sanitizedHtml, '&amp;&lt;&gt;&quot;&#39;');
+  });
+
+  it('sanitizeParam', () => {
+    const param = '<>"\'/';
+    const sanitizedParam = EscapingHelpers.sanitizeParam(param);
+    assert.equal(sanitizedParam, '&lt;&gt;&quot;&#39;&sol;');
+  });
+
+  it('escapeRegExp', () => {
+    const regex = '/*/';
+    const escapedRegexp = EscapingHelpers.escapeRegExp(regex);
+    assert.equal(escapedRegexp, '\\/\\*\\/');
+  });
+});

core/test/utilities/helpers/generic-helpers.spec.js

@@ -2,4 +2,29 @@ const chai = require('chai');
 const assert = chai.assert;
 const GenericHelpers = require('../../../src/utilities/helpers/generic-helpers');
 
-describe('Generic-helpers', () => {});
+describe('Generic-helpers', () => {
+  it('getUrlWithoutHash', () => {
+    const url = 'http://luigi.url.de/#hashsomething';
+    const withoutHash = GenericHelpers.getUrlWithoutHash(url);
+    assert.equal(withoutHash, 'http://luigi.url.de/');
+  });
+
+  it('hasHash', () => {
+    const path = '#luigi/tets/something';
+    const includingHash = GenericHelpers.hasHash(path);
+    assert.isTrue(includingHash);
+  });
+
+  it('getPathWithoutHash', () => {
+    const path = '#/tets';
+    assert.equal(GenericHelpers.getPathWithoutHash(path), 'tets');
+  });
+
+  it('addLeadingSlash', () => {
+    assert.equal(GenericHelpers.addLeadingSlash('luigi'), '/luigi');
+  });
+
+  it('trimLeadingSlash', () => {
+    assert.equal(GenericHelpers.trimLeadingSlash('/luigi'), 'luigi');
+  });
+});

core/test/utilities/helpers/iframe-helpers.spec.js

@@ -33,7 +33,44 @@ describe('Iframe-helpers', () => {
       }
     };
 
+    it('getLocation', () => {
+      const url = 'http://.luigi.url.com';
+      const iframeOrigin = IframeHelpers.getLocation(url);
+      assert.equal(iframeOrigin, url);
+    });
+
+    it('createIframe', () => {
+      const iframe = IframeHelpers.createIframe('http://luigi.url.com/');
+      assert.equal(iframe.src, 'http://luigi.url.com/');
+    });
+
+    it('getVisibleIframes', () => {
+      sinon
+        .stub(document, 'querySelectorAll')
+        .callsFake(() => [
+          {
+            src: 'http://url.com/app.html!#/prevUrl',
+            style: { display: 'block' }
+          }
+        ]);
+      const visibleIframes = IframeHelpers.getVisibleIframes();
+      assert.equal(visibleIframes.length, 1);
+    });
+
+    it('isSameViewGroup', () => {
+      config.iframe.src = 'http://otherurl.de/app.html!#/someUrl';
+      config.viewGroup = 'tets';
+      component.set({
+        viewUrl: 'http://otherurl.de/app.html!#/someUrl',
+        viewGroup: 'tets',
+        previousNodeValues: { viewUrl: config.iframe.src, viewGroup: 'tets' }
+      });
+      const tets = IframeHelpers.isSameViewGroup(config, component);
+      assert.equal(tets, true);
+    });
+
     it('should return true if views have the same domain and different hash', () => {
+      config.iframe.src = 'http://url.com/app.html!#/prevUrl';
       component.set({
         viewUrl: 'http://url.com/app.html!#/someUrl',
         previousNodeValues: { viewUrl: config.iframe.src }

core/test/utilities/helpers/navigation-helpers.spec.js

@@ -1,6 +1,7 @@
 //TODO: make some tests here
 const chai = require('chai');
 const assert = chai.assert;
+const sinon = require('sinon');
 import * as NavigationHelpers from '../../../src/utilities/helpers/navigation-helpers';
 
 describe('Navigation-helpers', () => {
@@ -28,4 +29,14 @@ describe('Navigation-helpers', () => {
       );
     });
   });
+
+  it('getNodePath', () => {
+    const node = {
+      parent: {
+        pathSegment: 'parent'
+      },
+      pathSegment: 'pathSegment'
+    };
+    console.log('tests ', NavigationHelpers.getNodePath(node));
+  });
 });

core/webpack.config.js

@@ -39,7 +39,7 @@ module.exports = {
       './node_modules/fiori-fundamentals/dist/components/global-nav.min.css',
       './node_modules/fiori-fundamentals/dist/components/side-nav.min.css',
       // './node_modules/fiori-fundamentals/dist/components/link.min.css',
-      // './node_modules/fiori-fundamentals/dist/components/identifier.min.css',
+      './node_modules/fiori-fundamentals/dist/components/identifier.min.css',
       // './node_modules/fiori-fundamentals/dist/components/mega-menu.min.css',
       './node_modules/fiori-fundamentals/dist/components/menu.min.css',
       // './node_modules/fiori-fundamentals/dist/components/button-group.min.css',
@@ -61,7 +61,7 @@ module.exports = {
       // './node_modules/fiori-fundamentals/dist/components/multi-input.min.css',
       './node_modules/fiori-fundamentals/dist/components/product-switcher.min.css',
       './node_modules/fiori-fundamentals/dist/components/shellbar.min.css',
-      // './node_modules/fiori-fundamentals/dist/components/user-menu.min.css',
+      './node_modules/fiori-fundamentals/dist/components/user-menu.min.css',
       './node_modules/fiori-fundamentals/dist/components/product-menu.min.css',
       './node_modules/fiori-fundamentals/dist/components/counter.min.css',
 

docs/authorization-configuration.md

@@ -40,7 +40,7 @@ auth: {
 - **automaticSilentRenew** enables the automatic silent renewal of the token if it is supported by the server. The default value is `false`. For this mechanism to work, the browser must have third-party cookies support enabled.
 - **accessTokenExpiringNotificationTime** is the number of seconds before an access token is to expire and triggers silent token refresh. The default value is 60.
 - **thirdPartyCookiesScriptLocation** is the URL to the page containing third-party cookies support check. For details, see [Third-party cookies and silent token refresh section](#Third-party-cookies-and-silent-token-refresh).
-- **userInfoFn** provides a function to get user information. It returns a promise of a **userinfo** object which contains user name and/or email to display in the profile dropdown menu.
+- **userInfoFn** provides a function to get user information. It returns a promise of a **userinfo** object which can contain **name**, **email** and **picture** (value is a URL to the image). **Name** or **email** are displayed in the profile drop-down menu and the user’s profile picture is displayed in the top navigation.
 
 ## OAuth2 Implicit Grant configuration
 
@@ -77,8 +77,7 @@ auth: {
 - **response_type** defaults to the **id_token**. Any other parameter that is added to oAuthData is also added to the authorization payload.
 - **nonceFn** provides a function that returns a string in order to override the default **nonce**.
 - **logoutFn** provides the function to override the **logoutUrl** functionality for a custom logout. It needs to execute the **logoutCallback()** function after logout.
-- **userInfoFn** provides a function to get user information. It returns a promise of a **userinfo** object which contains user name and/or email to display in the profile dropdown menu.
-
+- **userInfoFn** provides a function to get user information. It returns a promise of a **userinfo** object which can contain **name**, **email** and **picture** (value is a URL to the image). **Name** or **email** are displayed in the profile drop-down menu and the user’s profile picture is displayed in the top navigation.
 
 ### Custom Authentication Provider