The login component

The login component is an authentication form with numerous customization options. It offers the main functionalities for this type of form. The user can enter their username and password. There are many optional attributes such as the use of icons on input fields, the insertion of a link to a page to reset the password, an option for the application to maintain the user's identity via a cookie. It is also possible to set the title of the form, display the company logo, or customize the appearance of the form submission button.

This component should be used in conjunction with other components such as authentication and cookie. It does not implement any logic and simply collects the username and password to pass them to the code responsible for authentication.

A few things to know :

The form uses the POST method to transmit information to the destination page,
The user's username and password are entered into fields with the names username and password,
To obtain the values of username and password, you must use the variables :username and :password,
When you set the remember_me_text property, the variable :remember becomes available after form submission to check if the user checked the "remember me" checkbox.

Introduced in SQLPage v0.39.0.

Top-level parameters

name	required	type	description
password	REQUIRED	TEXT	Label and placeholder for the password field.
username	REQUIRED	TEXT	Label and placeholder for the user account identifier text field.
action		TEXT	An optional link to a target page that will handle the results of the form.
class		TEXT	class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. Added in v0.18.0.
enctype		TEXT	Form data encoding.
error_message		TEXT	An error message to display above the form, typically shown after a failed login attempt.
error_message_md		TEXT	A markdown error message to display above the form, typically shown after a failed login attempt.
footer		TEXT	A text placed at the bottom of the authentication form. If both footer and footer_md are specified, footer takes precedence.
footer_md		TEXT	A markdown text placed at the bottom of the authentication form. Useful for creating links to other pages (creating a new account, contacting technical support, etc.).
forgot_password_link		TEXT	The link to the page allowing the user to reset their password.
forgot_password_text		TEXT	A text for the link allowing the user to reset their password. If the text is empty, the link is not displayed.
id		TEXT	id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).
image		URL	The URL of an centered image displayed before the title.
password_icon		ICON	Icon to display on the left side of the input field, on the same line.
remember_me_text		TEXT	A text for the option allowing the user to request the preservation of their identity. If the text is empty, the option is not displayed.
title		TEXT	Title of the authentication form.
username_icon		ICON	Icon to display on the left side of the input field, on the same line.
validate		TEXT	The text to display in the button at the bottom of the form that submits the values.
validate_color		COLOR	The color of the button at the bottom of the form that submits the values. Omit this property to use the default color.
validate_outline		COLOR	A color to outline the validation button.
validate_shape		TEXT	The shape of the validation button.
validate_size		TEXT	The size of the validation button.

No data

Example 1

Using the main options of the login component

When the user clicks the "Sign in" button, the form is submitted to the /examples/show_variables.sql page. There, you will have access to the variables:

:username: the username entered by the user
:password: the password entered by the user
:remember: the string "on" if the checkbox was checked, or NULL if it was not checked

select 
    'login'                    as component,
    '/examples/show_variables' as action,
    '../assets/icon.webp'      as image,
    'Please login to your account' as title,
    'Username'                 as username,
    'Password'                 as password,
    'user'                     as username_icon,
    'lock'                     as password_icon,
    'Forgot your password?'    as forgot_password_text,
    'reset_password.sql'       as forgot_password_link,
    'Remember me'              as remember_me_text,
    'Don''t have an account? [Register here](register.sql)' as footer_md,
    'Sign in'                  as validate;

Result

Example 2

Most basic login form

select 
    'login' as component;

The login component

Top-level parameters

Example 1

Result

Please login to your account

Example 2

Result

See also: other components