Skip to content

The login component is an authentication form for users of an application #1058

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+145 −2
Open

The login component is an authentication form for users of an application #1058

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions examples/official-site/sqlpage/migrations/68_login.sql
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
INSERT INTO component(name, icon, description, introduced_in_version) VALUES
('login', 'password-user', '
The login component is an authentication form for users of an application.

It allows the entry of a user account consisting of a username and a password.

It offers additional features such as the ability to request session persistence or to reset the password.', '0.39.0');

INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'login', * FROM (VALUES
('title','Title of the authentication form.','TEXT',TRUE,TRUE),
('enctype','Form data encoding.','TEXT',TRUE,TRUE),
('action','An optional link to a target page that will handle the results of the form. ','TEXT',TRUE,TRUE),
('username','User account identifier.','TEXT',TRUE,FALSE),
('password','User password.','TEXT',TRUE,FALSE),
('image','The URL of an centered image displayed before the title.','URL',TRUE,TRUE),
('forgot_password_text','A text for the link allowing the user to reset their password. If the text is empty, the link is not displayed.','TEXT',TRUE,TRUE),
('forgot_password_link','The link to the page allowing the user to reset their password.','TEXT',TRUE,TRUE),
('remember_me_text','A text for the option allowing the user to request the preservation of their work session. The name of the field is remember. If the text is empty, the option is not displayed.','TEXT',TRUE,TRUE),
('footer','A text placed at the bottom of the authentication form.','TEXT',TRUE,TRUE),
('footer_md','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.).','TEXT',TRUE,TRUE),
('validate','The text to display in the button at the bottom of the form that submits the values.','TEXT',TRUE,FALSE),
('validate_color','The color of the button at the bottom of the form that submits the values. Omit this property to use the default color.','COLOR',TRUE,TRUE),
('validate_shape','The shape of the validation button.','TEXT',TRUE,TRUE),
('validate_outline','A color to outline the validation button.','COLOR',TRUE,TRUE),
('validate_size','The size of the validation button.','TEXT',TRUE,TRUE)
) x;

-- Insert example(s) for the component
INSERT INTO example(component, description, properties)
VALUES (
'login',
'Using the main options of the login component',
Comment on lines +31 to +32
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we describe it in a little more details ? Ideally, provide a sql code block with example validation code used to actually log the user in and create a session.

Maybe get inspiration from https://sql-page.com/component.sql?component=authentication ? Some users need handholding, especially for scare high-stakes tasks like implementing an authentication mechanism. Showing the docs for the UI without some explanation about how to make it secure on the backend would probably lead to people implementing insecure auth.

JSON(
'[
{
"component": "login",
"action": "login.sql",
"image": "../assets/icon.webp",
"title": "Please login to your account",
"username": "Username",
"password": "Password",
"forgot_password_text": "Forgot your password?",
"forgot_password_link": "reset_password.sql",
"remember_me_text": "Remember me",
"footer_md": "Don''t have an account? [Register here](register.sql)",
"validate": "Sign in"
}
]'
)
);

-- 265707.png
6 changes: 4 additions & 2 deletions examples/official-site/sqlpage/migrations/99_shared_id_class_attributes.sql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ FROM (VALUES
('title', TRUE),
('tracking', TRUE),
('text', TRUE),
('carousel', TRUE)
('carousel', TRUE),
('login', TRUE)
);

INSERT INTO parameter(component, top_level, name, description, type, optional)
Expand Down Expand Up @@ -49,6 +50,7 @@ FROM (VALUES
('timeline', FALSE),
('title', TRUE),
('tracking', TRUE),
('carousel', TRUE)
('carousel', TRUE),
('login', TRUE)
);

89 changes: 89 additions & 0 deletions sqlpage/templates/login.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<div class="container {{class}}">
<div class="row d-flex justify-content-center">
<div class="col-md-6">
<form
{{#if id}}id="{{id}}"{{/if}}
class="mt-3 mb-1"
method="post"
{{#if enctype}}enctype="{{enctype}}"{{/if}}
{{#if action}}
action="{{action}}"
{{else}}
{{#if id}}action="#{{id}}"{{/if}}
{{/if}}
>
{{#if image}}
<div class="form-group d-flex justify-content-center align-items-center">
<img src="{{image}}"/>
</div>
{{/if}}
{{#if title}}
<h1 class="text-center mb-3">{{title}}</h1>
{{/if}}
<label class="form-label">{{username}}</label>
<div class="input-icon mb-3">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="7" r="4" />
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>
</span>
Comment on lines +25 to +33
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use builtin tabler icons like in the other components ? And maybe make the icon configurable ?

<input type="text" name="username" id="username" value="" class="form-control" placeholder="{{username}}" required="required" autofocus/>
</div>
<label class="form-label">{{password}}
{{#if forgot_password_text}}
<span class="form-label-description"><a href="{{forgot_password_link}}">{{forgot_password_text}}</a></span>
{{/if}}
</label>
<div class="input-icon mb-3">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-lock">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z" />
<path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />
<path d="M8 11v-4a4 4 0 1 1 8 0v4" />
</svg>
</span>
Comment on lines +42 to +52
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could we use the built-in tabler icons like in the other components instead of inlining the svg ?

<input type="password" name="password" id="password" value="" class="form-control" placeholder="{{password}}" required="required"/>
</div>
{{#if remember_me_text}}
<label class="form-check">
<input class="form-check-input" id="remember" name="remember" type="checkbox" />
<span class="form-check-label">{{remember_me_text}}</span>
</label>
{{/if}}
<div class="form-group d-flex justify-content-center align-items-center">
<input
class="btn
btn-{{default validate_color "primary"}}
{{#if validate_shape}} btn-{{validate_shape}} {{/if}}
{{#if validate_outline}} btn-outline-{{validate_outline}} {{/if}}
{{#if validate_size}} btn-{{validate_size}} {{/if}}"
type="submit"
name="submit"
value="{{validate}}"/>
</div>
{{#if (or footer footer_md)}}
<hr>
<div class="text-center mb-0">
<small class="form-hint mt-0">
{{#if footer}}
{{footer}}
{{else}}
{{#if footer_md}}
{{{markdown footer_md}}}
{{/if}}
{{/if}}
</small>
</div>
{{/if}}
</form>
</div>
</div>
</div>
Loading