lots of stuff

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();