User login via email and password to authenticate in the system.
The container specified by the container property determines the component’s width.
This component renders the form immediately. If you need to hide it and toggle its visibility via a button or link, you must implement that logic in your web layer.
Parameters*
Main parameters
Parameter | Description | Example |
webSessionId | Unique web session identifier. It is used to persist the user’s session across components and pages. | 01CDA38719E74937A2F275757ABA34EE |
bookingEngine | Booking Engine code | 2 |
system | System Code - HPH: Desktop
- MPH: Mobile
- CCH: Call Center
- B2B: B2B
| HPH |
language | Language | es |
myBookingsUrl | Page where the reservations listing component is located. | /area-cliente/consultar-reservas.html |
myDataUrl | Page where the user data modification component is located. | /area-cliente/modificacion-datos-cliente.html |
signUpUrl | Page where the user registration component is located. | /area-cliente/registro-cliente.html |
okHandler | Function that returns an object containing user information if the user is logged in. |
|
koHandler | Function called if an error occurs during login. | loginKo |
labels | Object for passing custom text to replace the component’s labels. |
|
component | Fixed value “customer-login”. | customer-login |
container | ID of the HTML element that will serve as the component’s container. | personLogin |
Labels Object
Parameter | Description | Example |
forget_password | Replaces the label: “Forgot your password?” | Reset password |
enter_with_user | Replaces the label: “Log in with my username” (displayed after clicking the “Forgot password?” link to return to login mode) | Return to login |
signup | Replaces the label: “Sign up!” | Create an account |
* Any parameters that aren’t fixed must be replaced with the appropriate values at runtime, based on the type of search being performed.
Example of HTML Commented with Required Information
<script>
// Function that displays a welcome message with the logged-in user’s name, or shows the generic login prompt if the user is not logged in.
function loginOk(customer) {
if (customer != null && customer.firstName != null && customer.firstName != "") {
// For example, the website could display a message like: Welcome customer.firstName
}
}
function loginKo() {
// Show an error message
}
// Custom labeling in the component
const labels = new Map();
labels.set("forget_password", "Recuperar contraseña"); // Original text: Did you forget your password?
labels.set("enter_with_user", "Volver al login"); // Original text: Enter with my user
labels.set("signup", "Crear cuenta"); // SingUp!
// Component parameters
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> |
|
