add an error_message property to the login component

- Updated SQL queries in `create_session_token.sql` and `login.sql` to use consistent parameter naming conventions.
- Enhanced the login form in `login.sql` to include an error message for failed login attempts.
- Added a new parameter `error_message` in the migration file for better user feedback.
- Modified the Handlebars template to display the error message when applicable, improving user experience during authentication.

Author: lovasoa

examples/official-site/examples/authentication/create_session_token.sql

@@ -4,12 +4,12 @@ delete from user_sessions where created_at < datetime('now', '-1 day');
 -- check that the 
 SELECT 'authentication' AS component,
     'login.sql?failed' AS link, -- redirect to the login page on error
-    (SELECT password_hash FROM users WHERE username = :Username) AS password_hash, -- this is a hash of the password 'admin'
-    :Password AS password; -- this is the password that the user sent through our form in 'index.sql'
+    (SELECT password_hash FROM users WHERE username = :username) AS password_hash, -- this is a hash of the password 'admin'
+    :password AS password; -- this is the password that the user sent through our form in 'index.sql'
 
 -- if we haven't been redirected, then the password is correct
 -- create a new session
-insert into user_sessions (session_token, username) values (sqlpage.random_string(32), :Username)
+insert into user_sessions (session_token, username) values (sqlpage.random_string(32), :username)
 returning 'cookie' as component, 'session_token' as name, session_token as value;
 
 -- redirect to the authentication example home page

examples/official-site/examples/authentication/login.sql

@@ -1,18 +1,23 @@
 select 'dynamic' as component, properties FROM example WHERE component = 'shell' LIMIT 1;
 
-select 'form' as component, 'Authentication' as title, 'Log in' as validate, 'create_session_token.sql' as action;
-select 'Username' as name, 'user' as prefix_icon, 'admin' as placeholder;
-select 'Password' as name, 'lock' as prefix_icon, 'admin' as placeholder, 'password' as type;
-
-select 'alert' as component, 'danger' as color, 'Invalid username or password' as title where $failed is not null;
+select 
+    'login'                 as component,
+    'create_session_token.sql'             as action,
+    '/assets/icon.webp'   as image,
+    'Demo Login Form' as title,
+    'Username'              as username,
+    'Password'              as password,
+    case when $failed is not null then 'Invalid username or password. In this demo, you can log in with admin / admin.' end as error_message,
+    'In this demo, the username is "admin" and the password is "admin".' as footer_md,
+    'Sign in'               as validate;
 
 select 'text' as component, '
 
 # Authentication
 
 This is a simple example of an authentication form.
 It uses 
- - the [`form`](/documentation.sql?component=form#component) component to create a login form
+ - the [`login`](/documentation.sql?component=login#component) component to create a login form
  - the [`authentication`](/documentation.sql?component=authentication#component) component to check the user password
  - the [`cookie`](/documentation.sql?component=cookie#component) component to store a unique session token in the user browser
  - the [`redirect`](/documentation.sql?component=redirect#component) component to redirect the user to the login page if they are not logged in 

examples/official-site/sqlpage/migrations/68_login.sql

@@ -20,6 +20,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('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),
+    ('error_message','An error message to display above the form, typically shown after a failed login attempt.','TEXT',TRUE,TRUE),
     ('username','User account identifier.','TEXT',TRUE,FALSE),
     ('password','User password.','TEXT',TRUE,FALSE),
     ('username_icon','Icon to display on the left side of the input field, on the same line.','ICON',TRUE,TRUE),

sqlpage/templates/login.handlebars

@@ -13,13 +13,23 @@
                 {{/if}}
             >
                 {{#if image}}
-                    <div class="form-group d-flex justify-content-center align-items-center">
+                    <div class="form-group d-flex justify-content-center align-items-center mb-2">
                         <img src="{{image}}"/>
                     </div>
                 {{/if}}
                 {{#if title}}
                     <h1 class="text-center mb-3">{{title}}</h1>
                 {{/if}}
+                {{#if error_message}}
+                    <div class="alert alert-danger mb-3" role="alert">
+                        <div class="alert-icon">
+                            {{icon_img 'alert-circle'}}
+                        </div>
+                        <div class="overflow-auto w-100">
+                            {{error_message}}
+                        </div>
+                    </div>
+                {{/if}}
                 <label class="form-label">{{username}}</label>    
                 <div class="input-icon mb-3">
                     {{#if username_icon}}