claim rendering improvements

Author: eliknebel

client/src/App.tsx

@@ -83,7 +83,7 @@ export function App() {
             <Detail label="User ID" value={state.user.sub} />
             <Detail label="Name" value={state.user.name} />
             <Detail label="Email" value={state.user.email} />
-            <Detail label="Roles" value={state.user.roles} />
+            <RolesDetail roles={state.user.roles} />
             <Detail label="Context" value={state.user.context_title} />
             <Detail label="Issuer" value={state.user.issuer} />
             <Detail label="Audience" value={state.user.audience} />
@@ -106,3 +106,27 @@ function Detail({ label, value }: { label: string; value: string }) {
     </div>
   );
 }
+
+function RolesDetail({ roles }: { roles: string }) {
+  const items = roles
+    .split(",")
+    .map((role) => role.trim())
+    .filter((role) => role.length > 0);
+
+  return (
+    <div className="grid gap-1 border-b border-gray-100 pb-3 sm:grid-cols-[9rem_1fr] sm:gap-3">
+      <dt className="font-medium text-gray-700">Roles</dt>
+      <dd className="text-gray-900">
+        {items.length > 0 ? (
+          <ul className="list-disc pl-6">
+            {items.map((role) => (
+              <li key={role}>{role}</li>
+            ))}
+          </ul>
+        ) : (
+          "None"
+        )}
+      </dd>
+    </div>
+  );
+}

src/lti_example_tool_web/html/lti_html.gleam

@@ -2,6 +2,8 @@ import gleam/dict.{type Dict}
 import gleam/dynamic.{type Dynamic}
 import gleam/dynamic/decode
 import gleam/int
+import gleam/json
+import gleam/list
 import gleam/option.{Some}
 import gleam/result
 import gleam/string
@@ -80,7 +82,11 @@ fn claims_section(claims: Dict(String, Dynamic)) -> Node {
           }),
           Column("Value", fn(record: #(String, Dynamic)) {
             let #(_key, value) = record
-            html.Text(string.inspect(value))
+
+            html.pre_text(
+              [class("whitespace-pre-wrap break-all font-mono text-xs")],
+              claim_value_json(value),
+            )
           }),
         ],
         dict.to_list(claims),
@@ -89,6 +95,64 @@ fn claims_section(claims: Dict(String, Dynamic)) -> Node {
   ])
 }
 
+fn claim_value_json(value: Dynamic) -> String {
+  value
+  |> dynamic_to_json()
+  |> json.to_string()
+}
+
+fn dynamic_to_json(value: Dynamic) -> json.Json {
+  case decode.run(value, decode.string) {
+    Ok(v) -> json.string(v)
+    Error(_) ->
+      case decode.run(value, decode.bool) {
+        Ok(v) -> json.bool(v)
+        Error(_) ->
+          case decode.run(value, decode.int) {
+            Ok(v) -> json.int(v)
+            Error(_) ->
+              case decode.run(value, decode.float) {
+                Ok(v) -> json.float(v)
+                Error(_) ->
+                  case decode.run(value, decode.list(decode.dynamic)) {
+                    Ok(values) -> json.array(values, dynamic_to_json)
+                    Error(_) ->
+                      case
+                        decode.run(
+                          value,
+                          decode.dict(decode.dynamic, decode.dynamic),
+                        )
+                      {
+                        Ok(values) ->
+                          json.object(
+                            list.map(dict.to_list(values), fn(entry) {
+                              let #(k, v) = entry
+                              #(dynamic_key_to_string(k), dynamic_to_json(v))
+                            }),
+                          )
+                        Error(_) ->
+                          case
+                            decode.run(value, decode.optional(decode.dynamic))
+                          {
+                            Ok(Some(v)) -> dynamic_to_json(v)
+                            Ok(_) -> json.null()
+                            Error(_) -> json.string(string.inspect(value))
+                          }
+                      }
+                  }
+              }
+          }
+      }
+  }
+}
+
+fn dynamic_key_to_string(key: Dynamic) -> String {
+  case decode.run(key, decode.string) {
+    Ok(value) -> value
+    Error(_) -> string.inspect(key)
+  }
+}
+
 fn decode_string(d: Dynamic) -> Result(String, String) {
   decode.run(d, decode.string)
   |> result.replace_error("Invalid string: " <> string.inspect(d))