fix(site): use field value instead of controlled value in PasswordField (#24123)

`<PasswordField>`'s value should come from the field helpers, not from a
prop

site/src/components/PasswordField/PasswordField.stories.tsx

@@ -19,11 +19,15 @@ const meta: Meta<typeof PasswordField> = {
 	},
 	render: function StatefulPasswordField(args) {
 		const [value, setValue] = useState("");
+
 		return (
 			<PasswordField
 				{...args}
-				value={value}
-				onChange={(e) => setValue(e.currentTarget.value)}
+				field={{
+					...args.field,
+					value,
+					onChange: (e) => setValue(e.currentTarget.value),
+				}}
 			/>
 		);
 	},

site/src/components/PasswordField/PasswordField.tsx

@@ -7,15 +7,11 @@ import { useDebouncedValue } from "#/hooks/debounce";
 import { cn } from "#/utils/cn";
 import type { FormHelpers } from "#/utils/formUtils";
 
-// TODO: @BrunoQuaresma: Unable to integrate Yup + Formik for validation. The
-// validation was triggering on the onChange event, but the form.errors were not
-// updating accordingly. Tried various combinations of validateOnBlur and
-// validateOnChange without success. Further investigation is needed.
-
 type PasswordFieldProps = InputProps & {
 	label: string;
 	field: FormHelpers;
 };
+
 /**
  * A password field component that validates the password against the API with
  * debounced calls. It uses a debounced value to minimize the number of API
@@ -24,10 +20,10 @@ type PasswordFieldProps = InputProps & {
 export const PasswordField: FC<PasswordFieldProps> = ({
 	label,
 	field,
-	value,
 	...props
 }) => {
-	const debouncedValue = useDebouncedValue(`${value}`, 500);
+	const value = field.value === undefined ? "" : String(field.value);
+	const debouncedValue = useDebouncedValue(value, 500);
 	const validatePasswordQuery = useQuery({
 		queryKey: ["validatePassword", debouncedValue],
 		queryFn: () => API.validateUserPassword(debouncedValue),

site/src/pages/SetupPage/SetupPageView.tsx

@@ -232,7 +232,6 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
 					<PasswordField
 						field={getFieldHelpers("password")}
 						label="Password"
-						value={form.values.password}
 						autoComplete="new-password"
 					/>