got encryption working

This commit is contained in:
Sharon Kennedy 2020-02-04 00:43:26 -05:00
parent 1b2703ec80
commit 5cb95e4556
3 changed files with 76 additions and 18 deletions

View File

@ -18,6 +18,7 @@ import Message from "./message";
const MATRIX_SERVER_ADDRESS = "https://matrix.rhok.space" const MATRIX_SERVER_ADDRESS = "https://matrix.rhok.space"
const FACILITATOR_USERNAME = "@ocrcc-facilitator-demo:rhok.space" const FACILITATOR_USERNAME = "@ocrcc-facilitator-demo:rhok.space"
const CHATROOM_NAME = "Support Chat" const CHATROOM_NAME = "Support Chat"
const ENCRYPTION_CONFIG = { "algorithm": "m.megolm.v1.aes-sha2" };
class ChatBox extends React.Component { class ChatBox extends React.Component {
@ -52,26 +53,64 @@ class ChatBox extends React.Component {
room_alias_name: `private-support-chat-${uuid()}`, room_alias_name: `private-support-chat-${uuid()}`,
invite: [FACILITATOR_USERNAME], // TODO: create bot user to add invite: [FACILITATOR_USERNAME], // TODO: create bot user to add
visibility: 'private', 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 => { }).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 = () => { sendMessage = () => {
const content = { this.state.client.sendTextMessage(this.state.room_id, this.state.inputValue).then((res) => {
"body": this.state.inputValue,
"msgtype": "m.text"
};
this.state.client.sendEvent(this.state.room_id, "m.room.message", content, "").then((res) => {
this.setState({ inputValue: "" }) this.setState({ inputValue: "" })
this.chatboxInput.current.focus() this.chatboxInput.current.focus()
}).catch((err) => { }).catch((err) => {
console.log(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() { componentDidMount() {
// empty registration request to get session // empty registration request to get session
this.state.client.registerRequest({}).then(data => { this.state.client.registerRequest({}).then(data => {
@ -88,7 +127,6 @@ class ChatBox extends React.Component {
username: username, username: username,
x_show_msisdn: true, x_show_msisdn: true,
}).then(data => { }).then(data => {
console.log("Registered user", data)
// use node localStorage if window.localStorage is not available // use node localStorage if window.localStorage is not available
let localStorage = global.localStorage; let localStorage = global.localStorage;
@ -98,8 +136,6 @@ class ChatBox extends React.Component {
localStorage = new LocalStorage(localStoragePath); localStorage = new LocalStorage(localStoragePath);
} }
console.log("localStorage", localStorage)
// create new client with full options // create new client with full options
let opts = { let opts = {
baseUrl: MATRIX_SERVER_ADDRESS, baseUrl: MATRIX_SERVER_ADDRESS,
@ -139,11 +175,32 @@ class ChatBox extends React.Component {
} }
}); });
this.state.client.on("Room.timeline", (event, room, toStartOfTimeline) => { this.state.client.on("Room.timeline", (event, room, toStartOfTimeline) => {
if (event.getType() === "m.room.message") { if (event.getType() === "m.room.message") {
const messages = [...this.state.messages]
messages.push(event) if (event.status === "sending") {
this.setState({ messages }) 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) => { messages.map((message, index) => {
return( return(
<Message key={message.event.event_id} message={message} user_id={user_id} /> <Message key={message.id} message={message} user_id={user_id} />
) )
}) })
} }

View File

@ -2,11 +2,11 @@ import React from "react"
import PropTypes from "prop-types" import PropTypes from "prop-types"
const Message = ({ message, user_id }) => { const Message = ({ message, user_id }) => {
const fromMe = message.sender.userId === user_id; const fromMe = message.sender === user_id;
return ( return (
<div className={`message ${fromMe ? "from-me" : "from-support"}`}> <div className={`message ${fromMe ? "from-me" : "from-support"}`}>
<div className="text">{ message.event.content.body }</div> <div className="text">{ message.content.body }</div>
</div> </div>
) )
} }

View File

@ -71,7 +71,8 @@ const defaultConfig = {
}, },
resolve: { resolve: {
extensions: ['*', '.js', '.jsx'], extensions: ['*', '.js', '.jsx'],
} },
node: { fs: 'empty' }
}; };
module.exports = [{ module.exports = [{