The Login Component

Description

How to integrate login on your website

First, if you want to load the login component through cotton-ball, you need to load the cotton-ball as following:

<script type="text/javascript" src="https://api.tui.com/ml/cotton-ball/"></script>

Then you need to load the login component:

<div
    class="tui-component tui-component-login"
    data-lang="STRING"
    data-event-scope="STRING"
    data-authorities="STRING"
    data-visible="STRING"
    data-label="STRING"
></div>

The login component provides a view, where users can login in a given authority.

<div
    class="tui-component tui-component-login"
    data-lang="STRING"
    data-event-scope="STRING"
    data-authority="STRING"
    data-variant="loginPanel"
    data-label="STRING"
></div>

Screenshots

Variants of the login component.

Meta

Maintainer	picr-developmentb2c-tuicom@tui.com
Locales	de-AT, de-CH, de-DE, en-GB, fr-CH

Usage

Add the following script tag (or something similar) to your web page to have the component load. Note: This is required only once per webpage, even when you embed multiple instances of the component.

<script src="https://api.tui.com/ml/login/ui/" async defer></script>

Add the following HTML code anywhere in your webpage at the position where you want the component to show. You can create multiple instances of the component.

<div class="tui-component tui-component-login"></div>

ATTENTION: This is a legacy component. The tag name must be set as class name (as in the example above), and attributes must be prefixed with data-.

Read more about using components ›

Attributes

This component can be configured with the following attributes:

Name	Description	Allowed Values	Default	Required
authority	Set the authority for the login panel. You need to specify the authority so that the component knows where to look up the user data.	DUMMY, MEINETUI	DUMMY	no
authorities	Enables support more than one authority.			no
variant	To configure which variant will be shown. Default is 'loginState', which is the actual 6M component while 'loginPanel' is just a panel which does not provide the cotton ball event api (see section 'Cotton Ball events').	loginState, loginPanel	loginState	no
visible	To configure whether the component is visible or not.		true	no
label	This variable overwrites the default value for the label (text next to the icon for 'LoginState' / right above the input fields for 'LoginPanel'). Given value will be shown, but not translated. If this attribute is not set the default is used, which is translated.			no

Events