Skip to content

Add Hyva theme support with Alpine.js components#2

Open
rhoerr wants to merge 3 commits intomainfrom
feature/hyva-theme-support
Open

Add Hyva theme support with Alpine.js components#2
rhoerr wants to merge 3 commits intomainfrom
feature/hyva-theme-support

Conversation

@rhoerr
Copy link
Copy Markdown
Contributor

@rhoerr rhoerr commented Apr 6, 2026

Summary

  • Convert passkey-core.js to UMD wrapper so a single file serves both Luma (AMD/RequireJS) and Hyva (window.passkeyCore) with zero duplication
  • Add hyva_-prefixed layout handles (hyva_customer_account_login, hyva_customer_account, hyva_passkey_account_index) that swap Luma templates for Alpine.js-powered Hyva templates
  • Implement three Alpine.js components replacing jQuery UI widgets: login (fetch + WebAuthn), enrollment prompt (private-content-loaded event), and passkey management (inline rename, native confirm/prompt dialogs)
  • All Tailwind classes stay within Hyva's default palette — no hyva_config_generate_before observer or Tailwind config registration needed

New files (9)

Type Files
Layout XML hyva_customer_account_login.xml, hyva_customer_account.xml, hyva_passkey_account_index.xml
Templates hyva/login/passkey-buttons.phtml, hyva/account/passkeys.phtml, hyva/enrollment-prompt.phtml
Alpine.js js/hyva/passkey-login.js, js/hyva/passkey-manage.js, js/hyva/passkey-enrollment.js

Modified files (1)

  • passkey-core.js — AMD define() → UMD wrapper (backwards-compatible, no changes to Luma consumers)

Test plan

  • Verify Luma login page still shows passkey button and completes auth flow (UMD regression)
  • Verify Luma account passkey management page CRUD still works
  • Verify Hyva login page shows passkey button with "or" divider, auth flow works
  • Verify Hyva enrollment prompt appears after login when no passkeys registered, dismiss persists in session
  • Verify Hyva passkey management: add, inline rename (Enter/Escape), delete with confirm dialog
  • Verify no Tailwind purge issues (all classes in Hyva default palette)

🤖 Generated with Claude Code

rhoerr and others added 3 commits April 5, 2026 23:52
Convert passkey-core.js to UMD so it serves both Luma (AMD/RequireJS)
and Hyva (window global) without duplication. Add hyva_-prefixed layout
handles that swap in Alpine.js-powered templates for login, enrollment
prompt, and passkey management pages.

All Tailwind classes stay within Hyva's default palette so no
hyva_config_generate_before observer or tailwind.config.js registration
is needed.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Register all components via Alpine.data() in alpine:init listeners
  (CSP build requires no parens/args in x-data attributes)
- Replace inline expressions with getters (notLoading, hasMessage,
  messageClasses, notEditing) to avoid unsafe-eval
- Replace x-model with :value + @input handler
- Pass config via data- attributes instead of x-data arguments
- Extract per-row editing into nested passkeyRow component with
  $dispatch for parent message communication
- Move all <script defer src> tags from templates into layout XML
  via hyva_default.xml + before.body.end block
- No x-model, no negation, no object literal :class, no method
  arguments in event handlers — fully CSP-build compatible

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant