Improve SSO demo UX

- Update docker compose command to use `--watch` flag - Add watch
configuration for SQLPage development - Enhance login page with hero
component and better styling - Simplify protected page welcome message -
Fix OIDC middleware path check logic - Update protected paths in config
to use `/protected` instead of `/protected.sql`

Author: lovasoa

examples/single sign on/README.md

@@ -20,7 +20,7 @@ Depending on your use case, you can choose the appropriate protocol for your app
 To run the demo, you just need docker and docker-compose installed on your machine. Then, run the following commands:
 
 ```bash
-docker-compose up
+docker compose up --watch
 ```
 
 This will start a Keycloak server and a SQLPage server. You can access the SQLPage application at http://localhost:8080.
@@ -115,4 +115,3 @@ The demo uses Docker Compose to set up both SQLPage and Keycloak. The configurat
 - [SQLPage OIDC Documentation](https://sql-page.com/sso)
 - [OpenID Connect](https://openid.net/connect/)
 - [Authorization Code Flow](https://openid.net/specs/openid-connect-core-1_0.html#CodeFlowAuth)
-

examples/single sign on/docker-compose.yaml

@@ -25,6 +25,10 @@ services:
     depends_on:
       keycloak:
         condition: service_healthy
+    develop:
+      watch:
+        - action: restart
+          path: ./sqlpage/
 
   keycloak:
     build:

examples/single sign on/index.sql

@@ -1,16 +1,18 @@
 SELECT 'shell' as component, 'My public app' as title;
 
--- For anonymous users
-SELECT 'text' as component,
-    'You are not logged in.' as title,
-    'This is a public page. Click the button below to log in and access the protected page.' as contents_md
-    WHERE sqlpage.user_info('email') IS NULL;
+set email = sqlpage.user_info('email');
 
-SELECT 'button' as component WHERE sqlpage.user_info('email') IS NULL;
-SELECT 'Login' as title, 'protected.sql' as link, 'login' as icon WHERE sqlpage.user_info('email') IS NULL;
+-- For anonymous users
+SELECT 'hero' as component,
+    '/protected' as link,
+    'Log in' as link_text,
+    'Welcome' as title,
+    'You are currently browsing as a guest. Log in to access the protected page.' as description,
+    'https://images.pexels.com/photos/954599/pexels-photo-954599.jpeg' as image
+WHERE $email IS NULL;
 
 -- For logged-in users
 SELECT 'text' as component,
     'Welcome back, ' || sqlpage.user_info('name') || '!' as title,
-    'You are logged in as ' || sqlpage.user_info('email') || '. You can now access the [protected page](protected.sql) or [log out](logout.sql).' as contents_md
-    WHERE sqlpage.user_info('email') IS NOT NULL;
+    'You are logged in as ' || sqlpage.user_info('email') || '. You can now access the [protected page](/protected) or [log out](/logout).' as contents_md
+WHERE $email IS NOT NULL;

examples/single sign on/protected.sql

@@ -4,12 +4,14 @@ select 'shell' as component, 'My secure app' as title,
     'logout' as menu_item;
 
 select 'text' as component,
-    'You're in !' as title,
-    'You are logged in as *`' || $user_email || '`*.\nYou have access to this protected page.
+    'You''re in, '|| sqlpage.user_info('name') || ' !' as title,
+    'You are logged in as *`' || $user_email || '`*.
+
+You have access to this protected page.
 
 ![open door](/assets/welcome.jpeg)'
     as contents_md;
 
 select 'list' as component;
 select key as title, value as description
-from json_each(sqlpage.user_info_token());
+from json_each(sqlpage.user_info_token());

examples/single sign on/sqlpage/sqlpage.yaml

@@ -2,4 +2,4 @@ oidc_issuer_url: http://localhost:8181/realms/sqlpage_demo
 oidc_client_id: sqlpage
 oidc_client_secret: qiawfnYrYzsmoaOZT28rRjPPRamfvrYr # For a safer setup, use environment variables to store this
 oidc_protected_paths:
-  - /protected.sql
+  - /protected