@zanichelli/idp-login-topbar

Overview

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

Release Notes {#changelog}

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}

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

`logout() => Promise<void>`

logout current user

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`
`regBackUrl`	`reg-back-url`	back Url for registration step	`string`	`undefined`
`signupButton`	`signup-button`	display signup button	`boolean`	`true`
`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;
};

Support {#support}

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

@zanichelli/idp-login-topbar

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads