jobtrackingapp/job-tracker-ui/src/views/VerifyEmailPage.tsx

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 [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 (
    <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">{errorMessage}</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>
  );
}