From 3dfaad87045cbc77c12dc5ecc4184559a0a103b6 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 9 Apr 2023 15:59:13 +0100
Subject: [PATCH] Resend verfication email functionality

---
 src/components/Login/EmailSignupForm.tsx      |  2 +-
 .../VerificationEmailMessage.tsx              | 84 +++++++++++++++++++
 ...erify.astro => verification-pending.astro} | 51 ++++-------
 3 files changed, 100 insertions(+), 37 deletions(-)
 create mode 100644 src/components/RegistrationFlow/VerificationEmailMessage.tsx
 rename src/pages/{verify.astro => verification-pending.astro} (63%)

diff --git a/src/components/Login/EmailSignupForm.tsx b/src/components/Login/EmailSignupForm.tsx
index 1cacffc02..7dbb51b4c 100644
--- a/src/components/Login/EmailSignupForm.tsx
+++ b/src/components/Login/EmailSignupForm.tsx
@@ -19,7 +19,7 @@ const EmailSignupForm: FunctionComponent = () => {
       return;
     }
 
-    window.location.href = `/verify?email=${email}`;
+    window.location.href = `/verification-pending?email=${encodeURIComponent(email)}`;
   };
 
   const onSubmit = (e: Event) => {
diff --git a/src/components/RegistrationFlow/VerificationEmailMessage.tsx b/src/components/RegistrationFlow/VerificationEmailMessage.tsx
new file mode 100644
index 000000000..9a7c43d07
--- /dev/null
+++ b/src/components/RegistrationFlow/VerificationEmailMessage.tsx
@@ -0,0 +1,84 @@
+import VerifyLetterIcon from '../../icons/verify-letter.svg';
+import { useEffect, useState } from 'preact/hooks';
+
+export function VerificationEmailMessage() {
+  const [email, setEmail] = useState('..');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isEmailResent, setIsEmailResent] = useState(false);
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+
+    setEmail(urlParams.get('email')!);
+  }, []);
+
+  const resendVerificationEmail = () => {
+    fetch(`${import.meta.env.PUBLIC_API_URL}/v1-send-verification-email`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        email,
+      }),
+    })
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error('Something went wrong. Please try again later.');
+        }
+
+        setIsEmailResent(true);
+      })
+      .catch(() => {
+        setIsEmailResent(false);
+        setIsLoading(false);
+        setError('Something went wrong. Please try again later.');
+      });
+  };
+
+  return (
+    <div className="mx-auto max-w-md text-center">
+      <img
+        alt="Verify Email"
+        src={VerifyLetterIcon}
+        class="mx-auto mb-4 h-20 w-40 sm:h-40"
+      />
+      <h2 class="my-2 text-center text-xl font-semibold sm:my-5 sm:text-2xl">
+        Verify your email address
+      </h2>
+      <div class="text-sm sm:text-base">
+        <p>
+          We have you an email at <span className="font-bold">{email}</span>.
+          Please click the link to verify your account. This link will expire
+          shortly, so please verify soon!
+        </p>
+
+        <hr class="my-4" />
+
+        {!isEmailResent && (
+          <>
+            {isLoading && <p className="text-gray-400">Sending the email ..</p>}
+            {!isLoading && !error && (
+              <p>
+                Please make sure to check your spam folder. If you still don't
+                have the email click to{' '}
+                <button
+                  disabled={!email}
+                  className="inline text-blue-700"
+                  onClick={resendVerificationEmail}
+                >
+                  resend verification email.
+                </button>
+              </p>
+            )}
+
+            {error && <p class="text-red-700">{error}</p>}
+          </>
+        )}
+
+        {isEmailResent && <p class="text-green-700">Email sent!</p>}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/verify.astro b/src/pages/verification-pending.astro
similarity index 63%
rename from src/pages/verify.astro
rename to src/pages/verification-pending.astro
index ecdca3ec0..459a7bf09 100644
--- a/src/pages/verify.astro
+++ b/src/pages/verification-pending.astro
@@ -1,50 +1,26 @@
 ---
-import Icon from '../components/AstroIcon.astro';
+import AstroIcon from '../components/AstroIcon.astro';
 import SettingLayout from '../layouts/SettingLayout.astro';
+import { VerificationEmailMessage } from '../components/RegistrationFlow/VerificationEmailMessage';
 ---
 
 <SettingLayout title='Verify Email'>
-  <section class='container py-20'>
-    <div class='mx-auto max-w-md'>
-      <Icon icon='verify-letter' class='mx-auto h-40 w-40' />
-      <h2 class='mt-5 text-center text-2xl font-semibold'>
-        Great, now verify your email
-      </h2>
-      <div class='mt-5 space-y-6'>
-        <p>
-          Check your inbox at <span class='font-bold' data-email-to
-            >john@example.com</span
-          > and click the verification link inside to complete your registration.
-          This link will expire shortly, so verify soon!
-        </p>
-
-        <div>
-          <span class='font-bold'>Don't see an email?</span> Check your spam folder.
-        </div>
-        <div>
-          <span class='font-bold'>Link expired?</span>
-          <button
-            data-resend-button
-            class='text-blue-700 disabled:cursor-not-allowed'
-            disabled>Resend verification email.</button
-          >
-        </div>
-        <div data-message></div>
-      </div>
-    </div>
+  <section class='container py-8 sm:py-20'>
+    <VerificationEmailMessage client:load />
   </section>
 </SettingLayout>
 
 <script>
   import Cookies from 'js-cookie';
   import { TOKEN_COOKIE_NAME } from '../lib/constants';
+
   const emailTo = document.querySelector('[data-email-to]');
-  const resendButton = document.querySelector(
-    'button[data-resend-button]'
-  ) as HTMLButtonElement | null;
-  const message = document.querySelector(
-    '[data-message]'
-  ) as HTMLDivElement | null;
+  const resendButton = document.querySelector('button[data-resend-button]');
+  as;
+  HTMLButtonElement | null;
+  const message = document.querySelector('[data-message]');
+  as;
+  HTMLDivElement | null;
 
   const token = Cookies.get(TOKEN_COOKIE_NAME);
   let email = '';
@@ -52,7 +28,9 @@ import SettingLayout from '../layouts/SettingLayout.astro';
   window.addEventListener('load', () => {
     // Get all query params and send them to v1-github-callback
     const urlParams = new URLSearchParams(window.location.search);
-    email = urlParams.get('email') as string;
+    email = urlParams.get('email');
+    as;
+    string;
 
     if (!email || token) {
       // TODO: redirect to home page
@@ -104,6 +82,7 @@ import SettingLayout from '../layouts/SettingLayout.astro';
       if (message?.innerHTML === '' || message?.innerHTML) {
         message.innerHTML = `<div class="mt-2 rounded-lg p-2 bg-red-100 text-red-800">${error?.message}</div>`;
       }
+
       // Enable the resend button
       resendButton.removeAttribute('disabled');
     }