From dc402fd20288e7174ba4f6c3d605796f94ff0941 Mon Sep 17 00:00:00 2001
From: Christopher Cali <chris@consensusnetworks.com>
Date: Sat, 11 Jun 2022 11:45:41 -0500
Subject: [PATCH] Add / hide success message at appropriate times

---
 apps/website/src/pages/index/index.vue | 146 +++++++++++--------------
 1 file changed, 65 insertions(+), 81 deletions(-)

diff --git a/apps/website/src/pages/index/index.vue b/apps/website/src/pages/index/index.vue
index a137b1f47..ab9fd5508 100644
--- a/apps/website/src/pages/index/index.vue
+++ b/apps/website/src/pages/index/index.vue
@@ -9,16 +9,16 @@ async function onSubmit() {
   const requestOptions = {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ email: email.value })
+    body: JSON.stringify({ email: email.value }),
   }
   const baseUrl = import.meta.env.PROD
     ? 'https://w47s4clcwi.execute-api.us-east-2.amazonaws.com/prod'
     : 'http://localhost:4000'
   try {
-    const response = await fetch(
-      `${baseUrl}/api/users/signup`,
-      requestOptions
-    )
+    email.value = ''
+    // Change success message display to show
+    document.getElementById('success-message').style.display = 'block'
+    const response = await fetch(`${baseUrl}/api/users/signup`, requestOptions)
     console.log('response :>> ', response)
     const data = await response.json()
   } catch (err) {
@@ -26,19 +26,22 @@ async function onSubmit() {
   }
 }
 
+const hideSuccessMessage = () => {
+  document.getElementById('success-message').style.display = 'none'
+}
 
 const slideshowProgress = ref(0)
 const currentSlide = ref(2)
 onMounted(() => {
   setInterval(() => {
-    slideshowProgress.value += .05
+    slideshowProgress.value += 0.05
     if (slideshowProgress.value >= 100) {
       slideshowProgress.value = 0
-      currentSlide.value = (currentSlide.value + 1) !== 3 ? currentSlide.value + 1 : 0
+      currentSlide.value =
+        currentSlide.value + 1 !== 3 ? currentSlide.value + 1 : 0
     }
   }, 0.00000005)
 })
-
 </script>
 
 <template>
