show confirmation popup

src/public/css/seca.css

@@ -62,7 +62,7 @@
   justify-content: space-evenly;
   align-items: center;
   left: 50%;
-  transform: translate(-50%, -200px);
+  transform: translate(-50%, -500px);
   transition: 
     transform 2s ease-in-out;
 }
@@ -218,7 +218,7 @@ h1 {
   padding: 0 10%;
 }
 
-.invite-card-content * {
+.invite-card-content > * {
   margin: 1vh auto;
   text-align: center;
 }

src/public/javascript/invite.js

@@ -8,6 +8,15 @@ window.onload = function () {
   }
 };
 
+const signUpConfirmation = document.querySelector('#sign-up-success');
+
+function showConfirmationAndRedirect() {
+  signUpConfirmation.classList.add('revealed');
+  setTimeout(() => {
+    window.location.href = '/createProfile';
+  }, 5000);
+}
+
 async function acceptInvite() {
   let challengeResponse;
   try {
@@ -60,9 +69,6 @@ async function acceptInvite() {
   }
 
   if (verifyResponse.ok) {
-    document.querySelector('#sign-up-success').style.display = 'block';
-    setTimeout(() => {
-      window.location.href = '/createProfile';
-    }, 1000);
+    showConfirmationAndRedirect();
   }
 }

src/views/invite.ejs

@@ -4,7 +4,6 @@
     <title>Invite Details</title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="/javascript/invite.js"></script>
     <link rel="stylesheet" href="/css/seca.css" />
   </head>
 
@@ -89,11 +88,12 @@
           </div>
           <div
             id="sign-up-success"
-            class="card-secondary"
-            style="display: none"
+            class="top-notification-good "
           >
-            <p>¡Bien! Hemos dado de alta tu clave de Nostr.</p>
-            <p>Te vamos a redirigir a la seca, espera un momento.</p>
+          <img
+          src="/img/circle-check-white.svg"
+        />
+        <p>¡Bien! Hemos dado de alta tu clave de Nostr. Te vamos a redirigir a la seca, espera un momento.</p>
           </div>
           <p>¿No tienes cuenta de Nostr?</p>
           <p>
@@ -107,5 +107,6 @@
         </div>
       </div>
     </main>
+    <script src="/javascript/invite.js"></script>
   </body>
 </html>