Sending encrypted messages. Revealing some weird behavior, but it's working.

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

apps/ssb/app.js

@@ -88,6 +88,9 @@ tfrpc.register(function apps() {
 tfrpc.register(async function try_decrypt(id, content) {
 	return await ssb.privateMessageDecrypt(id, content);
 });
+tfrpc.register(async function encrypt(id, recipients, content) {
+	return await ssb.privateMessageEncrypt(id, recipients, content);
+});
 ssb.addEventListener('broadcasts', async function() {
 	await tfrpc.rpc.set('broadcasts', await ssb.getBroadcasts());
 });

apps/ssb/tf-compose.js

@@ -176,7 +176,7 @@ class TfComposeElement extends LitElement {
 		}
 	}
 
-	submit() {
+	async submit() {
 		let self = this;
 		let draft = this.get_draft();
 		let edit = this.renderRoot.getElementById('edit');
@@ -195,14 +195,24 @@ class TfComposeElement extends LitElement {
 			message.contentWarning = draft.content_warning;
 		}
 		console.log('Would post:', message);
-		tfrpc.rpc.appendMessage(this.whoami, message).then(function() {
+		if (draft.encrypt_to) {
+			let to = new Set(draft.encrypt_to);
+			to.add(this.whoami);
+			to = [...to];
+			console.log('encrypting to', to);
+			message = await tfrpc.rpc.encrypt(this.whoami, to, JSON.stringify(message));
+			console.log('encrypted as', message);
+		}
+		try {
+			await tfrpc.rpc.appendMessage(this.whoami, message).then(function() {
 				edit.value = '';
 				self.change();
 				self.notify(undefined);
 				self.requestUpdate();
-		}).catch(function(error) {
-			alert(error.message);
 			});
+		} catch (error) {
+			alert(error.message);
+		}
 	}
 
 	discard() {
@@ -244,6 +254,16 @@ class TfComposeElement extends LitElement {
 			preview.innerHTML = this.process_text(edit.value);
 			this.last_updated_text = edit.value;
 		}
+		let encrypt = this.renderRoot.getElementById('encrypt_to');
+		if (encrypt) {
+			let tribute = new Tribute({
+				values: Object.entries(this.users).map(x => ({key: x[1].name, value: x[0]})),
+				selectTemplate: function(item) {
+					return item.original.value;
+				},
+			});
+			tribute.attach(encrypt);
+		}
 	}
 
 	remove_mention(id) {
@@ -354,6 +374,45 @@ class TfComposeElement extends LitElement {
 		return this.drafts[this.branch || ''] || {};
 	}
 
+	update_encrypt(event) {
+		let input = event.srcElement;
+		let matches = input.value.match(/@.*?\.ed25519/g);
+		if (matches) {
+			let draft = this.get_draft();
+			let to = [...new Set(matches.concat(draft.encrypt_to))];
+			this.set_encrypt(to);
+			input.value = '';
+		}
+	}
+
+	render_encrypt() {
+		let draft = this.get_draft();
+		if (draft.encrypt_to === undefined) {
+			return;
+		}
+		return html`
+			<div style="display: flex; flex-direction: row; width: 100%">
+				<label for="encrypt_to">🔐 To:</label>
+				<input type="text" id="encrypt_to" style="display: flex; flex: 1 1" @input=${this.update_encrypt}></input>
+				<input type="button" value="🚮" @click=${() => this.set_encrypt(undefined)}></input>
+			</div>
+			<ul>
+				${draft.encrypt_to.map(x => html`
+					<li>
+						<tf-user id=${x} .users=${this.users}></tf-user>
+						<input type="button" value="🚮" @click=${() => this.set_encrypt(draft.encrypt_to.filter(id => id != x))}></input>
+					</li>`)}
+			</ul>
+		`;
+	}
+
+	set_encrypt(encrypt) {
+		let draft = this.get_draft();
+		draft.encrypt_to = encrypt;
+		this.notify(draft);
+		this.requestUpdate();
+	}
+
 	render() {
 		let self = this;
 		let draft = self.get_draft();
@@ -361,7 +420,11 @@ class TfComposeElement extends LitElement {
 			draft.content_warning !== undefined ?
 			html`<div id="content_warning_preview" class="content_warning">${draft.content_warning}</div>` :
 			undefined;
+		let encrypt = draft.encrypt_to !== undefined ?
+			undefined :
+			html`<input type="button" value="🔐" @click=${() => this.set_encrypt([])}></input>`;
 		let result = html`
+			${this.render_encrypt()}
 			<div style="display: flex; flex-direction: row; width: 100%">
 				<textarea id="edit" @input=${this.input} @change=${this.change} @paste=${this.paste} style="flex: 1 0 50%">${draft.text}</textarea>
 				<div style="flex: 1 0 50%">
@@ -375,6 +438,7 @@ class TfComposeElement extends LitElement {
 			<input type="button" id="submit" value="Submit" @click=${this.submit}></input>
 			<input type="button" value="Attach" @click=${this.attach}></input>
 			${this.render_attach_app_button()}
+			${encrypt}
 			<input type="button" value="Discard" @click=${this.discard}></input>
 		`;
 		return result;

apps/ssb/tf-message.js

@@ -243,7 +243,11 @@ class TfMessageElement extends LitElement {
 	async try_decrypt(content) {
 		let result = await tfrpc.rpc.try_decrypt(this.whoami, content);
 		if (result) {
+			try {
 				this.decrypted = JSON.parse(result);
+			} catch {
+				this.decrypted = result;
+			}
 		} else {
 			this.decrypted = false;
 		}