setting: add import and generate private key

Added a new tab for settings to create a private key. The key is
only set in local storage but not used yet.

src/form.css

@@ -0,0 +1,60 @@
+form {
+  max-width: 64ch;
+}
+
+button,
+input,
+textarea {
+  font-family: monospace;
+}
+
+label {
+  display: block;
+  margin-bottom: .5rem;
+  padding-left: 0;
+  text-indent: 0;
+}
+
+input[type="text"] {
+  display: block;
+  margin-bottom: 1rem;
+  padding: .5rem;
+  width: 100%;
+}
+
+input[type="password"] {
+  display: block;
+  margin-bottom: 1rem;
+  padding: .5rem;
+  width: 100%;
+}
+
+button {
+  background-color: var(--bgcolor-accent);
+  border: none;
+  color: white;
+  cursor: pointer;
+  padding: .5rem 1rem;
+}
+
+button:disabled {
+  background-color: var(--bgcolor-inactive);
+  cursor: default;
+}
+
+.buttons {
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  height: 2rem;
+}
+
+.inline-text,
+.inline-error {
+  display: inline-block;
+  padding: 0 1ch;
+}
+
+.inline-error {
+  color: var(--color-danger);
+}

src/index.html

@@ -40,6 +40,23 @@
         </div>
       </div>
 
+      <div class="tab">
+        <input type="radio" name="maintabs" id="settings">
+        <label for="settings">settings</label>
+        <form name="settings" method="post" class="content">
+          <label for="pubkey">public key</label>
+          <input type="text" name="pubkey" id="pubkey">
+          <label for="privatekey">private key</label>
+          <input type="text" name="privatekey" id="privatekey">
+          <div class="buttons">
+            <span id="keyError" class="inline-error" hidden></span>
+            <button name="generate">generate</button>
+            <span class="inline-text"> or </span>
+            <button name="import" disabled>import</button>
+          </div>
+        </form>
+      </div>
+
     </div>
   </body>
   <script src="main.js"></script>

src/main.css

@@ -1,10 +1,16 @@
 @import "tabs.css";
 @import "cards.css";
+@import "form.css";
+
+:root {
+  --color-danger: #e00;
+}
 
 @media (prefers-color-scheme: light) {
   html {
     --bgcolor: #fff7e9;
     --bgcolor-accent: #ff731d;
+    --bgcolor-inactive: #737373;
     --fgcolor: #1746a2;
     --fgcolor-accent: #5f9df7;
   }
@@ -14,6 +20,7 @@
   html {
     --bgcolor: #191919;
     --bgcolor-accent: #2d4263;
+    --bgcolor-inactive: #535353;
     --fgcolor: #c84b31;
     --fgcolor-accent: #ecdbba;
   }

src/main.js

@@ -1,4 +1,4 @@
-import {relayPool} from 'nostr-tools';
+import {relayPool, generatePrivateKey, getPublicKey} from 'nostr-tools';
 import {elem} from './domutil.js';
 
 const pool = relayPool();
@@ -18,7 +18,6 @@ const userList = [];
 function onEvent(evt, relay) {
   switch (evt.kind) {
     case 0:
-      // console.log(`event.kind=0 from ${relay}`, evt);
       try {
         const content = JSON.parse(evt.content);
         setMetadata(userList, relay, evt, content);
@@ -33,7 +32,7 @@ function onEvent(evt, relay) {
       renderRecommendServer(evt, relay);
       break;
     default:
-      // console.log(`add support for ${evt.kind}`, evt)
+      console.log(`TODO: add support for event kind ${evt.kind}`, evt)
   }
 }
 
@@ -109,6 +108,65 @@ function setMetadata(userList, relay, evt, content) {
       timestamp: evt.created_at,
       ...content,
     };
-    console.log('update existing user', user);
   }
 }
+
+// settings
+
+const form = document.querySelector('form[name="settings"]');
+const privateKeyInput = form.querySelector('#privatekey');
+const pubKeyInput = form.querySelector('#pubkey');
+const keyError = form.querySelector('#keyError');
+const generateBtn = form.querySelector('button[name="generate"]');
+const importBtn = form.querySelector('button[name="import"]');
+
+generateBtn.addEventListener('click', (evt) => {
+  evt.preventDefault();
+  const privateKey = generatePrivateKey();
+  const pubKey = getPublicKey(privateKey);
+  if (validKeys(privateKey, pubKey)) {
+    localStorage.setItem('privateKey', privateKey);
+    localStorage.setItem('pubKey', pubKey);
+    privateKeyInput.value = privateKey;
+    pubKeyInput.value = pubKey;
+  }
+});
+
+privateKeyInput.value = localStorage.getItem('privateKey');
+pubKeyInput.value = localStorage.getItem('pubKey');
+
+importBtn.addEventListener('click', (evt) => {
+  evt.preventDefault();
+  const privateKey = privateKeyInput.value;
+  const pubKey = pubKeyInput.value;
+  if (validKeys(privateKey, pubKey)) {
+    localStorage.setItem('privateKey', privateKey);
+    localStorage.setItem('pubKey', pubKey);
+  }
+});
+
+form.addEventListener('input', () => validKeys(privateKeyInput.value, pubKeyInput.value));
+
+function validKeys(privateKey, pubKey) {
+  if (pubKey && privateKey) {
+    try {
+      if (getPublicKey(privateKey) === pubKey) {
+        keyError.hidden = true;
+        keyError.textContent = '';
+        importBtn.removeAttribute('disabled');
+        return true;
+      } else {
+        keyError.textContent = 'private key does not correspond to public key!'
+      }
+    } catch (e) {
+      keyError.textContent = `not a valid private key: ${e.message || e}`;
+    }
+  }
+  keyError.hidden = false;
+  importBtn.setAttribute('disabled', true);
+  return  false;
+}
+
+document.body.addEventListener('keyup', () => {
+  console.log(document.activeElemen)
+});

src/tabs.css

@@ -7,10 +7,9 @@
   float: left;
 }
 
-.tab label {
+.tab > label {
   cursor: pointer;
   font-size: 1.1em;
-  border-radius: 5px 5px 0 0;
   padding: .5em 1em;
 }
 
@@ -49,6 +48,6 @@
   left: 0;
   right: 0;
   bottom: 0;
-  padding: 5px;
+  padding: 1rem 0;
   opacity: 0;
 }