lots of stuff

2025-03-15 12:46:55 +01:00 · 2025-03-15 12:46:55 +01:00 · 4006523c8c
commit 4006523c8c
parent add7891e94
6 changed files with 152 additions and 120 deletions
--- 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 = {
--- a/src/front/components/NostrSignupButton.js
+++ b/src/front/components/NostrSignupButton.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 };
--- 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();
-      }
-    );
+      },
+    });
  };
 };

--- 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: `<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;
-        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();
--- 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 {
--- a/src/views/login.ejs
+++ b/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>
-        <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 id="login-button-area">
      </div>
+      <div id="warnings-area">
+      </div>      
    </div>
    <script src="/javascript/login.bundle.js"></script>
  </body>