Michelle/redlight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 11 Wiki Activity

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

Browse Source
This commit is contained in:
Michelle
2026-02-27 16:29:23 +01:00
parent d781022b63
commit 9be9938f02
14 changed files with 165 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/Admin.jsx
View File

@@ -25,7 +25,7 @@ export default function Admin() {
const [newPassword, setNewPassword] = useState('');
const [showCreateUser, setShowCreateUser] = useState(false);
const [creatingUser, setCreatingUser] = useState(false);
const [newUser, setNewUser] = useState({ name: '', email: '', password: '', role: 'user' });
const [newUser, setNewUser] = useState({ name: '', display_name: '', email: '', password: '', role: 'user' });
// Branding state
const [editAppName, setEditAppName] = useState('');
@@ -163,7 +163,7 @@ export default function Admin() {
await api.post('/admin/users', newUser);
toast.success(t('admin.userCreated'));
setShowCreateUser(false);
setNewUser({ name: '', email: '', password: '', role: 'user' });
setNewUser({ name: '', display_name: '', email: '', password: '', role: 'user' });
fetchUsers();
} catch (err) {
toast.error(err.response?.data?.error || t('admin.userCreateFailed'));
@@ -173,7 +173,7 @@ export default function Admin() {
};
const filteredUsers = users.filter(u =>
u.name.toLowerCase().includes(search.toLowerCase()) ||
(u.display_name || u.name).toLowerCase().includes(search.toLowerCase()) ||
u.email.toLowerCase().includes(search.toLowerCase())
);
@@ -371,12 +371,12 @@ export default function Admin() {
className="w-full h-full object-cover"
/>
) : (
u.name[0]?.toUpperCase()
(u.display_name || u.name)[0]?.toUpperCase()
)}
</div>
<div>
<p className="text-sm font-medium text-th-text">{u.name}</p>
<p className="text-xs text-th-text-s">{u.email}</p>
<p className="text-sm font-medium text-th-text">{u.display_name || u.name}</p>
<p className="text-xs text-th-text-s">@{u.name} · {u.email}</p>
</div>
</div>
</td>
@@ -490,7 +490,7 @@ export default function Admin() {
<h3 className="text-lg font-semibold text-th-text mb-4">{t('admin.createUserTitle')}</h3>
<form onSubmit={handleCreateUser} 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
@@ -498,10 +498,24 @@ export default function Admin() {
value={newUser.name}
onChange={e => setNewUser({ ...newUser, name: e.target.value })}
className="input-field pl-11"
placeholder={t('auth.namePlaceholder')}
placeholder={t('auth.usernamePlaceholder')}
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={newUser.display_name}
onChange={e => setNewUser({ ...newUser, display_name: e.target.value })}
className="input-field pl-11"
placeholder={t('auth.displayNamePlaceholder')}
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>