Decrypt messages in the ssb app.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4299 ed5197a5-7fde-0310-b194-c3ffbd925b24

apps/ssb/app.js

@@ -85,6 +85,9 @@ tfrpc.register(async function store_message(message) {
 tfrpc.register(function apps() {
 	return core.apps();
 });
+tfrpc.register(async function try_decrypt(id, content) {
+	return await ssb.privateMessageDecrypt(id, content);
+});
 ssb.addEventListener('broadcasts', async function() {
 	await tfrpc.rpc.set('broadcasts', await ssb.getBroadcasts());
 });

apps/ssb/tf-message.js

@@ -14,6 +14,7 @@ class TfMessageElement extends LitElement {
 			raw: {type: Boolean},
 			blog_data: {type: String},
 			expanded: {type: Object},
+			decrypted: {type: Object},
 		};
 	}
 
@@ -28,6 +29,7 @@ class TfMessageElement extends LitElement {
 		this.drafts = {};
 		this.raw = false;
 		this.expanded = {};
+		this.decrypted = undefined;
 	}
 
 	show_reply() {
@@ -218,8 +220,15 @@ class TfMessageElement extends LitElement {
 		}
 	}
 
+	async try_decrypt(content) {
+		this.decrypted = JSON.parse(await tfrpc.rpc.try_decrypt(this.whoami, content));
+	}
+
 	render() {
 		let content = this.message?.content;
+		if (this.decrypted?.type == 'post') {
+			content = this.decrypted;
+		}
 		let self = this;
 		let raw_button = this.raw ?
 				html`<input type="button" value="Message" @click=${() => self.raw = false}></input>` :
@@ -328,6 +337,8 @@ class TfMessageElement extends LitElement {
 							` :
 							content_warning :
 						content_html;
+				let is_encrypted = this.decrypted ? html`<span style="align-self: center">🔓</span>` : undefined;
+				let style_background = this.decrypted ? 'rgba(255, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.1)';
 				return html`
 					<style>
 						code {
@@ -343,9 +354,10 @@ class TfMessageElement extends LitElement {
 							display: block;
 						}
 					</style>
-					<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px">
+					<div style="border: 1px solid black; background-color: ${style_background}; margin-top: 8px; padding: 16px">
 						<div style="display: flex; flex-direction: row">
 							<tf-user id=${this.message.author} .users=${this.users}></tf-user>
+							${is_encrypted}
 							<span style="flex: 1"></span>
 							<span style="padding-right: 8px"><a target="_top" href=${'#' + self.message.id}>%</a> ${new Date(this.message.timestamp).toLocaleString()}</span>
 							<span>${raw_button}</span>
@@ -430,7 +442,12 @@ class TfMessageElement extends LitElement {
 					</div>
 				`);
 			} else if (typeof(this.message.content) == 'string') {
-				return small_frame(html`<span>🔒</span>`);
+				if (this.decrypted !== undefined) {
+					return small_frame(html`<span>🔓</span><pre>${JSON.stringify(this.decrypted, null, 2)}</pre>`);
+				} else {
+					this.try_decrypt(content);
+					return small_frame(html`<span>🔐</span>`);
+				}
 			} else {
 				return small_frame(html`<div><b>type</b>: ${content.type}</div>`);
 			}