feat/Update_Controllers_to_Allow_for_Premium_Membership

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

@@ -9,7 +9,7 @@ import { useI18n } from "../i18n/I18nProvider";
 
 type Status = "verifying" | "success" | "error";
 
-export default function VerifyEmailPage() {
+export default function VerifyEmailPage({ emailChange = false }: { emailChange?: boolean }) {
   const { t } = useI18n();
   const navigate = useNavigate();
 
@@ -19,22 +19,23 @@ export default function VerifyEmailPage() {
   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) {
+    if (!userId || !token || (emailChange && !email)) {
       setStatus("error");
-      setErrorMessage(t("missingVerifyLinkInfo"));
+      setErrorMessage(t(emailChange ? "missingEmailChangeLinkInfo" : "missingVerifyLinkInfo"));
       return;
     }
 
     api
-      .post("/auth/verify-email", { userId, token })
+      .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")));
       });
-  }, [t]);
+  }, [emailChange, t]);
 
   return (
     <Box
@@ -50,17 +51,17 @@ export default function VerifyEmailPage() {
     >
       <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("verifyEmailTitle")}
+          {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("verifyEmailVerifying")}</Typography>
+              <Typography sx={{ color: "text.secondary" }}>{t(emailChange ? "confirmEmailChangeVerifying" : "verifyEmailVerifying")}</Typography>
             </Box>
           )}
-          {status === "success" && <Alert severity="success">{t("verifyEmailSuccess")}</Alert>}
+          {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 }}>