Add display name support for user management and update related components
All checks were successful
Build & Push Docker Image / build (push) Successful in 6m2s

This commit is contained in:
2026-02-27 16:29:23 +01:00
parent d781022b63
commit 9be9938f02
14 changed files with 165 additions and 63 deletions

View File

@@ -14,6 +14,7 @@ export default function Settings() {
const [profile, setProfile] = useState({
name: user?.name || '',
display_name: user?.display_name || '',
email: user?.email || '',
});
const [passwords, setPasswords] = useState({
@@ -52,6 +53,7 @@ export default function Settings() {
try {
const res = await api.put('/auth/profile', {
name: profile.name,
display_name: profile.display_name,
email: profile.email,
theme,
language,
@@ -190,7 +192,7 @@ export default function Settings() {
className="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold"
style={{ backgroundColor: user?.avatar_color || '#6366f1' }}
>
{user?.name?.[0]?.toUpperCase() || '?'}
{(user?.display_name || user?.name)?.[0]?.toUpperCase() || '?'}
</div>
)}
<button
@@ -259,7 +261,7 @@ export default function Settings() {
<form onSubmit={handleProfileSave} className="space-y-4">
<div>
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.name')}</label>
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
<div className="relative">
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
<input
@@ -270,6 +272,19 @@ export default function Settings() {
required
/>
</div>
<p className="text-xs text-th-text-s mt-1">{t('auth.usernameHint')}</p>
</div>
<div>
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
<div className="relative">
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
<input
type="text"
value={profile.display_name}
onChange={e => setProfile({ ...profile, display_name: e.target.value })}
className="input-field pl-11"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>