5.1.0 • Published 4d ago

@zanichelli/idp-login-topbar

Licence

ISC

Version

5.1.0

Deps

Size

2.4 MB

Vulns

Weekly

Summary Dependency Versions

Overview

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

Release Notes {#changelog}

v.5.1.0

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

v.5.0.0

Removed IdpLogin props menuItems and actionItems
Added translations based on browsed preferred language; supported languages are Italian and English

v.4.2.0

Updated the password recovery management: users are no longer redirected to the myZanichelli login page. Instead, the recovery modal now triggers directly in-place.

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}

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

Properties

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

Property	Attribute	Description	Type	Default
`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`
`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; }>`
`recoveryPasswordModalOpen`	emitted on recovery password modal open	`CustomEvent<void>`
`recoveryPasswordModalClose`	emitted on recovery password modal close	`CustomEvent<{id: string, where: RecoveryPasswordModalClickPosition}>`

Methods

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

return current user data

Returns

Type: Promise<UserLoaded>

`logout() => Promise<void>`

logout current user

Returns

Type: Promise<void>

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 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

Internazionalization

The component supports it and en languages; if a different language is detected in the browser, it will default to en.