71 lines
2.1 KiB
React
71 lines
2.1 KiB
React
import { useMemo, useState } from "react";
|
|
import { credentials } from "../../../Validation/validation";
|
|
|
|
const getFeedbackStatus = (form, errors, field, criteria) => {
|
|
const fieldErrors = errors[field];
|
|
const isFieldEmpty = form[field].length === 0;
|
|
const hasError = fieldErrors?.includes(criteria) || fieldErrors?.includes("empty");
|
|
const isCorrect = !isFieldEmpty && !hasError;
|
|
|
|
if (isCorrect) {
|
|
return "success";
|
|
} else if (hasError) {
|
|
return "error";
|
|
} else {
|
|
return "info";
|
|
}
|
|
};
|
|
|
|
function useValidatePassword() {
|
|
const [errors, setErrors] = useState({});
|
|
const [form, setForm] = useState({
|
|
password: "",
|
|
confirm: "",
|
|
});
|
|
|
|
const handleChange = (event) => {
|
|
const { value, name } = event.target;
|
|
setForm((prev) => ({ ...prev, [name]: value }));
|
|
|
|
const validateValue = { [name]: value };
|
|
const validateOptions = { abortEarly: false, context: { password: form.password } };
|
|
if (name === "password" && form.confirm.length > 0) {
|
|
validateValue.confirm = form.confirm;
|
|
validateOptions.context = { password: value };
|
|
} else if (name === "confirm") {
|
|
validateValue.password = form.password;
|
|
}
|
|
|
|
const { error } = credentials.validate(validateValue, validateOptions);
|
|
const errors = error?.details.map((error) => ({
|
|
path: error.path[0],
|
|
type: error.type,
|
|
}));
|
|
const errorsByPath =
|
|
errors &&
|
|
errors.reduce((acc, { path, type }) => {
|
|
if (!acc[path]) {
|
|
acc[path] = [];
|
|
}
|
|
acc[path].push(type);
|
|
return acc;
|
|
}, {});
|
|
setErrors(() => (errorsByPath ? { ...errorsByPath } : {}));
|
|
};
|
|
|
|
const feedbacks = useMemo(
|
|
() => ({
|
|
length: getFeedbackStatus(form, errors, "password", "string.min"),
|
|
special: getFeedbackStatus(form, errors, "password", "special"),
|
|
number: getFeedbackStatus(form, errors, "password", "number"),
|
|
uppercase: getFeedbackStatus(form, errors, "password", "uppercase"),
|
|
lowercase: getFeedbackStatus(form, errors, "password", "lowercase"),
|
|
confirm: getFeedbackStatus(form, errors, "confirm", "different"),
|
|
}),
|
|
[form, errors]
|
|
);
|
|
|
|
return { handleChange, feedbacks, form, errors };
|
|
}
|
|
export { useValidatePassword };
|