From dbe7cfd4616d061c33e11c77f30f6b549b45a23c Mon Sep 17 00:00:00 2001 From: kkatusic Date: Fri, 10 Jan 2025 13:19:39 +0100 Subject: [PATCH 1/3] started adding cool down --- src/components/InputUserEmailVerify.tsx | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/components/InputUserEmailVerify.tsx b/src/components/InputUserEmailVerify.tsx index 39ca986626..dbb7a95540 100644 --- a/src/components/InputUserEmailVerify.tsx +++ b/src/components/InputUserEmailVerify.tsx @@ -122,6 +122,9 @@ const InputUserEmailVerify = forwardRef( ); const [isVerificationProcess, setIsVerificationProcess] = useState(false); + const [isCooldown, setIsCooldown] = useState(false); + const [cooldownTime, setCooldownTime] = useState(0); + const [inputDescription, setInputDescription] = useState( verified ? formatMessage({ @@ -227,7 +230,28 @@ const InputUserEmailVerify = forwardRef( // or email is already exist on another user account // If email isn't verified it will send email with verification code to user const verificationEmailHandler = async () => { + // Prevent the button from being clicked during cooldown + if (isCooldown) { + return; + } + try { + // Start cooldown timer + setIsCooldown(true); + setCooldownTime(180); // Set cooldown time to 180 seconds (3 minutes) + + const interval = setInterval(() => { + setCooldownTime(prev => { + if (prev <= 1) { + clearInterval(interval); // Stop the timer when cooldown ends + setIsCooldown(false); // Re-enable the button + setDisableVerifyButton(false); + return 0; + } + return prev - 1; + }); + }, 1000); // Update every second + const { data } = await client.mutate({ mutation: SEND_USER_EMAIL_CONFIRMATION_CODE_FLOW, variables: { From eb96c0674fdd681da49a90ef3016a10996e8e969 Mon Sep 17 00:00:00 2001 From: kkatusic Date: Fri, 10 Jan 2025 14:14:43 +0100 Subject: [PATCH 2/3] setup cool-down reset; added translations --- lang/ca.json | 1 + lang/en.json | 1 + lang/es.json | 1 + src/components/InputUserEmailVerify.tsx | 76 +++++++++++++++++++------ 4 files changed, 62 insertions(+), 17 deletions(-) diff --git a/lang/ca.json b/lang/ca.json index b798215e6a..838d88b666 100644 --- a/lang/ca.json +++ b/lang/ca.json @@ -389,6 +389,7 @@ "label.email_verified": "Correu electrònic verificat", "label.email_verify": "Verifica el correu electrònic", "label.email_already_verified": "El teu correu electrònic ha estat verificat. Ara pots desar la informació del teu perfil.", + "label.email_cooldown": "No has rebut el correu electrònic? Revisa la carpeta de correu brossa o en ", "label.email_used": "Aquesta adreça de correu electrònic s'utilitzarà per enviar-te comunicacions importants.", "label.email_used_another": "Aquest correu electrònic ja ha estat verificat en un altre perfil!", "label.email_sent_to": "Codi de verificació enviat a {email}", diff --git a/lang/en.json b/lang/en.json index 5a0d395709..479e12339b 100644 --- a/lang/en.json +++ b/lang/en.json @@ -389,6 +389,7 @@ "label.email_verified": "Email Verified", "label.email_verify": "Verify Email", "label.email_already_verified": "Your email has been verified. You can now save your profile information.", + "label.email_cooldown": "Didn't get the email? Check your spam folder or in ", "label.email_used": "This email address will be used to send you important communications.", "label.email_used_another": "This email that has already been verified on another profile!", "label.email_sent_to": "Verification code sent to {email}", diff --git a/lang/es.json b/lang/es.json index 004713cc82..955fd25553 100644 --- a/lang/es.json +++ b/lang/es.json @@ -387,6 +387,7 @@ "label.email_verified": "Correo electrónico verificado", "label.email_verify": "Verificar correo electrónico", "label.email_already_verified": "Tu correo electrónico ha sido verificado. Ahora puedes guardar la información de tu perfil.", + "label.email_cooldown": "¿No recibiste el correo electrónico? Revisa tu carpeta de spam o en ", "label.email_used": "Esta dirección de correo electrónico se utilizará para enviarte comunicaciones importantes.", "label.email_used_another": "¡Este correo electrónico ya ha sido verificado en otro perfil!", "label.email_sent_to": "Código de verificación enviado a {email}", diff --git a/src/components/InputUserEmailVerify.tsx b/src/components/InputUserEmailVerify.tsx index dbb7a95540..3c38eb3858 100644 --- a/src/components/InputUserEmailVerify.tsx +++ b/src/components/InputUserEmailVerify.tsx @@ -202,6 +202,12 @@ const InputUserEmailVerify = forwardRef( id: 'label.email_verify', }); + // Reset cooldown + const resetCoolDown = () => { + setIsCooldown(false); + setCooldownTime(0); + }; + // Enable verification process "button" if email input value was empty and not verified yet // and setup email if input value was changed and has more than 3 characters const handleInputChange = (e: React.ChangeEvent) => { @@ -235,23 +241,22 @@ const InputUserEmailVerify = forwardRef( return; } - try { - // Start cooldown timer - setIsCooldown(true); - setCooldownTime(180); // Set cooldown time to 180 seconds (3 minutes) - - const interval = setInterval(() => { - setCooldownTime(prev => { - if (prev <= 1) { - clearInterval(interval); // Stop the timer when cooldown ends - setIsCooldown(false); // Re-enable the button - setDisableVerifyButton(false); - return 0; - } - return prev - 1; - }); - }, 1000); // Update every second + // Start cooldown timer + setIsCooldown(true); + setCooldownTime(180); + + const intervalId = setInterval(() => { + setCooldownTime(prev => { + if (prev <= 1) { + resetCoolDown(); + setDisableVerifyButton(false); + return 0; + } + return prev - 1; + }); + }, 1000); + try { const { data } = await client.mutate({ mutation: SEND_USER_EMAIL_CONFIRMATION_CODE_FLOW, variables: { @@ -281,8 +286,16 @@ const InputUserEmailVerify = forwardRef( }), ); } + + // Stop the timer when fetch ends + resetCoolDown(); + + // Clear interval when fetch is done + clearInterval(intervalId); } catch (error) { if (error instanceof Error) { + clearInterval(intervalId); + resetCoolDown(); showToastError(error.message); } console.log(error); @@ -423,7 +436,36 @@ const InputUserEmailVerify = forwardRef( size={InputSizeToLinkSize(size)} $validationstatus={validationStatus} > - {inputDescription} + {isCooldown && ( + + ( + + ), + time: () => ( + + {Math.floor(cooldownTime / 60)}: + {( + '0' + + (cooldownTime % 60) + ).slice(-2)} + + ), + }} + /> + + )} + {!isCooldown && inputDescription} )} {isVerificationProcess && ( From a82d06b0f54ab525735c62489d3e852e7325363c Mon Sep 17 00:00:00 2001 From: kkatusic Date: Fri, 10 Jan 2025 14:37:48 +0100 Subject: [PATCH 3/3] removing unused sitemap file --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 97b686b7fc..a97a93c7cf 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "private": true, "scripts": { "build": "next build", - "dev": "next dev && node src/sitemap.ts", + "dev": "next dev", "lint": "eslint . --ext .ts --ext .tsx", "lint:fix": "eslint . --ext .ts --ext .tsx --fix", "start": "next start",