@@ -54,19 +57,13 @@ onMounted(() => {
           <ArrowRightIcon class="w-[15px] h-[20px] mx-2" />
         </button>
         <h1 class="header-text text-[#101828] mt-4 pb-0">
-          <span
-            class="text-[#F36F38]"
-            @click="$router.push('/')"
-          >
+          <span class="text-[#F36F38]" @click="$router.push('/')">
             Your
           </span>
           digital assets
         </h1>
         <h1 class="header-text text-[#101828] mb-4">
-          <span
-            class=" text-[#c4c4c4]"
-            @click="$router.push('/')"
-          >
+          <span class=" text-[#c4c4c4]" @click="$router.push('/')">
             All
           </span>
           in one place
@@ -74,18 +71,15 @@ onMounted(() => {
         <h1 class="body-text text-[#667085] py-[40px]">
           Non-custodial digital asset management and staking
         </h1>
-        <form
-          id="email-form"
-          novalidate
-          @submit.prevent="onSubmit"
-        >
+        <form id="email-form" novalidate @submit.prevent="onSubmit">
           <div class="mt-10 grid grid-cols-5 gap-2 ">
             <input
               v-model="email"
               type="text"
               placeholder="Enter your email"
               class="border border-[#D0D5DD] rounded-md px-4 py-2 col-span-3 input-text text-[#F36F38]"
-            >
+              @click="hideSuccessMessage"
+            />
             <button
               type="submit"
               class="bg-[#F36F38] button-text text-white py-2 px-4 rounded-md w-[130px] hover:bg-[#F36F38]/[.75]"
@@ -93,7 +87,12 @@ onMounted(() => {
               Get Started
             </button>
           </div>
-          <span class="small-text text-[#667085] pl-[5px]">We won't spam you. We promise.</span>
+          <div id="success-message" class="small-text text-[#077d01] pl-[5px]">
+            Thank you for submitting!
+          </div>
+          <span class="small-text text-[#667085] pl-[5px]"
+            >We won't spam you. We promise.</span
+          >
         </form>
       </div>
       <div class="basis-1/2 pl-[20px] pt-[100px]">
@@ -101,63 +100,55 @@ onMounted(() => {
       </div>
     </div>
     <div class="w-full h-[400px] relative my-[100px]">
-      <div
-        v-if="currentSlide === 0"
-        class="slideshow"
-      >
-        <div class="flex flex-row flex-wrap bg-[#c4c4c4]/[.5] p-10 min-w-[375px]">
+      <div v-if="currentSlide === 0" class="slideshow">
+        <div
+          class="flex flex-row flex-wrap bg-[#c4c4c4]/[.5] p-10 min-w-[375px]"
+        >
           <div class="text-center min-w-[325px] w-[50%] min-h-[300px]">
             <img
               src="/Dashboard.png"
               class="p-[5%] h-[90%] object-cover"
               alt=""
-            >
+            />
           </div>
           <div class="min-w-[50%] w-[50%] text-center">
             <h1 class="text-[32px] p-[2.5%] min-w-[325px] text-left ">
-              <span class="text-[#F36F38] font-extrabold">Manage</span> your assets and earnings across chains. See all
-              of your coins and NFTs in one dashboard.
+              <span class="text-[#F36F38] font-extrabold">Manage</span> your
+              assets and earnings across chains. See all of your coins and NFTs
+              in one dashboard.
             </h1>
           </div>
         </div>
       </div>
-      <div
-        v-if="currentSlide === 1"
-        class="slideshow"
-      >
-        <div class="flex flex-row flex-wrap bg-[#c4c4c4]/[.5] p-10 min-w-[375px]">
+      <div v-if="currentSlide === 1" class="slideshow">
+        <div
+          class="flex flex-row flex-wrap bg-[#c4c4c4]/[.5] p-10 min-w-[375px]"
+        >
           <div class="min-w-[50%] w-[50%] text-center">
             <h1 class="text-[32px] p-[2.5%] min-w-[325px] text-left ">
-              <span class="text-[#F36F38] font-extrabold">Earn</span> by staking your assets to high performing
-              validators. Participate in liquidity pools. Help keep staking decentralized with a strong set of
-              independent validators.
+              <span class="text-[#F36F38] font-extrabold">Earn</span> by staking
+              your assets to high performing validators. Participate in
+              liquidity pools. Help keep staking decentralized with a strong set
+              of independent validators.
             </h1>
           </div>
           <div class="text-center min-w-[325px] w-[50%] min-h-[300px]">
-            <img
-              src="/earn.png"
-              class="p-[5%] h-[90%] object-cover"
-              alt=""
-            >
+            <img src="/earn.png" class="p-[5%] h-[90%] object-cover" alt="" />
           </div>
         </div>
       </div>
-      <div
-        v-if="currentSlide === 2"
-        class="slideshow"
-      >
-        <div class="flex flex-row flex-wrap bg-[#c4c4c4]/[.5] p-10 min-w-[375px]">
+      <div v-if="currentSlide === 2" class="slideshow">
+        <div
+          class="flex flex-row flex-wrap bg-[#c4c4c4]/[.5] p-10 min-w-[375px]"
+        >
           <div class="text-center min-w-[325px] w-[50%] min-h-[300px]">
-            <img
-              src="/earn3.png"
-              class="p-[5%] h-[90%] object-cover"
-              alt=""
-            >
+            <img src="/earn3.png" class="p-[5%] h-[90%] object-cover" alt="" />
           </div>
           <div class="min-w-[50%] w-[50%] text-center">
             <h1 class="text-[32px] p-[2.5%] min-w-[325px] text-left ">
-              <span class="text-[#F36F38] font-extrabold">Learn</span> about the latest airdops, mints, and
-              protocol news. Stay safe with built-in security features like smart contract scanning.
+              <span class="text-[#F36F38] font-extrabold">Learn</span> about the
+              latest airdops, mints, and protocol news. Stay safe with built-in
+              security features like smart contract scanning.
             </h1>
           </div>
         </div>
@@ -165,7 +156,7 @@ onMounted(() => {
       <div class="w-full h-1 border border-red ">
         <div
           class="bg-[#F36F38]/[.5] h-full"
-          :style="{ 'width': slideshowProgress + '%' }"
+          :style="{ width: slideshowProgress + '%' }"
         />
       </div>
       <div class="grid grid-rows-2 text-center py-[50px]">
@@ -175,11 +166,7 @@ onMounted(() => {
             target="_blank"
             class="w-[25px]"
           >
-            <img
-              src="/twitter.svg"
-              alt=""
-              class="border"
-            >
+            <img src="/twitter.svg" alt="" class="border" />
           </a>
 
           <a
@@ -187,10 +174,7 @@ onMounted(() => {
             target="_blank"
             class="w-[25px]"
           >
-            <img
-              src="/discord.svg"
-              alt=""
-            >
+            <img src="/discord.svg" alt="" />
           </a>
 
           <a
@@ -198,23 +182,17 @@ onMounted(() => {
             target="_blank"
             class="w-[25px]"
           >
-            <img
-              src="/github.svg"
-              alt=""
-            >
+            <img src="/github.svg" alt="" />
           </a>
         </div>
         <div class="flex justify-center w-full pt-4">
-          <img
-            src="/copyrightIcon.svg"
-            alt=""
-            class="w-[20px]"
-          >
+          <img src="/copyrightIcon.svg" alt="" class="w-[20px]" />
           <a
             href="https://consensusnetworks.com/"
             target="_blank"
             class="text-[#F36F38] mx-4"
-          >Consensus Networks</a>
+            >Consensus Networks</a
+          >
           <span> | All Right Reserved</span>
         </div>
       </div>
@@ -269,14 +247,20 @@ onMounted(() => {
 }
 
 .linear-bg {
-  background: linear-gradient(307.15deg,
-      #f36f38 -3.58%,
-      #f36f38 -3.58%,
-      #f36f38 -3.57%,
-      rgba(243, 111, 56, 0.16) 137.28%);
+  background: linear-gradient(
+    307.15deg,
+    #f36f38 -3.58%,
+    #f36f38 -3.58%,
+    #f36f38 -3.57%,
+    rgba(243, 111, 56, 0.16) 137.28%
+  );
 }
 
 .slideshow {
   animation: appear 1.5s ease-in-out;
 }
+
+#success-message {
+  display: none;
+}
 </style>