import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head, Link, useForm } from '@inertiajs/react'; import { Users, ArrowLeft, Check, Lock, Mail, User, AlertCircle } from 'lucide-react'; import { Button } from '@/Components/ui/button'; import { Input } from '@/Components/ui/input'; import { Label } from '@/Components/ui/label'; import { Checkbox } from '@/Components/ui/checkbox'; import { FormEvent } from 'react'; interface Role { id: number; name: string; display_name: string; } interface UserData { id: number; name: string; email: string; username: string | null; } interface Props { user: UserData; roles: Role[]; currentRoles: string[]; } export default function UserEdit({ user, roles, currentRoles }: Props) { const { data, setData, put, processing, errors } = useForm({ name: user.name, email: user.email, username: user.username || '', password: '', password_confirmation: '', roles: currentRoles, }); const handleSubmit = (e: FormEvent) => { e.preventDefault(); put(route('users.update', user.id)); }; const toggleRole = (roleName: string) => { if (data.roles.includes(roleName)) { setData('roles', data.roles.filter(r => r !== roleName)); } else { setData('roles', [...data.roles, roleName]); } }; return (
{/* Header Area */}

編輯使用者

修改使用者資料、重設密碼或變更角色

{/* Basic Info */}

基本資料

setData('name', e.target.value)} placeholder="例如：王小明" /> {errors.name &&

{errors.name}

}
setData('email', e.target.value)} placeholder="user@example.com (可省略)" /> {errors.email &&

{errors.email}

}
setData('username', e.target.value)} placeholder="請輸入登入帳號" /> {errors.username &&

{errors.username}

}

重設密碼

若不修改密碼，請留空以下欄位。
setData('password', e.target.value)} placeholder="••••••••" /> {errors.password &&

{errors.password}

}
setData('password_confirmation', e.target.value)} placeholder="••••••••" />
{/* Roles */}

角色分配

{roles.map((role) => (
toggleRole(role.name)} // Prevent changing super-admin if user is editing themselves? Or just backend protection. />

{role.name}

))} {errors.roles &&

{errors.roles}

}
); }