278 lines
7.9 KiB
React
278 lines
7.9 KiB
React
import { useId } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useParams } from "react-router-dom";
|
|
import { useTheme } from "@emotion/react";
|
|
import { Box, Stack, Typography, Button } from "@mui/material";
|
|
import { setNewPassword } from "../../Features/Auth/authSlice";
|
|
import { createToast } from "../../Utils/toastUtils";
|
|
import { newOrChangedCredentials } from "../../Validation/validation";
|
|
import Check from "../../Components/Check/Check";
|
|
import TextInput from "../../Components/Inputs/TextInput";
|
|
import { PasswordEndAdornment } from "../../Components/Inputs/TextInput/Adornments";
|
|
import IconBox from "../../Components/IconBox";
|
|
import LockIcon from "../../assets/icons/lock.svg?react";
|
|
import Logo from "../../assets/icons/checkmate-icon.svg?react";
|
|
import Background from "../../assets/Images/background-grid.svg?react";
|
|
import "./index.css";
|
|
import { useValidatePassword } from "./hooks/useValidatePassword";
|
|
import { Trans, useTranslation } from "react-i18next";
|
|
|
|
const SetNewPassword = () => {
|
|
const navigate = useNavigate();
|
|
const dispatch = useDispatch();
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
|
|
const passwordId = useId();
|
|
const confirmPasswordId = useId();
|
|
|
|
const { form, errors, handleChange, feedbacks } = useValidatePassword();
|
|
|
|
const { isLoading } = useSelector((state) => state.auth);
|
|
const { token } = useParams();
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
const { error } = newOrChangedCredentials.validate(form, {
|
|
abortEarly: false,
|
|
context: { password: form.password },
|
|
});
|
|
|
|
if (error) {
|
|
createToast({
|
|
body:
|
|
error.details && error.details.length > 0
|
|
? error.details[0].message // FIXME: Potential untranslated string
|
|
: t("auth.common.errors.validation"),
|
|
});
|
|
} else {
|
|
const action = await dispatch(setNewPassword({ token, form }));
|
|
if (action.payload.success) {
|
|
navigate("/new-password-confirmed");
|
|
createToast({
|
|
body: t("auth.forgotPassword.toasts.success"),
|
|
});
|
|
} else {
|
|
const errorMessage = action.payload
|
|
? action.payload.msg // FIXME: Potential untranslated string
|
|
: t("auth.forgotPassword.toasts.error");
|
|
createToast({
|
|
body: errorMessage,
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Stack
|
|
className="set-new-password-page auth"
|
|
overflow="hidden"
|
|
sx={{
|
|
"& h1": {
|
|
color: theme.palette.primary.main,
|
|
fontWeight: 600,
|
|
fontSize: 24,
|
|
},
|
|
"& p": {
|
|
/* TODO font size from theme */
|
|
fontSize: 14,
|
|
color: theme.palette.primary.contrastTextSecondary,
|
|
},
|
|
}}
|
|
>
|
|
<Box
|
|
className="background-pattern-svg"
|
|
sx={{
|
|
"& svg g g:last-of-type path": {
|
|
stroke: theme.palette.primary.lowContrast,
|
|
},
|
|
}}
|
|
>
|
|
<Background style={{ width: "100%" }} />
|
|
</Box>
|
|
<Stack
|
|
direction="row"
|
|
alignItems="center"
|
|
px={theme.spacing(12)}
|
|
gap={theme.spacing(4)}
|
|
>
|
|
<Logo style={{ borderRadius: theme.shape.borderRadius }} />
|
|
<Typography sx={{ userSelect: "none" }}>{t("common.appName")}</Typography>
|
|
</Stack>
|
|
<Stack
|
|
width="100%"
|
|
maxWidth={600}
|
|
flex={1}
|
|
justifyContent="center"
|
|
px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
|
|
pb={theme.spacing(12)}
|
|
mx="auto"
|
|
sx={{
|
|
"& > .MuiStack-root": {
|
|
border: 1,
|
|
borderRadius: theme.spacing(5),
|
|
borderColor: theme.palette.primary.lowContrast,
|
|
backgroundColor: theme.palette.primary.main,
|
|
padding: {
|
|
xs: theme.spacing(12),
|
|
sm: theme.spacing(20),
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Stack
|
|
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
|
|
alignItems="center"
|
|
textAlign="center"
|
|
>
|
|
<Box>
|
|
<Stack
|
|
direction="row"
|
|
justifyContent="center"
|
|
>
|
|
<IconBox
|
|
height={48}
|
|
width={48}
|
|
minWidth={48}
|
|
borderRadius={12}
|
|
svgWidth={24}
|
|
svgHeight={24}
|
|
mb={theme.spacing(4)}
|
|
>
|
|
<LockIcon alt={t("auth.forgotPassword.imageAlts.lock")} />
|
|
</IconBox>
|
|
</Stack>
|
|
<Typography component="h1">{t("auth.forgotPassword.heading")}</Typography>
|
|
<Typography>{t("auth.forgotPassword.subheadings.stepThree")}</Typography>
|
|
</Box>
|
|
<Box
|
|
width="100%"
|
|
textAlign="left"
|
|
sx={{
|
|
"& .input-error": {
|
|
display: "none",
|
|
},
|
|
}}
|
|
>
|
|
<Box
|
|
component="form"
|
|
noValidate
|
|
spellCheck={false}
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<TextInput
|
|
id={passwordId}
|
|
type="password"
|
|
name="password"
|
|
label={t("auth.common.inputs.password.label")}
|
|
isRequired={true}
|
|
placeholder="••••••••"
|
|
value={form.password}
|
|
onChange={handleChange}
|
|
error={errors.password ? true : false}
|
|
helperText={errors.password === "auth.common.inputs.password.errors.empty"
|
|
? t(errors.password)
|
|
: ""} // Other errors are related to required password conditions and are visualized below the input
|
|
endAdornment={<PasswordEndAdornment />}
|
|
/>
|
|
</Box>
|
|
<Box
|
|
component="form"
|
|
noValidate
|
|
spellCheck={false}
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<TextInput
|
|
id={confirmPasswordId}
|
|
type="password"
|
|
name="confirm"
|
|
label={t("auth.common.inputs.passwordConfirm.label")}
|
|
isRequired={true}
|
|
placeholder={t("auth.common.inputs.passwordConfirm.placeholder")}
|
|
value={form.confirm}
|
|
onChange={handleChange}
|
|
error={errors.confirm ? true : false}
|
|
helperText={t(errors.confirm)} // Localization keys are in validation.js
|
|
endAdornment={<PasswordEndAdornment />}
|
|
/>
|
|
</Box>
|
|
<Stack
|
|
gap={theme.spacing(4)}
|
|
mb={theme.spacing(12)}
|
|
>
|
|
<Check
|
|
noHighlightText={t("auth.common.inputs.password.rules.length.beginning")}
|
|
text={t("auth.common.inputs.password.rules.length.highlighted")}
|
|
variant={feedbacks.length}
|
|
/>
|
|
<Check
|
|
noHighlightText={t("auth.common.inputs.password.rules.special.beginning")}
|
|
text={t("auth.common.inputs.password.rules.special.highlighted")}
|
|
variant={feedbacks.special}
|
|
/>
|
|
<Check
|
|
noHighlightText={t("auth.common.inputs.password.rules.number.beginning")}
|
|
text={t("auth.common.inputs.password.rules.number.highlighted")}
|
|
variant={feedbacks.number}
|
|
/>
|
|
<Check
|
|
noHighlightText={t("auth.common.inputs.password.rules.uppercase.beginning")}
|
|
text={t("auth.common.inputs.password.rules.uppercase.highlighted")}
|
|
variant={feedbacks.uppercase}
|
|
/>
|
|
<Check
|
|
noHighlightText={t("auth.common.inputs.password.rules.lowercase.beginning")}
|
|
text={t("auth.common.inputs.password.rules.lowercase.highlighted")}
|
|
variant={feedbacks.lowercase}
|
|
/>
|
|
<Check
|
|
noHighlightText={t("auth.common.inputs.password.rules.match.beginning")}
|
|
text={t("auth.common.inputs.password.rules.match.highlighted")}
|
|
variant={feedbacks.confirm}
|
|
/>
|
|
</Stack>
|
|
</Box>
|
|
<Button
|
|
variant="contained"
|
|
color="accent"
|
|
loading={isLoading}
|
|
onClick={handleSubmit}
|
|
disabled={
|
|
form.password.length === 0 ||
|
|
form.confirm.length === 0 ||
|
|
Object.keys(errors).length !== 0
|
|
}
|
|
sx={{ width: "100%", maxWidth: 400 }}
|
|
>
|
|
{t("auth.forgotPassword.buttons.resetPassword")}
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
<Box
|
|
textAlign="center"
|
|
p={theme.spacing(12)}
|
|
>
|
|
<Typography display="inline-block">
|
|
<Trans
|
|
i18nKey="auth.forgotPassword.links.login"
|
|
components={{
|
|
a: (
|
|
<Typography
|
|
component="span"
|
|
color={theme.palette.primary.main}
|
|
ml={theme.spacing(2)}
|
|
onClick={() => navigate("/login")}
|
|
sx={{ userSelect: "none" }}
|
|
/>
|
|
),
|
|
}}
|
|
/>
|
|
</Typography>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default SetNewPassword;
|