-
{user.displayName}
-{user.email}
- - {roleLabel} - +
+
{/* Theme Quick Switcher */}
@@ -1070,9 +1070,7 @@ export const App: React.FC = () => {
{/* User Info Header */}
+
{user.displayName}
+{user.email}
+ + {roleLabel} + +
- = ({
className="p-2.5 bg-canvas border border-border rounded-btn flex items-center justify-between gap-3 text-xs hover:border-border/80 transition-colors"
>
- {user.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
-
+ {user.displayName}
{user.email}
diff --git a/frontend/src/components/UnifiedShareModal.tsx b/frontend/src/components/UnifiedShareModal.tsx index d4e290e..77d8dba 100644 --- a/frontend/src/components/UnifiedShareModal.tsx +++ b/frontend/src/components/UnifiedShareModal.tsx @@ -10,6 +10,7 @@ import { } from 'lucide-react'; import { User, Team, UnifiedShare } from '../lib/types'; import { UserAutocomplete } from '../features/UserAutocomplete'; +import { UserAvatar } from './UserAvatar'; export interface UnifiedShareModalProps { isOpen: boolean; @@ -284,15 +285,18 @@ export const UnifiedShareModal: React.FC
- c.id === sh.targetId)?.avatarUrl}
+ name={sh.targetName || sh.targetEmail}
+ size="sm"
+ className="border border-border/80"
+ />
+ )}
- {isTeam ?
+ {isTeam ? (
+
+
+ ) : (
+
{sh.targetName || (isTeam ? 'Gruppe' : sh.targetEmail || 'Benutzer')}
diff --git a/frontend/src/components/UserAvatar.tsx b/frontend/src/components/UserAvatar.tsx
new file mode 100644
index 0000000..b0110be
--- /dev/null
+++ b/frontend/src/components/UserAvatar.tsx
@@ -0,0 +1,157 @@
+import React, { useState } from 'react';
+
+export interface UserAvatarProps {
+ user?: {
+ displayName?: string;
+ email?: string;
+ avatarUrl?: string;
+ } | null;
+ name?: string;
+ avatarUrl?: string;
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+ className?: string;
+ alt?: string;
+}
+
+const SIZE_MAP = {
+ xs: 'w-5 h-5 text-[10px]',
+ sm: 'w-7 h-7 text-xs',
+ md: 'w-9 h-9 text-sm',
+ lg: 'w-12 h-12 text-base',
+ xl: 'w-20 h-20 text-2xl',
+};
+
+const BG_COLORS = [
+ 'bg-primary/20 text-primary border-primary/30',
+ 'bg-secondary/20 text-secondary border-secondary/30',
+ 'bg-accent/20 text-accent border-accent/30',
+ 'bg-info/20 text-info border-info/30',
+ 'bg-success/20 text-success border-success/30',
+ 'bg-warning/20 text-warning border-warning/30',
+];
+
+function getInitials(name?: string, email?: string): string {
+ const cleanName = (name || '').trim();
+ if (cleanName) {
+ const parts = cleanName.split(/\s+/);
+ if (parts.length >= 2) {
+ return (parts[0][0] + parts[1][0]).toUpperCase();
+ }
+ return cleanName.slice(0, 2).toUpperCase();
+ }
+ const cleanEmail = (email || '').trim();
+ if (cleanEmail) {
+ return cleanEmail.slice(0, 2).toUpperCase();
+ }
+ return '?';
+}
+
+function getColorIndex(str: string): number {
+ let hash = 0;
+ for (let i = 0; i < str.length; i++) {
+ hash = str.charCodeAt(i) + ((hash << 5) - hash);
+ }
+ return Math.abs(hash) % BG_COLORS.length;
+}
+
+export function isEmoji(str?: string): boolean {
+ if (!str) return false;
+ const trimmed = str.trim();
+ // Simple heuristic: length <= 8 and not a URL or base64 image
+ return !trimmed.startsWith('data:') && !trimmed.startsWith('http') && !trimmed.startsWith('/') && trimmed.length <= 8;
+}
+
+export const UserAvatar: React.FC = ({
+ user,
+ name,
+ avatarUrl,
+ size = 'md',
+ className = '',
+ alt,
+}) => {
+ const [imageError, setImageError] = useState(false);
+
+ const effectiveAvatarUrl = avatarUrl !== undefined ? avatarUrl : user?.avatarUrl;
+ const effectiveName = name !== undefined ? name : (user?.displayName || user?.email || '');
+ const effectiveEmail = user?.email || '';
+
+ const sizeClass = SIZE_MAP[size] || SIZE_MAP.md;
+ const initials = getInitials(effectiveName, effectiveEmail);
+ const colorIndex = getColorIndex(effectiveName || effectiveEmail || 'user');
+ const colorClass = BG_COLORS[colorIndex];
+
+ const hasImage = Boolean(
+ effectiveAvatarUrl &&
+ !imageError &&
+ (effectiveAvatarUrl.startsWith('data:image/') ||
+ effectiveAvatarUrl.startsWith('http://') ||
+ effectiveAvatarUrl.startsWith('https://') ||
+ effectiveAvatarUrl.startsWith('/'))
+ );
+
+ const isEmojiAvatar = Boolean(effectiveAvatarUrl && isEmoji(effectiveAvatarUrl));
+
+ return (
+ {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.onerror = () => reject(new Error('Fehler beim Lesen der Datei'));
+ reader.onload = (e) => {
+ const img = new Image();
+ img.onerror = () => reject(new Error('Fehler beim Laden des Bildes'));
+ img.onload = () => {
+ const canvas = document.createElement('canvas');
+ canvas.width = maxSize;
+ canvas.height = maxSize;
+ const ctx = canvas.getContext('2d');
+ if (!ctx) {
+ reject(new Error('Canvas Context konnte nicht erstellt werden'));
+ return;
+ }
+
+ // Center crop calculation
+ const minDim = Math.min(img.width, img.height);
+ const sx = (img.width - minDim) / 2;
+ const sy = (img.height - minDim) / 2;
+
+ ctx.drawImage(img, sx, sy, minDim, minDim, 0, 0, maxSize, maxSize);
+
+ // Try webp first, fallback to jpeg
+ let dataUrl = canvas.toDataURL('image/webp', 0.85);
+ if (!dataUrl.startsWith('data:image/webp')) {
+ dataUrl = canvas.toDataURL('image/jpeg', 0.85);
+ }
+ resolve(dataUrl);
+ };
+ img.src = e.target?.result as string;
+ };
+ reader.readAsDataURL(file);
+ });
+}
diff --git a/frontend/src/features/UserAutocomplete.tsx b/frontend/src/features/UserAutocomplete.tsx
index b818b01..c3bb558 100644
--- a/frontend/src/features/UserAutocomplete.tsx
+++ b/frontend/src/features/UserAutocomplete.tsx
@@ -1,6 +1,7 @@
import React, { useState, useEffect, useRef } from 'react';
import { Search, X, Check } from 'lucide-react';
import { User } from '../lib/types';
+import { UserAvatar } from '../components/UserAvatar';
interface UserAutocompleteProps {
users: User[];
@@ -101,9 +102,7 @@ export const UserAutocomplete: React.FC = ({
{selectedUser ? (
+ {hasImage ? (
+ 
setImageError(true)}
+ className="w-full h-full object-cover rounded-full"
+ />
+ ) : isEmojiAvatar ? (
+
+ );
+};
+
+/**
+ * Resizes and center-crops an uploaded image file to a compact base64 Data URL.
+ */
+export async function resizeImageToDataUrl(file: File, maxSize = 256): Promise
+ {effectiveAvatarUrl}
+
+ ) : (
+
+ {initials}
+
+ )}
+
- = ({
}`}
>
- {(selectedUser.displayName || selectedUser.email || '?')[0].toUpperCase()}
-
+
-
- {(u.displayName || u.email || '?')[0].toUpperCase()}
-
+
{u.displayName || u.email}
diff --git a/frontend/src/features/settings/AdminSettingsView.tsx b/frontend/src/features/settings/AdminSettingsView.tsx
index d76aee3..55c0936 100644
--- a/frontend/src/features/settings/AdminSettingsView.tsx
+++ b/frontend/src/features/settings/AdminSettingsView.tsx
@@ -21,6 +21,7 @@ import {
UserRole,
} from '../../lib/types';
import { api, triggerHaptic } from '../../lib/api';
+import { UserAvatar } from '../../components/UserAvatar';
interface AdminSettingsViewProps {
currentUser: User;
@@ -556,16 +557,19 @@ export const AdminSettingsView: React.FC = ({
{users.map((u) => (
-
-
- {u.displayName}
- {!u.isActive && (
-
- Gesperrt
-
- )}
+
+
+
-
+ {u.displayName}
+ {!u.isActive && (
+
+ Gesperrt
+
+ )}
+
+ {u.email}
{u.email}
diff --git a/frontend/src/features/settings/UserSettingsView.tsx b/frontend/src/features/settings/UserSettingsView.tsx
index 532b4d0..a90a97f 100644
--- a/frontend/src/features/settings/UserSettingsView.tsx
+++ b/frontend/src/features/settings/UserSettingsView.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
import {
User as UserIcon,
Bell,
@@ -15,10 +15,13 @@ import {
Send,
AlertCircle,
Palette,
+ Upload,
+ Camera,
} from 'lucide-react';
import { APIKey, User } from '../../lib/types';
import { api, triggerHaptic } from '../../lib/api';
import { AVAILABLE_THEMES, ThemeId } from '../../lib/theme';
+import { UserAvatar, resizeImageToDataUrl } from '../../components/UserAvatar';
interface UserSettingsViewProps {
currentUser: User;
@@ -42,9 +45,12 @@ export const UserSettingsView: React.FC = ({
// --- Profile State ---
const [displayName, setDisplayName] = useState(currentUser.displayName || '');
const [email, setEmail] = useState(currentUser.email || '');
+ const [avatarUrl, setAvatarUrl] = useState(currentUser.avatarUrl || '');
const [newPassword, setNewPassword] = useState('');
const [profileMsg, setProfileMsg] = useState<{ type: 'ok' | 'err'; text: string } | null>(null);
const [savingProfile, setSavingProfile] = useState(false);
+ const [isProcessingAvatar, setIsProcessingAvatar] = useState(false);
+ const fileInputRef = useRef(null);
// --- Multi-Channel Alarms State ---
const [alarmChannels, setAlarmChannels] = useState(
@@ -69,6 +75,7 @@ export const UserSettingsView: React.FC = ({
useEffect(() => {
setDisplayName(currentUser.displayName || '');
setEmail(currentUser.email || '');
+ setAvatarUrl(currentUser.avatarUrl || '');
setAlarmChannels(Array.isArray(currentUser.alarmChannels) ? currentUser.alarmChannels : []);
setAlarmEmail(currentUser.alarmEmail || currentUser.email || '');
setDiscordWebhookUrl(currentUser.discordWebhookUrl || '');
@@ -95,6 +102,34 @@ export const UserSettingsView: React.FC = ({
);
};
+ // --- Handlers: Avatar ---
+ const handleAvatarFileSelected = async (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+ setIsProcessingAvatar(true);
+ setProfileMsg(null);
+ try {
+ const dataUrl = await resizeImageToDataUrl(file, 256);
+ setAvatarUrl(dataUrl);
+ triggerHaptic(10);
+ } catch (err: any) {
+ setProfileMsg({ type: 'err', text: err.message || 'Fehler beim Laden des Bildes' });
+ } finally {
+ setIsProcessingAvatar(false);
+ if (fileInputRef.current) fileInputRef.current.value = '';
+ }
+ };
+
+ const handleSelectPresetAvatar = (preset: string) => {
+ setAvatarUrl(preset);
+ triggerHaptic(10);
+ };
+
+ const handleRemoveAvatar = () => {
+ setAvatarUrl('');
+ triggerHaptic(10);
+ };
+
// --- Handlers: Profile ---
const handleSaveProfile = async (e: React.FormEvent) => {
e.preventDefault();
@@ -104,6 +139,7 @@ export const UserSettingsView: React.FC = ({
const patch: any = {
displayName: displayName.trim(),
email: email.trim(),
+ avatarUrl: avatarUrl.trim(),
};
if (newPassword.trim()) {
patch.password = newPassword.trim();
@@ -358,7 +394,88 @@ export const UserSettingsView: React.FC = ({
)}
-