ultimate-jekyll-manager 0.0.281 → 0.0.283

package/CHANGELOG.md

@@ -17,6 +17,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ---
 ## [Unreleased]
 ### Added
+- Email preferences page (`/portal/account/email-preferences`) for unsubscribe/resubscribe from marketing emails
+- Email masking on preferences page to prevent forwarded-email abuse (e.g., `ia***b@gm***.com`)
+- HMAC signature verification for unsubscribe links to prevent forged requests
 - Checkout page supports daily, weekly, monthly, and annually billing frequencies with selective UI visibility via wm-bindings
 - Default billing frequency auto-selects the longest available term (annually > monthly > weekly > daily), with URL param override
 - Auth state settles before any authorized fetches fire on checkout, preventing race conditions

package/dist/assets/js/core/auth.js

@@ -26,6 +26,10 @@ export default function (Manager, options) {
     unauthenticated
   });
 
+  // LEGACY: Handle desktop app auth params (e.g. ?destination=appscheme://page&source=app)
+  // TODO: Remove this call AND the _legacyTranslateAppAuth function when legacy desktop app support is no longer needed
+  _legacyTranslateAppAuth();
+
   // Track if we just signed out to avoid redirect loops
   let justSignedOut = false;
 
@@ -243,3 +247,36 @@ async function sendUserSignupMetadata(user, webManager) {
     // Don't throw - we don't want to block the signup flow
   }
 }
+
+// LEGACY: Translate desktop app auth params to UJM format
+// Legacy apps send: ?destination=appscheme://page&source=app&signout=true&cb=timestamp
+// UJM expects: ?authReturnUrl=...&authSignout=true
+// TODO: Remove this function AND its call above when legacy desktop app support is no longer needed
+function _legacyTranslateAppAuth() {
+  const url = new URL(window.location.href);
+  const destination = url.searchParams.get('destination');
+  const source = url.searchParams.get('source');
+
+  if (source !== 'app' || !destination) {
+    return;
+  }
+
+  // Chain through /token page to generate a custom token before redirecting to the app
+  const tokenPageUrl = new URL('/token', window.location.origin);
+  tokenPageUrl.searchParams.set('authReturnUrl', destination);
+  url.searchParams.set('authReturnUrl', tokenPageUrl.toString());
+
+  // Translate signout param
+  if (url.searchParams.get('signout') === 'true') {
+    url.searchParams.set('authSignout', 'true');
+  }
+
+  // Clean up legacy params and update URL
+  url.searchParams.delete('destination');
+  url.searchParams.delete('source');
+  url.searchParams.delete('signout');
+  url.searchParams.delete('cb');
+  window.history.replaceState({}, '', url.toString());
+
+  console.log('[Auth] Translated legacy app params:', url.toString());
+}

package/dist/assets/js/pages/portal/email-preferences/index.js

@@ -0,0 +1,185 @@
+/**
+ * Email Preferences Page JavaScript
+ */
+
+// Libraries
+import { FormManager } from '__main_assets__/js/libs/form-manager.js';
+import { getPrerenderedIcon } from '__main_assets__/js/libs/prerendered-icons.js';
+import fetch from 'wonderful-fetch';
+
+let webManager = null;
+
+// Module
+export default (Manager) => {
+  return new Promise(async function (resolve) {
+    // Shortcuts
+    webManager = Manager.webManager;
+
+    // Initialize when DOM is ready
+    await webManager.dom().ready();
+
+    setupForm();
+
+    // Resolve after initialization
+    return resolve();
+  });
+};
+
+// Decode a base64-encoded URL parameter
+function decodeParam(encoded) {
+  if (!encoded) {
+    return '';
+  }
+
+  try {
+    return atob(decodeURIComponent(encoded));
+  } catch (e) {
+    return '';
+  }
+}
+
+// Mask an email address: show first 2 and last char of local part, first 2 chars of domain
+// e.g. "ian.wiedenman+test-unsub@gmail.com" → "ia***************b@gm***.com"
+function maskEmail(email) {
+  const [local, domain] = email.split('@');
+
+  if (!local || !domain) {
+    return '***@***.***';
+  }
+
+  const domainParts = domain.split('.');
+  const domainName = domainParts.slice(0, -1).join('.');
+  const tld = domainParts.slice(-1)[0];
+
+  const maskedLocal = local.length <= 3
+    ? local[0] + '*'.repeat(local.length - 1)
+    : local.slice(0, 2) + '*'.repeat(local.length - 3) + local.slice(-1);
+
+  const maskedDomain = domainName.length <= 2
+    ? domainName
+    : domainName.slice(0, 2) + '*'.repeat(domainName.length - 2);
+
+  return `${maskedLocal}@${maskedDomain}.${tld}`;
+}
+
+// Setup form handling
+function setupForm() {
+  const url = new URL(window.location.href);
+
+  // Parse and decode URL parameters
+  const email = decodeParam(url.searchParams.get('email'));
+  const asmId = decodeParam(url.searchParams.get('asmId'));
+  const templateId = decodeParam(url.searchParams.get('templateId'));
+  const sig = url.searchParams.get('sig') || '';
+
+  // DOM elements
+  const $description = document.getElementById('email-preferences-description');
+  const $error = document.getElementById('email-preferences-error');
+  const $errorMessage = document.getElementById('email-preferences-error-message');
+  const $content = document.getElementById('email-preferences-content');
+  const $address = document.getElementById('email-preferences-address');
+  const $submit = document.getElementById('email-preferences-submit');
+  const $infoUnsubscribe = document.getElementById('email-preferences-info-unsubscribe');
+  const $infoResubscribe = document.getElementById('email-preferences-info-resubscribe');
+  const $actionButtons = document.querySelectorAll('[data-action]');
+
+  // Validate required parameters
+  if (!email || !asmId || !sig) {
+    $description.textContent = 'Something went wrong.';
+    $errorMessage.textContent = 'This link is invalid or expired. Please try clicking the link in your email again.';
+    $error.hidden = false;
+    return;
+  }
+
+  // Populate UI
+  $description.textContent = 'Confirm your email address to update your email preferences.';
+  $address.textContent = maskEmail(email);
+  $content.hidden = false;
+
+  // Track current action
+  let currentAction = 'unsubscribe';
+
+  // Action toggle buttons
+  $actionButtons.forEach($btn => {
+    $btn.addEventListener('click', () => {
+      currentAction = $btn.dataset.action;
+
+      // Update active state
+      $actionButtons.forEach($b => $b.classList.remove('active'));
+      $btn.classList.add('active');
+
+      // Toggle info messages
+      $infoUnsubscribe.hidden = currentAction !== 'unsubscribe';
+      $infoResubscribe.hidden = currentAction !== 'resubscribe';
+
+      // Update submit button
+      if (currentAction === 'unsubscribe') {
+        $submit.className = 'btn btn-danger w-100 mb-4';
+        $submit.querySelector('.button-text').innerHTML = `${getPrerenderedIcon('bell-slash', 'me-2')}Unsubscribe`;
+      } else {
+        $submit.className = 'btn btn-success w-100 mb-4';
+        $submit.querySelector('.button-text').innerHTML = `${getPrerenderedIcon('bell', 'me-2')}Resubscribe`;
+      }
+    });
+  });
+
+  // Initialize FormManager
+  const formManager = new FormManager('#email-preferences-form', {
+    autoReady: false,
+    allowResubmit: false,
+  });
+
+  // Custom validation: confirm email matches
+  formManager.on('validation', ({ data, setError }) => {
+    if (data.email_confirm.toLowerCase().trim() !== email.toLowerCase().trim()) {
+      setError('email_confirm', 'Email does not match. Please enter the email address this was sent to.');
+    }
+  });
+
+  // Submit handler
+  formManager.on('submit', async ({ data }) => {
+    const action = currentAction;
+
+    trackEmailPreference(action);
+
+    try {
+      await fetch(`${webManager.getApiUrl()}/backend-manager/marketing/email-preferences`, {
+        method: 'POST',
+        response: 'json',
+        body: {
+          email: email,
+          asmId: asmId,
+          action: action,
+          sig: sig,
+        },
+        timeout: 30000,
+      });
+
+      if (action === 'unsubscribe') {
+        formManager.showSuccess('You have been successfully unsubscribed. You will no longer receive these emails.');
+      } else {
+        formManager.showSuccess('You have been successfully resubscribed. You will start receiving these emails again.');
+      }
+    } catch (error) {
+      webManager.sentry().captureException(new Error('Email preferences error', { cause: error }));
+      throw new Error('An error occurred while processing your request. Please try again.');
+    }
+  });
+
+  // Ready
+  formManager.ready();
+}
+
+// Tracking
+function trackEmailPreference(action) {
+  gtag('event', `email_${action}`, {
+    content_type: 'email_preferences',
+  });
+  fbq('trackCustom', action === 'unsubscribe' ? 'EmailUnsubscribe' : 'EmailResubscribe', {
+    content_name: 'Email Preferences',
+  });
+  ttq.track('ViewContent', {
+    content_id: `email-${action}`,
+    content_type: 'product',
+  });
+}

package/dist/assets/js/pages/token/index.js

@@ -47,11 +47,24 @@ export default function (Manager) {
 
         // Handle redirect or URL update
         if (authReturnUrl) {
-          // Redirect to return URL with token (for electron/deep links)
+          // Redirect to return URL with token
           updateStatus('Redirecting...');
           const returnUrl = new URL(authReturnUrl);
           returnUrl.searchParams.set('authToken', token);
-          window.location.href = returnUrl.toString();
+
+          // LEGACY: Reformat token for desktop app deep links
+          // TODO: Remove this block when legacy desktop app support is no longer needed
+          _legacyTranslateTokenRedirect(returnUrl, token);
+
+          const redirectUrl = returnUrl.toString();
+          console.log('[Token] Redirecting to:', redirectUrl);
+
+          // Show retry button after a delay in case the redirect was cancelled (e.g. custom protocol dialog)
+          setTimeout(() => {
+            updateStatus('If you were not redirected, <a href="' + redirectUrl + '">click here to try again</a>.');
+          }, 3000);
+
+          window.location.href = redirectUrl;
         } else {
           // Add token to current URL (for browser extensions)
           // Extension background will detect this and close the tab
@@ -104,4 +117,14 @@ export default function (Manager) {
       $status.classList.add('d-none');
     }
   }
+
+  // LEGACY: Reformat token for desktop app deep links
+  // Legacy desktop apps expect ?payload={"token":"X"} instead of ?authToken=X for custom protocol URLs
+  // TODO: Remove this function AND its call above when legacy desktop app support is no longer needed
+  function _legacyTranslateTokenRedirect(returnUrl, token) {
+    if (returnUrl.protocol !== 'http:' && returnUrl.protocol !== 'https:') {
+      returnUrl.searchParams.delete('authToken');
+      returnUrl.searchParams.set('payload', JSON.stringify({ token: token }));
+    }
+  }
 }

package/dist/defaults/dist/_layouts/blueprint/portal/email-preferences.html

@@ -0,0 +1,16 @@
+---
+### ALL PAGES ###
+layout: themes/[ site.theme.id ]/frontend/pages/portal/email-preferences
+
+### REGULAR PAGES ###
+meta:
+  title: "Email Preferences - {{ site.brand.name }}"
+  description: "Manage your email preferences for {{ site.brand.name }}."
+  breadcrumb: "Email Preferences"
+
+### MISC ###
+sitemap:
+  include: false
+---
+
+{{ content | uj_content_format }}

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/portal/email-preferences.html

