Function EditUserForm

site/src/pages/EditUserPage/EditUserForm.tsx:32–98

({
	error,
	isLoading,
	initialValues,
	onSubmit,
	onCancel,
})

}

export const EditUserForm: FC<EditUserFormProps> = ({
	error,
	isLoading,
	initialValues,
	onSubmit,
	onCancel,
}) => {
	const form = useFormik<UpdateUserProfileRequest>({
		initialValues,
		validationSchema,
		onSubmit,
		enableReinitialize: true,
	});

	const getFieldHelpers = getFormHelpers(form, error);

	return (
		<FullPageForm title="Edit user">
			{isApiError(error) && !hasApiFieldErrors(error) && (
				<ErrorAlert error={error} className="mb-8" />
			)}
			<form onSubmit={form.handleSubmit} autoComplete="off">
				<div className="flex flex-col gap-6">
					<FormField
						field={getFieldHelpers("username")}
						label="Username"
						id="username"
						name="username"
						value={form.values.username}
						onChange={onChangeTrimmed(form)}
						onBlur={form.handleBlur}
						autoComplete="username"
						autoFocus
					/>

					<FormField
						field={getFieldHelpers("name")}
						label={
							<>
								Full name{" "}
								<span className="font-normal text-content-secondary">
									(optional)
								</span>
							</>
						}
						id="name"
						name="name"
						value={form.values.name}
						onChange={form.handleChange}
						onBlur={form.handleBlur}
						autoComplete="name"
					/>
				</div>

				<FormFooter className="mt-8">
					<Button onClick={onCancel} variant="outline">
						Cancel
					</Button>