mirror of
https://github.com/Safe-Support-Chat/ocrcc-chatbox
synced 2024-11-22 10:44:54 +00:00
encryption ui improvements
This commit is contained in:
parent
5cb95e4556
commit
5391338d7f
@ -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 {
|
||||
|
@ -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}>
|
||||
|
@ -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"}`}>
|
||||
|
@ -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;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user