@@ -0,0 +1,108 @@
+---
+### ALL PAGES ###
+layout: themes/[ site.theme.id ]/frontend/core/cover
+
+### PAGE CONFIG ###
+prerender_icons:
+  - name: "bell-slash"
+  - name: "bell"
+---
+
+<section class="col-12 col-md-8 col-lg-6 col-xl-5 mw-sm">
+  <div class="card border-0 shadow-lg">
+    <div class="card-body p-3 p-md-5">
+      <!-- Logo -->
+      <div class="text-center mb-3">
+        <div class="avatar avatar-xl">
+          <img src="{{ site.brand.images.brandmark }}?cb={{ site.uj.cache_breaker }}" alt="{{ site.brand.name }} Logo"/>
+        </div>
+      </div>
+
+      <!-- Header -->
+      <div class="text-center mb-4">
+        <h1 class="h3 mb-2">Email Preferences</h1>
+        <p class="text-muted" id="email-preferences-description">Loading your preferences...</p>
+      </div>
+
+      <!-- Error state (hidden by default) -->
+      <div id="email-preferences-error" class="text-center" hidden>
+        <div class="alert alert-danger mb-4">
+          {% uj_icon "triangle-exclamation", "me-1" %}
+          <span id="email-preferences-error-message">Invalid or missing parameters.</span>
+        </div>
+        <a href="/" class="btn btn-outline-adaptive">
+          {% uj_icon "arrow-left", "me-1" %}
+          Back to Home
+        </a>
+      </div>
+
+      <!-- Form (hidden until params are validated by JS) -->
+      <div id="email-preferences-content" hidden>
+        <!-- Email display -->
+        <div class="bg-body-tertiary rounded-3 p-3 mb-4 text-center">
+          <small class="text-muted d-block mb-1">Managing preferences for</small>
+          <strong id="email-preferences-address" class="text-break"></strong>
+        </div>
+
+        <!-- Email Preferences Form -->
+        <form id="email-preferences-form" autocomplete="off" onsubmit="return false">
+          <!-- Action selector -->
+          <div class="mb-4">
+            <div class="d-flex gap-2">
+              <button type="button" class="btn btn-outline-adaptive flex-fill active" data-action="unsubscribe">
+                {% uj_icon "bell-slash", "me-1" %}
+                Unsubscribe
+              </button>
+              <button type="button" class="btn btn-outline-adaptive flex-fill" data-action="resubscribe">
+                {% uj_icon "bell", "me-1" %}
+                Resubscribe
+              </button>
+            </div>
+          </div>
+
+          <!-- Info message (changes based on action) -->
+          <div class="alert alert-warning small mb-4" id="email-preferences-info-unsubscribe">
+            {% uj_icon "circle-info", "me-1" %}
+            You will stop receiving emails of this type. Other important account emails may still be sent.
+          </div>
+          <div class="alert alert-success small mb-4" id="email-preferences-info-resubscribe" hidden>
+            {% uj_icon "circle-info", "me-1" %}
+            You will start receiving these emails again.
+          </div>
+
+          <div class="mb-4 text-start">
+            <label for="email_confirm" class="form-label fw-semibold">
+              Confirm your email address <span class="text-danger">*</span>
+            </label>
+            <input type="email" class="form-control form-control-md" id="email_confirm" name="email_confirm"
+              placeholder="Type your email to confirm"
+              autocomplete="email"
+              autofocus
+              required
+              disabled>
+            <div class="invalid-feedback"></div>
+          </div>
+
+          <!-- Honeypot field (bot detection) -->
+          <div class="form-group mb-3" style="display: none;" aria-hidden="true">
+            <input type="text" class="form-control" name="honey" tabindex="-1" autocomplete="off">
+          </div>
+
+          <button type="submit" class="btn btn-danger w-100 mb-4" id="email-preferences-submit" disabled>
+            <span class="button-text">Unsubscribe</span>
+          </button>
+        </form>
+
+        <!-- Back to Home -->
+        <div class="mt-3 pt-3 border-top text-center">
+          <a href="/" class="btn btn-outline-adaptive btn-sm">
+            {% uj_icon "arrow-left", "me-1" %}
+            Back to Home
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+{{ content | uj_content_format }}

package/dist/defaults/dist/pages/portal/email-preferences.md

@@ -0,0 +1,7 @@
+---
+### ALL PAGES ###
+layout: blueprint/portal/email-preferences
+permalink: /portal/email-preferences
+
+### REGULAR PAGES ###
+---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultimate-jekyll-manager",
-  "version": "0.0.281",
+  "version": "0.0.283",
   "description": "Ultimate Jekyll dependency manager",
   "main": "dist/index.js",
   "exports": {