feat: add resend verification email functionality with cooldown to account verification flow

Author: shrihari-prakash

src/public/components/verify-account.js

@@ -1,18 +1,28 @@
 import { ConfigurationContext } from "../context/configuration.js";
-import { errorTextTimeout, getPlaceholder, useTitle } from "../utils/utils.js";
+import { getPlaceholder, useTitle } from "../utils/utils.js";
 import { get } from "../utils/api.js";
 
+const RESEND_COOLDOWN = 30;
+
 export default function VerifyAccount() {
   const submitButtonText = i18next.t("button.verify");
 
   const configuration = React.useContext(ConfigurationContext);
 
   const [errorMessage, setErrorMessage] = React.useState("");
-  // hasError removed
   const [submitting, setSubmitting] = React.useState(false);
+  const [countdown, setCountdown] = React.useState(RESEND_COOLDOWN);
+  const [resendStatus, setResendStatus] = React.useState("");
 
   React.useEffect(() => useTitle(configuration["content.app-name"], i18next.t("title.verify-account")), []);
 
+  // Start countdown on mount
+  React.useEffect(() => {
+    if (countdown <= 0) return;
+    const timer = setTimeout(() => setCountdown((c) => c - 1), 1000);
+    return () => clearTimeout(timer);
+  }, [countdown]);
+
   const onSubmitError = (props) => {
     setErrorMessage(props.errorText);
   };
@@ -30,13 +40,31 @@ export default function VerifyAccount() {
       if (result.ok) {
         window.location = `/login${window.location.search}`;
       } else {
-        onSubmitError({ errorText: "Invalid Code" });
+        onSubmitError({ errorText: i18next.t("error.invalid-code") });
       }
     } finally {
       setSubmitting(false);
     }
   }
 
+  async function resendCode(event) {
+    event.preventDefault();
+    setResendStatus("");
+    const urlParams = new URLSearchParams(window.location.search);
+    const target = urlParams.get("target");
+    try {
+      const result = await get("/user/resend-verification", { target });
+      if (result.ok) {
+        setResendStatus(i18next.t("message.verification-resent"));
+      } else {
+        setResendStatus(i18next.t("error.resend-failed"));
+      }
+    } catch {
+      setResendStatus(i18next.t("error.resend-failed"));
+    }
+    setCountdown(RESEND_COOLDOWN);
+  }
+
   if (!configuration["user.account-creation.require-email-verification"]) {
     return null;
   }
@@ -68,8 +96,17 @@ export default function VerifyAccount() {
           required
         />
       </div>
-      <div className="page-links"></div>
+      <div className="page-links">
+        {countdown > 0 ? (
+          <span className="resend-countdown">{i18next.t("message.resend-code-in", { seconds: countdown })}</span>
+        ) : (
+          <a href="#" className="page-link" onClick={resendCode}>
+            {i18next.t("link.resend-code")}
+          </a>
+        )}
+      </div>
       <input type="submit" disabled={submitting} className="button" value={submitButtonText} />
+      {resendStatus && <div className="form-success-message">{resendStatus}</div>}
       <div className="form-error-message">{errorMessage}</div>
     </form>
   );

src/public/css/form.css

@@ -109,6 +109,13 @@
   border-radius: var(--form-input-border-radius);
 }
 
+.form-success-message {
+  color: var(--text-color);
+  width: 100%;
+  text-align: center;
+  margin-top: 1rem;
+}
+
 input:-webkit-autofill,
 input:-webkit-autofill:focus {
   transition:

src/public/languages/en.json

@@ -33,6 +33,8 @@
   "message.consent": "{{app_name}} wants access to your account. If you consent to this, {{app_name}} will be able to:",
   "message.consent-warning": "Before you consent, make sure you trust this application as you might be sharing sensitive information.",
   "message.verification-instructions": "A verification code was sent to your email address.",
+  "message.resend-code-in": "Resend code in {{seconds}}s",
+  "message.verification-resent": "A new verification code has been sent to your email.",
   "message.recover-instructions": "Enter your email address to recover your account.",
   "message.reset-password-instructions": "A verification code was sent to your email address.",
   "message.page-not-found": "This page could not be found",
@@ -81,5 +83,8 @@
   "link.create-account": "Create Account",
   "link.forgot-password": "Forgot Password?",
   "link.login": "Have an account? Login",
-  "link.login-minimal": "Login"
+  "link.login-minimal": "Login",
+  "link.resend-code": "Resend Code",
+
+  "error.resend-failed": "Failed to resend the verification email. Please try again."
 }

src/public/languages/es.json

@@ -33,6 +33,8 @@
   "message.consent": "{{app_name}} quiere acceder a tu cuenta. Si aceptas los términos, {{app_name}} podrá:",
   "message.consent-warning": "Antes de consentir, asegúrate de que confías en esta aplicación ya que podrías estar compartiendo información sensible.",
   "message.verification-instructions": "Un código de verificación ha sido enviado a tu dirección de correo electrónico.",
+  "message.resend-code-in": "Reenviar código en {{seconds}}s",
+  "message.verification-resent": "Se ha enviado un nuevo código de verificación a tu correo electrónico.",
   "message.recover-instructions": "Introduce tu dirección de correo electrónico para recuperar tu cuenta.",
   "message.reset-password-instructions": "Un código de verificación ha sido enviado a tu dirección de correo electrónico.",
   "message.page-not-found": "No se pudo encontrar esta página",
@@ -81,5 +83,8 @@
   "link.create-account": "Crear cuenta",
   "link.forgot-password": "¿Olvidaste tu contraseña?",
   "link.login": "¿Tienes una cuenta? Inicia sesión",
-  "link.login-minimal": "Iniciar sesión"
+  "link.login-minimal": "Iniciar sesión",
+  "link.resend-code": "Reenviar código",
+
+  "error.resend-failed": "Error al reenviar el correo de verificación. Por favor inténtalo de nuevo."
 }

src/public/languages/fr.json

@@ -33,6 +33,8 @@
   "message.consent": "{{app_name}} veut accéder à votre compte. Si vous y consentez, {{app_name}} pourra:",
   "message.consent-warning": "Avant de donner votre consentement, assurez-vous de faire confiance à cette application, car vous pourriez partager des informations sensibles.",
   "message.verification-instructions": "Un code de vérification a été envoyé à votre adresse e-mail.",
+  "message.resend-code-in": "Renvoyer le code dans {{seconds}}s",
+  "message.verification-resent": "Un nouveau code de vérification a été envoyé à votre e-mail.",
   "message.recover-instructions": "Entrez votre adresse e-mail pour récupérer votre compte.",
   "message.reset-password-instructions": "Un code de vérification a été envoyé à votre adresse e-mail.",
   "message.page-not-found": "Cette page est introuvable",
@@ -81,5 +83,8 @@
   "link.create-account": "Créer un compte",
   "link.forgot-password": "Mot de passe oublié?",
   "link.login": "Avoir un compte? Se connecter",
-  "link.login-minimal": "Se connecter"
+  "link.login-minimal": "Se connecter",
+  "link.resend-code": "Renvoyer le code",
+
+  "error.resend-failed": "Impossible de renvoyer l'e-mail de vérification. Veuillez réessayer."
 }

src/public/languages/ta.json

@@ -33,6 +33,8 @@
   "message.consent": "{{app_name}} உங்கள் கணக்கைப் பயன்படுத்த விரும்புகிறது. இதற்கு நீங்கள் ஒப்புக்கொண்டால், {{app_name}} பின்வருவனவற்றைச் செய்ய முடியும்:",
   "message.consent-warning": "நீங்கள் ஒப்புக்கொள்வதற்கு முன், முக்கியமான தகவலைப் பகிர்வதால், இந்தப் பயன்பாட்டை நம்புகிறீர்கள் என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.",
   "message.verification-instructions": "உங்கள் மின்னஞ்சல் முகவரிக்கு சரிபார்ப்புக் குறியீடு அனுப்பப்பட்டது.",
+  "message.resend-code-in": "{{seconds}} வினாடிகளில் மறுபடியும் அனுப்பவும்",
+  "message.verification-resent": "புதிய சரிபார்ப்புக் குறியீடு உங்கள் மின்னஞ்சலில் அனுப்பப்பட்டது.",
   "message.recover-instructions": "உங்கள் கணக்கை மீட்டெடுக்க உங்கள் மின்னஞ்சல் முகவரியை உள்ளிடவும்.",
   "message.reset-password-instructions": "உங்கள் மின்னஞ்சல் முகவரிக்கு சரிபார்ப்புக் குறியீடு அனுப்பப்பட்டது.",
   "message.page-not-found": "இந்த பக்கத்தை எங்களால் கண்டுபிடிக்க முடியவில்லை",
@@ -79,8 +81,11 @@
   "field.placeholder.new-password": "********",
 
   "link.create-account": "கணக்கை துவங்குங்கள்",
-  "link.forgot-password": "கடவுச்சொல்லை மறந்துவிட்டீர்களா?",
+  "link.forgot-password": "கடவுச்சொல்லை மறந்துவிட்டீர்களா?",
   "link.login": "கணக்கு உள்ளதா? உள்நுழைய",
-  "link.login-minimal": "உள்நுழைய"
+  "link.login-minimal": "உள்நுழைய",
+  "link.resend-code": "மறுபடி அனுப்புக்",
+
+  "error.resend-failed": "சரிபார்ப்பு மின்னஞ்சல் அனுப்ப முடியவில்லை. மீண்டும் முயலவும்."
 }
 

src/service/api/user/resend-verification.get.ts

@@ -0,0 +1,40 @@
+import { Logger } from "../../../singleton/logger.js";
+const log = Logger.getLogger().child({ from: "user/resend-verification.get" });
+
+import { Request, Response } from "express";
+import { query } from "express-validator";
+import { isValidObjectId } from "mongoose";
+
+import UserModel, { UserInterface } from "../../../model/mongo/user.js";
+import { hasErrors } from "../../../utils/api.js";
+import { errorMessages, statusCodes } from "../../../utils/http-status.js";
+import { ErrorResponse, SuccessResponse } from "../../../utils/response.js";
+import { Mailer } from "../../../singleton/mailer.js";
+import { VerificationCodeType } from "../../../enum/verification-code.js";
+
+export const GET_ResendVerificationValidator = [
+  query("target").exists().isString().isLength({ max: 64 }).custom(isValidObjectId),
+];
+
+const GET_ResendVerification = async (req: Request, res: Response): Promise<void> => {
+  try {
+    if (hasErrors(req, res)) return;
+    const target = req.query.target as string;
+    const existingUser = (await UserModel.findOne({ _id: target }).exec()) as unknown as UserInterface;
+    if (!existingUser) {
+      res.status(statusCodes.clientInputError).json(new ErrorResponse(errorMessages.clientInputError));
+      return;
+    }
+    if (existingUser.emailVerified) {
+      res.status(statusCodes.clientInputError).json(new ErrorResponse(errorMessages.clientInputError));
+      return;
+    }
+    await Mailer.generateAndSendEmailVerification(existingUser, VerificationCodeType.SIGNUP);
+    res.status(statusCodes.success).json(new SuccessResponse("Verification email resent successfully."));
+  } catch (err) {
+    log.error(err);
+    res.status(statusCodes.internalError).json(new ErrorResponse(errorMessages.internalError));
+  }
+};
+
+export default GET_ResendVerification;

src/service/api/user/router.ts

@@ -24,6 +24,7 @@ import GET_Following from "./following.get.js";
 import GET_UserId from "./_userId.get.js";
 import GET_Me from "./me.get.js";
 import GET_VerifyEmail, { GET_VerifyEmailValidator } from "./verify-email.get.js";
+import GET_ResendVerification, { GET_ResendVerificationValidator } from "./resend-verification.get.js";
 import GET_FollowRequests from "./follow-requests.get.js";
 import GET_FollowStatus, { GET_FollowStatusValidator } from "./follow-status.get.js";
 import GET_InviteCodes from "./invite-codes.get.js";
@@ -48,6 +49,7 @@ UserRouter.get("/session-state", GET_SessionState);
 UserRouter.post("/login", ...POST_LoginValidator, POST_Login);
 UserRouter.get("/login-history", ...DelegatedAuthFlow, GET_LoginHistory);
 UserRouter.get("/verify-email", ...GET_VerifyEmailValidator, GET_VerifyEmail);
+UserRouter.get("/resend-verification", ...GET_ResendVerificationValidator, GET_ResendVerification);
 UserRouter.post("/private", ...DelegatedAuthFlow, ...POST_PrivateValidator, POST_Private);
 UserRouter.get("/code", ...GET_CodeValidator, GET_Code);
 UserRouter.post("/reset-password", ...POST_ResetPasswordValidator, POST_ResetPassword);