warnings and stuff

This commit is contained in:
counterweight 2025-03-14 16:14:01 +01:00
parent 545c54bf81
commit 983c9644bf
Signed by: counterweight
GPG key ID: 883EDBAA726BD96C
4 changed files with 128 additions and 88 deletions

View file

@ -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;

View file

@ -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: `<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();
}
);
};

View file

@ -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,49 +34,7 @@
equivocado, puedes intentarlo de nuevo.
</p>
</div>
<div
id="no-extension-nudges"
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" />