Login mediante email y password para identificar al usuario en el sistema.


El contenedor definido en container es quien determina el width del componente.


Este componente muestra directamente el formulario, por lo que si se desea ocultarlo y hacerlo visible mediante un botón o enlace deberá hacerse en la parte web.


Parámetros*

Principales

Parámetro

Descripción

Ejemplo

webSessionId

Identificador único de sesión web. Se usará para mantener la sesión del usuario entre componentes y páginas.

01CDA38719E74937A2F275757ABA34EE

bookingEngine

Código de motor

2

system

Código de sistema (HPH o MPH)

HPH

language

Idioma

es

myBookingsUrl

Página donde está el componente de listado de reservas

/area-cliente/consultar-reservas.html

myDataUrl

Página donde está el componente de modificación de datos de usuario

/area-cliente/modificacion-datos-cliente.html

signUpUrl

Página donde está el componente de registro de usuario

/area-cliente/registro-cliente.html

okHandler

Función que devuelve un objeto con información del usuario si está logueado


koHandler

Función que se llama en caso de que haya ocurrido un error al hacer login

loginKo

labels

Objeto para pasar textos personalizados para sustituir las etiquetas del componente


component

Valor fijo “customer-login”

customer-login

container

Id de la etiqueta HTML que será el contenedor del componente

personLogin


Objeto labels

Parámetro

Descripción

Ejemplo

forget_password

Sustituye a: ¿Olvidaste tu contraseña?

Recuperar contraseña

enter_with_user

Sustituye a: Entrar con mi usuario (aparece después de hacer click en el enlace para recuperar contraseña para volver al modo de login)

Volver al login

signup

Sustituye a: ¡Regístrate!

Crear cuenta


* Será necesario sustituir los parámetros que no son fijos por los valores necesarios en cada momento en función del tipo de búsqueda a realizar.


Ejemplo del HTML comentado con información necesaria


<script>
    // Función para mostrar el mensaje de bienvenida junto al nombre del usuario logueado o mostrar el mensaje genérico de login si no está logueado
    function loginOk(customer) {
        if (customer != null && customer.firstName != null && customer.firstName != "") {
            // Podría por ejemplo mostrarse un mensaje en la web tipo: Bienvenid@ customer.firstName
        }
    }

    function loginKo() {
        // Mostrar un mensaje de error
    }

    // Etiquetado personalizado en el componente
    const labels = new Map();
    labels.set("forget_password", "Recuperar contraseña"); // Texto original: ¿Olvidaste tu contraseña?
    labels.set("enter_with_user", "Volver al login"); // Texto original: Entrar con mi usuario
    labels.set("signup", "Crear cuenta"); // ¡Regístrate!

    // Parámetros componente
    var genericManifestAndVendorsLoaded = genericManifestAndVendorsLoaded || false;
    var clientComponents = clientComponents || [];
    var firstClientComponent = clientComponents.length;
    clientComponents.push({
        webSessionId: "01CDA38719E74937A2F275757ABA34EE",
        bookingEngine: "2",
        system: "HPH",
        language: "es",
        myBookingsUrl: "/area-cliente/consultar-reservas.html",
        myDataUrl: "/area-cliente/modificacion-datos-cliente.html",
        signUpUrl: "/area-cliente/registro-cliente.html",
        okHandler: loginOk,
        koHandler: loginKo,
        labels: labels,
        component: "customer-login",
        container: "personLogin"
    });

    if(typeof gethTtScript != 'function'){
        window.gethTtScript = function(source){
            var script = document.createElement('script');
            var prior = document.getElementsByTagName('script')[0];
            script.async = 1;
            script.src = source;
            prior.parentNode.insertBefore(script, prior);
        };
    }

    if (firstClientComponent == 0) {
        document.addEventListener('DOMContentLoaded', function () {
            window.parameters = window.parameters || {};
            window.parameters.clientComponents = clientComponents;
        });
        window.gethTtScript("https://hotel.new.hotetec.com/components/customer/js/main.js");
    }
    if (!genericManifestAndVendorsLoaded) {
        window.gethTtScript("https://hotel.new.hotetec.com/components/js/vendors.js");
        window.gethTtScript("https://hotel.new.hotetec.com/components/js/manifest.js");
        genericManifestAndVendorsLoaded = true;
    }
</script>

<div id="personLogin">Cargando...</div>