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}

v4.1.0

• Customized manager label for uni teacher.

v4.0.2

• Fix redirect loop for unconfirmed underage student.

v4.0.1

• Added env type local for idp-login-component.

v4.0.0

• Updated the sending statements XAPI, which now use the Beacon API.
• Made the link to Myzanichelli visible by default

v3.0.0

• Updated @stencil/core dependency to version 4.31.0 and Typescript to version 4.9.5. Note: applyPolyfills is now deprecated; you should remove it from your application before updating the package version. Additionally, setting attributes to undefined is no longer supported; these attributes should be removed instead.

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 } from '@zanichelli/idp-login-topbar/dist/wc/loader';

defineCustomElements();

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.local 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 | |linkLogoTargetBlank |link-logo-target-blank | opens the logo link in a new browser tab if true (target="_blank). | 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 {
  local = 'local'
  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