Login

Purpose

The Login component renders the “Login to account” page section.

It provides:

Page title (“Login to account”)

The actual login form UI via the reusable:

Reusables\Login\Default

Optional “No account? Register” call-to-action, controlled by global settings.

In Noir, the Login component itself is mostly a wrapper/container. The login functionality lives in the Login reusable.

Inputs (model contract)

Model shape (storefront example)

{
  "name": "Login",
  "view": "Default",
  "section": "SectionA",
  "settings": {
    "id": "Component Id",
    "section": "SectionA",
    "type": "NoirLogin",
    "name": "Login",
    "configuredInContentApi": true,
    "view": "Default",
    "cssClass": ""
  },
  "translations": {
    "loginToAccount": "Sample text",
    "noAccount": "Sample text",
    "register": "Sample text",
    "...": "..."
  }
}

Required fields

settings.id
Used for wrapper id: comp-{{ id }}.

Optional fields

settings.cssClass
Applied only when non-empty and not (UNDEFINED).

translations.*
Used for:

page title

“No account?” text

“Register” link label

JavaScript

Global object

The component includes a JS file for consistency, but it does not implement any client-side behavior:

Functions

None.

Advice

If you need to document actual login behavior (validation, submit, error handling, go-to-checkout gating), document it under:

Reusables → Login

and/or Reusables → LoginModal

Keep this component as a wrapper. Adding JS here would duplicate logic already handled by the reusable.

The Login component itself does not use stores directly.

The Login reusable may use stores (e.g. toast, loginModal) depending on its implementation.

Dependencies

Liquid rendering

Reusables\Login\Default

Global setting: GlobalData.Settings.showRegistration

Notes

The page-level Login component is not the same thing as the login modal. The modal is rendered separately via Reusables\LoginModal in the layout.

The uniquekey is important when there are multiple login UIs in the DOM; do not remove it without checking the reusable’s implementation.

Extras

Template behavior (Liquid + Alpine)

Title

Renders:

translations.loginToAccount

Unique key generation

The template generates a uniquekey string (example format: login-<timestamp>-<random>) using Liquid date/time parts.

It passes this key into the Login reusable:

{% render 'Reusables\\Login\\Default', uniquekey: uniquekey %}

What it means in practice

The reusable can use uniquekey to avoid DOM id collisions if multiple login blocks/modals are present in the same page/session (e.g., page login + login modal).

Register CTA (optional)

Rendered only when GlobalData.Settings.showRegistration is enabled:

Text from translations.noAccount

Link to /register with label translations.register

Login

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

Functions#

Advice#

Global Alpine stores (used by Login)#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#

Title#

Unique key generation#

Register CTA (optional)#