secajs/src/front/pages/login.js

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 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.WEB_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({
      window,
      successCallback: () => {
        console.log('Nostr extension present');
      },
      failureCallback: () => {
        console.log('Nostr extension not present');
        nostrLoginButton.disable();
        noExtensionWarning.display();
      },
    });
  };
};

loginFunction();