web/flows: resize captcha iframes

[kensternberg-authentik]

web: streamline CaptchaStage

What

This commit:

Adds a ResizeObserver to the inner container of the host IFrame, giving us notice when something inside that container (such as a Captcha) requires resizing. I could not get the inner iframe to give up all of its sizing secrets, so I went with 2rem of padding to help prevent scrollsbars or overflowing. Primitive and old-school, but it seems to have worked well!

Re-organizes the Captcha Stage into a pattern that we’re trying to enforce throughout the code base. This makes the DX layout a little more consistent.

Replaces the big trees of conditionals, collections of if { if { if { } } } with a state table.

Breaks each Captcha clause into two separate handlers: one for the interactive version, and one for the execute-only version, and replaces the conditionals for each of those with a type:

type CaptchaHandler = {
    name: string;
    interactive: () => Promise<unknown>;
    execute: () => Promise<unknown>;
};

Replaces the foreach() with for(). You cannot use a forEach() with async expressions. If you need asynchronous behavior in an ordered loop, for() is the safest way to handle it; if you need asynchronous behavior from multiple promises, Promise.allSettled(handlers.map()) is the way to go.

I tried to tell if this function meant to run every handler it found simultaneously, or if it meant to test them in order; I went with the second option, breaking and exiting the loop once a handler had run successfully.

I made the construction of the IFrame and the DocumentContainer lazy and on-demand. There are times when we simply won’t need or use them, and there’s no reason to build them prematurely.

Replaced the removeEventListener with a ListenerController, now that that’s an option.

Details

The state table is pretty nifty! For example, in the render() function, there was a huge tree of conditionals for all the things that we wanted to have happen, but it turns out that what we really wanted were to check if this.embedded is true, if this.challenge is not undefined, and, if so, if this.challenge.interactive is true, and what to do under all those conditions. I think this makes that clear:

// [isEmbedded, hasChallenge, isInteractive]
return match([this.embedded, Boolean(this.challenge), Boolean(this.challenge?.interactive)])
  .with([true,  false, P.any], () => nothing)
  .with([true,  true,  false], () => nothing)
  .with([true,  true,  true],  () => this.renderBody())
  .with([false, false, P.any], () => akEmptyState({ loading: true }))
  .with([false, true,  P.any], () => this.renderMain())
  .exhaustive();

The .exhaustive() feature is especially nice: it’ll throw an exception at build time if I haven’t handled every possible combination!

Coverage for using { signal: options.signal } to remove event listeners is currently excellent.

• The code has been formatted (make web)

[netlify]

✅ Deploy Preview for authentik-docs canceled.

Name	Link
🔨 Latest commit	f448775
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-docs/deploys/6750f12ed31f860008ea6064

[netlify]

✅ Deploy Preview for authentik-storybook ready!

Name	Link
🔨 Latest commit	f448775
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-storybook/deploys/6750f12e08f59b0008d7aee6
😎 Deploy Preview	https://deploy-preview-12260--authentik-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.62%. Comparing base (e077a5c) to head (f448775).
Report is 35 commits behind head on main.

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #12260      +/-   ##
==========================================
- Coverage   92.67%   92.62%   -0.05%     
==========================================
  Files         761      762       +1     
  Lines       38050    38152     +102     
==========================================
+ Hits        35263    35340      +77     
- Misses       2787     2812      +25     

Flag	Coverage Δ
e2e	49.00% <ø> (-0.22%)	⬇️
integration	24.76% <ø> (-0.07%)	⬇️
unit	90.22% <ø> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[kensternberg-authentik]

These objects were instantiated at build time and never changed. There's no reason for them to be stateful or reactive.

[kensternberg-authentik]

This happens after the render, so I'm trying to put the post-render lifecycle stuff there.

[BeryJu]

/cherry-pick version-2024.10