cesnimda
69 lines
2.8 KiB
TypeScript
69 lines
2.8 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
|
|
import { Alert, Box, Button, CircularProgress, Typography } from "@mui/material";
|
|
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import { api, getApiErrorMessage } from "../api";
|
|
import { useI18n } from "../i18n/I18nProvider";
|
|
import AuthPageFrame from "../layout/AuthPageFrame";
|
|
|
|
type Status = "verifying" | "success" | "error";
|
|
|
|
export default function VerifyEmailPage({ emailChange = false }: { emailChange?: boolean }) {
|
|
const { t } = useI18n();
|
|
const navigate = useNavigate();
|
|
|
|
const [status, setStatus] = useState<Status>("verifying");
|
|
const [verificationError, setVerificationError] = useState<unknown>(null);
|
|
const [missingLink, setMissingLink] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setStatus("verifying");
|
|
setMissingLink(false);
|
|
setVerificationError(null);
|
|
const params = new URLSearchParams(window.location.search);
|
|
const userId = params.get("userId") || "";
|
|
const email = params.get("email") || "";
|
|
const token = params.get("token") || "";
|
|
|
|
if (!userId || !token || (emailChange && !email)) {
|
|
setStatus("error");
|
|
setMissingLink(true);
|
|
return;
|
|
}
|
|
|
|
let active = true;
|
|
api
|
|
.post(emailChange ? "/auth/email-change/confirm" : "/auth/verify-email", emailChange ? { userId, email, token } : { userId, token })
|
|
.then(() => { if (active) setStatus("success"); })
|
|
.catch((cause: unknown) => {
|
|
if (!active) return;
|
|
setStatus("error");
|
|
setVerificationError(cause);
|
|
});
|
|
return () => { active = false; };
|
|
}, [emailChange]);
|
|
|
|
return (
|
|
<AuthPageFrame title={t(emailChange ? "confirmEmailChangeTitle" : "verifyEmailTitle")}>
|
|
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
|
|
{status === "verifying" && (
|
|
<Box role="status" aria-live="polite" sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
|
|
<CircularProgress size={20} aria-hidden="true" />
|
|
<Typography sx={{ color: "text.secondary" }}>{t(emailChange ? "confirmEmailChangeVerifying" : "verifyEmailVerifying")}</Typography>
|
|
</Box>
|
|
)}
|
|
{status === "success" && <Alert severity="success" role="status">{t(emailChange ? "confirmEmailChangeSuccess" : "verifyEmailSuccess")}</Alert>}
|
|
{status === "error" && <Alert severity="error">{missingLink ? t(emailChange ? "missingEmailChangeLinkInfo" : "missingVerifyLinkInfo") : getApiErrorMessage(verificationError, t("verifyEmailFailed"))}</Alert>}
|
|
|
|
<Box sx={{ display: "flex", flexWrap: "wrap", justifyContent: "flex-end", mt: 1, "& > button": { maxWidth: "100%", whiteSpace: "normal", overflowWrap: "anywhere" } }}>
|
|
<Button variant="contained" onClick={() => navigate("/login")}>
|
|
{t("backToLogin")}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</AuthPageFrame>
|
|
);
|
|
}
|