# IDP Login Component
## Overview
- [Changelog](#changelog)
- [Installation Guide](#installation)
- [Usage](#usage)
- [Available Components](#components)
- [Topbar with modal login form](#idp-login)
- [Inline login form](#idp-login-inline)
- [Enums and Types](#enums)
- [Support](#support)
---
## Release Notes {#changelog}
#### 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:
```bash
yarn add @zanichelli/idp-login-topbar
```
or import with jsDelivr or Unpkg in your html:
```html
// using jsDelivr
// using unpkg
```
### Albe Web Components dependency
This component requires Albe Web Components Library.
You can install Albe via [NPM](https://github.com/ZanichelliEditore/design-system)
```bash
yarn add @zanichelli/albe-web-components
```
or include it in your app with `script` tag:
```html
// using jsDelivr
// using unpkg
```
You need to include stylesheet too:
```html
// using jsDelivr
// using unpkg
```
---
## Usage {#usage}
### Usage custom element
```jsx
import { defineCustomElements } from '@zanichelli/idp-login-topbar/dist/wc/loader';
defineCustomElements();
```
### Usage React Bindings
```jsx
import { IdpLogin } from '@zanichelli/idp-login-topbar/dist/react';
return ;
```
Please refer to component [documentation](components-library/src/components/idp-login/readme.md) to see properties and events list
### Components {#components}
#### Topbar with modal login form {#idp-login}
Custom element: ``
React binding: ``
##### Properties
Refer to section [Enums and Types](#enums) 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` |
| `loginSuccess` | emitted on login success | `CustomEvent<{ token: string; teachingGroups?: TeachingGroup[]; }>` |
| `logoutFailed` | emitted on logout fail | `CustomEvent` |
| `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` |
| `recoveryPasswordModalClose` | emitted on recovery password modal close | `CustomEvent<{id: string, where: RecoveryPasswordModalClickPosition}>` |
##### Methods
###### `getUserInfo() => Promise`
return current user data
###### Returns
Type: `Promise`
###### `logout() => Promise`
logout current user
###### Returns
Type: `Promise`
#### Inline login form {#idp-login-inline}
Custom element: ``
React binding: ``
##### Properties
Refer to section [Enums and Types](#enums) 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` |
| `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`.