From 1c07ae23f3694b972e307c50c9c09f1c429f2ea2 Mon Sep 17 00:00:00 2001
From: Christophe Besson <cbesson@gmail.com>
Date: Sat, 26 Sep 2026 10:26:51 +0200
Subject: feat(hub): default email opt-outs and match Register to Login styling

- Invitation-by-email and recovery-key-by-email boxes now start unchecked;
  mailing a code/key is opt-in. The invite choice still remembers itself
  per account once set.
- Align the two invite-email checkboxes with their label (center, not
  flex-start).
- Register (and its verify/recovery/done steps) now sits on the same dark
  gradient backdrop and frosted card as Login, via a shared AuthShell.
- Make the gradient's top-left corner very slightly less bright
  (#86a3c4 -> #809cbc), on both auth pages.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/meshbay_hub/static/auth-page.js            | 37 ++++++++++++++++------
 1 file changed, 28 insertions(+), 9 deletions(-)

(limited to 'packages/meshbay-hub/src/meshbay_hub/static/auth-page.js')

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/auth-page.js b/packages/meshbay-hub/src/meshbay_hub/static/auth-page.js
index 2164eae..09c4acf 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/auth-page.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/auth-page.js
@@ -344,6 +344,23 @@ function WelcomePitch() {
   `;
 }
 
+// The sign-in page's dark gradient backdrop and frosted card, without the
+// pitch beside it — so Register (and its verify/recovery/done steps) sits on
+// the same background and reads in the same dark theme as Login. A lone
+// `.welcome-side` is centred by `.welcome`'s `justify-content`.
+function AuthShell({ children }) {
+  return html`
+    <div class="page-center">
+      <div class="welcome-backdrop" aria-hidden="true"></div>
+      <div class="welcome">
+        <div class="welcome-side">
+          ${children}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
 export function RegisterPage() {
   const [username, setUsername] = useState('');
   const [email, setEmail] = useState('');
@@ -358,7 +375,9 @@ export function RegisterPage() {
   const [recoveryMnemonic, setRecoveryMnemonic] = useState('');
   const [recoverySaved, setRecoverySaved] = useState(false);
   const [recoveryCopied, setRecoveryCopied] = useState(false);
-  const [emailRecovery, setEmailRecovery] = useState(true);
+  // Off by default: mailing the recovery key is opt-in — the key is shown on
+  // screen to save, and sending a copy is the user's own choice to make.
+  const [emailRecovery, setEmailRecovery] = useState(false);
   const captcha = useCaptcha();
 
   const onSubmit = async (e) => {
@@ -457,7 +476,7 @@ export function RegisterPage() {
 
   if (phase === 'done') {
     return html`
-      <div class="page-center">
+      <${AuthShell}>
         <div class="card login-card">
           <h2>${t('register.verified_title')}</h2>
           <p style="text-align:center; margin-bottom:16px; color:var(--text-secondary)">
@@ -467,7 +486,7 @@ export function RegisterPage() {
             <p style="text-align:center; margin-bottom:16px">${t('invite.after_register')}</p>`}
           <a href="#/login" style="display:block; text-align:center">${t('register.go_login')}</a>
         </div>
-      </div>
+      </${AuthShell}>
     `;
   }
 
@@ -480,7 +499,7 @@ export function RegisterPage() {
       } catch { /* clipboard blocked — the text is on screen to copy by hand */ }
     };
     return html`
-      <div class="page-center">
+      <${AuthShell}>
         <div class="card login-card">
           <h2>${t('register.recovery_title')}</h2>
           <p style="margin-bottom:12px; color:var(--text-secondary)">
@@ -509,13 +528,13 @@ export function RegisterPage() {
             ${t('register.recovery_continue')}
           </button>
         </div>
-      </div>
+      </${AuthShell}>
     `;
   }
 
   if (phase === 'verify') {
     return html`
-      <div class="page-center">
+      <${AuthShell}>
         <div class="card login-card">
           <h2>${t('register.success_title')}</h2>
           <p style="text-align:center; margin-bottom:16px; color:var(--text-secondary)">
@@ -538,12 +557,12 @@ export function RegisterPage() {
               ${t('register.resend_sent')}</span>`}
           </div>
         </div>
-      </div>
+      </${AuthShell}>
     `;
   }
 
   return html`
-    <div class="page-center">
+    <${AuthShell}>
       <div class="card login-card">
         <h2>${t('register.title')}</h2>
         <form onSubmit=${onSubmit}>
@@ -585,7 +604,7 @@ export function RegisterPage() {
           ${t('register.has_account')} <a href="#/login">${t('register.login_link')}</a>
         </div>
       </div>
-    </div>
+    </${AuthShell}>
   `;
 }
 
-- 
cgit v1.2.3