Skip to main content

​
Loyalty

Authentication, registration, and profile management components for your loyalty program.
👥 Component types: Authentication, registration, profile management | Benefits: Exclusive rates, special promotions, member advantages

​
Components Overview

Session

Login/logout interface with member dropdown menu

Signup

Registration form for new loyalty members

Profile

Member dashboard with info and reservations

​
Session Component

The <session> component handles user authentication with dynamic behavior:
  • Not Authenticated
  • Authenticated
Displays a login button that opens a modal with:
  • Login form
  • Password recovery option
  • Link to registration page

​
Basic Implementation

<div data-mirai-component="session"></div>

​
Customization with Ghosting

Customize the component appearance using the ghosting system: 
<div data-mirai-component="session">
  <div data-ghost>
    <span>Login</span>
    <span>Welcome, [firstName]!</span>
  </div>
</div>
The first child = unauthenticated state
The second child = authenticated state
<div data-mirai-component="session">
  <div data-ghost>
    <button class="login-btn">Member Login</button>
    <div class="user-info">Hello, [firstName] [lastName] ([email])</div>
  </div>
</div>
Available variables for authenticated state:
  • [firstName] - User’s first name
  • [lastName] - User’s last name
  • [email] - User’s email address

​
Signup Component

The <signup> component provides the registration form for new loyalty members.

​
Implementation

<div data-mirai-component="signup"></div>

​
Registration Process

1

User fills form

Complete registration on /create-account page
2

Email verification

Activation link sent to user’s email
3

Account activation

User clicks link and returns to homepage
4

First login

<session> component on homepage enables authentication
The homepage must include <session> component to handle account activation and subsequent login.

​
Profile Component

The <profile> component provides authenticated users with a complete dashboard:

Personal Information

  • Edit personal details
  • Change password
  • Delete account

My Reservations

  • View past bookings
  • Check upcoming stays
  • Access booking details

​
Implementation

<div data-mirai-component="profile"></div>

​
Required Pages

​
Complete Integration Example

<!-- Homepage (index.html) -->
<header>
  <div data-mirai-component="session">
    <div data-ghost>
      <button class="nav-login">Login</button>
      <span class="nav-user">Hi, [firstName]!</span>
    </div>
  </div>
</header>

<!-- Registration page (/create-account) -->
<main>
  <h1>Join Our Loyalty Program</h1>
  <div data-mirai-component="signup"></div>
</main>

<!-- Profile page (/my-account) -->
<main>
  <h1>My Account</h1>
  <div data-mirai-component="profile"></div>
</main>
💬 Need help setting up your loyalty program? Contact us at [email protected]