modifying the login page for the strabo integration

Author: amyfromandi

Makefile

@@ -1,6 +1,6 @@
 all:
 	docker build -t rockd_website:latest .
-	docker run --rm -it -p 5500:5500 --name rockd_website --env-file .env rockd_website:latest
+	docker run --rm -it -p 3000:3000 --name rockd_website --env-file .env rockd_website:latest
 
 
 TAG := hub.opensciencegrid.org/macrostrat/rockd-website:$(VERSION)

pages/login/+Page.client.ts

@@ -25,8 +25,11 @@ function LoginForm() {
   });
   const [error, setError] = useState<string | null>(null);
   const [loggedIn, setLoggedIn] = useState(false);
+  const [logs, setLogs] = useState<string[]>([]);
   const [linkStraboResponse, setLinkStraboResponse] = useState<any>(null);
   const [jParam, setJParam] = useState<string | null>(null);
+  const addLog = (msg) => setLogs((prev) => [...prev, msg]);
+
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
     const j = params.get("j");
@@ -66,7 +69,7 @@ function LoginForm() {
             }
           );
           const linkStraboBody = await linkStrabo.json();
-          console.log("Link Strabospot!", linkStraboBody);
+          addLog(`Saving to Rockd database: ${JSON.stringify(linkStraboBody)}`);
           setLinkStraboResponse(linkStraboBody);
         }
         setLoggedIn(true);
@@ -101,7 +104,9 @@ function LoginForm() {
             }
           );
           const straboResponse = await rockdJWTToStrabo.json();
-          console.log("Strabo Response:", straboResponse);
+          addLog(
+            `Rockd token sent to Strabospot: ${JSON.stringify(straboResponse)}`
+          );
         } catch (err) {
           console.error("Failed to send Rockd JWT to Strabo:", err);
         }
@@ -112,11 +117,20 @@ function LoginForm() {
 
   if (loggedIn) {
     return h("div", { className: "login-page" }, [
+      h("img", {
+        src: "https://storage.macrostrat.org/assets/rockd/main-page/rockd_transparent.png",
+        alt: "Rockd logo",
+        className: "rockd-logo",
+      }),
       h(Callout, {
         title: "Login Successful",
         intent: Intent.SUCCESS,
         className: "login-info",
       }),
+      h("div", { className: "login-logs" }, [
+        h("h4", "Debug logs"),
+        h("pre", logs.map((l) => `${l}\n`).join("")),
+      ]),
       h(
         Button,
         { intent: Intent.DANGER, onClick: () => setLoggedIn(false) },
@@ -125,6 +139,11 @@ function LoginForm() {
     ]);
   } else {
     return h("div", { className: "login-page" }, [
+      h("img", {
+        src: "https://storage.macrostrat.org/assets/rockd/main-page/rockd_transparent.png",
+        alt: "Rockd logo",
+        className: "rockd-logo",
+      }),
       h("h2", "Login"),
       error &&
         h(Callout, {

pages/login/main.sass

@@ -60,11 +60,35 @@ body.bp5-dark
     margin: 0
     text-align: center
 
+  .login-logs
+    margin-top: 1rem
+    padding: 0.5rem 0.75rem
+    border: 1px solid rgba(0, 0, 0, 0.27)
+    border-radius: 4px
+    background: rgba(0, 0, 0, 0.27)
+
+    max-height: 150px      // <-- constrain height
+    overflow-y: auto       // <-- vertical scrollbar when needed
+
+    pre
+      margin: 0
+      white-space: pre-wrap   // wrap long JWTs/JSON
+      word-break: break-word
+      font-family: monospace
+      font-size: 11px
+
+  .rockd-logo
+    display: block
+    max-width: 240px
+    margin: 0 auto 1.5rem
+
+
 .login-form
   display: flex
   flex-direction: column
   gap: 1rem
 
+
 .bp5-input
   font-size: 1rem
   padding: 0.75rem