From 1b4d539eefcd56d162fbc5ecc50b22e9cc46bb9f Mon Sep 17 00:00:00 2001
From: Thomas Mathews <thomas.c.mathews@gmail.com>
Date: Sat, 24 Dec 2022 08:01:36 -0800
Subject: [PATCH] Added basic profile editing support

---
 css/styles.css        | 48 +++++++++++++++++++++++++++++++++++--------
 icon/edit-profile.svg |  1 +
 index.html            | 23 +++++++++++++++++++++
 js/core.js            | 24 +++++++++-------------
 js/main.js            |  5 +++++
 js/nostr.js           |  5 +++--
 js/ui/util.js         | 27 ++++++++++++++++++++++++
 7 files changed, 108 insertions(+), 25 deletions(-)
 create mode 100644 icon/edit-profile.svg

diff --git a/css/styles.css b/css/styles.css
index bbe2e08..c82fde8 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -440,15 +440,6 @@ details.cw summary {
 textarea.post-input {
 	display: block;
 	width: 100%;
-	border: none;
-	background: transparent;
-	color: var(--clrText);
-	font-size: var(--fsEnlarged);
-	font-family: var(--ffDefault);
-	margin: 10px 0;
-	padding: 0;
-	box-sizing: border-box;
-	resize: vertical;
 }
 
 .post-tools {
@@ -513,6 +504,45 @@ label[role="profile-nip5"] {
 	height: 100%;
 }
 
+/* Profile Editor */
+
+#profile-editor header {
+	margin-bottom: 15px;
+}
+#profile-editor textarea {
+	margin: 15px 0;
+}
+
+/* Inputs */
+
+.block {
+	display: block;
+}
+.w100 {
+	width: 100%;
+}
+
+input[type="text"] {
+	background: transparent;
+	border: none;
+	color: var(--clrText);
+	font-size: var(--fsNormal);
+	padding: 15px;
+	border-bottom: 3px white solid;
+	box-sizing: border-box;
+}
+textarea {
+	border: none;
+	background: transparent;
+	color: var(--clrText);
+	font-size: var(--fsEnlarged);
+	font-family: var(--ffDefault);
+	margin: 10px 0;
+	padding: 0;
+	box-sizing: border-box;
+	resize: vertical;
+}
+
 @media (prefers-color-scheme: dark) {
 	.icon.svg {
 		filter: invert(1);
diff --git a/icon/edit-profile.svg b/icon/edit-profile.svg
new file mode 100644
index 0000000..0d0532f
--- /dev/null
+++ b/icon/edit-profile.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M223.1 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 223.1 256zM274.7 304H173.3C77.61 304 0 381.7 0 477.4C0 496.5 15.52 512 34.66 512h286.4c-1.246-5.531-1.43-11.31-.2832-17.04l14.28-71.41c1.943-9.723 6.676-18.56 13.68-25.56l45.72-45.72C363.3 322.4 321.2 304 274.7 304zM371.4 420.6c-2.514 2.512-4.227 5.715-4.924 9.203l-14.28 71.41c-1.258 6.289 4.293 11.84 10.59 10.59l71.42-14.29c3.482-.6992 6.682-2.406 9.195-4.922l125.3-125.3l-72.01-72.01L371.4 420.6zM629.5 255.7l-21.1-21.11c-14.06-14.06-36.85-14.06-50.91 0l-38.13 38.14l72.01 72.01l38.13-38.13C643.5 292.5 643.5 269.7 629.5 255.7z"/></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index fae5396..473119f 100644
--- a/index.html
+++ b/index.html
@@ -137,6 +137,9 @@
 								<button class="icon" title="Message User" role="message-user">
 									<img class="icon" src="icon/message-user.svg"/></button>
 								-->
+								<button class="icon hide" role="edit-profile"
+									onclick="show_profile_editor()" title="Edit Profile">
+									<img class="icon svg" src="icon/edit-profile.svg"/></button>
 								<button class="icon" role="copy-pk"
 									data-pk="" onclick="click_copy_pk(this)" title="Copy Public Key">
 									<img class="icon svg" src="icon/pubkey.svg"/></button>
@@ -193,6 +196,26 @@
 			</div>
 		</div>
 
+		<div id="profile-editor" class="modal closed">
+			<div class="modal-content">
+				<header>
+					<label>Update Profile</label>
+					<button class="icon" onclick="close_modal(this)">
+						<img class="icon svg" src="icon/close-modal.svg"/>
+					</button>
+				</header>
+				<div>
+					<input type="text" class="block w100" name="name" placeholder="Name"/>
+					<input type="text" class="block w100" name="picture" placeholder="Picture URL"/>
+					<input type="text" class="block w100" name="nip05" placeholder="nip05"/>
+					<textarea name="about" class="block w100" placeholder="A bit about you."></textarea>
+					<button class="action float-right" onclick="click_update_profile()">
+						Update
+					</button>
+				</div>
+			</div>
+		</div>
+
 		<div id="faqs" class="modal scrollable closed">
 			<button class="icon modal-floating-close-btn" onclick="close_modal(this)">
 				<img class="icon svg" src="icon/close-modal.svg"/>
diff --git a/js/core.js b/js/core.js
index 424ac5b..e202d63 100644
--- a/js/core.js
+++ b/js/core.js
@@ -62,22 +62,18 @@ function broadcast_event(ev) {
 	DAMUS.pool.send(["EVENT", ev])
 }
 
-async function update_profile() {
-	const kind = 0 
-	const created_at = new_creation_time()
-	const pubkey = await get_pubkey()
-	const content = JSON.stringify({
-		name: "test",
-		about: "Testing",
-		picture: "",
-		nip05: ""
-	})
-
-	let ev = { pubkey, content, created_at, kind }
+async function update_profile(profile={}) {
+	let ev = {
+		kind: KIND_METADATA,
+		created_at: new_creation_time(),
+		pubkey: DAMUS.pubkey,
+		content: JSON.stringify(profile),
+		tags: [],
+	};
 	ev.id = await nostrjs.calculate_id(ev)
 	ev = await sign_event(ev)
-	model_get_my_relay(DAMUS, );
-	// TODO add error checking on updating profile
+	broadcast_event(ev);
+	return ev;
 }
 
 async function sign_event(ev) {
diff --git a/js/main.js b/js/main.js
index fe42cd4..e3eeb09 100644
--- a/js/main.js
+++ b/js/main.js
@@ -89,6 +89,7 @@ async function webapp_init() {
 	pool.on("event", on_pool_event);
 	pool.on("notice", on_pool_notice);
 	pool.on("eose", on_pool_eose);
+	pool.on("ok", on_pool_ok);
 
 	// Load all events from storage and re-process them so that apply correct
 	// effects.
@@ -199,6 +200,10 @@ function on_pool_event(relay, sub_id, ev) {
 	model_process_event(model, relay, ev);
 }
 
+function on_pool_ok(relay, evid, status) {
+	log_debug(`OK(${relay.url}): ${evid} = '${status}'`);
+}
+
 function fetch_profiles(pool, relay, pubkeys) {
 	log_debug(`(${relay.url}) fetching '${pubkeys.length} profiles'`);
 	pool.subscribe(SID_PROFILES, [{
diff --git a/js/nostr.js b/js/nostr.js
index 234bae1..2668eaa 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -250,8 +250,7 @@ Relay.prototype.send = async function relay_send(data) {
 	this.ws.send(JSON.stringify(data))
 }
 
-function handle_nostr_message(relay, msg)
-{
+function handle_nostr_message(relay, msg) {
 	let data
 	try {
 		data = JSON.parse(msg.data)
@@ -269,6 +268,8 @@ function handle_nostr_message(relay, msg)
 			return relay.onfn.eose && relay.onfn.eose(data[1])
 		case "NOTICE":
 			return relay.onfn.notice && relay.onfn.notice(...data.slice(1))
+		case "OK":
+			return relay.onfn.ok && relay.onfn.ok(...data.slice(1));
 		}
 	}
 }
diff --git a/js/ui/util.js b/js/ui/util.js
index 7657242..d23362f 100644
--- a/js/ui/util.js
+++ b/js/ui/util.js
@@ -317,6 +317,8 @@ function view_update_profile(model, pubkey) {
 	el_desc.classList.toggle("hide", !profile.about);
 	
 	find_node("button[role='copy-pk']", el).dataset.pk = pubkey;
+	find_node("button[role='edit-profile']", el)
+		.classList.toggle("hide", pubkey != model.pubkey);
 	
 	const btn_follow = find_node("button[role='follow-user']", el)
 	btn_follow.dataset.pk = pubkey;
@@ -324,3 +326,28 @@ function view_update_profile(model, pubkey) {
 	btn_follow.innerText = contact_is_friend(DAMUS.contacts, pubkey) ? "Unfollow" : "Follow";
 	btn_follow.classList.toggle("hide", pubkey == DAMUS.pubkey);
 }
+
+const PROFILE_FIELDS = ['name', 'picture', 'nip05', 'about'];
+
+function show_profile_editor() {
+	const p = DAMUS.profiles[DAMUS.pubkey];
+	const el = find_node("#profile-editor");
+	el.classList.remove("closed");
+	for (const key of PROFILE_FIELDS) {
+		find_node(`[name='${key}']`, el).value = p[key];
+	}
+}
+
+function click_update_profile() {
+	const el = find_node("#profile-editor");
+	const btn = find_node("button.action", el);
+	const p = {
+		name: find_node("input[name='name']", el).value,
+		picture: find_node("input[name='picture']", el).value,
+		nip05: find_node("input[name='nip05']", el).value,
+		about: find_node("textarea[name='about']", el).value,
+	};
+	update_profile(p);
+	close_modal(el);
+	// TODO show toast that say's "broadcasted!"
+}