TUI Modular Web Architecture

Login

This MFE allows the user to log in to his own account. It supports multiple languages and markets. Required attributes for this MFE are "forgot-password-link", "registration-link". This MFE is used in the "my account pages" host component.

Login MFE

This MFE allows the user to log in to his own account. It supports multiple languages and markets. Required attributes for this MFE are "forgot-password-link", "manage-my-bookings-link", "registration-link". This MFE is used in the "my account pages" host component.

Links

ResourceLink
SIT Envhttps://sit.tuiflyprjuat.be/en/my-account
MFE Linkhttps://mwa-nonprod.tui.com/customer/mwa/login-mfe-test/index.html
Manifesthttps://mwa-nonprod.tui.com/customer/mwa/login-mfe-test/openmfe/manifest.yml
Docshttps://mwa-nonprod.tui.com/customer/mwa/login-mfe-test/openmfe/documentation.html

Third party integration

Gigya SDK Login

This method uses for logging in users. Gigya SSO login.

Documentation:

https://help.sap.com/docs/SAP_CUSTOMER_DATA_CLOUD/8b8d6fffe113457094a17701f63e3d6a/683844d3c4b54104b2201efffdf558e3.html

Parameters:

ParamDescription
loginIDUser email
passwordUser password
captchaTokenGoogle reCAPTCHA token that generated by grecaptcha
ignoreInterruptionsAlways true
sessionExpiration0 or 1 Depends on "Keep me signed in" checkbox

Gigya SDK Resend Verification Code

If users were not verified their accounts (email verification) after login users can see a message about it and automatically resend the verification email using Resend Verification Code method.

Documentation:

https://help.sap.com/docs/SAP_CUSTOMER_DATA_CLOUD/8b8d6fffe113457094a17701f63e3d6a/4138f19d70b21014bbc5a10ce4041860.html

Parameters:

ParamDescription
regTokenReceives after calling login method if user's account wasn't verified
emailUser email

Usage

Add the following script tag to your web page to load the microfrontend. Note: This is required only once per webpage, even when you embed multiple instances of the microfrontend.

<script src="https://mwa-nonprod.tui.com/customer/mwa/login-mfe-test/main.js" defer></script>

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

<tui-login
	locale="VALUE"
	market="VALUE"
	forgot-password-link="VALUE"
	registration-link="VALUE">
</tui-login>

Examples

  • Login MFE with UK_TH in English.

    <tui-login
    	data-theme="tui-light"
    	locale="en"
    	market="UK_TH"
    	forgot-password-link="https://www.tui.co.uk/destinations/your-account/login/pw/forgot-password-link"
    	manage-my-bookings-link="https://www.tui.co.uk/destinations/your-account/manage-my-bookings-link"
    	registration-link="https://www.tui.co.uk/destinations/your-account/registration-link">
    </tui-login>

  • Login MFE with NL in Dutch.

    <tui-login
    	data-theme="tui-light"
    	locale="nl"
    	market="NL"
    	forgot-password-link="https://www.tui.nl/mijntui/wachtwoord-vergeten/"
    	manage-my-bookings-link="https://www.tui.nl/mijntui/"
    	registration-link="https://www.tui.nl/mijntui/#registreren">
    </tui-login>

Attributes

This microfrontend accepts the following attributes:

NameDescriptionValuesDefaultRequired
data-theme

This is the theme that will be used to attach TUI's styles.

tui, tui-light, firstchoice, musementno
locale

This is the locale that will be used to render the MFE.

nl-NL, nl-BE, fr-FR, fr-MA, sv-SE, nn-NO, nb-NO, da-DK, fi-FI, es-ES, it-IT, pt-PT, pt-BR, de-DE, de-AT, de-CH, pl-PL, en-GByes
market

This is the market ID where the MFE will be embedded.

UK_TH, UK_FC, UK_FJ, BE, NL, BE_FO, FR_FO, MA_FO, SE, NO, DK, FI, MM, TT, NL_FC, BE_FCyes
forgot-password-link

This is the link to manage the user's bookings

yes
registration-link

This is the link to create an account

yes
manage-my-bookings-link

This is the link to see my bookings as a user

no
ui-version

This attribute will be used to render diferent versions of the interface

standard, streamlined, compactstandardno

Events

This microfrontend emits the following events:

EventSchema

tui-auth-retrieve-gigya-object

this event is triggered when the MFE is loaded

