\n {label}:\n {value}\n

\n);\n\nconst FormField = ({\n id,\n label,\n value,\n onChange,\n disabled,\n}: {\n id: string;\n label: string;\n value: string;\n onChange: (e: React.ChangeEvent) => void;\n disabled: boolean;\n}) => (\n

\n \n {label}\n \n\n \n

\n);\n\nexport function Profile() {\n const { user, isLoading, updateProfile } = useAuth();\n const [isEditing, setIsEditing] = useState(false);\n const [firstName, setFirstName] = useState(\"\");\n const [lastName, setLastName] = useState(\"\");\n const [updateStatus, setUpdateStatus] = useState<\n { message: string; type: \"success\" | \"error\" } | null\n >(null);\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n // Initialize form data when user data is loaded\n useEffect(() => {\n if (user) {\n setFirstName(user.firstName || \"\");\n setLastName(user.lastName || \"\");\n }\n }, [user]);\n\n if (isLoading) {\n return

Loading profile...

;\n }\n\n if (!user) {\n return (\n

\n No profile data available\n

\n );\n }\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setIsSubmitting(true);\n setUpdateStatus(null);\n\n try {\n const result = await updateProfile({ firstName, lastName });\n\n if (result.success) {\n setUpdateStatus({\n message: \"Profile updated successfully!\",\n type: \"success\",\n });\n setIsEditing(false);\n } else {\n setUpdateStatus({\n message: \"Failed to update profile\",\n type: \"error\",\n });\n }\n } catch (err) {\n setUpdateStatus({\n message: err instanceof Error ? err.message : \"An error occurred\",\n type: \"error\",\n });\n } finally {\n setIsSubmitting(false);\n }\n };\n\n return (\n

Your Profile

\n {!isEditing && (\n setIsEditing(true)}\n className=\"text-amber-900 hover:text-amber-800\"\n >\n Edit\n \n )}\n

\n\n {updateStatus && (\n \n {updateStatus.message}\n

\n )}\n\n

\n \n {(user.firstName?.[0] || user.email[0])\n .toUpperCase()}\n

\n {`${user.firstName} ${user.lastName || \"\"}`.trim()}\n

\n {user.email}\n

\n \n\n {isEditing\n ? (\n

\n setFirstName(e.target.value)}\n disabled={isSubmitting}\n />\n\n setLastName(e.target.value)}\n disabled={isSubmitting}\n />\n\n

\n setIsEditing(false)}\n className=\"px-4 py-2 border border-gray-300 rounded text-gray-700\"\n disabled={isSubmitting}\n >\n Cancel\n \n \n {isSubmitting ? \"Saving...\" : \"Save Changes\"}\n \n

\n \n )\n : (\n

\n \n\n

\n Account Info\n

\n \n\n {user.id && }\n\n {user.createdAt &&\n (\n \n )}\n\n {user.emailVerified !== undefined && (\n

\n \n Status:\n \n \n \n \n {user.emailVerified\n ? \"Verified\"\n : \"Pending Verification\"}\n \n \n

\n )}\n

\n\n

\n Personal Info\n

\n \n \n

\n )}\n \n );\n}\n","deleted","label",[171,172,152],"frontend","pages","permalink","https://www.val.town/x/wolf/fixItWand/code/frontend/pages/Profile.tsx","extension","actionData","errors"]