Widget OpenID reauth implementation

[turt2live]

Fixes element-hq/element-web#7153

The proposal for this is part of https://github.com/matrix-org/matrix-doc/issues/1286. The relevant snippet (and therefore draft) is available here: https://gist.github.com/turt2live/669bbffe882c8541f057daeb29e18b86

As a proof of concept, I've also created a Dimension widget which does nothing more than report your user ID back to you - all without using the scalar_token provided in the query string, and without you having to configure your client to point at a Dimension instance.

Testing procedure:

1. Create a new room to play with widgets in, or use an existing one
2. Using /devtools, create an im.vector.modular.widgets state event with state key reauthwidget and content of:

   {
       "type": "customwidget",
       "url": "https://dimension.t2bot.io/widgets/reauth",
       "name": "OpenID Reauth Demo",
       "data": {},
       "id": "reauthwidget",
       "waitForIframeLoad": true,
       "creatorUserId": "@travis:dev.t2host.io"
   }

   You may have to change the creatorUserId to be your user ID.
3. Close devtools and open the widget
4. Click the blue "Start OpenID auth" button. This should result in a popup in Riot.
5. Within the popup, decide if you want to always allow the widget and click either 'Allow' or 'Deny'
6. If you selected allow, the widget should update to show you your user ID.

To repeat the process, refresh the page. There's currently an unrelated bug that prevents reloading the widget from being enough to unstick the state: the whole page needs to be refreshed. This will be addressed in a different PR (#2799).

Source for the widget: https://github.com/turt2live/matrix-dimension/blob/master/web/app/widget-wrappers/reauth-example/reauth-example.component.ts

---

This is being PR'd as a community member:

Signed-off-by: Travis Ralston <travis@t2bot.io>

[bwindels]

2 comments, otherwise lgtm

[jryans]

I have read through your proposal snippet and the original issue. This is my first time looking at the code related to widgets, but I am hoping to understand it better through this review. 😄

[jryans]

Why do we sometimes want the opposite order?

[turt2live]

Usually the toggle is at the end of the label, however in a dialog this doesn't make much sense to the user. This is the first instance of needing to do this, and it seems easiest to just put a boolean on it.

Everywhere else:

Widget dialog:

[jryans]

Hmm, well, technically it's fine. I'd suggest asking Nad if he would prefer only having one layout of toggles or if he agrees it seems better reversed as you've done it here.

[turt2live]

Summarizing the discussion from earlier today: We'll take care of this in element-hq/element-web#7566

[jryans]

I think we are getting close! I'd like to know more about the user widgets first before approving.

[jryans]

Is the sender of a user widget always yourself? (That's what it seems to be for stickerpicker widget, at least...)

[turt2live]

yes, it has to be. They are stored in account data and other places enforce this assumption.

[jryans]

Great, I think this looks good to me! 😁 Thanks for working through the security details with me.

[bwindels]

lgtm!