Add new setup widget UI (#1656)

* Add initial project for setup widget

* Add base provisioning client

* Add base provisioning widget app

* Add IRC provisioning client

* Add initial IRC provisioning UI

* Add tailwindcss

* Add reusable text components

* Add reusable buttons components

* Add reusable forms components

* Add reusable alerts components

* Improve linked channels list

* Improve link new channel form

* Add polling for new linked channels

* Add style tweaks

* Add operator nick query after channel is entered

* Add state reset after link channel form submitted

* Add API prefix prop to provisioning app

* Add style improvements to provisioning app

* Fix import style

* Add responsive width

* Update package-lock.json

* Use useCallback for inputs

* Fix vite config

* Replace preact with react

* Fix import error

* Add docs to IRC provisioning client

* Improve polling

* Remove unnecessary async

* Add missing useEffect dependency

* Add separate eslint config for widget

* Fix linter issues in provisioning

* Fix linter issues in IRC provisioning

* Fix empty channel input

* Add alternate display when only one server

* Add new components, improve style and layout

* Add docs

* Update docs

* Tweak poll interval

* Fix element used for body text

* Add support for embed type parameter

* Add changelog

.eslintrc

@@ -1,4 +1,5 @@
 {
+  "root": true,
   "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint"],
   "parserOptions": {
@@ -111,5 +112,6 @@
         "no-var": "off",
       }
     }
-  ]
+  ],
+  "ignorePatterns": ["widget/**/*"]
 }

.gitignore

@@ -46,3 +46,5 @@ passkey.pem
 *.map
 lib/
 /book/
+
+/public

Dockerfile

@@ -13,7 +13,8 @@ FROM node:16 as builder
 WORKDIR /build
 
 COPY src/ /build/src/
-COPY .eslintrc *json /build/
+COPY widget/ /build/widget/
+COPY package.json package-lock.json tsconfig.json .eslintrc /build/
 
 RUN npm ci
 RUN npm run build
@@ -33,6 +34,7 @@ COPY --from=freebind /freebindfree/libfreebindfree.so /app/libfreebindfree.so
 COPY --from=builder /build/node_modules /app/node_modules
 COPY --from=builder /build/package.json /app/package.json
 COPY --from=builder /build/lib /app/lib
+COPY --from=builder /build/public /app/public
 
 COPY app.js config.schema.yml /app/
 COPY docker /app/docker

changelog.d/1656.feature

@@ -0,0 +1 @@
+Add a UI in the form of a Matrix widget for linking and unlinking channels from a Matrix room.

docs/SUMMARY.md

@@ -6,6 +6,7 @@
   - [Room Commands](./room_commands.md)
   - [Room Configuration](./room_configuration.md)
   - [IRC Modes](./irc_modes.md)
+  - [Setup Widget](./setup_widget.md)
 - [Bridged Networks](./bridged_networks.md)
 - [Bridge Administrators](./administrators_guide.md)
   - [Setting up the bridge](./bridge_setup.md)

docs/setup_widget.md

@@ -0,0 +1,25 @@
+# Setup Widget
+
+The IRC Bridge provides a user interface in the form of a Matrix widget.
+This can be used within a room to link and unlink channels.
+
+### Configuration
+
+In order to use the setup widget, it must be enabled along with the provisioning API:
+```yaml
+  provisioning:
+    # True to enable the provisioning HTTP endpoint. Default: false.
+    enabled: true
+    # Whether to enable hosting the setup widget page. Default: false.
+    widget: true
+```
+It will be hosted on the same port as the appservice by default, at the path `/_matrix/provision/v1/static`.
+
+### Usage
+
+Invite the bridge user to the Matrix room, then add the widget like this (where `example.com` is a public route to your bridge's provisioning API):
+```
+/addwidget https://example.com/_matrix/provision/v1/static/?roomId=$matrix_room_id&widgetId=$matrix_widget_id
+```
+
+