u

src/automats/authAutomat.js

@@ -84,7 +84,7 @@ export function setAuthEventDispatcher(dispatch) {
     emit = dispatch;
 }
 
-function normalizePicture(picture) {
+export function normalizePicture(picture) {
     if (!picture || typeof picture !== 'string') return null;
     if (picture.startsWith('http://') || picture.startsWith('https://') || picture.startsWith('data:')) {
         return picture;

src/components/settings/MembersSettingsPanel.jsx

@@ -1,4 +1,5 @@
 import { PureComponent } from 'react';
+import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -9,8 +10,10 @@ import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutlined';
+import MailOutlinedIcon from '@mui/icons-material/MailOutlined';
 import { enqueueSnackbar } from 'notistack';
 import companyAutomat, { selectIsCompanyAdmin } from '../../automats/companyAutomat';
+import { normalizePicture } from '../../automats/authAutomat';
 import { notifyError } from '../../utils/notify';
 import { backendErrorFrom } from '../../utils/backendError';
 
@@ -157,7 +160,14 @@ export default class MembersSettingsPanel extends PureComponent {
           </Stack>
           {loading && members.length === 0 && <CircularProgress size={20} />}
           {members.map((m) => (
-            <Stack key={m.id} direction="row" spacing={1} alignItems="center" sx={{ py: 0.5 }}>
+            <Stack key={m.id} direction="row" spacing={1.5} alignItems="center" sx={{ py: 0.75 }}>
+              <Avatar
+                src={normalizePicture(m.picture) || undefined}
+                alt={m.email}
+                sx={{ width: 32, height: 32, fontSize: '0.875rem' }}
+              >
+                {m.email?.[0]?.toUpperCase()}
+              </Avatar>
               <Typography sx={{ flex: 1 }}>{m.email}</Typography>
               {this.renderRoleSelect(m.role, (role) => this.handleSetRole(m, role), busy)}
               <IconButton aria-label="Entfernen" disabled={busy} onClick={() => this.handleRemoveMember(m)}>
@@ -192,7 +202,18 @@ export default class MembersSettingsPanel extends PureComponent {
             <Typography color="text.secondary">Keine offenen Einladungen.</Typography>
           )}
           {invites.map((i) => (
-            <Stack key={i.id} direction="row" spacing={1} alignItems="center" sx={{ py: 0.5 }}>
+            <Stack key={i.id} direction="row" spacing={1.5} alignItems="center" sx={{ py: 0.75 }}>
+              <Avatar
+                sx={{
+                  width: 32,
+                  height: 32,
+                  fontSize: '0.875rem',
+                  bgcolor: 'action.selected',
+                  color: 'text.secondary',
+                }}
+              >
+                <MailOutlinedIcon sx={{ fontSize: 18 }} />
+              </Avatar>
               <Typography sx={{ flex: 1 }}>{i.email}</Typography>
               <Typography color="text.secondary">{ROLES.find((r) => r.value === i.role)?.label ?? i.role}</Typography>
               <IconButton aria-label="Einladung löschen" disabled={busy} onClick={() => this.handleDeleteInvite(i)}>