117 lines
3.1 KiB
React
117 lines
3.1 KiB
React
import Check from "../../../Components/Check/Check";
|
|
import Stack from "@mui/material/Stack";
|
|
import { Tooltip, useTheme } from "@mui/material";
|
|
import { useTranslation } from "react-i18next";
|
|
import PropTypes from "prop-types";
|
|
|
|
const PasswordTooltip = ({ feedback, form, children }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
const hasPassword = form.password.length > 0;
|
|
const hasInvalidFeedback = Object.values(feedback).some(
|
|
(status) => status !== "success"
|
|
);
|
|
const showPasswordTooltip = hasPassword && hasInvalidFeedback;
|
|
return (
|
|
<Tooltip
|
|
placement="right"
|
|
arrow
|
|
open={showPasswordTooltip}
|
|
title={
|
|
<Stack
|
|
gap={theme.spacing(4)}
|
|
mb={{ xs: theme.spacing(6), sm: theme.spacing(8) }}
|
|
>
|
|
<Check
|
|
noHighlightText={
|
|
t("auth.common.inputs.password.rules.length.beginning") +
|
|
" " +
|
|
t("auth.common.inputs.password.rules.length.highlighted")
|
|
}
|
|
variant={feedback.length}
|
|
/>
|
|
<Check
|
|
noHighlightText={
|
|
t("auth.common.inputs.password.rules.special.beginning") +
|
|
" " +
|
|
t("auth.common.inputs.password.rules.special.highlighted")
|
|
}
|
|
variant={feedback.special}
|
|
/>
|
|
<Check
|
|
noHighlightText={
|
|
t("auth.common.inputs.password.rules.number.beginning") +
|
|
" " +
|
|
t("auth.common.inputs.password.rules.number.highlighted")
|
|
}
|
|
variant={feedback.number}
|
|
/>
|
|
<Check
|
|
noHighlightText={
|
|
t("auth.common.inputs.password.rules.uppercase.beginning") +
|
|
" " +
|
|
t("auth.common.inputs.password.rules.uppercase.highlighted")
|
|
}
|
|
variant={feedback.uppercase}
|
|
/>
|
|
<Check
|
|
noHighlightText={
|
|
t("auth.common.inputs.password.rules.lowercase.beginning") +
|
|
" " +
|
|
t("auth.common.inputs.password.rules.lowercase.highlighted")
|
|
}
|
|
variant={feedback.lowercase}
|
|
/>
|
|
<Check
|
|
noHighlightText={
|
|
t("auth.common.inputs.password.rules.match.beginning") +
|
|
" " +
|
|
t("auth.common.inputs.password.rules.match.highlighted")
|
|
}
|
|
variant={feedback.confirm}
|
|
/>
|
|
</Stack>
|
|
}
|
|
slotProps={{
|
|
tooltip: {
|
|
sx: {
|
|
backgroundColor: theme.palette.tertiary.background,
|
|
border: `0.5px solid ${theme.palette.primary.lowContrast}90`,
|
|
borderRadius: theme.spacing(4),
|
|
color: theme.palette.primary.contrastText,
|
|
width: "auto",
|
|
maxWidth: { xs: "25vw", md: "none" },
|
|
whiteSpace: { xs: "normal", md: "nowrap" },
|
|
paddingTop: theme.spacing(8),
|
|
px: theme.spacing(8),
|
|
},
|
|
},
|
|
arrow: {
|
|
sx: {
|
|
color: theme.palette.tertiary.background,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<span style={{ display: "inline-block", width: "100%" }}>{children}</span>
|
|
</Tooltip>
|
|
);
|
|
};
|
|
|
|
PasswordTooltip.propTypes = {
|
|
feedback: PropTypes.shape({
|
|
length: PropTypes.string,
|
|
special: PropTypes.string,
|
|
number: PropTypes.string,
|
|
uppercase: PropTypes.string,
|
|
lowercase: PropTypes.string,
|
|
confirm: PropTypes.string,
|
|
}),
|
|
form: PropTypes.shape({
|
|
password: PropTypes.string.isRequired,
|
|
}),
|
|
children: PropTypes.node,
|
|
};
|
|
|
|
export default PasswordTooltip;
|