From e147e9395ff17fbbce798cdea0f82ae0591d5a5c Mon Sep 17 00:00:00 2001
From: Melvin Carvalho <melvincarvalho@gmail.com>
Date: Sat, 16 May 2026 09:33:25 +0200
Subject: [PATCH] feat: welcome.html is auth-aware (completes MVP)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The welcome page now reflects sign-in state instead of looking
identical regardless of whether the user is authenticated.

Behaviour change on first paint:

Signed out (unchanged from before):
- "Sign in" button revealed by HEAD probe to /idp/register
- "Default sign-in: me / me" credentials block visible
- Tiles probed with plain fetch — /private/, /inbox/, /settings/
  401 → dimmed and rerouted to /signin.html

Signed in (new):
- "Sign in" button stays hidden
- Credentials block hidden (the user has already climbed past it)
- Green "signed in as <webid>" note pointing to /account.html
- All tiles probed via session.authFetch — DPoP-bound bearer
  attached, /private/ etc. return 200 → tiles stay lit and
  navigate correctly

Implementation: solid-oidc imported as an ES module, same
version-pinned jsdelivr URL as the other auth-aware pages.
session.restore() on load decides which branch to render. The
familiar "Missing refresh data" throw on a clean first visit is
caught and treated as "not signed in."

Locked-tile fallback link changed from ./idp (which 403s in
single-user mode) to ./signin.html (which actually starts a flow).

Bumps jspod to 0.0.21.

Refs #1
---
 package.json |   2 +-
 welcome.html | 110 ++++++++++++++++++++++++++++++++++++++-------------
 2 files changed, 83 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 68a980e..d872c11 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jspod",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "JavaScript Solid Pod - Just works, batteries included",
   "type": "module",
   "main": "index.js",
