profile: support kind 0 metadata events

This is a rudimentary prototype to send kind 0 metdata such as,
name, about and picture. Does not work currently, submitting the
form errors with a notice 'could not parse command'.

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;

src/index.html

@@ -59,6 +59,18 @@
             <input type="text" name="username" id="username" placeholder="username">
             <button type="button" name="publish-username" tabindex="0">publish</button>
           </div> -->
+          <form action="#" name="profile" autocomplete="new-password">
+            <label for="name">name</label>
+            <input type="text" name="name" id="name" autocomplete="off" pattern="[a-zA-Z_0-9][a-zA-Z_\-0-9]+[a-zA-Z_0-9]">
+            <label for="about">about</label>
+            <textarea name="about" id="about"></textarea>
+            <label for="picture">picture</label>
+            <input type="url" name="picture" id="picture" placeholder="https://your.domain/image.png">
+            <div class="buttons">
+              <small id="profilestatus" class="form-status" hidden></small>
+              <button type="submit" name="publish" tabindex="0" disabled>publish</button>
+            </div>
+          </form>
           <form action="#" name="settings" autocomplete="new-password">
             <label for="pubkey">public-key</label>
             <input type="text" id="pubkey" autocomplete="off">
@@ -72,7 +84,6 @@
             <div class="buttons">
               <small id="keystatus" class="form-status" hidden></small>
               <button type="button" name="generate" tabindex="0">new</button>
-              <span class="inline-text"></span>
               <button type="button" name="import" tabindex="0" disabled>save</button>
             </div>
           </form>

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.nostr.info', {read: true, write: true});
-pool.addRelay('wss://relay.damus.io', {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);
+  }
+});