cesnimda
77 lines
3.0 KiB
TypeScript
77 lines
3.0 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
|
|
import { Alert, Box, Button, CircularProgress, Paper, Typography } from "@mui/material";
|
|
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import { api, getApiErrorMessage } from "../api";
|
|
import { useI18n } from "../i18n/I18nProvider";
|
|
|
|
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 [errorMessage, setErrorMessage] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
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");
|
|
setErrorMessage(t(emailChange ? "missingEmailChangeLinkInfo" : "missingVerifyLinkInfo"));
|
|
return;
|
|
}
|
|
|
|
api
|
|
.post(emailChange ? "/auth/email-change/confirm" : "/auth/verify-email", emailChange ? { userId, email, token } : { userId, token })
|
|
.then(() => setStatus("success"))
|
|
.catch((e: any) => {
|
|
setStatus("error");
|
|
setErrorMessage(getApiErrorMessage(e, t("verifyEmailFailed")));
|
|
});
|
|
}, [emailChange, t]);
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
minHeight: "100vh",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
p: 2,
|
|
background:
|
|
"radial-gradient(1200px 700px at 20% 0%, rgba(79,140,255,0.14), transparent 55%), radial-gradient(900px 600px at 80% 20%, rgba(245,158,11,0.10), transparent 55%)",
|
|
}}
|
|
>
|
|
<Paper sx={{ width: "min(520px, 100%)", p: 4, borderRadius: 4, border: "none", boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)" }}>
|
|
<Typography variant="h5" sx={{ fontWeight: 900, mb: 0.5 }}>
|
|
{t(emailChange ? "confirmEmailChangeTitle" : "verifyEmailTitle")}
|
|
</Typography>
|
|
|
|
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.5, mt: 2 }}>
|
|
{status === "verifying" && (
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
|
|
<CircularProgress size={20} />
|
|
<Typography sx={{ color: "text.secondary" }}>{t(emailChange ? "confirmEmailChangeVerifying" : "verifyEmailVerifying")}</Typography>
|
|
</Box>
|
|
)}
|
|
{status === "success" && <Alert severity="success">{t(emailChange ? "confirmEmailChangeSuccess" : "verifyEmailSuccess")}</Alert>}
|
|
{status === "error" && <Alert severity="error">{errorMessage}</Alert>}
|
|
|
|
<Box sx={{ display: "flex", justifyContent: "flex-end", mt: 1 }}>
|
|
<Button variant="contained" onClick={() => navigate("/login")}>
|
|
{t("backToLogin")}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
}
|