mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
Vincent VielleandBrunoQuaresma
4fe2c5f09a
Refers to #14984 Currently, password validation is done backend side and is not explicit enough so it can be painful to create first users. We'd like to make this validation easier - but also duplicate it frontend side to make it smoother. Flows involved : - First user set password - New user set password - Change password --------- Co-authored-by: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import TextField, { type TextFieldProps } from "@mui/material/TextField";
|
|
import { API } from "api/api";
|
|
import { useDebouncedValue } from "hooks/debounce";
|
|
import type { FC } from "react";
|
|
import { useQuery } from "react-query";
|
|
|
|
// 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.
|
|
|
|
/**
|
|
* 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
|
|
* calls and displays validation errors.
|
|
*/
|
|
export const PasswordField: FC<TextFieldProps> = (props) => {
|
|
const debouncedValue = useDebouncedValue(`${props.value}`, 500);
|
|
const validatePasswordQuery = useQuery({
|
|
queryKey: ["validatePassword", debouncedValue],
|
|
queryFn: () => API.validateUserPassword(debouncedValue),
|
|
keepPreviousData: true,
|
|
enabled: debouncedValue.length > 0,
|
|
});
|
|
const valid = validatePasswordQuery.data?.valid ?? true;
|
|
|
|
return (
|
|
<TextField
|
|
{...props}
|
|
type="password"
|
|
error={!valid || props.error}
|
|
helperText={
|
|
!valid ? validatePasswordQuery.data?.details : props.helperText
|
|
}
|
|
/>
|
|
);
|
|
};
|