use first letter of display name / name / id as default avatar

src/components/AvatarField.tsx

@@ -31,7 +31,23 @@ const AvatarField = ({ source, ...rest }: AvatarProps & FieldProps) => {
     };
   }, [mxcURL, fetchAvatar]);
 
-  return <Avatar alt={alt} classes={classes} sizes={sizes} src={src} sx={sx} variant={variant} />;
+  // a hacky way to handle both users and rooms,
+  // where users have an ID, may have a name, and may have a displayname
+  // and rooms have an ID and may have a name
+  let letter = "";
+  if (record?.id) {
+    letter = record.id[0].toUpperCase();
+  }
+  if (record?.name) {
+    letter = record.name[0].toUpperCase();
+  }
+  if (record?.displayname) {
+    letter = record.displayname[0].toUpperCase();
+  }
+
+  return (<Avatar alt={alt} classes={classes} sizes={sizes} src={src} sx={sx} variant={variant}>
+          {letter}
+          </Avatar>);
 };
 
 export default AvatarField;

src/synapse/authProvider.ts

@@ -172,7 +172,6 @@ const authProvider: AuthProvider = {
   // called when the user navigates to a new location, to check for authentication
   checkAuth: () => {
     const access_token = storage.getItem("access_token");
-    console.log("checkAuth " + access_token);
     return typeof access_token === "string" ? Promise.resolve() : Promise.reject();
   },
   // called when the user navigates to a new location, to check for permissions / roles