login page

public/javascript/login.js

@@ -1,72 +0,0 @@
-window.onload = function () {
-  if (!window.nostr) {
-    console.log('Nostr extension not present');
-    document.querySelector('#login-button').disabled = true;
-    document.querySelector('#no-extension-nudges').style.display = 'block';
-  } else {
-    console.log('Nostr extension present');
-  }
-};
-
-async function login() {
-  let challengeResponse;
-  try {
-    challengeResponse = await fetch('/api/login/nostr-challenge', {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-  } catch (error) {
-    console.log(`Something went wrong: ${error}`);
-    return;
-  }
-
-  const { challenge } = await challengeResponse.json();
-
-  let pubkey;
-  try {
-    pubkey = await window.nostr.getPublicKey();
-  } catch (error) {
-    document.querySelector('#rejected-nostr-nudges').style.display = 'block';
-    return;
-  }
-  const event = {
-    kind: 22242,
-    created_at: Math.floor(Date.now() / 1000),
-    tags: [['challenge', challenge]],
-    content: 'Sign this challenge to authenticate',
-    pubkey: pubkey,
-  };
-
-  let signedEvent;
-  try {
-    signedEvent = await window.nostr.signEvent(event);
-  } catch (error) {
-    document.querySelector('#rejected-nostr-nudges').style.display = 'block';
-    return;
-  }
-
-  let verifyResponse;
-  try {
-    verifyResponse = await fetch('/api/login/nostr-verify', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(signedEvent),
-    });
-  } catch (error) {
-    console.log(`Something went wrong: ${error}`);
-    return;
-  }
-
-  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);
-  }
-}

src/front/pages/login.js

@@ -0,0 +1,81 @@
+const loginsFunction = () => {
+  window.onload = function () {
+    if (!window.nostr) {
+      console.log('Nostr extension not present');
+      document.querySelector('#login-button').disabled = true;
+      document.querySelector('#no-extension-nudges').style.display = 'block';
+    } else {
+      console.log('Nostr extension present');
+    }
+  };
+
+  async function login() {
+    let challengeResponse;
+    try {
+      challengeResponse = await fetch('/api/login/nostr-challenge', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+    } catch (error) {
+      console.log(`Something went wrong: ${error}`);
+      return;
+    }
+
+    const { challenge } = await challengeResponse.json();
+
+    let pubkey;
+    try {
+      pubkey = await window.nostr.getPublicKey();
+    } catch (error) {
+      document.querySelector('#rejected-nostr-nudges').style.display = 'block';
+      return;
+    }
+    const event = {
+      kind: 22242,
+      created_at: Math.floor(Date.now() / 1000),
+      tags: [['challenge', challenge]],
+      content: 'Sign this challenge to authenticate',
+      pubkey: pubkey,
+    };
+
+    let signedEvent;
+    try {
+      signedEvent = await window.nostr.signEvent(event);
+    } catch (error) {
+      document.querySelector('#rejected-nostr-nudges').style.display = 'block';
+      return;
+    }
+
+    let verifyResponse;
+    try {
+      verifyResponse = await fetch('/api/login/nostr-verify', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(signedEvent),
+      });
+    } catch (error) {
+      console.log(`Something went wrong: ${error}`);
+      return;
+    }
+
+    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();

src/views/login.ejs

@@ -13,7 +13,7 @@
       <figure>
         <img class="logo" src="/img/laseca_logo_white.png" width="25%" />
       </figure>
-      <form onsubmit="login();return false">
+      <div>
         <button
           id="login-button"
           type="submit"
@@ -24,7 +24,7 @@
           </figure>
           <p>Login con Nostr</p>
         </button>
-      </form>
+      </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>
@@ -86,6 +86,6 @@
         </p>
       </div>
     </div>
-    <script src="/javascript/login.js"></script>
+    <script src="/javascript/login.bundle.js"></script>
   </body>
 </html>

webpack.config.js

@@ -4,6 +4,7 @@ module.exports = {
   entry: {
     invite: './src/front/pages/invite.js',
     createProfile: './src/front/pages/createProfile.js',
+    login: './src/front/pages/login.js',
   },
   output: {
     filename: '[name].bundle.js',