at least one checkbox

src/public/javascript/offers.js

@@ -21,6 +21,14 @@ const buttonDecreasePremium = document.getElementById(
 const eurAmountInput = document.getElementById('input-eur-amount');
 const btcAmountInput = document.getElementById('input-btc-amount');
 
+const onchainCheckbox = document.getElementById('onchain-checkbox');
+const lightningCheckbox = document.getElementById('lightning-checkbox');
+const btcMethodCheckboxesWarning = document.getElementById(
+  'at-least-one-checkbox'
+);
+
+const btcMethodCheckboxes = [onchainCheckbox, lightningCheckbox];
+
 function toggleCreateOfferControls() {
   createOfferControls.style.display =
     createOfferControls.style.display === 'block' ? 'none' : 'block';
@@ -82,6 +90,22 @@ function updateBtcInput() {
   btcAmountInput.value = formattedSatsAmount;
 }
 
+function validateBitcoinMethodCheckboxes() {
+  let noneChecked = true;
+
+  for (const aCheckbox of btcMethodCheckboxes) {
+    if (aCheckbox.checked) {
+      noneChecked = false;
+    }
+  }
+
+  if (noneChecked) {
+    btcMethodCheckboxesWarning.style.display = 'block';
+  } else {
+    btcMethodCheckboxesWarning.style.display = 'none';
+  }
+}
+
 buttonStartCreateOffer.addEventListener('click', () => {
   toggleCreateOfferControls();
 });
@@ -112,3 +136,9 @@ eurAmountInput.addEventListener('blur', () => {
 eurAmountInput.addEventListener('input', () => {
   eurAmountInput.value = eurAmountInput.value.replace(/[^0-9]/g, '');
 });
+
+for (btcMethodCheckbox of btcMethodCheckboxes) {
+  btcMethodCheckbox.addEventListener('input', () => {
+    validateBitcoinMethodCheckboxes();
+  });
+}

src/views/offers.ejs

@@ -22,7 +22,7 @@
           class="clickable"
           width="5%"
         />
-        <p>Añade los detalles de tu oferta</p>
+        <h2>Añade los detalles de tu oferta</h2>
         <div id="button-group-buy-or-sell" class="button-group">
           <button
             data-value="buy-bitcoin"
@@ -69,9 +69,19 @@
         <div id="bitcoin-methods-area">
           <p>¿Cómo se mueve el Bitcoin?</p>
           <label for="onchain">Onchain</label
-          ><input type="checkbox" name="onchain" id="onchain-checkbox" selected/>
+          ><input type="checkbox" name="onchain" id="onchain-checkbox" checked/>
           <label for="lightning">Lightning</label
-          ><input type="checkbox" name="lightning" id="lightning-checkbox" selected/>
+          ><input type="checkbox" name="lightning" id="lightning-checkbox" checked/>
+          <p id="at-least-one-checkbox" style="display: none">Tienes que seleccionar al menos una opción.</p>
+        </div>
+        <div id="trust-area">
+          <p>¿Quién puede ver la oferta?</p>
+          <label for="my-trusted">Mis confiados</label
+          ><input type="checkbox" name="my-trusted" id="my-trusted-checkbox" checked disabled/>
+          <label for="my-trusted-trusted">Los confiados de mis confiados</label
+          ><input type="checkbox" name="my-trusted-trusted" id="my-trusted-trusted-checkbox" checked/>
+          <label for="all-members">Todos los miembros</label
+            ><input type="checkbox" name="all-members" id="all-members-checkbox"/>
         </div>
         <button id="button-submit-offer" class="button-primary" disabled>
           Publicar oferta