validating nym

src/public/css/seca.css

@@ -51,6 +51,11 @@ h1 {
   width: 10%;
 }
 
+.text-warning {
+  color: red;
+  font-weight: 800;
+}
+
 .button-primary {
   background: #e1c300;
   border-radius: 1vw;

src/public/javascript/createProfile.js

@@ -1,4 +1,4 @@
-class ContactDetails {
+/* class ContactDetails {
   constructor(rootUiElement) {
     this.rootUiElement = rootUiElement;
     this.details = [];
@@ -108,3 +108,67 @@ window.onload = () => {
       }, 1000);
     });
 };
+ */
+/*
+
+Behaviours:
+
+- Validate inputs
+- Only activate submit profile when nym and one contact method are alive
+- Send the data and redirect on button click
+
+
+
+*/
+
+let nymInput;
+let nymInputValidationWarning;
+let phoneInput;
+let whatsappInput;
+let telegramInput;
+let emailInput;
+let nostrInput;
+let signalInput;
+let submitProfileButton;
+
+function debounce(func, wait) {
+  let timeout;
+  return function (...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  };
+}
+
+function validateNymInput() {
+  const nymValue = nymInput.value.trim();
+  const isValid = nymValue.length >= 3 && nymValue.length <= 128;
+  if (isValid) {
+    nymInputValidationWarning.style.display = 'none';
+  } else {
+    nymInputValidationWarning.style.display = 'block';
+  }
+}
+
+validateNymInput = debounce(validateNymInput, 500);
+
+function onLoadErrands() {
+  nymInput = document.getElementById('nym-input');
+  nymInputValidationWarning = document.getElementById(
+    'nym-input-validation-warning'
+  );
+  phoneInput = document.getElementById('phone-input');
+  whatsappInput = document.getElementById('whatsapp-input');
+  telegramInput = document.getElementById('telegram-input');
+  emailInput = document.getElementById('email-input');
+  nostrInput = document.getElementById('nostr-input');
+  signalInput = document.getElementById('signal-input');
+  submitProfileButton = document.getElementById('submit-profile-button');
+
+  nymInput.addEventListener('input', function (event) {
+    validateNymInput();
+  });
+}
+
+window.onload = () => {
+  onLoadErrands();
+};

src/views/createProfile.ejs

@@ -28,6 +28,7 @@
               id="nym-input"
               placeholder="ShadowySuperCoder"
           /></label>
+          <p id="nym-input-validation-warning" class="text-warning" style="display: none">Debe tener al menos 3 caracteres.</p>
         </div>
       </div>
       <div class="over-background">
@@ -65,37 +66,37 @@
                 <img src="/img/phone.svg" />
 
                 <p>Teléfono</p>
-                <input placeholder="666777888" />
+                <input id="phone-input" placeholder="666777888" />
               </div>
               <div class="badge" data-type="whatsapp">
                 <img src="/img/square-whatsapp.svg" />
                 <p>Whatsapp</p>
-                <input placeholder="666777888" />
+                <input id="whatsapp-input" placeholder="666777888" />
               </div>
               <div class="badge" data-type="telegram">
                 <img src="/img/telegram.svg" />
                 <p>Telegram</p>
-                <input placeholder="666777888 o @TuTag" />
+                <input id="telegram-input" placeholder="666777888 o @TuTag" />
               </div>
               <div class="badge" data-type="email">
                 <img src="/img/envelope.svg" />
                 <p>Email</p>
-                <input placeholder="tu@correo.com" />
+                <input id="email-input" placeholder="tu@correo.com" />
               </div>
               <div class="badge" data-type="nostr">
                 <img src="/img/lasecagold_ostrich.svg" />
                 <p>Nostr</p>
-                <input placeholder="Npub" />
+                <input id="nostr-input" placeholder="Npub" />
               </div>
               <div class="badge" data-type="signal">
                 <img src="/img/signal-messenger.svg" />
                 <p>Signal</p>
-                <input placeholder="666777888" />
+                <input id="signal-input" placeholder="666777888" />
               </div>
             </div>
           </div>
           <button
-            id="submit-details-button"
+            id="submit-profile-button"
             type="submit"
             class="button-primary button-large"
           >