lots of stuff

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 = {

src/front/components/nostrButtons.js

@@ -1,9 +1,10 @@
-class NostrSignupButton {
+class NostrButton {
-  constructor({ parentElement, id, onClickCallback }) {
+  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 };

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();
-      }
+      },
-    );
+    });
   };
 };
 

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 loginFunction = () => {
-  const rejectedNostrWarning = document.querySelector('#rejected-nostr-nudges');
+  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: `<p>
+          Ups, esa clave no está registrada en la seca. ¿Quizás estás usando un
+          perfil equivocado?
+        </p>`,
+  });
+  notRegisteredPubkeyWarning.render();
+
+  const noExtensionWarning = new WarningDiv({
+    parentElement: warningsArea,
+    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 nostrRejectedWarning = new WarningDiv({
+    parentElement: warningsArea,
+    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>`,
+  });
+  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;
+        nostrLoginButton.disable();
-        document.querySelector('#no-extension-nudges').style.display = 'block';
+        noExtensionWarning.display();
-      }
-    );
-  };
-
-  async function login() {
-    const verifyResponse = await loginService.requestAndRespondLoginChallenge({
-      onRejectedPubKeyCallback: () => {
-        rejectedNostrWarning.style.display = 'block';
-      },
-      onRejectedSignatureCallback: () => {
-        rejectedNostrWarning.style.display = 'block';
       },
     });
-
+  };
-    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();

src/front/utils/checkNostrExtension.js

@@ -1,4 +1,4 @@
-function checkNostrExtension(window, successCallback, failureCallback) {
+function checkNostrExtension({ window, successCallback, failureCallback }) {
   if (!window.nostr) {
     failureCallback();
   } else {

src/views/login.ejs

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Hello World</title>
+    <title></title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="/css/seca.css" />
@@ -13,78 +13,10 @@
       <figure>
         <img class="logo" src="/img/laseca_logo_white.png" width="25%" />
       </figure>
-      <div>
+      <div id="login-button-area">
-        <button
-          id="login-button"
-          type="submit"
-          class="button-large button-nostr"
-        >
-          <figure>
-            <img src="/img/white_ostrich.svg" width="40%" margin="-5% -5%" />
-          </figure>
-          <p>Login con Nostr</p>
-        </button>
-      </div>
-      <div id="sign-up-success" style="display: none">
-        <p>¡Bien! Tu clave es parte de la seca.</p>
-        <p>Redirigiendo a la app...</p>
-      </div>
-      <div id="rejected-public-key" style="display: none">
-        <p>
-          Ups, esa clave no está registrada en la seca. ¿Quizás estás usando un
-          perfil equivocado?
-        </p>
-      </div>
-      <div id="rejected-nostr-nudges" style="display: none">
-        <p>
-          Ups, parece que no has aceptado que usemos tus claves. Si te has
-          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="warnings-area">
+      </div>      
     </div>
     <script src="/javascript/login.bundle.js"></script>
   </body>