MarcWieland
422 lines
14 KiB
TypeScript
422 lines
14 KiB
TypeScript
import React, { useState, useRef } from 'react';
|
|
import { X, User, Mail, Phone, Shield, Check, Save, Camera, Upload, Trash2 } from 'lucide-react';
|
|
import { useAuth } from '../context/AuthContext';
|
|
import { SupabaseService } from '../services/supabaseService';
|
|
|
|
interface UserProfileModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export const UserProfileModal: React.FC<UserProfileModalProps> = ({ isOpen, onClose }) => {
|
|
const { profile, updateProfile } = useAuth();
|
|
|
|
const [fullName, setFullName] = useState(profile?.fullName || '');
|
|
const [phone, setPhone] = useState(profile?.phone || '');
|
|
const [avatarUrl, setAvatarUrl] = useState(profile?.avatarUrl || '');
|
|
const [isSaved, setIsSaved] = useState(false);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const [isUploadingPhoto, setIsUploadingPhoto] = useState(false);
|
|
|
|
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
|
|
|
if (!isOpen || !profile) return null;
|
|
|
|
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
setIsUploadingPhoto(true);
|
|
|
|
try {
|
|
// 1. Try uploading to Supabase Storage
|
|
const path = `avatars/${profile.id}_${Date.now()}.${file.name.split('.').pop() || 'jpg'}`;
|
|
const storageUrl = await SupabaseService.uploadFileToStorage('equipment-files', path, file);
|
|
|
|
if (storageUrl) {
|
|
setAvatarUrl(storageUrl);
|
|
} else {
|
|
// Fallback: Read as Data URL for immediate local preview & storage
|
|
const reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
if (event.target?.result) {
|
|
setAvatarUrl(event.target.result as string);
|
|
}
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
} catch (err) {
|
|
console.warn('Could not upload to storage bucket, using data URL fallback:', err);
|
|
const reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
if (event.target?.result) {
|
|
setAvatarUrl(event.target.result as string);
|
|
}
|
|
};
|
|
reader.readAsDataURL(file);
|
|
} finally {
|
|
setIsUploadingPhoto(false);
|
|
}
|
|
};
|
|
|
|
const handleSave = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsSaving(true);
|
|
await updateProfile({
|
|
fullName,
|
|
phone,
|
|
avatarUrl
|
|
});
|
|
setIsSaving(false);
|
|
setIsSaved(true);
|
|
setTimeout(() => setIsSaved(false), 2500);
|
|
};
|
|
|
|
const getRoleBadgeStyle = (role: string) => {
|
|
switch (role) {
|
|
case 'admin':
|
|
case 'disponent':
|
|
return { bg: 'rgba(56, 189, 248, 0.15)', border: '#38bdf8', color: '#38bdf8', label: 'Admin / Disponent' };
|
|
case 'monteur':
|
|
return { bg: 'rgba(74, 222, 128, 0.15)', border: '#4ade80', color: '#4ade80', label: 'Monteur / Außendienst' };
|
|
case 'kunde':
|
|
return { bg: 'rgba(250, 204, 21, 0.15)', border: '#facc15', color: '#facc15', label: 'Kunde' };
|
|
default:
|
|
return { bg: '#1e293b', border: '#64748b', color: '#94a3b8', label: role };
|
|
}
|
|
};
|
|
|
|
const badge = getRoleBadgeStyle(profile.role);
|
|
|
|
return (
|
|
<div className="modal-overlay" style={{
|
|
position: 'fixed',
|
|
inset: 0,
|
|
backgroundColor: 'rgba(15, 23, 42, 0.8)',
|
|
backdropFilter: 'blur(8px)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
zIndex: 1000,
|
|
padding: '16px'
|
|
}}>
|
|
<div className="modal-container" style={{
|
|
backgroundColor: '#1e293b',
|
|
border: '1px solid #334155',
|
|
borderRadius: '16px',
|
|
width: '100%',
|
|
maxWidth: '480px',
|
|
color: '#f8fafc',
|
|
boxShadow: '0 25px 50px -12px rgba(0,0,0,0.5)',
|
|
overflow: 'hidden'
|
|
}}>
|
|
{/* Header */}
|
|
<div style={{
|
|
padding: '20px 24px',
|
|
borderBottom: '1px solid #334155',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
background: 'linear-gradient(to right, #1e293b, #0f172a)'
|
|
}}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
|
<div style={{ position: 'relative' }}>
|
|
{avatarUrl ? (
|
|
<img
|
|
src={avatarUrl}
|
|
alt={fullName}
|
|
style={{
|
|
width: '44px',
|
|
height: '44px',
|
|
borderRadius: '50%',
|
|
objectFit: 'cover',
|
|
border: '2px solid #0284c7'
|
|
}}
|
|
/>
|
|
) : (
|
|
<div style={{
|
|
width: '44px',
|
|
height: '44px',
|
|
borderRadius: '50%',
|
|
backgroundColor: '#0284c7',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontWeight: 700,
|
|
fontSize: '1.2rem',
|
|
color: '#ffffff'
|
|
}}>
|
|
{profile.fullName.charAt(0).toUpperCase()}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<h3 style={{ margin: 0, fontSize: '1.1rem', fontWeight: 700 }}>Mein Profil</h3>
|
|
<p style={{ margin: 0, fontSize: '0.8rem', color: '#94a3b8' }}>Profilbild & Benutzerkontodaten</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={onClose}
|
|
style={{
|
|
background: 'none',
|
|
border: 'none',
|
|
color: '#94a3b8',
|
|
cursor: 'pointer',
|
|
padding: '4px',
|
|
borderRadius: '6px'
|
|
}}
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content Form */}
|
|
<form onSubmit={handleSave} style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: '18px' }}>
|
|
{/* Avatar Upload Section */}
|
|
<div style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '16px',
|
|
padding: '16px',
|
|
backgroundColor: '#0f172a',
|
|
borderRadius: '12px',
|
|
border: '1px solid #334155'
|
|
}}>
|
|
<input
|
|
type="file"
|
|
ref={fileInputRef}
|
|
accept="image/*"
|
|
style={{ display: 'none' }}
|
|
onChange={handleFileChange}
|
|
/>
|
|
|
|
<div style={{ position: 'relative', cursor: 'pointer' }} onClick={() => fileInputRef.current?.click()}>
|
|
{avatarUrl ? (
|
|
<img
|
|
src={avatarUrl}
|
|
alt="Profilbild"
|
|
style={{
|
|
width: '64px',
|
|
height: '64px',
|
|
borderRadius: '50%',
|
|
objectFit: 'cover',
|
|
border: '2px solid #38bdf8'
|
|
}}
|
|
/>
|
|
) : (
|
|
<div style={{
|
|
width: '64px',
|
|
height: '64px',
|
|
borderRadius: '50%',
|
|
backgroundColor: '#0284c7',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: '1.5rem',
|
|
fontWeight: 700,
|
|
color: '#ffffff'
|
|
}}>
|
|
{fullName.charAt(0).toUpperCase() || 'U'}
|
|
</div>
|
|
)}
|
|
<div style={{
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
right: 0,
|
|
width: '24px',
|
|
height: '24px',
|
|
borderRadius: '50%',
|
|
backgroundColor: '#ea580c',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: '#ffffff',
|
|
boxShadow: '0 2px 4px rgba(0,0,0,0.3)'
|
|
}}>
|
|
<Camera size={13} />
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ flex: 1 }}>
|
|
<div style={{ fontSize: '0.9rem', fontWeight: 600, color: '#f8fafc', marginBottom: '4px' }}>
|
|
Profilfoto
|
|
</div>
|
|
<div style={{ fontSize: '0.78rem', color: '#94a3b8', marginBottom: '10px' }}>
|
|
JPG, PNG oder WebP Format
|
|
</div>
|
|
<div style={{ display: 'flex', gap: '8px' }}>
|
|
<button
|
|
type="button"
|
|
onClick={() => fileInputRef.current?.click()}
|
|
disabled={isUploadingPhoto}
|
|
className="btn-secondary"
|
|
style={{ padding: '6px 12px', fontSize: '0.78rem' }}
|
|
>
|
|
<Upload size={14} />
|
|
<span>{isUploadingPhoto ? 'Lädt...' : 'Foto hochladen'}</span>
|
|
</button>
|
|
|
|
{avatarUrl && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setAvatarUrl('')}
|
|
style={{
|
|
padding: '6px 10px',
|
|
borderRadius: '6px',
|
|
backgroundColor: 'transparent',
|
|
border: '1px solid #334155',
|
|
color: '#fca5a5',
|
|
fontSize: '0.78rem',
|
|
cursor: 'pointer',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '4px'
|
|
}}
|
|
>
|
|
<Trash2 size={14} />
|
|
<span>Entfernen</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Role Pill */}
|
|
<div style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
padding: '10px 14px',
|
|
backgroundColor: badge.bg,
|
|
border: `1px solid ${badge.border}`,
|
|
borderRadius: '10px'
|
|
}}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: badge.color, fontSize: '0.85rem', fontWeight: 600 }}>
|
|
<Shield size={16} />
|
|
<span>Zugriffsrolle</span>
|
|
</div>
|
|
<span style={{
|
|
backgroundColor: '#0f172a',
|
|
color: badge.color,
|
|
padding: '3px 8px',
|
|
borderRadius: '20px',
|
|
fontSize: '0.75rem',
|
|
fontWeight: 700
|
|
}}>
|
|
{badge.label}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Full Name */}
|
|
<div>
|
|
<label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, color: '#cbd5e1', marginBottom: '6px' }}>
|
|
Vollständiger Name
|
|
</label>
|
|
<div style={{ position: 'relative' }}>
|
|
<User size={18} color="#64748b" style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)' }} />
|
|
<input
|
|
type="text"
|
|
value={fullName}
|
|
onChange={(e) => setFullName(e.target.value)}
|
|
style={{
|
|
width: '100%',
|
|
padding: '10px 14px 10px 42px',
|
|
backgroundColor: '#0f172a',
|
|
border: '1px solid #334155',
|
|
borderRadius: '8px',
|
|
color: '#f8fafc',
|
|
fontSize: '0.9rem',
|
|
boxSizing: 'border-box',
|
|
outline: 'none'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Email (Readonly) */}
|
|
<div>
|
|
<label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, color: '#cbd5e1', marginBottom: '6px' }}>
|
|
E-Mail Adresse (Schreibgeschützt)
|
|
</label>
|
|
<div style={{ position: 'relative' }}>
|
|
<Mail size={18} color="#64748b" style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)' }} />
|
|
<input
|
|
type="email"
|
|
disabled
|
|
value={profile.email}
|
|
style={{
|
|
width: '100%',
|
|
padding: '10px 14px 10px 42px',
|
|
backgroundColor: '#0f172a',
|
|
border: '1px solid #1e293b',
|
|
borderRadius: '8px',
|
|
color: '#64748b',
|
|
fontSize: '0.9rem',
|
|
boxSizing: 'border-box',
|
|
cursor: 'not-allowed'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Phone */}
|
|
<div>
|
|
<label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, color: '#cbd5e1', marginBottom: '6px' }}>
|
|
Telefonnummer
|
|
</label>
|
|
<div style={{ position: 'relative' }}>
|
|
<Phone size={18} color="#64748b" style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)' }} />
|
|
<input
|
|
type="text"
|
|
placeholder="0170 1234567"
|
|
value={phone}
|
|
onChange={(e) => setPhone(e.target.value)}
|
|
style={{
|
|
width: '100%',
|
|
padding: '10px 14px 10px 42px',
|
|
backgroundColor: '#0f172a',
|
|
border: '1px solid #334155',
|
|
borderRadius: '8px',
|
|
color: '#f8fafc',
|
|
fontSize: '0.9rem',
|
|
boxSizing: 'border-box',
|
|
outline: 'none'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer Actions */}
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '12px', marginTop: '10px' }}>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="btn-ghost"
|
|
>
|
|
Schließen
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isSaving}
|
|
className="btn-primary-cta"
|
|
>
|
|
{isSaved ? (
|
|
<>
|
|
<Check size={18} />
|
|
<span>Gespeichert!</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Save size={18} />
|
|
<span>{isSaving ? 'Speichert...' : 'Änderungen Speichern'}</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|