use the login component in the user auth example

Author: lovasoa

examples/user-authentication/docker-compose.yml

@@ -1,6 +1,8 @@
 services:
   web:
     image: lovasoa/sqlpage:main # main is cutting edge, use sqlpage/SQLPage:latest for the latest stable version
+    build:
+      context: ".."
     ports:
       - "8080:8080"
     volumes:

examples/user-authentication/signin.sql

@@ -1,14 +1,9 @@
-SELECT 'form' AS component,
+SELECT 'login' AS component,
+    'login.sql' AS action,
     'Sign in' AS title,
-    'Sign in' AS validate,
-    'login.sql' AS action;
-
-SELECT 'username' AS name;
-SELECT 'password' AS name, 'password' AS type;
-
-SELECT 'alert' as component,
-    'Sorry' as title,
-    'We could not authenticate you. Please log in or [create an account](signup.sql).' as description_md,
-    'alert-circle' as icon,
-    'red' as color
-WHERE $error IS NOT NULL;
+    'Username' AS username,
+    'Password' AS password,
+    'user' AS username_icon,
+    'lock' AS password_icon,
+    case when $error is not null then 'We could not authenticate you. Please log in or [create an account](signup.sql).' end as error_message_md,
+    'Sign in' AS validate;

sqlpage/templates/login.handlebars

@@ -20,13 +20,14 @@
                 {{#if title}}
                     <h1 class="text-center mb-3">{{title}}</h1>
                 {{/if}}
-                {{#if error_message}}
+                {{#if (or error_message error_message_md)}}
                     <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 class="overflow-auto w-100 remove-bottom-margin">
+                            {{~error_message~}}
+                            {{{~markdown error_message_md~}}}
                         </div>
                     </div>
                 {{/if}}