Custom HTML/iFrame fields

[moqmar]

Is your feature request related to a problem? Please describe.
I want our users to have some more advanced settings, for example to set a master password for a password manager (which shouldn't be passed through Authentik), or for payment options and donation selection as a nice playful widget for a non-profit. There are probably tons of other ideas as well, so the solution should be as flexible as possible.

Describe the solution you'd like
Custom iFrame/HTML fields with JSON support - plug the HTML code into the "placeholder", display that as an iFrame and provide a simple JavaScript API to change the value.

Describe alternatives you've considered

• A bigger set of input fields in general, with some kind of addon-based system to add new fields. This is the reason why this was already mentioned in Custom avatar pictures #2631, but due to the complex nature of the form logic in Authentik, this would come with a major refactoring while still only supporting very specific use-cases.
• Custom prompt types per instance, configurable in the admin UI. But that would come with all of the above and a fully new UI page as well - I think this is a bit overkill, but probably the best solution.

Additional context

• Define the code as the "placeholder"; then show it in an iFrame as a data: URL
• Add a basic stylesheet that matches the existing Authentik UI
• Get and set the value in the iFrame using e.g. authentikField.value (as a getter/setter, using window.postMessage)

Edit: While not completely solving the issue, this could by the way also be a solution for the UI part of #3134 for example, as one basically could just use an HTML field with a multiline textarea like this: <textarea onchange="authentikField.value = this.value"></textarea><script>document.querySelector("textarea").value = authentikField.value;</script> (or implement a more complex UI directly as required)

[moqmar]

I have created a branch for this, but I have the issue that I can't get the existing value of the field - how does it work for text fields, where is the value parameter being set in the prompt stage (https://github.com/goauthentik/authentik/blob/next/web/src/flow/stages/prompt/PromptStage.ts#L37-L45)?

How it can look like in the UI:

In the admin UI:

[BeryJu]

While the idea of this is very interesting, our usual advice for this would be to approach it vice-versa and embed parts of the authentik UI into the application its being integrated with, and/or use the API