mirror of
https://github.com/Safe-Support-Chat/ocrcc-chatbox
synced 2024-11-01 00:55:26 +00:00
encryption ui improvements
This commit is contained in:
parent
5cb95e4556
commit
5391338d7f
@ -18,6 +18,12 @@
|
|||||||
overflow: auto;
|
overflow: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notices {
|
||||||
|
color: $dark-color;
|
||||||
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
|
@ -29,8 +29,8 @@ class ChatBox extends React.Component {
|
|||||||
client: client,
|
client: client,
|
||||||
ready: false,
|
ready: false,
|
||||||
rooms: { chunk: [] },
|
rooms: { chunk: [] },
|
||||||
access_token: null,
|
accessToken: null,
|
||||||
user_id: null,
|
userId: null,
|
||||||
messages: [],
|
messages: [],
|
||||||
inputValue: "",
|
inputValue: "",
|
||||||
}
|
}
|
||||||
@ -38,8 +38,8 @@ class ChatBox extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
leaveRoom = () => {
|
leaveRoom = () => {
|
||||||
if (this.state.room_id) {
|
if (this.state.roomId) {
|
||||||
this.state.client.leave(this.state.room_id).then(data => {
|
this.state.client.leave(this.state.roomId).then(data => {
|
||||||
console.log("Left room", data)
|
console.log("Left room", data)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -58,16 +58,13 @@ class ChatBox extends React.Component {
|
|||||||
{
|
{
|
||||||
type: 'm.room.encryption',
|
type: 'm.room.encryption',
|
||||||
state_key: '',
|
state_key: '',
|
||||||
content: {
|
content: ENCRYPTION_CONFIG,
|
||||||
algorithm: 'm.megolm.v1.aes-sha2',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
|
||||||
]
|
]
|
||||||
}).then(data => {
|
}).then(data => {
|
||||||
this.setState({
|
this.setState({
|
||||||
room_id: data.room_id,
|
roomId: data.room_id
|
||||||
room_encrypted: this.state.client.isRoomEncrypted(this.state.room_id)
|
|
||||||
})
|
})
|
||||||
// this.state.client.setRoomEncryption(data.room_id, ENCRYPTION_CONFIG)
|
// this.state.client.setRoomEncryption(data.room_id, ENCRYPTION_CONFIG)
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
@ -76,8 +73,11 @@ class ChatBox extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
sendMessage = () => {
|
sendMessage = () => {
|
||||||
this.state.client.sendTextMessage(this.state.room_id, this.state.inputValue).then((res) => {
|
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()
|
this.chatboxInput.current.focus()
|
||||||
}).catch((err) => {
|
}).catch((err) => {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
@ -85,9 +85,9 @@ class ChatBox extends React.Component {
|
|||||||
Object.keys(err.devices[userId]).map((deviceId) => {
|
Object.keys(err.devices[userId]).map((deviceId) => {
|
||||||
this.state.client.setDeviceKnown(userId, deviceId, true);
|
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) => {
|
.then((res) => {
|
||||||
this.setState({ inputValue: "" })
|
this.setState({ inputValue: "", isRoomEncrypted: this.state.client.isRoomEncrypted(this.state.roomId) })
|
||||||
this.chatboxInput.current.focus()
|
this.chatboxInput.current.focus()
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
@ -146,8 +146,8 @@ class ChatBox extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
access_token: data.access_token,
|
accessToken: data.access_token,
|
||||||
user_id: data.user_id,
|
userId: data.user_id,
|
||||||
username: username,
|
username: username,
|
||||||
client: matrix.createClient(opts)
|
client: matrix.createClient(opts)
|
||||||
}, () => {
|
}, () => {
|
||||||
@ -222,7 +222,7 @@ class ChatBox extends React.Component {
|
|||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
if (!Boolean(this.state.inputValue)) return null;
|
if (!Boolean(this.state.inputValue)) return null;
|
||||||
|
|
||||||
if (!this.state.room_id) {
|
if (!this.state.roomId) {
|
||||||
return this.createRoom().then(this.sendMessage)
|
return this.createRoom().then(this.sendMessage)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -230,8 +230,9 @@ class ChatBox extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { ready, messages, inputValue, user_id } = this.state;
|
const { ready, messages, inputValue, userId, isRoomEncrypted } = this.state;
|
||||||
const { opened, handleToggleOpen } = this.props;
|
const { opened, handleToggleOpen } = this.props;
|
||||||
|
console.log("isRoomEncrypted", isRoomEncrypted)
|
||||||
|
|
||||||
if (!ready) {
|
if (!ready) {
|
||||||
return (
|
return (
|
||||||
@ -243,7 +244,7 @@ class ChatBox extends React.Component {
|
|||||||
<div id="ocrcc-chatbox">
|
<div id="ocrcc-chatbox">
|
||||||
<div className="widget-header">
|
<div className="widget-header">
|
||||||
<div className="widget-header-title">
|
<div className="widget-header-title">
|
||||||
Support Chat
|
{ isRoomEncrypted && <span>🔒</span> } Support Chat
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@ -259,11 +260,16 @@ class ChatBox extends React.Component {
|
|||||||
{
|
{
|
||||||
messages.map((message, index) => {
|
messages.map((message, index) => {
|
||||||
return(
|
return(
|
||||||
<Message key={message.id} message={message} user_id={user_id} />
|
<Message key={message.id} message={message} userId={userId} />
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="notices">
|
||||||
|
{
|
||||||
|
isRoomEncrypted && <div>Messages in this chat are secured with end-to-end encryption.</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="input-window">
|
<div className="input-window">
|
||||||
<form onSubmit={this.handleSubmit}>
|
<form onSubmit={this.handleSubmit}>
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
import React from "react"
|
import React from "react"
|
||||||
import PropTypes from "prop-types"
|
import PropTypes from "prop-types"
|
||||||
|
|
||||||
const Message = ({ message, user_id }) => {
|
const Message = ({ message, userId }) => {
|
||||||
const fromMe = message.sender === user_id;
|
const fromMe = message.sender === userId;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`message ${fromMe ? "from-me" : "from-support"}`}>
|
<div className={`message ${fromMe ? "from-me" : "from-support"}`}>
|
||||||
|
@ -38,7 +38,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.5rem;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
max-width: calc(100vw - 10px);
|
max-width: calc(100vw - 10px);
|
||||||
background: $theme-color;
|
background: $theme-color;
|
||||||
@ -77,7 +77,7 @@
|
|||||||
&-header {
|
&-header {
|
||||||
background: $theme-color;
|
background: $theme-color;
|
||||||
color: $white;
|
color: $white;
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user