warnings and stuff
This commit is contained in:
parent
545c54bf81
commit
983c9644bf
4 changed files with 128 additions and 88 deletions
42
src/front/components/NostrSignupButton.js
Normal file
42
src/front/components/NostrSignupButton.js
Normal 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;
|
||||
|
|
@ -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();
|
||||
}
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue