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