cesnimda
92 lines
3.5 KiB
TypeScript
92 lines
3.5 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 ForgotPasswordPage() {
|
|
const { toast } = useToast();
|
|
const { t } = useI18n();
|
|
const navigate = useNavigate();
|
|
|
|
const [email, setEmail] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
const [submitted, setSubmitted] = useState(false);
|
|
const [emailError, setEmailError] = useState<string | undefined>(undefined);
|
|
const [submitError, setSubmitError] = useState<string | null>(null);
|
|
const emailRef = useRef<HTMLInputElement>(null);
|
|
const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
|
|
useEffect(() => {
|
|
const params = new URLSearchParams(window.location.search);
|
|
setEmail(params.get("email") || "");
|
|
}, []);
|
|
|
|
return (
|
|
<AuthPageFrame title={t("forgotPasswordTitle")} description={t("forgotPasswordBody")}>
|
|
<Box
|
|
component="form"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
const trimmed = email.trim();
|
|
if (!trimmed) {
|
|
setEmailError(t("emailRequired"));
|
|
emailRef.current?.focus();
|
|
return;
|
|
}
|
|
if (!EMAIL_PATTERN.test(trimmed)) {
|
|
setEmailError(t("invalidEmail"));
|
|
emailRef.current?.focus();
|
|
return;
|
|
}
|
|
setEmailError(undefined);
|
|
setSubmitError(null);
|
|
setSubmitted(false);
|
|
setLoading(true);
|
|
api
|
|
.post("/auth/request-password-reset", { email: email.trim() })
|
|
.then(() => {
|
|
setSubmitted(true);
|
|
toast(t("passwordResetRequestSent"), "success");
|
|
})
|
|
.catch((error: any) => {
|
|
setSubmitError(getApiErrorMessage(error, t("passwordResetRequestFailed")));
|
|
})
|
|
.finally(() => setLoading(false));
|
|
}}
|
|
sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}
|
|
>
|
|
{submitted ? <Alert severity="success" role="status">{t("passwordResetRequestSent")}</Alert> : null}
|
|
{submitError ? <Alert severity="error">{submitError}</Alert> : null}
|
|
<TextField
|
|
label={t("profileEmail")}
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => { setEmail(e.target.value); setEmailError(undefined); }}
|
|
autoComplete="email"
|
|
autoFocus
|
|
inputRef={emailRef}
|
|
error={Boolean(emailError)}
|
|
helperText={emailError}
|
|
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} aria-busy={loading}>
|
|
{t("forgotPasswordSubmit")}
|
|
</Button>
|
|
</Box>
|
|
{loading ? <Typography role="status" aria-live="polite" variant="body2" color="text.secondary">{t("passwordResetRequestSending")}</Typography> : null}
|
|
</Box>
|
|
</AuthPageFrame>
|
|
);
|
|
}
|