chore: email verify page

src/components/Login/EmailSignupForm.tsx

@@ -35,6 +35,7 @@ const EmailSignupForm: FunctionComponent<{}> = () => {
           .then(async (res) => {
             const json = await res.json();
             if (res.status === 200) {
+              window.location.href = `/verify?email=${email}`;
               setName('');
               setEmail('');
               setPassword('');

src/icons/verify-letter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 256 256" width="512px" height="512px"><path fill="#f79219" d="M222.58,114.782c0-8.69-3.979-16.901-10.8-22.286l-69.526-54.889c-8.357-6.598-20.15-6.598-28.508,0 L44.22,92.496c-6.82,5.385-10.8,13.596-10.8,22.286v12.732H222.58V114.782z"/><path fill="#ffa91a" d="M213.336,223.341H42.664c-5.105,0-9.244-4.138-9.244-9.244V113.116c0-5.105,4.138-9.244,9.244-9.244 h170.672c5.105,0,9.244,4.139,9.244,9.244v100.981C222.58,219.203,218.441,223.341,213.336,223.341z"/><path fill="#f79219" d="M213.336,103.872h-0.756v100.225c0,5.105-4.138,9.244-9.244,9.244H33.42v0.756 c0,5.105,4.138,9.244,9.244,9.244h170.672c5.105,0,9.244-4.138,9.244-9.244V113.116 C222.58,108.011,218.441,103.872,213.336,103.872z"/><path fill="#ef7816" d="M213.336,103.872H42.664c-4.488,0-8.229,3.199-9.067,7.441l79.417,62.697 c8.787,6.937,21.186,6.937,29.973,0l79.417-62.698C221.564,107.071,217.824,103.872,213.336,103.872z"/><path fill="#f1f2f2" d="M203.33,73.49v52.88l-60.34,47.64c-8.789,6.939-21.191,6.939-29.98,0l-60.34-47.64V73.49 c0-4.418,3.582-8,8-8h134.66C199.748,65.49,203.33,69.072,203.33,73.49z"/><g><path fill="#fff" d="M58.67,125.46c-1.101,0-2-0.9-2-2V73.49c0-2.2,1.8-4,4-4h106.89c1.101,0,1.99,0.9,1.99,2s-0.89,2-1.99,2 H60.67v49.97C60.67,124.56,59.77,125.46,58.67,125.46z M175.55,73.49c-1.1,0-2-0.9-2-2s0.9-2,2-2c1.11,0,2,0.9,2,2 S176.66,73.49,175.55,73.49z"/></g><g><path fill="#e6e7e8" d="M195.33,65.49h-2v50.88l-60.34,47.64c-8.789,6.939-21.191,6.939-29.98,0l-50.34-39.745v2.105l60.34,47.64 c8.789,6.939,21.191,6.939,29.98,0l60.34-47.64V73.49C203.33,69.072,199.748,65.49,195.33,65.49z"/></g><g><path fill="#d1d3d4" d="M197.9,65.92c0.274,0.808,0.43,1.67,0.43,2.57v52.88l-60.34,47.64c-8.789,6.939-21.191,6.939-29.98,0 l-55.34-43.692v1.052l60.34,47.64c8.789,6.939,21.191,6.939,29.98,0l60.34-47.64V73.49 C203.33,69.972,201.056,66.991,197.9,65.92z"/></g><g><path fill="#d1d3d4" d="M109.036,99.997H80.422c-1.431,0-2.591-1.16-2.591-2.591v0c0-1.431,1.16-2.591,2.591-2.591h28.614 c1.431,0,2.591,1.16,2.591,2.591v0C111.627,98.836,110.467,99.997,109.036,99.997z"/><path fill="#d1d3d4" d="M175.578,124.03H80.422c-1.431,0-2.591-1.16-2.591-2.591v0c0-1.431,1.16-2.591,2.591-2.591h95.156 c1.431,0,2.591,1.16,2.591,2.591v0C178.169,122.87,177.009,124.03,175.578,124.03z"/><path fill="#d1d3d4" d="M175.578,138.881H80.422c-1.431,0-2.591-1.16-2.591-2.591l0,0c0-1.431,1.16-2.591,2.591-2.591h95.156 c1.431,0,2.591,1.16,2.591,2.591l0,0C178.169,137.721,177.009,138.881,175.578,138.881z"/><polygon fill="#d1d3d4" points="156.425,163.403 99.575,163.403 106.139,168.585 149.861,168.585"/></g><g><polygon fill="#d1d3d4" points="175.236,148.551 80.764,148.551 87.328,153.733 168.672,153.733"/></g></svg>

src/pages/verify.astro

@@ -1,15 +1,19 @@
 ---
-import SkeletonLayout from '../layouts/SkeletonLayout.astro';
+import Icon from '../components/Icon.astro';
+import SettingLayout from '../layouts/SettingLayout.astro';
 ---
 
-<SkeletonLayout title='Verify Email'>
-  <section class='flex h-screen w-screen flex-col items-center justify-center'>
+<SettingLayout title='Verify Email'>
+  <section class='container py-20'>
     <div class='mx-auto max-w-md'>
-      <h2 class="text-2xl text-center font-semibold">Great, now verify your email</h2>
-      <div class='mt-10 space-y-5'>
+      <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 <a class='font-bold underline'
-            >kamran@roadmap.sh</a
+          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>
@@ -18,9 +22,90 @@ import SkeletonLayout from '../layouts/SkeletonLayout.astro';
           <span class='font-bold'>Don't see an email?</span> Check your spam folder.
         </div>
         <div>
-          <span class='font-bold'>Link expired?</span> Resend verification email.
+          <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>
+      <div data-message></div>
     </div>
   </section>
-</SkeletonLayout>
+</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 token = Cookies.get(TOKEN_COOKIE_NAME);
+  let email = '';
+
+  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;
+
+    if (!email || token) {
+      // TODO: redirect to home page
+      return window.location.replace('/');
+    }
+
+    if (emailTo?.textContent) {
+      // Make resend button clickable
+      resendButton?.removeAttribute('disabled');
+      emailTo.textContent = email;
+    }
+  });
+
+  // Handle resend button click
+  resendButton?.addEventListener('click', async () => {
+    // Disable button
+    resendButton.setAttribute('disabled', 'true');
+
+    // Send request to resend email
+    try {
+      const res = await fetch(
+        'http://localhost:8080/v1-send-verification-email',
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            email,
+          }),
+        }
+      );
+      const json = await res.json();
+
+      // If the response isn't ok, we'll throw an error
+      console.log(res);
+      if (!res.ok) {
+        throw new Error(json.message);
+      }
+
+      // If the response is ok, we'll show a success message
+      if (message?.innerHTML === '' || message?.innerHTML) {
+        message.innerHTML = `<div class="mt-2 rounded-lg p-2 bg-green-100 text-green-800">Verification instructions have been sent to your email.</div>`;
+      }
+      resendButton.removeAttribute('disabled');
+    } catch (error: any) {
+      console.error(error);
+
+      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');
+    }
+  });
+</script>