From 5cb95e45565afa7aa288a931063f4a7db43a741a Mon Sep 17 00:00:00 2001 From: Sharon Kennedy Date: Tue, 4 Feb 2020 00:43:26 -0500 Subject: [PATCH] got encryption working --- src/components/chatbox.jsx | 87 +++++++++++++++++++++++++++++++------- src/components/message.jsx | 4 +- webpack.config.js | 3 +- 3 files changed, 76 insertions(+), 18 deletions(-) diff --git a/src/components/chatbox.jsx b/src/components/chatbox.jsx index a2a5f9a..c9802c6 100644 --- a/src/components/chatbox.jsx +++ b/src/components/chatbox.jsx @@ -18,6 +18,7 @@ import Message from "./message"; const MATRIX_SERVER_ADDRESS = "https://matrix.rhok.space" const FACILITATOR_USERNAME = "@ocrcc-facilitator-demo:rhok.space" const CHATROOM_NAME = "Support Chat" +const ENCRYPTION_CONFIG = { "algorithm": "m.megolm.v1.aes-sha2" }; class ChatBox extends React.Component { @@ -52,26 +53,64 @@ class ChatBox extends React.Component { room_alias_name: `private-support-chat-${uuid()}`, invite: [FACILITATOR_USERNAME], // TODO: create bot user to add visibility: 'private', - name: `${chatDate} - ${CHATROOM_NAME} - started at ${chatTime}` + name: `${chatDate} - ${CHATROOM_NAME} - started at ${chatTime}`, + initial_state: [ + { + type: 'm.room.encryption', + state_key: '', + content: { + algorithm: 'm.megolm.v1.aes-sha2', + }, + }, + + ] }).then(data => { - this.setState({ room_id: data.room_id }) + this.setState({ + room_id: data.room_id, + room_encrypted: this.state.client.isRoomEncrypted(this.state.room_id) + }) + // this.state.client.setRoomEncryption(data.room_id, ENCRYPTION_CONFIG) + }).catch(err => { + console.log("Unable to create room", err) }) } sendMessage = () => { - const content = { - "body": this.state.inputValue, - "msgtype": "m.text" - }; - - this.state.client.sendEvent(this.state.room_id, "m.room.message", content, "").then((res) => { + this.state.client.sendTextMessage(this.state.room_id, this.state.inputValue).then((res) => { this.setState({ inputValue: "" }) this.chatboxInput.current.focus() }).catch((err) => { console.log(err); + Object.keys(err.devices).forEach((userId) => { + Object.keys(err.devices[userId]).map((deviceId) => { + this.state.client.setDeviceKnown(userId, deviceId, true); + }); + this.state.client.sendTextMessage(this.state.room_id, this.state.inputValue) + .then((res) => { + this.setState({ inputValue: "" }) + this.chatboxInput.current.focus() + }) + .catch(err => { + console.log(err) + }); + }); }) } + handleMessageEvent = event => { + const message = { + id: event.getId(), + type: event.getType(), + sender: event.getSender(), + roomId: event.getRoomId(), + content: event.getContent(), + } + + const messages = [...this.state.messages] + messages.push(message) + this.setState({ messages }) + } + componentDidMount() { // empty registration request to get session this.state.client.registerRequest({}).then(data => { @@ -88,7 +127,6 @@ class ChatBox extends React.Component { username: username, x_show_msisdn: true, }).then(data => { - console.log("Registered user", data) // use node localStorage if window.localStorage is not available let localStorage = global.localStorage; @@ -98,8 +136,6 @@ class ChatBox extends React.Component { localStorage = new LocalStorage(localStoragePath); } - console.log("localStorage", localStorage) - // create new client with full options let opts = { baseUrl: MATRIX_SERVER_ADDRESS, @@ -139,11 +175,32 @@ class ChatBox extends React.Component { } }); + this.state.client.on("Room.timeline", (event, room, toStartOfTimeline) => { if (event.getType() === "m.room.message") { - const messages = [...this.state.messages] - messages.push(event) - this.setState({ messages }) + + if (event.status === "sending") { + return; // do nothing + } + + if (event.status === "not sent") { + return console.log("message not sent!", event) + } + + if (event.isEncrypted()) { + return console.log("message encrypted") + } + + console.log("ROOM TIMELINE EVENT", event) + + this.handleMessageEvent(event) + } + }); + + this.state.client.on("Event.decrypted", (event) => { + console.log("EVENT DECRYPTED => ", event) + if (event.getType() === "m.room.message") { + this.handleMessageEvent(event) } }); } @@ -202,7 +259,7 @@ class ChatBox extends React.Component { { messages.map((message, index) => { return( - + ) }) } diff --git a/src/components/message.jsx b/src/components/message.jsx index 55b9dce..651637d 100644 --- a/src/components/message.jsx +++ b/src/components/message.jsx @@ -2,11 +2,11 @@ import React from "react" import PropTypes from "prop-types" const Message = ({ message, user_id }) => { - const fromMe = message.sender.userId === user_id; + const fromMe = message.sender === user_id; return (
-
{ message.event.content.body }
+
{ message.content.body }
) } diff --git a/webpack.config.js b/webpack.config.js index d6bf581..b522b52 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -71,7 +71,8 @@ const defaultConfig = { }, resolve: { extensions: ['*', '.js', '.jsx'], - } + }, + node: { fs: 'empty' } }; module.exports = [{