Pass device id to widgets (#10209)

* Pass device id to widget

Implement the [comment in MSC 3819](https://github.com/matrix-org/matrix-spec-proposals/pull/3819#discussion_r1099833846) which requests passing a device id to a widget.

This is based on the previous work in the matrix-widget-api: https://github.com/matrix-org/matrix-widget-api/pull/78

Signed-off-by: Oliver Sand <oliver.sand@nordeck.net>

* Include all data that is shared in the permissions screen

* Update matrix-widget-api to version 1.4.0

Signed-off-by: Dominik Henneke <dominik.henneke@nordeck.net>

* Fix type and test

Signed-off-by: Dominik Henneke <dominik.henneke@nordeck.net>

---------

Signed-off-by: Oliver Sand <oliver.sand@nordeck.net>
Signed-off-by: Dominik Henneke <dominik.henneke@nordeck.net>
Co-authored-by: Dominik Henneke <dominik.henneke@nordeck.net>

src/components/views/elements/AppPermission.tsx

@@ -104,7 +104,9 @@ export default class AppPermission extends React.Component<IProps, IState> {
                     <li>{_t("Your display name")}</li>
                     <li>{_t("Your avatar URL")}</li>
                     <li>{_t("Your user ID")}</li>
+                    <li>{_t("Your device ID")}</li>
                     <li>{_t("Your theme")}</li>
+                    <li>{_t("Your language")}</li>
                     <li>{_t("%(brand)s URL", { brand })}</li>
                     <li>{_t("Room ID")}</li>
                     <li>{_t("Widget ID")}</li>

src/i18n/strings/en_EN.json

@@ -2523,7 +2523,9 @@
     "Your display name": "Your display name",
     "Your avatar URL": "Your avatar URL",
     "Your user ID": "Your user ID",
+    "Your device ID": "Your device ID",
     "Your theme": "Your theme",
+    "Your language": "Your language",
     "%(brand)s URL": "%(brand)s URL",
     "Room ID": "Room ID",
     "Widget ID": "Widget ID",

src/stores/widgets/StopGapWidget.ts

@@ -221,6 +221,7 @@ export class StopGapWidget extends EventEmitter {
             clientId: ELEMENT_CLIENT_ID,
             clientTheme: SettingsStore.getValue("theme"),
             clientLanguage: getUserLanguage(),
+            deviceId: this.client.getDeviceId() ?? undefined,
         };
         const templated = this.mockWidget.getCompleteUrl(Object.assign(defaults, fromCustomisation), opts?.asPopout);