Examples
Basic
The full PF login page — brand header, credentials form with an "Invalid login credentials" helper on empty submit, remember-me, social login links, sign-up/forgot band, and page footer. Pair with the Background image component for the full-screen backdrop. Composed from the runtime template's login-prefixed slots; the Alpine state lives on a wrapper div.
Log in to your account
Enter your single sign-on LDAP credentials.
Show/hide password
The password field sits in an input group with a plain eye-icon button; Alpine flips the input between
type="password" and type="text".
Log in to your account
Enter your single sign-on LDAP credentials.
With header utilities
__main-header-utilities hosts a language-select dropdown (menu toggle + menu) in the
login card header.
Log in to your account
Enter your single sign-on LDAP credentials.
Documentation
Login page props
Parameters accepted by
{#include components/forms/login-page ... /}. The runtime template defines six
login-prefixed slots — loginHeader, loginHeaderDesc,
loginHeaderUtilities, loginBody,
loginFooter, loginPageFooter — prefixed so they cannot
collide with layout or example-card slot names. Optional regions render only when their
has* guard is set.
| Name | Type | Description |
|---|---|---|
* id
|
String | DOM id. |
titleText
|
String | Heading rendered in the main-header. |
slots loginHeader / loginHeaderDesc /
loginHeaderUtilities / loginBody /
loginFooter / loginPageFooter (guards
hasLoginHeader / hasHeaderUtilities /
hasLoginFooter / hasPageFooter)
|
Qute block | Brand, description, form, action links, and outer-footer regions respectively. |
Usage
Server-side auth. Submit the form to a Quarkus route that issues the session cookie + redirects. Pair with the Alert component for failed-login feedback.