From 5391338d7fabe68f676f2e8827a77e54ca42ab3d Mon Sep 17 00:00:00 2001 From: Sharon Kennedy Date: Tue, 4 Feb 2020 01:13:47 -0500 Subject: [PATCH] encryption ui improvements --- src/components/_chat.scss | 6 ++++++ src/components/chatbox.jsx | 44 ++++++++++++++++++++++---------------- src/components/message.jsx | 4 ++-- src/components/widget.scss | 4 ++-- 4 files changed, 35 insertions(+), 23 deletions(-) diff --git a/src/components/_chat.scss b/src/components/_chat.scss index 645d819..6941fa9 100644 --- a/src/components/_chat.scss +++ b/src/components/_chat.scss @@ -18,6 +18,12 @@ overflow: auto; display: flex; flex-direction: column-reverse; + justify-content: space-between; + } + + .notices { + color: $dark-color; + font-size: 0.9rem; } .message { diff --git a/src/components/chatbox.jsx b/src/components/chatbox.jsx index c9802c6..e86697a 100644 --- a/src/components/chatbox.jsx +++ b/src/components/chatbox.jsx @@ -29,8 +29,8 @@ class ChatBox extends React.Component { client: client, ready: false, rooms: { chunk: [] }, - access_token: null, - user_id: null, + accessToken: null, + userId: null, messages: [], inputValue: "", } @@ -38,8 +38,8 @@ class ChatBox extends React.Component { } leaveRoom = () => { - if (this.state.room_id) { - this.state.client.leave(this.state.room_id).then(data => { + if (this.state.roomId) { + this.state.client.leave(this.state.roomId).then(data => { console.log("Left room", data) }) } @@ -58,16 +58,13 @@ class ChatBox extends React.Component { { type: 'm.room.encryption', state_key: '', - content: { - algorithm: 'm.megolm.v1.aes-sha2', - }, + content: ENCRYPTION_CONFIG, }, ] }).then(data => { this.setState({ - room_id: data.room_id, - room_encrypted: this.state.client.isRoomEncrypted(this.state.room_id) + roomId: data.room_id }) // this.state.client.setRoomEncryption(data.room_id, ENCRYPTION_CONFIG) }).catch(err => { @@ -76,8 +73,11 @@ class ChatBox extends React.Component { } sendMessage = () => { - this.state.client.sendTextMessage(this.state.room_id, this.state.inputValue).then((res) => { - this.setState({ inputValue: "" }) + this.state.client.sendTextMessage(this.state.roomId, this.state.inputValue).then((res) => { + this.setState({ + inputValue: "", + isRoomEncrypted: this.state.client.isRoomEncrypted(this.state.roomId) + }) this.chatboxInput.current.focus() }).catch((err) => { console.log(err); @@ -85,9 +85,9 @@ class ChatBox extends React.Component { 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) + this.state.client.sendTextMessage(this.state.roomId, this.state.inputValue) .then((res) => { - this.setState({ inputValue: "" }) + this.setState({ inputValue: "", isRoomEncrypted: this.state.client.isRoomEncrypted(this.state.roomId) }) this.chatboxInput.current.focus() }) .catch(err => { @@ -146,8 +146,8 @@ class ChatBox extends React.Component { } this.setState({ - access_token: data.access_token, - user_id: data.user_id, + accessToken: data.access_token, + userId: data.user_id, username: username, client: matrix.createClient(opts) }, () => { @@ -222,7 +222,7 @@ class ChatBox extends React.Component { e.preventDefault() if (!Boolean(this.state.inputValue)) return null; - if (!this.state.room_id) { + if (!this.state.roomId) { return this.createRoom().then(this.sendMessage) } @@ -230,8 +230,9 @@ class ChatBox extends React.Component { } render() { - const { ready, messages, inputValue, user_id } = this.state; + const { ready, messages, inputValue, userId, isRoomEncrypted } = this.state; const { opened, handleToggleOpen } = this.props; + console.log("isRoomEncrypted", isRoomEncrypted) if (!ready) { return ( @@ -243,7 +244,7 @@ class ChatBox extends React.Component {
- Support Chat + { isRoomEncrypted && 🔒 } Support Chat
+
+ { + isRoomEncrypted &&
Messages in this chat are secured with end-to-end encryption.
+ } +
diff --git a/src/components/message.jsx b/src/components/message.jsx index 651637d..a07894e 100644 --- a/src/components/message.jsx +++ b/src/components/message.jsx @@ -1,8 +1,8 @@ import React from "react" import PropTypes from "prop-types" -const Message = ({ message, user_id }) => { - const fromMe = message.sender === user_id; +const Message = ({ message, userId }) => { + const fromMe = message.sender === userId; return (
diff --git a/src/components/widget.scss b/src/components/widget.scss index 378bc83..f1cfc36 100644 --- a/src/components/widget.scss +++ b/src/components/widget.scss @@ -38,7 +38,7 @@ display: flex; align-items: center; justify-content: space-between; - padding: 0.5rem 1rem; + padding: 0.5rem; width: 400px; max-width: calc(100vw - 10px); background: $theme-color; @@ -77,7 +77,7 @@ &-header { background: $theme-color; color: $white; - padding: 0.5rem 1rem; + padding: 0.5rem; display: flex; align-items: center;