Add PII sanitization and CSS theming with design tokens

Author: ralyodio

public/js/components/pf-dialog.js

@@ -68,7 +68,7 @@ class PfDialog extends HTMLElement {
       <style>
         :host {
           display: block;
-          font-family: Arial, sans-serif;
+          font-family: var(--font-family, 'SpaceMono', monospace);
         }
         
         .dialog-backdrop {
@@ -77,7 +77,7 @@ class PfDialog extends HTMLElement {
           left: 0;
           width: 100%;
           height: 100%;
-          background-color: rgba(0, 0, 0, 0.5);
+          background-color: var(--overlay-color, rgba(0, 0, 0, 0.5));
           display: flex;
           align-items: center;
           justify-content: center;
@@ -93,9 +93,9 @@ class PfDialog extends HTMLElement {
         }
         
         .dialog {
-          background-color: white;
-          border-radius: 8px;
-          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+          background-color: var(--card-background, white);
+          border-radius: var(--border-radius-lg, 8px);
+          box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
           width: 90%;
           max-width: 450px;
           max-height: 90vh;
@@ -111,32 +111,32 @@ class PfDialog extends HTMLElement {
         
         .dialog-header {
           padding: 16px 20px;
-          border-bottom: 1px solid #e5e7eb;
+          border-bottom: 1px solid var(--border-color, #e5e7eb);
         }
         
         .dialog-title {
           margin: 0;
           font-size: 18px;
           font-weight: 600;
-          color: #111827;
+          color: var(--text-primary, #111827);
         }
         
         .dialog-body {
           padding: 20px;
-          color: #4b5563;
+          color: var(--text-secondary, #4b5563);
         }
         
         .dialog-footer {
           padding: 16px 20px;
-          border-top: 1px solid #e5e7eb;
+          border-top: 1px solid var(--border-color, #e5e7eb);
           display: flex;
           justify-content: flex-end;
           gap: 12px;
         }
         
         .dialog-button {
           padding: 8px 16px;
-          border-radius: 6px;
+          border-radius: var(--border-radius-md, 6px);
           font-size: 14px;
           font-weight: 500;
           cursor: pointer;
@@ -145,21 +145,21 @@ class PfDialog extends HTMLElement {
         }
         
         .cancel-button {
-          background-color: #f3f4f6;
-          color: #4b5563;
+          background-color: var(--surface-variant, #f3f4f6);
+          color: var(--text-secondary, #4b5563);
         }
         
         .cancel-button:hover {
-          background-color: #e5e7eb;
+          background-color: var(--divider-color, #e5e7eb);
         }
         
         .confirm-button {
-          background-color: #2563eb;
-          color: white;
+          background-color: var(--primary-color, #e02337);
+          color: var(--text-on-primary, white);
         }
         
         .confirm-button:hover {
-          background-color: #1d4ed8;
+          background-color: var(--primary-dark, #c01d2f);
         }
       </style>
       

public/js/components/pf-header.js

@@ -509,6 +509,31 @@ class PfHeader extends HTMLElement {
     }
   }
 
+  /**
+   * Store user data in localStorage without PII
+   * @param {Object} userData - User data from server
+   */
+  storeUserData(userData) {
+    if (!userData) return;
+    
+    // Create a sanitized user object without PII
+    const sanitizedUser = {
+      id: userData.id,
+      username: userData.username || userData.email?.split('@')[0] || 'User',
+      role: userData.role || 'user',
+      created_at: userData.created_at,
+      updated_at: userData.updated_at
+    };
+    
+    // Store the sanitized user object in localStorage
+    try {
+      localStorage.setItem('user', JSON.stringify(sanitizedUser));
+      console.log('User data stored in localStorage without PII');
+    } catch (error) {
+      console.error('Error storing user data in localStorage:', error);
+    }
+  }
+
   updateNavbar() {
     // Check for JWT token instead of API key
     const jwtToken = localStorage.getItem('jwt_token');
@@ -519,6 +544,9 @@ class PfHeader extends HTMLElement {
       const userJson = localStorage.getItem('user');
       if (userJson) {
         userObject = JSON.parse(userJson);
+      } else if (jwtToken) {
+        // If we have a JWT but no user object, try to get user info from the auth status endpoint
+        this.fetchUserData(jwtToken);
       }
     } catch (error) {
       console.error('Error parsing user object from localStorage:', error);
@@ -761,6 +789,31 @@ class PfHeader extends HTMLElement {
     }
   }
 
+  /**
+   * Fetch user data from the auth status endpoint
+   * @param {string} jwtToken - JWT token
+   */
+  async fetchUserData(jwtToken) {
+    try {
+      const response = await fetch('/api/1/auth/status', {
+        method: 'GET',
+        headers: {
+          'Authorization': `Bearer ${jwtToken}`
+        }
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        if (data.authenticated && data.auth_user) {
+          // Store user data without PII
+          this.storeUserData(data.auth_user);
+        }
+      }
+    } catch (error) {
+      console.error('Error fetching user data:', error);
+    }
+  }
+
   logout() {
     // Clear JWT token and user data
     localStorage.removeItem('jwt_token');

public/js/page-initializers.js

@@ -117,10 +117,9 @@ export async function initLoginPage() {
         // User has an active subscription
         localStorage.setItem('subscription_data', JSON.stringify(subscriptionStatus));
 
-        // Create and store a publicly accessible user object
+        // Create and store a sanitized user object without PII
         const userObject = {
-          email: email,
-          username: email,
+          username: email.split('@')[0], // Extract username from email
           subscription: {
             plan: subscriptionStatus.plan || 'monthly',
             status: subscriptionStatus.status || 'active',
@@ -131,10 +130,9 @@ export async function initLoginPage() {
         localStorage.setItem('user', JSON.stringify(userObject));
       } else {
         console.log('No subscription data available or user has no active subscription');
-        // Create a basic user object without subscription data
+        // Create a basic sanitized user object without PII
         const userObject = {
-          email: email,
-          username: email,
+          username: email.split('@')[0], // Extract username from email
           subscription: {
             status: 'unknown'
           },
@@ -290,10 +288,9 @@ export function initRegisterPage() {
       localStorage.setItem('username', email);
       localStorage.setItem('subscription_data', JSON.stringify(subscriptionData));
 
-      // Create and store a publicly accessible user object
+      // Create and store a sanitized user object without PII
       const userObject = {
-        email: email,
-        username: email,
+        username: email.split('@')[0], // Extract username from email
         subscription: {
           plan: subscriptionData.subscription?.plan || selectedPlan,
           status: 'pending',