Skip to content

feat: add new functionallity for remember me#412

Merged
fernanDOTdo merged 10 commits into
mainfrom
new-remember-me
Jul 20, 2026
Merged

feat: add new functionallity for remember me#412
fernanDOTdo merged 10 commits into
mainfrom
new-remember-me

Conversation

@plpmd

@plpmd plpmd commented Jul 14, 2026

Copy link
Copy Markdown
Contributor

Summary

This PR extends the RememberMe component with several new features and bug fixes.


1. AES-GCM Cookie Encryption (encryptData)

Adds an encryptData boolean option to the RememberMe constructor. When enabled, the cookie payload is encrypted using browser-native Web Crypto (AES-GCM 256-bit) before being stored, and base64-encoded for transport.

How it works:

  • A random AES-GCM key is generated once per device and persisted in localStorage (key: engrid-remember-me-key). The key is never written to the cookie itself, so it never travels with the stored data.
  • On read, the cookie is decrypted asynchronously. If the key is absent (different device, cleared storage) or decryption fails for any reason, the component silently falls back to the normal no-autofill experience.
  • Works in both local cookie mode and remote iframe mode. In remote mode, the encryptData flag is forwarded in the postMessage payload so the iframe can apply the same encrypt/decrypt protocol.
  • The data-remember.html reference implementation has been updated to support the remote encrypted flow.

Known limitation: In remote/iframe mode, the key lives in the iframe origin's localStorage, which is subject to Chrome's third-party storage partitioning.


2. Configurable Clear Autofill Label (fieldClearLabel)

Adds a fieldClearLabel string option that lets client themes override the text of the clear autofill link shown when pre-filled data is present.

  • Defaults to (clear autofill) to preserve existing behavior.
  • The previous hardcoded constant has been replaced with this.fieldClearLabel, making it fully configurable per instance.

3. Hide Remember Me Opt-In (hide)

Adds a hide boolean option. When set to true, the Remember Me opt-in UI element is rendered with the hide CSS class, keeping it invisible while still allowing the component to function. Useful when clients want autofill behavior without displaying the opt-in checkbox to the donor.


4. Fix: Correctly Restore transaction.recurrfreq Radio Selection

transaction.recurrfreq is a radio group (MONTHLY, ONETIME, ANNUAL, etc.). The previous implementation fell through to the generic setFieldValue path, which only checked the first radio in the DOM. If that radio did not match the saved value, nothing was selected.

Adds explicit handling for recurrfreq (configurable via the new fieldDonationRecurrFreqRadioName option, defaulting to transaction.recurrfreq) that queries the exact radio by value and clicks it, matching the same pattern already used for transaction.donationAmt.


5. Fix: Save and Restore Custom Donation Amount Correctly

When the donor selected the Other radio and typed a custom amount, readFields() was storing the radio own value (Other) instead of the numeric value the donor entered in the text input.

On the restore side, writeFields() was jumping straight to filling the other text input without first clicking the Other radio, leaving the input hidden/disabled in some form configurations.

Fixes:

  • readFields() now detects when the checked donationAmt radio has value other and persists the numeric value from transaction.donationAmt.other instead.
  • writeFields() now first clicks the Other radio before populating the text input when no predefined radio matches the saved value.

6. Fix: Reapply Donation Amount After SwapAmounts Replaces the DOM

SwapAmounts listens to onFrequencyChange and calls enjs.swapList() to replace the donationAmt radio nodes in the DOM. This runs about 1 second after page load via a setTimeout in App.run(), which is after RememberMe has already called writeFields() and selected a radio, wiping that selection.

Adds reapplyDonationAmtAfterSwap(), which subscribes once (via .one()) to onFrequencyChange and, after a 200 ms settle delay, re-clicks the correct donationAmt radio (or fills the Other text input for custom amounts). The handler fires only on the initial frequency load and never again, so it does not interfere with subsequent donor interactions.


Changed Files

File Description
src/remember-me.ts All new features and bug fixes; imports DonationFrequency
src/interfaces/options.ts Added fieldClearLabel?, encryptData?, hide?, and fieldDonationRecurrFreqRadioName?
dist/remember-me.js / dist/remember-me.d.ts Compiled output updated
dist/interfaces/options.d.ts Type declarations updated
reference-materials/docs/rememberme.md Documentation updated for encryptData

@fernanDOTdo

Copy link
Copy Markdown
Member

@plpmd Thank you! Please, can you also send a PR to the engrid-docs repository, documenting this new option?

@plpmd plpmd left a comment

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@fernanDOTdo PR documenting this new option on engrid docs:
4site-interactive-studios/engrid-docs#15

@plpmd
plpmd marked this pull request as draft July 15, 2026 19:04
@plpmd plpmd changed the title feat: add fieldClearLabel option feat: add new functionallity for remember me Jul 15, 2026
plpmd added 5 commits July 16, 2026 08:56
…ction

transaction.recurrfreq is a radio group (MONTHLY, ONETIME, ANNUAL, etc).
The previous implementation fell through to the generic setFieldValue path,
which only checked the first radio in the DOM. If that radio's value didn't
match the saved value, nothing was selected.

Add explicit handling for recurrfreq (configurable via
fieldDonationRecurrFreqRadioName option, defaulting to
'transaction.recurrfreq') that queries the exact radio by value and clicks it,
matching the same pattern already used for transaction.donationAmt.
When the donor selected the 'Other' radio and typed a custom amount,
readFields() was storing the radio's own value ('Other' / 'other') instead
of the numeric value the donor entered in the text input.

On the restore side, writeFields() jumped straight to filling the .other
text input without first clicking the 'Other' radio, leaving the input
hidden/disabled in some form configurations.

Fix readFields() to detect when the checked donationAmt radio has value
'other' and persist the numeric value from transaction.donationAmt.other
instead. Fix writeFields() to first click the 'Other' radio before
populating the text input when no predefined radio matches the saved value.
…the DOM

SwapAmounts listens to onFrequencyChange and calls enjs.swapList() to
replace the donationAmt radio nodes in the DOM. This runs ~1 second after
page load via a setTimeout in App.run(), which is after RememberMe has
already called writeFields() and selected a radio — wiping that selection.

Add reapplyDonationAmtAfterSwap() which subscribes once (via .one()) to
onFrequencyChange and, after a 200 ms settle delay, re-clicks the correct
donationAmt radio (or fills the Other text input for custom amounts).
The handler fires only on the initial frequency load and never again,
so it does not interfere with subsequent donor interactions.
@plpmd
plpmd marked this pull request as ready for review July 16, 2026 15:45
@fernanDOTdo
fernanDOTdo merged commit 4fe82b5 into main Jul 20, 2026
2 checks passed
@fernanDOTdo
fernanDOTdo deleted the new-remember-me branch July 20, 2026 17:53
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.

2 participants