cesnimda
108 lines
4.6 KiB
TypeScript
108 lines
4.6 KiB
TypeScript
import React, { useEffect, useRef, useState } from "react";
|
|
|
|
import { Alert, Box, Button, TextField, Typography } from "@mui/material";
|
|
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import { api, getApiErrorMessage } from "../api";
|
|
import { useToast } from "../toast";
|
|
import { useI18n } from "../i18n/I18nProvider";
|
|
import AuthPageFrame from "../layout/AuthPageFrame";
|
|
|
|
export default function ResetPasswordPage() {
|
|
const { toast } = useToast();
|
|
const { t } = useI18n();
|
|
const navigate = useNavigate();
|
|
|
|
const [email, setEmail] = useState("");
|
|
const [token, setToken] = useState("");
|
|
const [newPassword, setNewPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
const [fieldErrors, setFieldErrors] = useState<{ newPassword?: string; confirmPassword?: string }>({});
|
|
const [submitError, setSubmitError] = useState<string | null>(null);
|
|
const passwordRef = useRef<HTMLInputElement>(null);
|
|
const confirmPasswordRef = useRef<HTMLInputElement>(null);
|
|
|
|
useEffect(() => {
|
|
const params = new URLSearchParams(window.location.search);
|
|
setEmail(params.get("email") || "");
|
|
setToken(params.get("token") || "");
|
|
}, []);
|
|
|
|
const missingResetInfo = !email || !token;
|
|
|
|
return (
|
|
<AuthPageFrame title={t("resetPasswordTitle")} description={t("resetPasswordBody")}>
|
|
<Box
|
|
component="form"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
if (missingResetInfo) {
|
|
toast(t("missingResetLinkInfo"), "error");
|
|
return;
|
|
}
|
|
const errors: { newPassword?: string; confirmPassword?: string } = {};
|
|
if (!newPassword || newPassword.length < 8) errors.newPassword = t("passwordTooShort");
|
|
if (confirmPassword !== newPassword) errors.confirmPassword = t("passwordsDoNotMatch");
|
|
setFieldErrors(errors);
|
|
if (Object.keys(errors).length > 0) {
|
|
(errors.newPassword ? passwordRef : confirmPasswordRef).current?.focus();
|
|
return;
|
|
}
|
|
|
|
setSubmitError(null);
|
|
setLoading(true);
|
|
api
|
|
.post("/auth/reset-password", { email, token, newPassword })
|
|
.then(() => {
|
|
toast(t("passwordResetSuccess"), "success");
|
|
navigate("/login", { replace: true });
|
|
})
|
|
.catch((e2: any) => {
|
|
setSubmitError(getApiErrorMessage(e2, t("resetFailed")));
|
|
})
|
|
.finally(() => setLoading(false));
|
|
}}
|
|
sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}
|
|
>
|
|
{missingResetInfo ? <Alert severity="warning">{t("missingResetLinkInfo")}</Alert> : null}
|
|
{submitError ? <Alert severity="error">{submitError}</Alert> : null}
|
|
<TextField label={t("profileEmail")} type="email" value={email} onChange={(e) => setEmail(e.target.value)} disabled={!missingResetInfo} fullWidth />
|
|
<TextField
|
|
label={t("profileNewPassword")}
|
|
type="password"
|
|
value={newPassword}
|
|
onChange={(e) => { setNewPassword(e.target.value); setFieldErrors((f) => ({ ...f, newPassword: undefined, confirmPassword: undefined })); }}
|
|
autoComplete="new-password"
|
|
inputRef={passwordRef}
|
|
error={Boolean(fieldErrors.newPassword)}
|
|
helperText={fieldErrors.newPassword || t("passwordTooShort")}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
label={t("confirmPassword")}
|
|
type="password"
|
|
value={confirmPassword}
|
|
onChange={(e) => { setConfirmPassword(e.target.value); setFieldErrors((f) => ({ ...f, confirmPassword: undefined })); }}
|
|
autoComplete="new-password"
|
|
inputRef={confirmPasswordRef}
|
|
error={Boolean(fieldErrors.confirmPassword)}
|
|
helperText={fieldErrors.confirmPassword}
|
|
fullWidth
|
|
/>
|
|
|
|
<Box sx={{ display: "flex", flexWrap: "wrap", justifyContent: "flex-end", gap: 1, mt: 1, "& > button": { maxWidth: "100%", whiteSpace: "normal", overflowWrap: "anywhere" } }}>
|
|
<Button type="button" variant="outlined" onClick={() => navigate("/login")} disabled={loading}>
|
|
{t("backToLogin")}
|
|
</Button>
|
|
<Button type="submit" variant="contained" disabled={loading || missingResetInfo} aria-busy={loading}>
|
|
{t("updatePassword")}
|
|
</Button>
|
|
</Box>
|
|
{loading ? <Typography role="status" aria-live="polite" variant="body2" color="text.secondary">{t("saving")}</Typography> : null}
|
|
</Box>
|
|
</AuthPageFrame>
|
|
);
|
|
}
|