feat: pretty up the IdP html pages

author: mo khan <mo@mokhan.ca> 2025-03-26 16:10:25 -0600
committer: mo khan <mo@mokhan.ca> 2025-03-26 16:10:25 -0600
commit: 2e636ea73e44a84dd2be64c1e199f29fb2236a1d (patch)
tree: 252633d71d1eeb7d5aff001cd0493ce73e227dc1
parent: e1e0f14716a6b169c05a3aac5ffa0cc3bd04609d (diff)
3 files changed, 97 insertions, 39 deletions
diff --git a/bin/idp b/bin/idp
index 16f8bb5..afef32d 100755
--- a/bin/idp
+++ b/bin/idp
@@ -214,21 +214,33 @@ module Authn
 
     def get_login(request)
       template = <<~ERB
-        <!DOCTYPE html>
-        <html>
-          <head><title></title></head>
-          <body>
+      <!doctype html>
+      <html lang="en" data-theme="light">
+        <head>
+          <title>UI</title>
+          <meta charset="utf-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1">
+          <meta name="color-scheme" content="light dark">
+          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+        </head>
+        <body>
+          <main class="container">
+            <nav>
+              <ul>
+                <li><strong>IdP</strong></li>
+              </ul>
+            </nav>
             <form id="login-form" action="/sessions" method="post">
               <input type="input" placeholder="Username" id="username" name="username" value="" />
               <input type="hidden" name="redirect_back" value="<%= request.params["redirect_back"] %>" />
               <input type="password" placeholder="Password" id="password" name="password" value="" />
               <input type="submit" id="login-button" value="Login" />
             </form>
-          </body>
-        </html>
+          </main>
+        </body>
+      </html>
       ERB
-      erb = ERB.new(template, trim_mode: '-')
-      html = erb.result(binding)
+      html = ERB.new(template, trim_mode: '-').result(binding)
       [200, { 'Content-Type' => "text/html" }, [html]]
     end
   end
@@ -304,23 +316,37 @@ module Authn
         relay_state: saml_params[:RelayState]
       ) { |builder| @builder = builder }
       template = <<~ERB
-        <!DOCTYPE html>
-        <html>
-          <head><title></title></head>
-          <body>
+      <!doctype html>
+      <html lang="en" data-theme="light">
+        <head>
+          <title>UI</title>
+          <meta charset="utf-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1">
+          <meta name="color-scheme" content="light dark">
+          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+        </head>
+        <body>
+          <main class="container">
+            <nav>
+              <ul>
+                <li><strong>IdP</strong></li>
+              </ul>
+            </nav>
+
             <h2>Recieved SAML Request</h2>
-            <textarea readonly="readonly" disabled="disabled" cols=225 rows=6><%=- saml_request.to_xml(pretty: true) -%></textarea>
+            <textarea readonly="readonly" disabled="disabled" cols=225 rows=8><%=- saml_request.to_xml(pretty: true) -%></textarea>
 
             <h2>Sending SAML Response (IdP -> SP)</h2>
-            <textarea readonly="readonly" disabled="disabled" cols=225 rows=40><%=- @builder.build.to_xml(pretty: true) -%></textarea>
+            <textarea readonly="readonly" disabled="disabled" cols=225 rows=32><%=- @builder.build.to_xml(pretty: true) -%></textarea>
             <form id="postback-form" action="<%= url %>" method="post">
               <%- saml_params.each do |(key, value)| -%>
                 <input type="hidden" name="<%= key %>" value="<%= value %>" />
               <%- end -%>
-              <input id="submit-button" type="submit" value="Submit" />
+              <input id="submit-button" type="submit" value="Continue" />
             </form>
-          </body>
-        </html>
+          </main>
+        </body>
+      </html>
       ERB
       erb = ERB.new(template, trim_mode: '-')
       html = erb.result(binding)
@@ -603,11 +629,24 @@ module Authz
 
     def get_authorize(oauth_params)
       template = <<~ERB
-        <!DOCTYPE html>
-        <html>
-          <head><title></title></head>
-          <body>
-            <h2>Authorize?</h2>
+      <!doctype html>
+      <html lang="en" data-theme="light">
+        <head>
+          <title>UI</title>
+          <meta charset="utf-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1">
+          <meta name="color-scheme" content="light dark">
+          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+        </head>
+        <body>
+          <main class="container">
+            <nav>
+              <ul>
+                <li><strong>IdP</strong></li>
+              </ul>
+            </nav>
+
+            <h1>Authorize?</h1>
             <p>Client ID: <%= oauth_params['client_id'] %></p>
             <form id="authorize-form" action="/oauth/authorize" method="post">
               <input type="hidden" name="client_id" value="<%= oauth_params['client_id'] %>" />
