@gip-recia/eyebrow-user-infosdeprecated

Web component to display into eybrow menu a user-info menu with his picture and a more info

Usage no npm install needed!

<script type="module">
  import gipReciaEyebrowUserInfos from 'https://cdn.skypack.dev/@gip-recia/eyebrow-user-infos';
</script>

README

Example of rendering

Usage into html

<eyebrow-user-infos 
  display-name="John Doe" 
  picture="https://edu.univ.org/images/noPictureUser.svg" 
  email="john.doe@edu.univ.org"
  logout-link="/uPortal/Logout" 
  avatarSize="48px"></eyebrow-user-infos>
  • displayName: required
  • email: optional
  • picture: required, the url of the user picture/avatar
  • moreLink: optional, the url to go on user information management application or any other link you want when clicking on user picture
  • logoutLink: optional, the url to sign out if you prefer to show it in the dropdown
  • menuIsDark: default value is true, if true set the text shown into the menu to white color, else black
  • avatarSize: default value is "28px", set the width and heigth size of the image.

Example of use into uPortal

1. Deploy into uPortal the builded script

You should use webjar, but to test you can run npm run build and move dist/eyebrow-user-infos.js into $TOMCAT_WEBAPPS/uPortal/scripts/

2. Creating a jsp invoker

file should be deployed into uportal jsp invoker directory src/main/webapp/WEB-INF/jsp/Invoker/eyebrow-user-infos.jsp

 <%@ include file="/WEB-INF/jsp/include.jsp" %>
 
 <c:set var="request" value="${pageContext.request}" />
 <c:set var="ctxPath" value="${request.contextPath}" />
 
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/webcomponents-loader.js"></script>
 <script type="text/javascript" language="javascript">
   var versionUpdate = (new Date()).getTime();
   var script = document.createElement("script");
   script.type = "module";
   script.src = "${ctxPath}/scripts/eyebrow-user-infos.js?v=" + versionUpdate;
   document.body.appendChild(script);
 </script>
 
 <c:set var="avatar">
     <c:choose>
         <c:when test="${not empty personManager.getPerson(request).getAttribute(userPictureAttributeName[0])}">
             ${personManager.getPerson(request).getAttribute(userPictureAttributeName[0])}
         </c:when>
         <c:otherwise>${alternativePicture[0]}</c:otherwise>
     </c:choose>
 </c:set>
 
 <div class="eyebrow-user-infos">
     <eyebrow-user-infos display-name="${userInfo['displayName']}"
                 picture="${avatar}"
                 email="${personManager.getPerson(request).getAttribute(userMailAttributeName[0])}"
                 more-link="${moreUserInfoUrl[0]}"
                 logout-link="${portalLogoutUrl[0]}"
                 avatarSize="${avatarSize[0]}"></eyebrow-user-infos>
 </div>

3. Importing the portlet definition

create the file eyebrow-user-infos.portlet-definition.xml and import it


 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <portlet-definition version="4.0" xsi:schemaLocation="https://source.jasig.org/schemas/uportal/io/portlet-definition https://source.jasig.org/schemas/uportal/io/portlet-definition/portlet-definition-4.0.xsd" xmlns:ns2="https://source.jasig.org/schemas/uportal" xmlns="https://source.jasig.org/schemas/uportal/io/portlet-definition" xmlns:ns4="https://source.jasig.org/schemas/uportal/io/portlet-type" xmlns:ns3="https://source.jasig.org/schemas/uportal/io/subscribed-fragment" xmlns:ns5="https://source.jasig.org/schemas/uportal/io/event-aggregation" xmlns:ns6="https://source.jasig.org/schemas/uportal/io/user" xmlns:ns7="https://source.jasig.org/schemas/uportal/io/stylesheet-descriptor" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ns8="https://source.jasig.org/schemas/uportal/io/permission-owner">
     <title>User information Header</title>
     <name>User information Header</name>
     <fname>eyebrow-user-infos</fname>
     <desc>Show user informations into eyebrow header</desc>
     <type>Portlet</type>
     <timeout>12000</timeout>
     <portlet-descriptor>
         <ns2:isFramework>true</ns2:isFramework>
         <ns2:portletName>JspInvoker</ns2:portletName>
     </portlet-descriptor>
     <group>Authenticated Users</group>
     <parameter>
         <name>disableDynamicTitle</name>
         <value>true</value>
     </parameter>
     <portlet-preference>
         <name>JspInvokerPortletController.viewLocation</name>
         <readOnly>false</readOnly>
         <value>/jsp/Invoker/eyebrow-user-infos</value>
     </portlet-preference>
     <portlet-preference>
         <name>JspInvokerPortletController.beans</name>
         <readOnly>false</readOnly>
         <value>personManager</value>
     </portlet-preference>
     <portlet-preference>
         <name>portalLogoutUrl</name>
         <readOnly>false</readOnly>
         <value>/uPortal/Logout</value>
     </portlet-preference>
     <portlet-preference>
         <name>moreUserInfoUrl</name>
         <readOnly>true</readOnly>
         <value>/uPortal/p/ESCO-MCE</value>
     </portlet-preference>
     <portlet-preference>
         <name>avatarSize</name>
         <readOnly>true</readOnly>
         <value>28px</value>
     </portlet-preference>
     <portlet-preference>
         <name>userMailAttributeName</name>
         <readOnly>true</readOnly>
         <value>mail</value>
     </portlet-preference>
     <portlet-preference>
         <name>userPictureAttributeName</name>
         <readOnly>true</readOnly>
         <value>ESCOPersonPhoto</value>
     </portlet-preference>
     <portlet-preference>
         <name>alternativePicture</name>
         <readOnly>true</readOnly>
         <value>/images/icones/noPictureUser.svg</value>
     </portlet-preference>
 </portlet-definition>

4. Adding it to the layout

modify the file authenticated-lo.fragment-layout.xml

<?xml version="1.0" encoding="UTF-8"?>
<layout xmlns:dlm="http://www.uportal.org/layout/dlm" script="classpath://org/jasig/portal/io/import-layout_v3-2.crn"
        username="authenticated-lo" >
    <folder ID="s1" hidden="false" immutable="false" name="Root folder" type="root" unremovable="true">
        <!--
         | Hidden folders do not propagate to regular users, and fragment owner
         | accounts don't receive (other) fragments at all;  Fragment owners must
         | have their own copies of the minimal portlets required to view and manage
         | their own layouts.
         +-->
        <folder ID="s20" hidden="true" immutable="true" name="Page Top folder" type="page-top" unremovable="true">
            <channel fname="dynamic-respondr-skin" unremovable="false" hidden="false" immutable="false" ID="n22"/>
            <channel fname="fragment-admin-exit" unremovable="false" hidden="false" immutable="false" ID="n24"/>
        </folder>
        <!-- Customize is already included on the page, so don't include it a 2nd time for layout admin.  It would
             mess it up.
        <folder ID="s40" hidden="true" immutable="true" name="Customize folder" type="customize" unremovable="true">
            <channel fname="personalization-gallery" unremovable="false" hidden="false" immutable="false" ID="n42"/>
        </folder> -->
        <folder ID="s100" hidden="false" immutable="true" name="Eyebrow folder" type="eyebrow" unremovable="true">
            <channel fname="notification-icon" unremovable="false" hidden="false" immutable="false" ID="n110"/>
            <channel fname="eyebrow-user-infos" unremovable="false" hidden="false" immutable="false" ID="n120"/>
            <channel fname="session-timeout" unremovable="false" hidden="false" immutable="false" ID="n140"/>
        </folder>
        <folder ID="s300" hidden="false" immutable="true" name="Customize folder" type="customize" unremovable="true">
            <channel fname="personalization-gallery" unremovable="false" hidden="false" immutable="false" ID="n310"/>
            <channel fname="background-preference" unremovable="true" hidden="false" immutable="false" ID="n320"/>
        </folder>
    </folder>
</layout>