create profile

src/public/javascript/createProfile.js

@@ -129,7 +129,7 @@ function debounce(func, wait) {
   };
 }
 
-validateNymInput = debounce(() => {
+const validateNymInput = debounce(() => {
   const nymValue = nymInput.value.trim();
   const isValid = nymValue.length >= 3 && nymValue.length <= 128;
   if (isValid) {
@@ -139,7 +139,7 @@ validateNymInput = debounce(() => {
   }
 }, 500);
 
-checkIfSubmittable = debounce((allInputs) => {
+const checkIfSubmittable = debounce((allInputs) => {
   const nymIsFilled = allInputs.nymInput.value !== '';
   let atLeastOneContactIsFilled = false;
 
@@ -153,7 +153,37 @@ checkIfSubmittable = debounce((allInputs) => {
   submitProfileButton.disabled = buttonShouldBeDisabled;
 }, 1000);
 
-function onLoadErrands(allInputs) {
+async function createProfile(allInputs) {
+  const contactDetails = [];
+  for (const someInput of allInputs.contactInputs) {
+    contactDetails.push({
+      type: someInput.getAttribute('data-type'),
+      value: someInput.value,
+    });
+  }
+  const encryptedContactDetails = await window.nostr.nip04.encrypt(
+    await window.nostr.getPublicKey(),
+    JSON.stringify(contactDetails)
+  );
+  await fetch('/api/set-contact-details', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ encryptedContactDetails }),
+  });
+
+  const nym = allInputs.nymInput.value;
+  await fetch('/api/set-nym', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ nym }),
+  });
+}
+
+function onLoadErrands(allInputs, submitProfileButton) {
   allInputs.nymInput.addEventListener('input', validateNymInput);
 
   for (const someInput of allInputs.allInputs) {
@@ -163,6 +193,10 @@ function onLoadErrands(allInputs) {
   }
 
   checkIfSubmittable(allInputs);
+
+  submitProfileButton.addEventListener('click', () => {
+    createProfile(allInputs);
+  });
 }
 
 const nymInput = document.getElementById('nym-input');
@@ -198,4 +232,4 @@ const allInputs = {
   ],
 };
 
-onLoadErrands(allInputs);
+onLoadErrands(allInputs, submitProfileButton);

src/views/createProfile.ejs

@@ -67,36 +67,55 @@
             </div>
 
             <div class="badges">
-              <div class="badge" data-type="phone">
+              <div class="badge">
                 <img src="/img/phone.svg" />
-
                 <p>Teléfono</p>
-                <input id="phone-input" placeholder="666777888" />
+                <input
+                  id="phone-input"
+                  data-type="phone"
+                  placeholder="666777888"
+                />
               </div>
-              <div class="badge" data-type="whatsapp">
+              <div class="badge">
                 <img src="/img/square-whatsapp.svg" />
                 <p>Whatsapp</p>
-                <input id="whatsapp-input" placeholder="666777888" />
+                <input
+                  id="whatsapp-input"
+                  data-type="whatsapp"
+                  placeholder="666777888"
+                />
               </div>
-              <div class="badge" data-type="telegram">
+              <div class="badge">
                 <img src="/img/telegram.svg" />
                 <p>Telegram</p>
-                <input id="telegram-input" placeholder="666777888 o @TuTag" />
+                <input
+                  id="telegram-input"
+                  data-type="telegram"
+                  placeholder="666777888 o @TuTag"
+                />
               </div>
-              <div class="badge" data-type="email">
+              <div class="badge">
                 <img src="/img/envelope.svg" />
                 <p>Email</p>
-                <input id="email-input" placeholder="tu@correo.com" />
+                <input
+                  id="email-input"
+                  data-type="email"
+                  placeholder="tu@correo.com"
+                />
               </div>
-              <div class="badge" data-type="nostr">
+              <div class="badge">
                 <img src="/img/lasecagold_ostrich.svg" />
                 <p>Nostr</p>
-                <input id="nostr-input" placeholder="Npub" />
+                <input id="nostr-input" data-type="nostr" placeholder="Npub" />
               </div>
-              <div class="badge" data-type="signal">
+              <div class="badge">
                 <img src="/img/signal-messenger.svg" />
                 <p>Signal</p>
-                <input id="signal-input" placeholder="666777888" />
+                <input
+                  id="signal-input"
+                  data-type="signal"
+                  placeholder="666777888"
+                />
               </div>
             </div>
           </div>