counterweight/secajs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add contact details on frontend

Browse source
This commit is contained in:
counterweight 2025-02-13 17:25:23 +01:00
parent 73a6565326
commit 2feb64e7e0
Signed by: counterweight
GPG key ID: 883EDBAA726BD96C
3 changed files with 67 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/public/css/seca.css Normal file
View file

@ -0,0 +1,6 @@
.badge {
border: 2px solid black;
border-radius: 10px;
margin: 5px;
padding: 5px;
}

28
src/public/javascript/createProfile.js
View file

@ -0,0 +1,28 @@
const contactDetails = [];
window.onload = () => {
const contactList = document.querySelector('.contact-list');
document.querySelectorAll('.contact-detail-add-button').forEach(button => {
button.addEventListener('click', function () {
const badge = this.parentElement;
const type = badge.getAttribute('data-type');
const input = badge.querySelector('input');
const value = input.value.trim();
if (value === '') return; // Ignore empty input
// Save new contact detail
contactDetails.push({ type, value });
// Create and display a non-editable badge
const newBadge = document.createElement('div');
newBadge.classList.add('contact-badge');
newBadge.innerText = `${type}: ${value}`;
contactList.appendChild(newBadge);
// Clear input field
input.value = '';
});
});
};

33
src/views/createProfile.ejs
View file

@ -5,6 +5,7 @@
<title>Crear perfil</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/seca.css">
<script src="/javascript/createProfile.js"></script>
</head>
@ -13,6 +14,38 @@
<p>Tu clave de Nostr ya es parte de la seca.</p>
<p>Añade detalles a tu perfil para poder empezar a comerciar.</p>
</p>
<hr>
<form onsubmit="return false">
<label>Pseudónimo (Nym):<input type="text" name="nym" id="nym-input"></label>
<button id="submit-details-button" type="submit">Crear tu perfil</button>
<div id="contacts">
<p>Añade métodos de contacto para poder hablar con otros miembros.</p>
<div class="badges">
<div class="badge" data-type="whatsapp">📱 Teléfono <input><button
class="contact-detail-add-button">Añadir</button></div>
<div class="badge" data-type="whatsapp">📱 WhatsApp <input><button
class="contact-detail-add-button">Añadir</button></div>
<div class="badge" data-type="telegram">📩 Telegram <input><button
class="contact-detail-add-button"></button>>Añadir</button></div>
<div class="badge" data-type="email">📧 Email <input><button
class="contact-detail-add-button">Añadir</button></div>
<div class="badge" data-type="nostr">📧 Nostr <input><button
class="contact-detail-add-button">Añadir</button></div>
<div class="badge" data-type="signal">📧 Signal <input><button
class="contact-detail-add-button">Añadir</button></div>
<div class="badge" data-type="matrix">📧 Matrix <input><button
class="contact-detail-add-button">Añadir</button></div>
<div class="badge" data-type="xmpp">📧 XMPP <input><button
class="contact-detail-add-button">Añadir</button></div>
<div class="badge" data-type="simplex">📧 Simplex <input><button
class="contact-detail-add-button">Añadir</button></div>
</div>
</div>
<div class="contact-list">
<p>Contactos añadidos</p>
</div>
</form>
</body>
</html>