diff --git a/welcome.html b/welcome.html
index 29ea02d..fc8821a 100644
--- a/welcome.html
+++ b/welcome.html
@@ -21,6 +21,7 @@
 .btn-secondary{background:#fff;color:#222;border-color:#ddd}
 .btn-secondary:hover{background:#f0efeb}
 [hidden]{display:none!important}
+.signed-in-note{background:#e8f5e9;color:#1b5e20;padding:.6em 1em;border-radius:8px;margin:1em 0;font-size:.95em}
 .dirs{list-style:none;padding:0;margin:1em 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.5em}
 .dirs li a{display:block;padding:.7em .9em;background:#f3eee5;border-radius:8px;color:#222}
 .dirs li a:hover{background:#ebe5d8}
@@ -40,11 +41,15 @@ <h1>Your Solid pod</h1>
 <a href="./idp/register" class="btn btn-secondary" data-cond="register" hidden>Sign up</a>
 </div>
 
-<div class="creds">
+<div class="creds" id="creds-block">
 <span class="label">Default sign-in:</span> me <span class="label">/</span> me
 </div>
 
-<p>Then point a Solid app (e.g. <a href="https://solid-apps.github.io/pilot/">Pilot</a>) at this server and sign in. Or explore your pod directly:</p>
+<p id="signed-in-note" class="signed-in-note" hidden>
+  You're signed in as <strong id="signed-in-webid">me</strong>. Visit your <a href="./account.html">account</a> to manage password, sign out, etc.
+</p>
+
+<p id="explore-hint">Then point a Solid app (e.g. <a href="https://solid-apps.github.io/pilot/">Pilot</a>) at this server and sign in. Or explore your pod directly:</p>
 
 <ul class="dirs">
 <li><a href="./profile/">📇 /profile/</a></li>
@@ -57,36 +62,85 @@ <h1>Your Solid pod</h1>
 <footer>Powered by <a href="https://github.com/JavaScriptSolidServer/jspod">jspod</a></footer>
 </div>
 
-<script>
-(function(){
-  // Render the server URL the visitor actually used
-  var el=document.getElementById('server-url');
-  if(!el)return;
-  el.textContent=el.href=new URL('./',window.location.href).href;
-})();
-(function(){
-  // HEAD-adaptive Sign in / Sign up — same contract as JSS's default
-  fetch('./idp/register',{method:'HEAD',cache:'no-store'}).then(function(res){
-    var r=document.querySelector('[data-cond="register"]'),l=document.querySelector('[data-cond="login"]');
-    if(res.status===200){if(r)r.hidden=false;if(l)l.hidden=false;}
-    else if(res.status===403){if(l)l.hidden=false;}
-  }).catch(function(){});
+<script type="module">
+import Session from 'https://cdn.jsdelivr.net/npm/solid-oidc@0.0.8/solid-oidc.js';
+
+// Render the server URL the visitor actually used
+(function () {
+  const el = document.getElementById('server-url');
+  if (!el) return;
+  el.textContent = el.href = new URL('./', window.location.href).href;
 })();
-(function(){
-  // Probe each directory tile. If unauthenticated (401/403), dim it
-  // and redirect its click to the sign-in flow instead of letting the
-  // browser navigate into a blank 401 response body.
-  document.querySelectorAll('.dirs a').forEach(function(a){
-    var href=a.getAttribute('href');
-    fetch(href,{method:'HEAD',cache:'no-store'}).then(function(res){
-      if(res.status===401||res.status===403){
+
+const credsBlock = document.getElementById('creds-block');
+const exploreHint = document.getElementById('explore-hint');
+const signedInNote = document.getElementById('signed-in-note');
+const signinBtn = document.querySelector('[data-cond="login"]');
+const signupBtn = document.querySelector('[data-cond="register"]');
+
+// Try to restore a prior session. The same "Missing refresh data"
+// catch as on the other pages: a clean first visit throws, we
+// treat that as "not signed in" and fall through to the unauth UI.
+let session = null;
+let active = false;
+try {
+  session = new Session();
+  await session.restore();
+  active = session.isActive;
+} catch {
+  active = false;
+}
+
+if (active && session) {
+  // Signed-in: hide the sign-in CTAs and the rung-1 hint; show a
+  // small note about where to manage the session.
+  if (signinBtn) signinBtn.hidden = true;
+  if (signupBtn) signupBtn.hidden = true;
+  if (credsBlock) credsBlock.hidden = true;
+  if (exploreHint) exploreHint.hidden = true;
+  if (signedInNote) {
+    const w = session.webId || 'me';
+    document.getElementById('signed-in-webid').textContent = w;
+    signedInNote.hidden = false;
+  }
+
+  // Auth-aware tile probes — use session.authFetch so private dirs
+  // unlock when we actually have access.
+  document.querySelectorAll('.dirs a').forEach((a) => {
+    const href = a.getAttribute('href');
+    session.authFetch(href, { method: 'HEAD', cache: 'no-store' }).then((res) => {
+      if (res.status === 401 || res.status === 403) {
         a.classList.add('locked');
-        a.title='Sign in to view '+href;
-        a.setAttribute('href','./idp');
+        a.title = 'No access to ' + href;
+        a.setAttribute('href', './account.html');
       }
-    }).catch(function(){});
+    }).catch(() => {});
   });
-})();
+} else {
+  // Signed-out: original behaviour.
+  // HEAD-adaptive Sign in / Sign up — same contract as JSS's default.
+  fetch('./idp/register', { method: 'HEAD', cache: 'no-store' }).then((res) => {
+    if (res.status === 200) {
+      if (signupBtn) signupBtn.hidden = false;
+      if (signinBtn) signinBtn.hidden = false;
+    } else if (res.status === 403) {
+      if (signinBtn) signinBtn.hidden = false;
+    }
+  }).catch(() => {});
+
+  // Plain fetch tile probes — auth-gated tiles 401, get dimmed and
+  // routed to the sign-in app.
+  document.querySelectorAll('.dirs a').forEach((a) => {
+    const href = a.getAttribute('href');
+    fetch(href, { method: 'HEAD', cache: 'no-store' }).then((res) => {
+      if (res.status === 401 || res.status === 403) {
+        a.classList.add('locked');
+        a.title = 'Sign in to view ' + href;
+        a.setAttribute('href', './signin.html');
+      }
+    }).catch(() => {});
+  });
+}
 </script>
 </body>
 </html>