popup component

src/front/components/PopupNotification.js

@@ -0,0 +1,25 @@
+class PopupNotification {
+  constructor({ parentElement, id, text }) {
+    this.element = null;
+    this.parentElement = parentElement;
+    this.id = id;
+    this.text = text;
+  }
+
+  render() {
+    const div = document.createElement('div');
+    div.id = this.id;
+    div.className = 'top-notification-good';
+
+    div.innerHTML = `<img src="/img/circle-check-white.svg" />
+    <p>${this.text}</p>`;
+
+    this.element = div;
+    this.parentElement.appendChild(div);
+  }
+
+  display() {
+    this.element.classList.add('revealed');
+  }
+}
+module.exports = PopupNotification;

src/front/components/WarningDiv.js

@@ -0,0 +1,25 @@
+class WarningDiv {
+  constructor({ parentElement, id, innerHTML }) {
+    this.element = null;
+    this.parentElement = parentElement;
+    this.id = id;
+    this.innerHTML = innerHTML;
+  }
+
+  render() {
+    const div = document.createElement('div');
+    div.id = this.id;
+    div.className = 'card-secondary';
+    div.style.display = 'none';
+
+    div.innerHTML = this.innerHTML;
+
+    this.element = div;
+    this.parentElement.appendChild(div);
+  }
+
+  display() {
+    this.element.style.display = 'block';
+  }
+}
+module.exports = WarningDiv;

src/front/pages/invite.js

@@ -2,37 +2,14 @@ const checkNostrExtension = require('../utils/checkNostrExtension');
 const signupService = require('../services/signupService');
 const constants = require('../../constants');
 const NostrSignupButton = require('../components/NostrSignupButton');
-
+const WarningDiv = require('../components/WarningDiv');
-const warningsContainer = document.getElementById('warnings-container');
+const PopupNotification = require('../components/PopupNotification');
-const nostrSignupArea = document.getElementById('nostr-signup-area');
-const signUpSuccessNotification = document.getElementById('sign-up-success');
-
-class WarningDiv {
-  constructor({ parentElement, id, innerHTML }) {
-    this.element = null;
-    this.parentElement = parentElement;
-    this.id = id;
-    this.innerHTML = innerHTML;
-  }
-
-  render() {
-    const div = document.createElement('div');
-    div.id = this.id;
-    div.className = 'card-secondary';
-    div.style.display = 'none';
-
-    div.innerHTML = this.innerHTML;
-
-    this.element = div;
-    this.parentElement.appendChild(div);
-  }
-
-  display() {
-    this.element.style.display = 'block';
-  }
-}
 
 const invitesFunction = () => {
+  const body = document.querySelector('body');
+  const warningsContainer = document.getElementById('warnings-container');
+  const nostrSignupArea = document.getElementById('nostr-signup-area');
+
   const signupButton = new NostrSignupButton({
     parentElement: nostrSignupArea,
     id: 'nostr-signup-button',
@@ -94,9 +71,15 @@ const invitesFunction = () => {
               equivocado, puedes intentarlo de nuevo.
             </p>`,
   });
-
   rejectedNostrWarning.render();
 
+  const signUpSuccessPopup = new PopupNotification({
+    parentElement: body,
+    id: 'sign-up-success',
+    text: '¡Bien! Hemos dado de alta tu clave de Nostr. Te vamos a redirigir a la seca, espera un momento.',
+  });
+  signUpSuccessPopup.render();
+
   window.onload = () => {
     checkNostrExtension(
       window,
@@ -112,7 +95,7 @@ const invitesFunction = () => {
   };
 
   function showConfirmationAndRedirect() {
-    signUpSuccessNotification.classList.add('revealed');
+    signUpSuccessPopup.display();
     setTimeout(() => {
       window.location.href = constants.API_PATHS.createProfile;
     }, constants.DEFAULT_REDIRECT_DELAY);

src/views/invite.ejs

@@ -23,13 +23,7 @@
           <p>Usa tu extensión de Nostr para darte de alta:</p>
           <div id="nostr-signup-area"></div>
           <div id="warnings-container"></div>
-          <div id="sign-up-success" class="top-notification-good">
+          
-            <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>
             <a