Show E2EE fingerprint in client view

maubot/client.py

@@ -247,6 +247,7 @@ class Client:
             "homeserver": self.homeserver,
             "access_token": self.access_token,
             "device_id": self.device_id,
+            "fingerprint": self.crypto.account.fingerprint if self.crypto else None,
             "enabled": self.enabled,
             "started": self.started,
             "sync": self.sync,

maubot/management/api/spec.yaml

@@ -679,6 +679,9 @@ components:
         device_id:
           type: string
           description: The Matrix device ID corresponding to the access token.
+        fingerprint:
+          type: string
+          description: The encryption device fingerprint for verification.
         enabled:
           type: boolean
           example: true

maubot/management/frontend/src/pages/dashboard/Client.js

@@ -75,6 +75,7 @@ class Client extends BaseMainView {
             avatar_url: "",
             access_token: "",
             device_id: "",
+            fingerprint: null,
             sync: true,
             autojoin: true,
             enabled: true,
@@ -274,6 +275,10 @@ class Client extends BaseMainView {
             <PrefInput rowName="Device ID" type="text" name="device_id"
                        value={this.state.device_id} origValue={this.props.entry.device_id}
                        placeholder="maubot_F00BAR12" onChange={this.inputChange}/>
+            {this.props.entry.fingerprint && <PrefInput
+                rowName="E2EE device fingerprint" type="text" disabled={true} fullWidth={true}
+                value={this.props.entry.fingerprint} className="fingerprint"
+            />}
             <PrefInput rowName="Display name" type="text" name="displayname"
                        value={this.state.displayname} origValue={this.props.entry.displayname}
                        placeholder="My fancy bot" onChange={this.inputChange}/>

maubot/management/frontend/src/style/pages/client/index.sass

@@ -36,6 +36,10 @@
         > div.instances
             +instancelist
 
+        input.fingerprint
+            font-family: "Fira Code", monospace
+            font-size: 0.8em
+
     @media screen and (max-width: 40rem)
         flex-wrap: wrap