@@ -618,10 +657,11 @@ module Authz
               <input type="hidden" name="state" value="<%= oauth_params['state'] %>" />
               <input type="hidden" name="code_challenge_method" value="<%= oauth_params['code_challenge_method'] %>" />
               <input type="hidden" name="code_challenge" value="<%= oauth_params['code_challenge'] %>" />
-              <input id="submit-button" type="submit" value="Submit" />
+              <input id="submit-button" type="submit" value="Authorize" />
             </form>
-          </body>
-        </html>
+          </main>
+        </body>
+      </html>
       ERB
       html = ERB.new(template, trim_mode: '-').result(binding)
       [200, { 'Content-Type' => "text/html" }, [html]]
@@ -681,15 +721,32 @@ class IdentityProvider
 
   def get_dashboard(request)
     template = <<~ERB
-      <!DOCTYPE html>
-      <html>
-        <head><title></title></head>
+      <!doctype html>
+      <html lang="en" data-theme="light">
+        <head>
+          <title>UI</title>
+          <meta charset="utf-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1">
+          <meta name="color-scheme" content="light dark">
+          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+        </head>
         <body>
-          <h1> Hello, <%= current_user(request)[:username] %></h1>
-
-          <form action="/sessions/delete" method="post">
-            <input type="submit" value="logout" />
-          </form>
+          <main class="container">
+            <nav>
+              <ul>
+                <li><strong>IdP</strong></li>
+              </ul>
+              <ul>
+                <li>
+                  <form action="/sessions/delete" method="post">
+                    <input type="submit" value="logout" />
+                  </form>
+                </li>
+              </ul>
+            </nav>
+
+            <h1> Hello, <%= current_user(request)[:username] %></h1>
+          </main>
         </body>
       </html>
     ERB
diff --git a/bin/ui b/bin/ui
index fd6b225..d139c2f 100755
--- a/bin/ui
+++ b/bin/ui
@@ -180,7 +180,7 @@ class UI
           <<~ERB
             <%- if current_user?(request) -%>
               <nav>
-                <ul class="pico-background-pink-100">
+                <ul>
                   <li><strong>UI</strong></li>
                 </ul>
                 <ul>
@@ -200,7 +200,7 @@ class UI
               <pre><%= request.session[:id_token] %></pre>
             <%- else -%>
               <nav>
-                <ul class="pico-background-pink-100">
+                <ul>
                   <li><strong>UI</strong></li>
                 </ul>
                 <ul>
@@ -279,7 +279,7 @@ class UI
       html = with_layout(binding) do
         <<~ERB
           <nav>
-            <ul class="pico-background-pink-100">
+            <ul>
               <li><strong>UI</strong></li>
             </ul>
             <ul>
@@ -314,7 +314,7 @@ class UI
       html = with_layout(binding) do
         <<~ERB
             <nav>
-              <ul class="pico-background-pink-100">
+              <ul>
                 <li><strong>UI</strong></li>
               </ul>
               <ul>
@@ -371,7 +371,7 @@ class UI
       html = with_layout(binding) do
         <<~ERB
           <nav>
-            <ul class="pico-background-pink-100">
+            <ul>
               <li><strong>UI</strong></li>
             </ul>
             <ul>
@@ -428,7 +428,7 @@ class UI
           <%- saml_params.each do |(key, value)| -%>
             <input type="hidden" name="<%= key %>" value="<%= value %>" />
           <%- end -%>
-          <input id="submit-button" type="submit" value="Submit" />
+          <input id="submit-button" type="submit" value="Continue" />
         </form>
       ERB
     end
diff --git a/casbin.csv b/casbin.csv
index 5b66e8e..2610d21 100644
--- a/casbin.csv
+++ b/casbin.csv
@@ -3,6 +3,7 @@ p, *, *, (GET)|(HEAD), /health
 p, *, *, GET, /.well-known/*
 p, *, *, GET, /favicon.ico
 p, "\Agid:\/\/[a-z]+\/[A-Za-z:]+\/\d+\z", idp.example.com, (GET)|(POST)|(PATCH)|(PUT)|(DELETE)|(HEAD), /twirp/authx.rpc.*
+p, *, idp.example.com, (GET), /
 p, *, idp.example.com, (GET)|(POST), /oauth*
 p, *, idp.example.com, (GET)|(POST), /saml*
 p, *, idp.example.com, (GET)|(POST), /sessions*
author	mo khan <mo@mokhan.ca>	2025-03-26 16:10:25 -0600
committer	mo khan <mo@mokhan.ca>	2025-03-26 16:10:25 -0600
commit	2e636ea73e44a84dd2be64c1e199f29fb2236a1d (patch)
tree	252633d71d1eeb7d5aff001cd0493ce73e227dc1
parent	e1e0f14716a6b169c05a3aac5ffa0cc3bd04609d (diff)