diff --git a/src/form.css b/src/form.css index 4c6fca1..497e30a 100644 --- a/src/form.css +++ b/src/form.css @@ -45,6 +45,7 @@ label { input[type="password"], input[type="text"], +input[type="url"], textarea { background: var(--bgcolor-textinput); border: .2rem solid #b7b7b7; @@ -55,11 +56,16 @@ textarea { } input[type="password"]:focus, input[type="text"]:focus, +input[type="url"]:focus, textarea:focus { border-color: var(--focus-border-color); outline-offset: var(--focus-outline-offset); outline: var(--focus-outline); } +input:invalid { + outline: 2px solid var(--bgcolor-danger); + outline-offset: var(--focus-outline-offset); +} textarea { /* max-height: 64vh; */ min-height: 20px; @@ -137,11 +143,6 @@ button:disabled { cursor: default; } -.inline-text { - display: inline-block; - padding: 0 1ch; -} - .form-status { flex-basis: 100%; flex-grow: 1; diff --git a/src/index.html b/src/index.html index 1706437..122f101 100644 --- a/src/index.html +++ b/src/index.html @@ -59,6 +59,18 @@ --> +
+ + + + + + +
+ + +
+
@@ -72,7 +84,6 @@
-
diff --git a/src/main.js b/src/main.js index 0e3c37f..926db4b 100644 --- a/src/main.js +++ b/src/main.js @@ -3,8 +3,8 @@ import {elem, parseTextContent} from './domutil.js'; import {dateTime, formatTime} from './timeutil.js'; // curl -H 'accept: application/nostr+json' https://nostr.x1ddos.ch const pool = relayPool(); -pool.addRelay('wss://relay.nostr.info', {read: true, write: true}); -pool.addRelay('wss://relay.damus.io', {read: true, write: true}); +// pool.addRelay('wss://relay.nostr.info', {read: true, write: true}); +// pool.addRelay('wss://relay.damus.io', {read: true, write: true}); pool.addRelay('wss://nostr.x1ddos.ch', {read: true, write: true}); // pool.addRelay('wss://nostr.openchain.fr', {read: true, write: true}); // pool.addRelay('wss://nostr.bitcoiner.social/', {read: true, write: true}); @@ -660,3 +660,50 @@ document.body.addEventListener('click', (e) => { hideNewMessage(true); } }); + +// profile +const profileForm = document.querySelector('form[name="profile"]'); +const profileSubmit = profileForm.querySelector('button[type="submit"]'); +const profileStatus = document.querySelector('#profilestatus'); +const onProfileError = err => { + console.error(err) + profileStatus.hidden = false; + profileStatus.textContent = err.message +}; +profileForm.addEventListener('input', (e) => { + if (e.target.nodeName === 'TEXTAREA') { + updateElemHeight(e.target); + } + const form = new FormData(profileForm); + const name = form.get('name'); + const about = form.get('about'); + const picture = form.get('picture'); + console.log('input', JSON.stringify(Object.fromEntries(form))); + profileSubmit.disabled = !(name || about || picture); +}); + +profileForm.addEventListener('submit', async (e) => { + e.preventDefault(); + const form = new FormData(profileForm); + const privatekey = localStorage.getItem('private_key'); + + const newProfile = { + kind: 0, + pubkey, + content: JSON.stringify(Object.fromEntries(form)), + created_at: Math.floor(Date.now() * 0.001), + }; + const sig = await signEvent(newProfile, privatekey).catch(console.error); + if (sig) { + const ev = await pool.publish({...newProfile, sig}, (status, url) => { + if (status === 0) { + console.info(`publish request sent to ${url}`); + } + if (status === 1) { + profileStatus.textContent = 'profile metadata successfully published'; + profileStatus.hidden = false; + profileSubmit.disabled = true; + } + }).catch(console.error); + } +});