diff --git a/src/constants.js b/src/constants.js index 79c5699..7af448b 100644 --- a/src/constants.js +++ b/src/constants.js @@ -4,6 +4,7 @@ const DEFAULT_REDIRECT_DELAY = 3 * 1000; // 3seconds times milliseconds; const API_PATHS = { createProfile: '/createProfile', + home: '/home', }; module.exports = { diff --git a/src/front/components/NostrSignupButton.js b/src/front/components/nostrButtons.js similarity index 59% rename from src/front/components/NostrSignupButton.js rename to src/front/components/nostrButtons.js index 8075a40..31513f5 100644 --- a/src/front/components/NostrSignupButton.js +++ b/src/front/components/nostrButtons.js @@ -1,9 +1,10 @@ -class NostrSignupButton { - constructor({ parentElement, id, onClickCallback }) { +class NostrButton { + constructor({ parentElement, id, onClickCallback, buttonText }) { this.element = null; this.parentElement = parentElement; this.id = id; this.onClickCallback = onClickCallback; + this.buttonText = buttonText; } render() { @@ -22,7 +23,7 @@ class NostrSignupButton { figure.appendChild(img); const paragraph = document.createElement('p'); - paragraph.textContent = 'Alta con Nostr'; + paragraph.textContent = this.buttonText; thisButton.appendChild(figure); thisButton.appendChild(paragraph); @@ -36,7 +37,27 @@ class NostrSignupButton { } disable() { - this.element.disabled = true; + if (this.element) { + this.element.disabled = true; + } } } -module.exports = NostrSignupButton; + +class NostrSignupButton extends NostrButton { + constructor({ parentElement, id, onClickCallback }) { + super({ parentElement, id, onClickCallback, buttonText: 'Alta con Nostr' }); + } +} + +class NostrLoginButton extends NostrButton { + constructor({ parentElement, id, onClickCallback }) { + super({ + parentElement, + id, + onClickCallback, + buttonText: 'Login con Nostr', + }); + } +} + +module.exports = { NostrSignupButton, NostrLoginButton }; diff --git a/src/front/pages/invite.js b/src/front/pages/invite.js index d795db7..4b58b37 100644 --- a/src/front/pages/invite.js +++ b/src/front/pages/invite.js @@ -1,7 +1,7 @@ const checkNostrExtension = require('../utils/checkNostrExtension'); const inviteService = require('../services/inviteService'); const constants = require('../../constants'); -const NostrSignupButton = require('../components/NostrSignupButton'); +const { NostrSignupButton } = require('../components/nostrButtons'); const WarningDiv = require('../components/WarningDiv'); const PopupNotification = require('../components/PopupNotification'); @@ -93,17 +93,17 @@ const invitesFunction = () => { signUpSuccessPopup.render(); window.onload = () => { - checkNostrExtension( + checkNostrExtension({ window, - () => { + successCallback: () => { console.log('Nostr extension present'); }, - () => { + : () => { console.log('Nostr extension not present'); signupButton.disable(); noExtensionWarning.display(); - } - ); + }, + }); }; }; diff --git a/src/front/pages/login.js b/src/front/pages/login.js index cf5fb92..5620a99 100644 --- a/src/front/pages/login.js +++ b/src/front/pages/login.js @@ -1,49 +1,127 @@ const checkNostrExtension = require('../utils/checkNostrExtension'); const loginService = require('../services/loginService'); +const WarningDiv = require('../components/WarningDiv'); +const { NostrLoginButton } = require('../components/nostrButtons'); +const PopupNotification = require('../components/PopupNotification'); +const constants = require('../../constants'); -const loginsFunction = () => { - const rejectedNostrWarning = document.querySelector('#rejected-nostr-nudges'); +const loginFunction = () => { + const loginButtonArea = document.getElementById('login-button-area'); + const warningsArea = document.getElementById('warnings-area'); + + const successPopup = new PopupNotification({ + parentElement: document.querySelector('body'), + id: 'login-success-popup', + text: '¡Éxito! Te estamos llevando a la app...', + }); + successPopup.render(); + const nostrLoginButton = new NostrLoginButton({ + parentElement: loginButtonArea, + id: 'login-button', + onClickCallback: async () => { + const verifyResponse = await loginService.requestAndRespondLoginChallenge( + { + onRejectedPubKeyCallback: () => { + nostrRejectedWarning.display(); + }, + onRejectedSignatureCallback: () => { + nostrRejectedWarning.display(); + }, + } + ); + + if (verifyResponse.status === 403) { + notRegisteredPubkeyWarning.display(); + } + + if (verifyResponse.ok) { + nostrLoginButton.disable(); + successPopup.display(); + setTimeout(() => { + window.location.href = constants.API_PATHS.home; + }, constants.DEFAULT_REDIRECT_DELAY); + } + }, + }); + nostrLoginButton.render(); + + const notRegisteredPubkeyWarning = new WarningDiv({ + parentElement: warningsArea, + id: 'rejected-public-key', + innerHTML: `

+ Ups, esa clave no está registrada en la seca. ¿Quizás estás usando un + perfil equivocado? +

`, + }); + notRegisteredPubkeyWarning.render(); + + const noExtensionWarning = new WarningDiv({ + parentElement: warningsArea, + 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 nostrRejectedWarning = new WarningDiv({ + parentElement: warningsArea, + id: 'rejected-nostr-nudges', + innerHTML: `

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

`, + }); + nostrRejectedWarning.render(); window.onload = () => { - checkNostrExtension( + checkNostrExtension({ window, - () => { + successCallback: () => { console.log('Nostr extension present'); }, - () => { + failureCallback: () => { console.log('Nostr extension not present'); - document.querySelector('#login-button').disabled = true; - document.querySelector('#no-extension-nudges').style.display = 'block'; - } - ); - }; - - async function login() { - const verifyResponse = await loginService.requestAndRespondLoginChallenge({ - onRejectedPubKeyCallback: () => { - rejectedNostrWarning.style.display = 'block'; - }, - onRejectedSignatureCallback: () => { - rejectedNostrWarning.style.display = 'block'; + nostrLoginButton.disable(); + noExtensionWarning.display(); }, }); - - if (verifyResponse.status === 403) { - document.querySelector('#rejected-public-key').style.display = 'block'; - } - - if (verifyResponse.ok) { - document.querySelector('#sign-up-success').style.display = 'block'; - setTimeout(() => { - window.location.href = '/home'; - }, 1000); - } - } - - const loginButton = document.getElementById('login-button'); - loginButton.addEventListener('click', () => { - login(); - }); + }; }; -loginsFunction(); +loginFunction(); diff --git a/src/front/utils/checkNostrExtension.js b/src/front/utils/checkNostrExtension.js index b1d9610..b16d293 100644 --- a/src/front/utils/checkNostrExtension.js +++ b/src/front/utils/checkNostrExtension.js @@ -1,4 +1,4 @@ -function checkNostrExtension(window, successCallback, failureCallback) { +function checkNostrExtension({ window, successCallback, failureCallback }) { if (!window.nostr) { failureCallback(); } else { diff --git a/src/views/login.ejs b/src/views/login.ejs index a954697..2cf9dcb 100644 --- a/src/views/login.ejs +++ b/src/views/login.ejs @@ -1,7 +1,7 @@ - Hello World + @@ -13,78 +13,10 @@
-
- -
- - - -