warnings and stuff

src/front/components/NostrSignupButton.js

@@ -0,0 +1,42 @@
+class NostrSignupButton {
+  constructor({ parentElement, id, onClickCallback }) {
+    this.element = null;
+    this.parentElement = parentElement;
+    this.id = id;
+    this.onClickCallback = onClickCallback;
+  }
+
+  render() {
+    const thisButton = document.createElement('button');
+    thisButton.id = this.id;
+    thisButton.type = 'submit';
+    thisButton.className = 'button-large button-nostr';
+
+    const figure = document.createElement('figure');
+
+    const img = document.createElement('img');
+    img.src = '/img/white_ostrich.svg';
+    img.style.width = '40%';
+    img.style.margin = '-5% -5%';
+
+    figure.appendChild(img);
+
+    const paragraph = document.createElement('p');
+    paragraph.textContent = 'Alta con Nostr';
+
+    thisButton.appendChild(figure);
+    thisButton.appendChild(paragraph);
+
+    thisButton.addEventListener('click', () => {
+      this.onClickCallback();
+    });
+
+    this.element = thisButton;
+    this.parentElement.appendChild(this.element);
+  }
+
+  disable() {
+    this.element.disabled = true;
+  }
+}
+module.exports = NostrSignupButton;

src/front/pages/invite.js

@@ -1,53 +1,38 @@
 const checkNostrExtension = require('../utils/checkNostrExtension');
 const signupService = require('../services/signupService');
 const constants = require('../../constants');
+const NostrSignupButton = require('../components/NostrSignupButton');
 
-class NostrSignupButton {
+const warningsContainer = document.getElementById('warnings-container');
-  constructor({ parentElement, id, onClickCallback }) {
-    this.element = null;
-    this.parentElement = parentElement;
-    this.id = id;
-    this.onClickCallback = onClickCallback;
-  }
-
-  render() {
-    const thisButton = document.createElement('button');
-    thisButton.id = this.id;
-    thisButton.type = 'submit';
-    thisButton.className = 'button-large button-nostr';
-
-    const figure = document.createElement('figure');
-
-    const img = document.createElement('img');
-    img.src = '/img/white_ostrich.svg';
-    img.style.width = '40%';
-    img.style.margin = '-5% -5%';
-
-    figure.appendChild(img);
-
-    const paragraph = document.createElement('p');
-    paragraph.textContent = 'Alta con Nostr';
-
-    thisButton.appendChild(figure);
-    thisButton.appendChild(paragraph);
-
-    thisButton.addEventListener('click', () => {
-      this.onClickCallback();
-    });
-
-    this.element = thisButton;
-    this.parentElement.appendChild(this.element);
-  }
-
-  disable() {
-    this.element.disabled = true;
-  }
-}
-
 const nostrSignupArea = document.getElementById('nostr-signup-area');
 const noExtensionNudges = document.getElementById('no-extension-nudges');
 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 signupButton = new NostrSignupButton({
     parentElement: nostrSignupArea,
@@ -58,6 +43,61 @@ const invitesFunction = () => {
   });
   signupButton.render();
 
+  const noExtensionWarning = new WarningDiv({
+    parentElement: warningsContainer,
+    id: 'no-extension-nudges',
+    innerHTML: `<p>
+                ¡Atención! No se ha encontrado una extensión de Nostr en tu
+                navegador. Puedes usar:
+              </p>
+              <p><strong>Firefox</strong></p>
+              <p>
+                <a
+                  href="https://addons.mozilla.org/en-US/firefox/addon/alby/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >Alby</a
+                >
+              </p>
+              <p>
+                <a
+                  href="https://addons.mozilla.org/en-US/firefox/addon/nos2x-fox/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >nos2x-fox</a
+                >
+              </p>
+              <p><strong>Chrome</strong></p>
+              <p>
+                <a
+                  href="https://chromewebstore.google.com/detail/alby-bitcoin-wallet-for-l/iokeahhehimjnekafflcihljlcjccdbe?pli=1"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >Alby</a
+                >
+              </p>
+              <p>
+                <a
+                  href="https://chromewebstore.google.com/detail/nos2x/kpgefcfmnafjgpblomihpgmejjdanjjp"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >nos2x</a
+                >
+              </p>`,
+  });
+  noExtensionWarning.render();
+
+  const rejectedNostrWarning = new WarningDiv({
+    parentElement: warningsContainer,
+    id: 'rejected-nostr-nudges',
+    innerHTML: `<p>
+              Ups, parece que no has aceptado que usemos tus claves. Si te has
+              equivocado, puedes intentarlo de nuevo.
+            </p>`,
+  });
+
+  rejectedNostrWarning.render();
+
   window.onload = () => {
     checkNostrExtension(
       window,
@@ -67,7 +107,7 @@ const invitesFunction = () => {
       () => {
         console.log('Nostr extension not present');
         signupButton.disable();
-        noExtensionNudges.style.display = 'block';
+        noExtensionWarning.display();
       }
     );
   };

src/views/invite.ejs

@@ -22,8 +22,8 @@
           </figure>
           <p>Usa tu extensión de Nostr para darte de alta:</p>
           <div id="nostr-signup-area">
-            
           </div>
+          <div id="warnings-container">
           <div
             id="rejected-nostr-nudges"
             class="card-secondary"
@@ -34,50 +34,8 @@
               equivocado, puedes intentarlo de nuevo.
             </p>
           </div>
-          <div
+          
-            id="no-extension-nudges"
+        </div>
-            class="card-secondary"
-            style="display: none"
-          >
-            <p>
-              ¡Atención! No se ha encontrado una extensión de Nostr en tu
-              navegador. Puedes usar:
-            </p>
-            <p><strong>Firefox</strong></p>
-            <p>
-              <a
-                href="https://addons.mozilla.org/en-US/firefox/addon/alby/"
-                target="_blank"
-                rel="noopener noreferrer"
-                >Alby</a
-              >
-            </p>
-            <p>
-              <a
-                href="https://addons.mozilla.org/en-US/firefox/addon/nos2x-fox/"
-                target="_blank"
-                rel="noopener noreferrer"
-                >nos2x-fox</a
-              >
-            </p>
-            <p><strong>Chrome</strong></p>
-            <p>
-              <a
-                href="https://chromewebstore.google.com/detail/alby-bitcoin-wallet-for-l/iokeahhehimjnekafflcihljlcjccdbe?pli=1"
-                target="_blank"
-                rel="noopener noreferrer"
-                >Alby</a
-              >
-            </p>
-            <p>
-              <a
-                href="https://chromewebstore.google.com/detail/nos2x/kpgefcfmnafjgpblomihpgmejjdanjjp"
-                target="_blank"
-                rel="noopener noreferrer"
-                >nos2x</a
-              >
-            </p>
-          </div>
           <div id="sign-up-success" class="top-notification-good">
             <img src="/img/circle-check-white.svg" />
             <p>