feat: verify users email (#215)

* worked on the email verification

* worked on the email verification

* fixed the emailing issue and the supabase updating issue

* chore: add timer to resend, add supabase.server, enforce unique email

* chore: remove nodemailer logger

* remove async

* remove disposable email verification

---------

Co-authored-by: Rotimi Best <[email protected]>

apps/dashboard/src/lib/components/Modal/index.svelte

@@ -9,6 +9,7 @@
   export let maxWidth = '';
   export let containerClass = '';
   export let size = '';
+  export let isCloseable = true;
 
   afterUpdate(() => {
     if (open) {
@@ -39,9 +40,11 @@
         <p class="dark:text-white text-md font-medium m-0">
           {modalHeading}
         </p>
-        <div class="rounded-full">
-          <CloseButton onClick={onClose} contained={true} size="small" />
-        </div>
+        {#if isCloseable}
+          <div class="rounded-full">
+            <CloseButton onClick={onClose} contained={true} size="small" />
+          </div>
+        {/if}
       </div>
 
       <div class="body p-1 h-4/5 overflow-y-auto {containerClass}">

apps/dashboard/src/lib/components/Org/VerifyEmail/VerifyEmailModal.svelte

@@ -0,0 +1,84 @@
+<script>
+  {
+  }
+  import Modal from '$lib/components/Modal/index.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { snackbar } from '$lib/components/Snackbar/store';
+  import { profile } from '$lib/utils/store/user';
+  import {
+    triggerSendEmail,
+    NOTIFICATION_NAME
+  } from '$lib/utils/services/notification/notification';
+  import { currentOrg } from '$lib/utils/store/org';
+
+  const WAIT_SEC = 120;
+  const WAIT_TIME = WAIT_SEC * 1000;
+
+  let loading = false;
+  let isSent = false;
+
+  let interval;
+  let countDown = WAIT_SEC;
+
+  const resendVerificationCode = async () => {
+    loading = true;
+
+    try {
+      triggerSendEmail(NOTIFICATION_NAME.VERIFY_EMAIL, {
+        to: $profile.email,
+        profileId: $profile.id,
+        orgSiteName: $currentOrg.siteName
+      });
+
+      isSent = true;
+    } catch (error) {
+      snackbar.error('error while sending code');
+    } finally {
+      loading = false;
+    }
+
+    interval = setInterval(() => {
+      countDown = countDown - 1;
+    }, 1000);
+
+    setTimeout(() => {
+      isSent = false;
+
+      clearInterval(interval);
+    }, WAIT_TIME);
+  };
+</script>
+
+<Modal
+  open={!$profile.is_email_verified}
+  isCloseable={false}
+  width="w-4/5"
+  maxWidth="w-[500px]"
+  containerClass="p-4"
+>
+  <div class="flex flex-col items-center space-y-6 text-center">
+    <img src="/verify-email.svg" alt="email verification" />
+    <p class="font-bold text-xl">Verify your Email</p>
+    <p class="text-sm w-[70%] text-gray-700">
+      We've sent a verification email to {$profile.email} to confirm the validity of the email provided.
+      Kindly verify your email to continue using ClassroomIO.
+    </p>
+
+    <div class="flex items-center flex-col">
+      <PrimaryButton
+        isDisabled={loading || isSent}
+        className="font-normal"
+        onClick={resendVerificationCode}
+      >
+        {#if loading}
+          Loading...
+        {:else}
+          Resend Verification Code
+        {/if}
+      </PrimaryButton>
+      {#if isSent}
+        <p class="text-xs text-gray-700">Resend verification in {countDown} seconds</p>
+      {/if}
+    </div>
+  </div>
+</Modal>

apps/dashboard/src/lib/components/WelcomeModal/WelcomeModal.svelte

@@ -1,21 +1,31 @@
 <script>
   import Modal from '../Modal/index.svelte';
-  import { writable } from 'svelte/store';
-  import { onMount, onDestroy } from 'svelte';
-  import { welcomeModalStore } from './store';
+  import { page } from '$app/stores';
   import { goto } from '$app/navigation';
   import { currentOrgPath } from '$lib/utils/store/org';
+  import {
+    triggerSendEmail,
+    NOTIFICATION_NAME
+  } from '$lib/utils/services/notification/notification';
+  import { profile } from '$lib/utils/store/user';
+
+  let query = new URLSearchParams($page.url.search);
+  let welcomePopup = query.get('welcomePopup');
 
   const closeModal = () => {
-    $welcomeModalStore.open = false;
+    triggerSendEmail(NOTIFICATION_NAME.WELCOME_TO_APP, {
+      to: $profile.email,
+      name: $profile.fullname
+    });
     goto($currentOrgPath + '/courses?create=true');
   };
 </script>
 
 <Modal
   onClose={closeModal}
-  bind:open={$welcomeModalStore.open}
+  open={welcomePopup === 'true'}
   width="w-9/12"
+  maxWidth="w-[800px]"
   modalHeading="Welcome"
 >
   <p class="text-black dark:text-white text-sm md:text-base lg:text-lg">