@zanichelli/idp-login-topbar v2.0.3

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

Events

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.

Events

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