@zanichelli/idp-login-topbar

IDP Login Component

Overview

• Changelog
• Installation Guide
• Usage
• Available Components
  • Topbar with modal login form
  • Inline login form
• Enums and Types
• Support

---

Release Notes {#changelog}

v2.5.1

• Updated @zanichelli/zanichelli-appswitcher dependency to version 3.0.3. Apps for university users are also managed in this version.

v2.4.2

• fix z-link css class due to @zanichelli/albe-web-components dependency upgrade

v2.4.1

• Updated @zanichelli/zanichelli-appswitcher dependency to version 2.0.3. This version includes zanichelli-apps-section component.
• Updated @zanichelli/albe-web-components dependency to version >=17.0.0

v2.3.0

• Added notificationsEnabled prop to show notifications button - default true

v2.1.0

• Set googleLogin prop default to true
• Added xapiInfo optional prop to enable XAPI tracking events - see docs for more details

v2.0.4

• Updated @zanichelli/albe-web-components dependency to version >=14.3.0

v2.0.0

• Added googleLogin prop for Google login

v1.4.21

• Updated @zanichelli/zanichelli-appswitcher dependency to version ^1.1.3
• Added tooltip to appswitcher button

v1.4.20

• Updated css variables

v1.4.19

• Added iss to LoginSuccess and UserLoaded events

v1.4.18

• Updated @zanichelli/zanichelli-appswitcher dependency to version ^1.1.3
• Updated @zanichelli/albe-web-components dependency to version ^9.0.0
• Improved accessibility

v1.4.14

• Added getUserInfo method
• Added teachingGroups to LoginSuccess and UserLoaded events

v1.4.13

• Updated @zanichelli/albe-web-components dependency to version ^7.1.1
• Improved accessibility

v1.4.0

• Introduces the zanichelli-appswitcher component. IMPORTANT: in order to use this component, you need at least version 6.5.1 of albe-web-components. To setup your idp-login component to show the appswitcher, you'll need to:
  • to show the appswitcher icon, add the attribute show-app-switcher and set it to true
  • to define the host that will identify your website, add the attribute current-host and set it to your host (eg. "my.zanichelli.it")

v1.3.0

• New IdpLoginInline component

v1.2.0

• Added regBackUrl prop for signUp url

v1.1.0

• Updated @zanichelli/albe-web-components dependency to version ^4.0.2 || ^5 || ^6

v1.0.10

• Updated "Attiva opera" URL
• Fixed font import console error

v1.0.9

• Fixed invalid myZanichelli URL used by showMyzLink

v1.0.8

• Added showMyzLink prop - non braking change, default set to false

v1.0.6

• Updated @zanichelli/albe-web-components dependency to version ^4

v1.0.5

• Added userLoadedFail event

---

Installation {#installation}

Download the package running this command:

yarn add @zanichelli/idp-login-topbar

or import with jsDelivr or Unpkg in your html:

// using jsDelivr
<script type="module" src="https://cdn.jsdelivr.net/npm/@zanichelli/idp-login-topbar/dist/wc/idp-login-topbar/idp-login-topbar.esm.js"></script>

// using unpkg
<script type="module" src="https://unpkg.com/@zanichelli/idp-login-topbar"></script>

Albe Web Components dependency

This component requires Albe Web Components Library. You can install Albe via NPM

yarn add @zanichelli/albe-web-components

or include it in your app with script tag:

// using jsDelivr
<script type="module" src="https://cdn.jsdelivr.net/npm/@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js"></script>

// using unpkg
<script type="module" src="https://unpkg.com/@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js"></script>

You need to include stylesheet too:

// using jsDelivr
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zanichelli/albe-web-components/www/build/web-components-library.css" />

// using unpkg
<link type="text/css" rel="stylesheet" href="https://unpkg.com/@zanichelli/albe-web-components/www/build/web-components-library.css" />

---

Usage {#usage}

Usage custom element

import { defineCustomElements as defineAlbeComponents, applyPolyfills } from '@zanichelli/albe-web-components/loader';
import { defineCustomElements as defineIdpTopbar } from '@zanichelli/idp-login-topbar/dist/wc/loader';

applyPolyfills().then(() => {
  defineAlbeComponents(window);
  defineIdpTopbar(window);
});

return <idp-login></idp-login>;

Usage React Bindings

import { IdpLogin } from '@zanichelli/idp-login-topbar/dist/react';

return <IdpLogin />;

Please refer to component documentation to see properties and events list

Components {#components}

Topbar with modal login form {#idp-login}

Custom element: <idp-login /> React binding: <IdpLogin />

Properties

Refer to section Enums and Types for "type" column details.

Property	Attribute	Description	Type	Default
actionItems	action-items	custom actions menu list [optional]	MenuItem[] | string	[]
contentMaxWidth	content-max-width	maximum width of topbar content	number	undefined
currentHost	current-host	current host - enables handling last visited apps in appswitcher	string	window.location.host
env	env	env: dev, test, prod	envType.dev | envType.prod | envType.test	envType.test
fixedModal	fixed-modal	fix the modal to open state [optional]	boolean	false
googleLogin	google-login	display google login button	boolean	true
logo	logo	show MyZanichelli logo	boolean	true
menuItems	menu-items	custom dropdown menu items list [optional]	MenuItem[] | string	[]
modalOpen	modal-open	modal state trigger [optional]	boolean	false
regBackUrl	reg-back-url	back Url for registration step [optional]	string	undefined
showAppSwitcher	show-app-switcher	add app-switcher	boolean	true
showMyzLink	show-myz-link	show myZanichelli link	boolean	false
theme	theme	theme variant, default 'dark'	ThemeVariant.DARK | ThemeVariant.LIGHT	ThemeVariant.DARK
xapiInfo	xapi-info	info to send xapi tracking events	string | { environment: "prod" | "test"; platform: string; homepage: string; lrsCredentials: { username: string; password: string; }; }	undefined
zainoDigitaleTargetUrl	zaino-digitale-target-url	redirect url after ZD login [optional]	string	undefined

Events

Event	Description	Type
loginFailed	emitted on login fail	CustomEvent<IdpException>
loginSuccess	emitted on login success	CustomEvent<{ token: string; teachingGroups?: TeachingGroup[]; }>
logoutFailed	emitted on logout fail	CustomEvent<any>
logoutSuccess	emitted on logout success	CustomEvent<{ json: string; }>
userLoaded	emitted when user data has loaded	CustomEvent<{ e: User; teachingGroups?: TeachingGroup[]; }>
userLoadedFail	emitted when user data loading has failed (user is not logged)	CustomEvent<{ statusCode: number; }>

Methods

getUserInfo() => Promise<undefined | null | UserLoaded>

return current user data

Returns

Type: Promise<UserLoaded>

logout() => Promise<void>

logout current user

Returns

Type: Promise<void>

Inline login form {#idp-login-inline}

Custom element: <idp-login-inline /> React binding: <IdpLoginInline />

Properties

Refer to section Enums and Types for "type" column details.

Property	Attribute	Description	Type	Default
env	env	env: dev, test, prod	envType.dev | envType.prod | envType.test	envType.test
googleLogin	google-login	display google login button	boolean	true
regBackUrl	reg-back-url	back Url for registration step	string	undefined
signupButton	signup-button	display signup button	boolean	true
xapiInfo	xapi-info	info to send xapi tracking events	string | { environment: "prod" | "test"; platform: string; homepage: string; lrsCredentials: { username: string; password: string; }; }	undefined
zainoDigitaleTargetUrl	zaino-digitale-target-url	redirect url after ZD login	string	undefined

Events

Event	Description	Type
loginFailed	emitted on login fail	CustomEvent<IdpException>
loginSuccess	emitted on login success	CustomEvent<{ token: string; teachingGroups?: TeachingGroup[]; }>

Enums and Types {#enums}

enum envType {
  dev = 'dev',
  test = 'test',
  prod = 'prod',
}

enum ThemeVariant {
  DARK = "dark",
  LIGHT = "light",
}

type MenuItem = {
  id: string;
  label: string;
  link?: string;
  icon?: string;
  target?: string;
  subMenu?: MenuItem[];
}

type LoginSuccess = {
  token: string;
}

type LogoutSuccess = {
  json: string;
}

type UserLoaded = {
  e: User;
  teachingGroups?: TeachingGroup[];
};

type TeachingGroup = {
  id: number;
  code: string;
  descr: string;
};

type User = {
  id: number;
  email: string;
  username: string;
  surname: string;
  name: string;
  myz: MyzUserData;
  roles: UserRole[];
  is_employee: boolean;
  is_myzanichelli: boolean;
  is_verified: boolean;
  last_activity_at: string;
  created_at: string;
  updated_at: string;
  attributes: [];
  iss: string;
};

type MyzUserData = {
  id: number;
  isConfirmed: boolean;
  isApproved: boolean;
  isAuthorizedByParent: boolean;
};

type XapiInfo = {
  environment: 'test' | 'prod';
  platform: string;
  homepage: string;
  lrsCredentials: {
    username: string;
    password: string;
  };
};

---

Support {#support}

if you encounter CORS issues, make sure Zanichelli IDP allows requests from your Origin