diff --git a/src/front/components/NostrSignUpButton.js b/src/front/components/NostrSignUpButton.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/front/components/NostrSignupButton.js b/src/front/components/NostrSignupButton.js new file mode 100644 index 0000000..8075a40 --- /dev/null +++ b/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; diff --git a/src/front/pages/invite.js b/src/front/pages/invite.js index d8f1672..22e2a82 100644 --- a/src/front/pages/invite.js +++ b/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 { - 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 warningsContainer = document.getElementById('warnings-container'); 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: `

+ ¡Atención! No se ha encontrado una extensión de Nostr en tu + navegador. Puedes usar: +

+

Firefox

+

+ Alby +

+

+ nos2x-fox +

+

Chrome

+

+ Alby +

+

+ nos2x +

`, + }); + noExtensionWarning.render(); + + const rejectedNostrWarning = new WarningDiv({ + parentElement: warningsContainer, + id: 'rejected-nostr-nudges', + innerHTML: `

+ Ups, parece que no has aceptado que usemos tus claves. Si te has + equivocado, puedes intentarlo de nuevo. +

`, + }); + + 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(); } ); }; diff --git a/src/views/invite.ejs b/src/views/invite.ejs index 5319a26..06c71e1 100644 --- a/src/views/invite.ejs +++ b/src/views/invite.ejs @@ -22,8 +22,8 @@

Usa tu extensión de Nostr para darte de alta:

-
+
- + +