encryption ui improvements

This commit is contained in:
Sharon Kennedy 2020-02-04 01:13:47 -05:00
parent 5cb95e4556
commit 5391338d7f
4 changed files with 35 additions and 23 deletions

View File

@ -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 {

View File

@ -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 {
<div id="ocrcc-chatbox">
<div className="widget-header">
<div className="widget-header-title">
Support Chat
{ isRoomEncrypted && <span>🔒</span> } Support Chat
</div>
<button
type="button"
@ -259,11 +260,16 @@ class ChatBox extends React.Component {
{
messages.map((message, index) => {
return(
<Message key={message.id} message={message} user_id={user_id} />
<Message key={message.id} message={message} userId={userId} />
)
})
}
</div>
<div className="notices">
{
isRoomEncrypted && <div>Messages in this chat are secured with end-to-end encryption.</div>
}
</div>
</div>
<div className="input-window">
<form onSubmit={this.handleSubmit}>

View File

@ -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 (
<div className={`message ${fromMe ? "from-me" : "from-support"}`}>

View File

@ -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;