import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import { Head, useForm } from "@inertiajs/react"; import { User, Lock, Mail } from "lucide-react"; import { FormEvent } from "react"; import { toast } from "sonner"; import { Button } from "@/Components/ui/button"; interface User { id: number; name: string; email: string | null; username: string; } interface Props { user: User; } export default function Edit({ user }: Props) { // 個人資料表單 const { data: profileData, setData: setProfileData, patch: patchProfile, processing: profileProcessing, errors: profileErrors } = useForm({ name: user.name, username: user.username, email: user.email || "", }); // 密碼表單 const { data: passwordData, setData: setPasswordData, put: putPassword, processing: passwordProcessing, errors: passwordErrors, reset: resetPassword } = useForm({ current_password: "", password: "", password_confirmation: "", }); const handleProfileSubmit = (e: FormEvent) => { e.preventDefault(); patchProfile(route('profile.update'), { onSuccess: () => toast.success('個人資料已更新'), onError: () => toast.error('更新失敗，請檢查輸入內容'), }); }; const handlePasswordSubmit = (e: FormEvent) => { e.preventDefault(); putPassword(route('profile.password'), { onSuccess: () => { toast.success('密碼已更新'); resetPassword(); }, onError: () => toast.error('密碼更新失敗'), }); }; return (
{/* 頁面標題 */}

使用者設定

管理您的個人資料與帳號安全

{/* 個人資料區塊 */}

個人資料

setProfileData("username", e.target.value)} className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main outline-none transition-all" placeholder="請輸入登入帳號" /> {profileErrors.username &&

{profileErrors.username}

}
setProfileData("name", e.target.value)} className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main outline-none transition-all" placeholder="請輸入姓名" /> {profileErrors.name &&

{profileErrors.name}

}
setProfileData("email", e.target.value)} className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main outline-none transition-all" placeholder="example@mail.com" />
{profileErrors.email &&

{profileErrors.email}

}
{/* 密碼變更區塊 */}

安全性與密碼

setPasswordData("current_password", e.target.value)} className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main outline-none transition-all" /> {passwordErrors.current_password &&

{passwordErrors.current_password}

}
setPasswordData("password", e.target.value)} className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main outline-none transition-all" /> {passwordErrors.password &&

{passwordErrors.password}

}

建議使用 8 個字元以上包含數字與符號的密碼

setPasswordData("password_confirmation", e.target.value)} className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main outline-none transition-all" />
); }