type: object
properties:
  setCustomerState:
    type: object
    description: this function is used to get the gigya object

tui-auth-refresh-customer-state

this event is triggered when the user logs in and when costumer state is refreshed

type: boolean

tui-auth-retrieve-idToken-fetcher

this event is triggered when the MFE is loaded

type: object
properties:
  callback:
    type: object
    description: this function is used to set the idToken

tui-auth-add-customer-state-consumer

this event is triggered when the MFE is loaded

type: object
properties:
  onCustomerStateChange:
    type: object
    description: this function is used to set the customer state

tui-auth-callback-when-initialized

this event is triggered when the MFE is loaded

type: object
properties:
  callback:
    type: object
    description: this function clears a timeout that is used to wait for the
      integration layer

openmfe.analytics

event to dispatch on login failure

type: object
properties:
  detail:
    type: object
    properties:
      origin:
        const: Customer Account-Login
      id:
        const: Customer Account-Login
      category:
        const: Customer Account
      name:
        const: Login Failure code errorCode
      action:
        const: Login Failure code errorCode
      data:
        type: object
        properties:
          eventLabel:
            const: Login Failure code errorCode
  bubbles:
    const: true
  cancelable:
    const: true
  composed:
    const: true

openmfe.analytics

event to dispatch on keep me signed in

type: object
properties:
  detail:
    type: object
    properties:
      origin:
        const: Customer Account-Login
      id:
        const: Customer Account-Login
      category:
        const: Customer Account
      name:
        const: Tick on keep me logged in
      action:
        const: Tick on keep me logged in
      data:
        type: object
        properties:
          eventLabel:
            const: Tick on keep me logged in
  bubbles:
    const: true
  cancelable:
    const: true
  composed:
    const: true

openmfe.analytics

event to dispatch on successful login

type: object
properties:
  detail:
    type: object
    properties:
      origin:
        const: CA-Errors-My Bookings Page
      id:
        const: CA-Errors-My Bookings Page
      category:
        const: Customer Account
      name:
        const: "My Bookings Page: Login Success"
      action:
        const: login success
      data:
        type: object
        properties:
          eventLabel:
            const: login success
  bubbles:
    const: true
  cancelable:
    const: true
  composed:
    const: true

openmfe.analytics

event to dispatch on resend activation link

type: object
properties:
  detail:
    type: object
    properties:
      origin:
        const: CA-Errors-Resend Activation Page
      id:
        const: CA-Errors-Resend Activation Page
      category:
        const: Customer Account
      name:
        const: "Resend Activation Page: Activation Link Sent"
      action:
        const: Activation Link Sent
      data:
        type: object
        properties:
          eventLabel:
            const: Activation Link Sent
  bubbles:
    const: true
  cancelable:
    const: true
  composed:
    const: true

openmfe.analytics

event to dispatch on forgotten your password link

type: object
properties:
  detail:
    type: object
    properties:
      origin:
        const: CA-Login Page
      id:
        const: CA-Login Page
      category:
        const: Customer Account
      name:
        const: "myTUI: Click on Forgotten your password"
      action:
        const: Password forgotten
      data:
        type: object
        properties:
          eventLabel:
            const: Password forgotten
  bubbles:
    const: true
  cancelable:
    const: true
  composed:
    const: true

openmfe.analytics

event to dispatch on registration page link click

type: object
properties:
  detail:
    type: object
    properties:
      origin:
        const: CA-Login Page
      id:
        const: CA-Login Page
      category:
        const: Customer Account
      name:
        const: "myTUI: Switch to Registration page"
      action:
        const: Switch to registration
      data:
        type: object
        properties:
          eventLabel:
            const: Switch to registration
  bubbles:
    const: true
  cancelable:
    const: true
  composed:
    const: true

openmfe.analytics

event to dispatch on login click

type: object
properties:
  detail:
    type: object
    properties:
      origin:
        const: CA-Login Page
      id:
        const: CA-Login Page
      category:
        const: Customer Account
      name:
        const: "myTUI: click on login button"
      action:
        const: click on login button
      data:
        type: object
        properties:
          eventLabel:
            const: click on login button
  bubbles:
    const: true
  cancelable:
    const: true
  composed:
    const: true

tui-my-drawer.open

Event dispatched to open the drawer with the requested MFE and attributes inside

type: object
properties:
  detail:
    type: object
    properties:
      mfeName:
        type: string
      mfeAttributes:
        type: object
      loginAttributes:
        type: object