Show avatar and name from server if profile overwriting is disabled

maubot/client.py

@@ -46,6 +46,9 @@ class Client:
     client: MaubotMatrixClient
     started: bool
 
+    remote_displayname: str
+    remote_avatar_url: ContentURI
+
     def __init__(self, db_instance: DBClient) -> None:
         self.db_instance = db_instance
         self.cache[self.id] = self
@@ -116,6 +119,7 @@ class Client:
         if self.avatar_url != "disable":
             await self.client.set_avatar_url(self.avatar_url)
             self.start_sync()
+        await self._update_remote_profile()
         self.started = True
         self.log.info("Client started, starting plugin instances...")
         await self.start_plugins()
@@ -167,6 +171,8 @@ class Client:
             "autojoin": self.autojoin,
             "displayname": self.displayname,
             "avatar_url": self.avatar_url,
+            "remote_displayname": self.remote_displayname,
+            "remote_avatar_url": self.remote_avatar_url,
             "instances": [instance.to_dict() for instance in self.references],
         }
 
@@ -202,6 +208,8 @@ class Client:
         self.db_instance.displayname = displayname
         if self.displayname != "disable":
             await self.client.set_displayname(self.displayname)
+        else:
+            await self._update_remote_profile()
 
     async def update_avatar_url(self, avatar_url: ContentURI) -> None:
         if avatar_url is None or avatar_url == self.avatar_url:
@@ -209,6 +217,8 @@ class Client:
         self.db_instance.avatar_url = avatar_url
         if self.avatar_url != "disable":
             await self.client.set_avatar_url(self.avatar_url)
+        else:
+            await self._update_remote_profile()
 
     async def update_access_details(self, access_token: str, homeserver: str) -> None:
         if not access_token and not homeserver:
@@ -228,6 +238,10 @@ class Client:
         self.db_instance.access_token = access_token
         self.start_sync()
 
+    async def _update_remote_profile(self) -> None:
+        profile = await self.client.get_profile(self.id)
+        self.remote_displayname, self.remote_avatar_url = profile.displayname, profile.avatar_url
+
     # region Properties
 
     @property

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

@@ -17,6 +17,7 @@ import React from "react"
 import { NavLink, withRouter } from "react-router-dom"
 import { ReactComponent as ChevronRight } from "../../res/chevron-right.svg"
 import { ReactComponent as UploadButton } from "../../res/upload.svg"
+import { ReactComponent as NoAvatarIcon } from "../../res/bot.svg"
 import { PrefTable, PrefSwitch, PrefInput, PrefSelect } from "../../components/PreferenceTable"
 import Spinner from "../../components/Spinner"
 import api from "../../api"
@@ -29,11 +30,19 @@ const ClientListEntry = ({ entry }) => {
     } else if (!entry.started) {
         classes.push("stopped")
     }
+    const avatarURL = entry.avatar_url && api.getAvatarURL({
+        id: entry.id,
+        avatar_url: entry.avatar_url === "disabled"
+            ? entry.remote_avatar_url
+            : entry.avatar_url
+    })
     return (
         <NavLink className={classes.join(" ")} to={`/client/${entry.id}`}>
-            <img className="avatar" src={api.getAvatarURL(entry)} alt=""/>
+            {avatarURL
+                ? <img className='avatar' src={avatarURL} alt=""/>
+                : <NoAvatarIcon className='avatar'/>}
             <span className="displayname">{entry.displayname || entry.id}</span>
-            <ChevronRight/>
+            <ChevronRight className='chevron'/>
         </NavLink>
     )
 }
@@ -194,11 +203,20 @@ class Client extends BaseMainView {
         </div>
     }
 
+    get avatarURL() {
+        return api.getAvatarURL({
+            id: this.state.id,
+            avatar_url: this.state.avatar_url === "disabled"
+                ? this.props.entry.remote_avatar_url
+                : this.state.avatar_url
+        })
+    }
+
     renderSidebar = () => !this.isNew && (
         <div className="sidebar">
             <div className={`avatar-container ${this.state.avatar_url ? "" : "no-avatar"}
                         ${this.state.uploadingAvatar ? "uploading" : ""}`}>
-                <img className="avatar" src={api.getAvatarURL(this.state)} alt="Avatar"/>
+                <img className="avatar" src={this.avatarURL} alt="Avatar"/>
                 <UploadButton className="upload"/>
                 <input className="file-selector" type="file" accept="image/png, image/jpeg"
                        onChange={this.avatarUpload} disabled={this.state.uploadingAvatar}

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

@@ -28,7 +28,7 @@ import InstanceDatabase from "./InstanceDatabase"
 const InstanceListEntry = ({ entry }) => (
     <NavLink className="instance entry" to={`/instance/${entry.id}`}>
         <span className="id">{entry.id}</span>
-        <ChevronRight/>
+        <ChevronRight className='chevron'/>
     </NavLink>
 )
 

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

@@ -25,7 +25,7 @@ import BaseMainView from "./BaseMainView"
 const PluginListEntry = ({ entry }) => (
     <NavLink className="plugin entry" to={`/plugin/${entry.id}`}>
         <span className="id">{entry.id}</span>
-        <ChevronRight/>
+        <ChevronRight className='chevron'/>
     </NavLink>
 )
 

maubot/management/frontend/src/res/bot.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="24" height="24" viewBox="0 0 24 24">
+   <path fill="#000000" d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M7.5,13A2.5,2.5 0 0,0 5,15.5A2.5,2.5 0 0,0 7.5,18A2.5,2.5 0 0,0 10,15.5A2.5,2.5 0 0,0 7.5,13M16.5,13A2.5,2.5 0 0,0 14,15.5A2.5,2.5 0 0,0 16.5,18A2.5,2.5 0 0,0 19,15.5A2.5,2.5 0 0,0 16.5,13Z" />
+</svg>

maubot/management/frontend/src/style/pages/sidebar.sass

@@ -53,10 +53,10 @@
             height: 2rem
             box-sizing: border-box
 
-            &:not(:hover) > svg
+            &:not(:hover) > svg.chevron
                 display: none
 
-            > svg
+            > svg.chevron
                 float: right
 
             &:hover
@@ -67,7 +67,7 @@
                 color: white
 
             &.client
-                img.avatar
+                img.avatar, svg.avatar
                     max-height: 1.5rem
                     border-radius: 100%
                     vertical-align: middle