use config passed in to component instead of hard coded values

This commit is contained in:
Sharon Kennedy 2020-03-05 00:06:24 -05:00
parent 5569c4af63
commit 72ef085122
2 changed files with 109 additions and 79 deletions

View File

@ -12,13 +12,20 @@
<script src="./chatbox.js"></script> <script src="./chatbox.js"></script>
<script> <script>
var config = {
matrixServerUrl: 'https://matrix.rhok.space',
botUsername: '@help-bot:rhok.space',
roomName: 'Support Chat',
termsUrl: 'https://tosdr.org/',
introMessage: 'This chat application does not collect any of your personal data or any data from your use of this service.',
agreementMessage: '👉 Do you want to continue? Type yes or no.',
confirmationMessage: 'Waiting for a facilitator to join the chat...',
exitMessage: 'The chat was not started.',
chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
anonymousDisplayName: 'Anonymous',
}
EmbeddableChatbox.mount({ EmbeddableChatbox.mount(config);
termsUrl: "https://tosdr.org/",
privacyStatement: "This chat application does not collect any of your personal data or any data from your use of this service.",
matrixServerUrl: "https://matrix.rhok.space",
roomName: "Support Chat",
});
</script> </script>
<script> <script>

View File

@ -19,24 +19,25 @@ import Header from "./header";
import './styles.scss'; import './styles.scss';
const DEFAULT_MATRIX_SERVER = "https://matrix.rhok.space"
const DEFAULT_ROOM_NAME = "Support Chat"
const BOT_USERNAME = "@help-bot:rhok.space"
const ENCRYPTION_CONFIG = { "algorithm": "m.megolm.v1.aes-sha2" }; const ENCRYPTION_CONFIG = { "algorithm": "m.megolm.v1.aes-sha2" };
const ENCRYPTION_NOTICE = "Messages in this chat are secured with end-to-end encryption." const ENCRYPTION_NOTICE = "Messages in this chat are secured with end-to-end encryption."
const UNENCRYPTION_NOTICE = "End-to-end message encryption is not available on this browser." const UNENCRYPTION_NOTICE = "End-to-end message encryption is not available on this browser."
const INTRO_MESSAGE = "This chat application does not collect any of your personal data or any data from your use of this service."
const AGREEMENT_MESSAGE = "👉 Do you want to continue? Type yes or no."
const CONFIRMATION_MESSAGE = "Waiting for a facilitator to join the chat..."
const RESTARTING_UNENCRYPTED_CHAT_MESSAGE = "Restarting chat without encryption." const RESTARTING_UNENCRYPTED_CHAT_MESSAGE = "Restarting chat without encryption."
const EXIT_MESSAGE = "The chat was not started."
const FACILITATOR_ROOM_ID = '!pYVVPyFKacZeKZbWyz:rhok.space' const DEFAULT_ROOM_NAME = "Support Chat"
const TERMS_URL="https://tosdr.org/" const DEFAULT_INTRO_MESSAGE = "This chat application does not collect any of your personal data or any data from your use of this service."
const SUPPORT_SEEKER_DISPLAY_NAME="Anonymous" const DEFAULT_AGREEMENT_MESSAGE = "👉 Do you want to continue? Type yes or no."
const MATRIX_ERROR_MESSAGE = "There was an error in the messaging service. Please try again later." const DEFAULT_CONFIRMATION_MESSAGE = "Waiting for a facilitator to join the chat..."
const DEFAULT_EXIT_MESSAGE = "The chat was not started."
const DEFAULT_ANONYMOUS_DISPLAY_NAME="Anonymous"
const DEFAULT_CHAT_UNAVAILABLE_MESSAGE = "The chat service is not available right now. Please try again later."
const initialState = { class ChatBox extends React.Component {
constructor(props) {
super(props)
const client = matrix.createClient(this.props.matrixServerUrl)
this.initialState = {
opened: false, opened: false,
showDock: true, showDock: true,
client: null, client: null,
@ -49,23 +50,23 @@ const initialState = {
{ {
id: 'intro-msg-id', id: 'intro-msg-id',
type: 'm.room.message', type: 'm.room.message',
sender: BOT_USERNAME, sender: this.props.botUsername,
content: { body: INTRO_MESSAGE }, content: { body: this.props.introMessage },
}, },
{ {
id: 'terms-msg-id', id: 'terms-msg-id',
type: 'm.room.message', type: 'm.room.message',
sender: BOT_USERNAME, sender: this.props.botUsername,
content: { content: {
body: `Please read the full terms and conditions at ${TERMS_URL}.`, body: `Please read the full terms and conditions at ${this.props.termsUrl}.`,
formatted_body: `Please read the full <a href="${TERMS_URL}">terms and conditions</a>.` formatted_body: `Please read the full <a href="${this.props.termsUrl}">terms and conditions</a>.`
} }
}, },
{ {
id: 'agreement-msg-id', id: 'agreement-msg-id',
type: 'm.room.message', type: 'm.room.message',
sender: BOT_USERNAME, sender: this.props.botUsername,
content: { body: AGREEMENT_MESSAGE }, }, content: { body: this.props.agreementMessage }, },
], ],
inputValue: "", inputValue: "",
errors: [], errors: [],
@ -74,12 +75,7 @@ const initialState = {
awaitingAgreement: true, awaitingAgreement: true,
awaitingFacilitator: false, awaitingFacilitator: false,
} }
this.state = this.initialState
class ChatBox extends React.Component {
constructor(props) {
super(props)
const client = matrix.createClient(this.props.matrixServerUrl)
this.state = initialState
this.chatboxInput = React.createRef(); this.chatboxInput = React.createRef();
this.messageWindow = React.createRef(); this.messageWindow = React.createRef();
} }
@ -111,7 +107,7 @@ class ChatBox extends React.Component {
if (this.state.client) { if (this.state.client) {
this.exitChat() this.exitChat()
} else { } else {
this.setState(initialState) this.setState(this.initialState)
} }
} }
@ -121,8 +117,6 @@ class ChatBox extends React.Component {
.then(() => { .then(() => {
const auth = { const auth = {
type: 'm.login.password', type: 'm.login.password',
// TODO: Remove `user` once servers support proper UIA
// See https://github.com/vector-im/riot-web/issues/10312
user: this.state.userId, user: this.state.userId,
identifier: { identifier: {
type: "m.id.user", type: "m.id.user",
@ -136,14 +130,21 @@ class ChatBox extends React.Component {
.then(() => this.state.client.clearStores()) .then(() => this.state.client.clearStores())
.then(() => { .then(() => {
this.state.localStorage.clear() this.state.localStorage.clear()
this.setState(initialState) this.setState(this.initialState)
}) })
} }
initializeChat = () => { initializeChat = () => {
// empty registration request to get session // empty registration request to get session
this.setState({ ready: false }) this.setState({ ready: false })
let client = matrix.createClient(this.props.matrixServerUrl) let client;
try {
client = matrix.createClient(this.props.matrixServerUrl)
} catch {
return this.handleInitError()
}
return client.registerRequest({}) return client.registerRequest({})
.then(data => { .then(data => {
console.log("Empty registration request to get session", data) console.log("Empty registration request to get session", data)
@ -187,22 +188,23 @@ class ChatBox extends React.Component {
userId: data.user_id, userId: data.user_id,
deviceId: data.device_id, deviceId: data.device_id,
sessionStore: new matrix.WebStorageSessionStore(localStorage), sessionStore: new matrix.WebStorageSessionStore(localStorage),
displayName: this.props.anonymousDisplayName,
} }
client = matrix.createClient(opts) client = matrix.createClient(opts)
client.setDisplayName(SUPPORT_SEEKER_DISPLAY_NAME)
}) })
.catch(err => { .catch(err => {
console.log("Registration error", err) this.handleInitError()
}) })
.then(() => client.initCrypto()) .then(() => client.initCrypto())
.catch(err => this.initializeUnencryptedChat())
.then(() => client.startClient()) .then(() => client.startClient())
.then(() => { .then(() => {
this.setState({ this.setState({
client: client client: client
}) })
}) })
.catch(err => this.initializeUnencryptedChat()) .catch(err => this.handleInitError())
}) })
} }
@ -213,11 +215,16 @@ class ChatBox extends React.Component {
baseUrl: this.props.matrixServerUrl, baseUrl: this.props.matrixServerUrl,
accessToken: this.state.accessToken, accessToken: this.state.accessToken,
userId: this.state.userId, userId: this.state.userId,
deviceId: this.state.deviceId deviceId: this.state.deviceId,
displayName: this.props.anonymousDisplayName,
} }
let client = matrix.createClient(opts) let client;
client.setDisplayName(SUPPORT_SEEKER_DISPLAY_NAME) try {
client = matrix.createClient(opts)
} catch {
return this.handleInitError()
}
return client.startClient() return client.startClient()
.then(() => { .then(() => {
this.setState({ this.setState({
@ -225,6 +232,12 @@ class ChatBox extends React.Component {
isCryptoEnabled: false, isCryptoEnabled: false,
}) })
}) })
.catch(err => this.handleInitError())
}
handleInitError = () => {
this.displayBotMessage({ body: this.props.chatUnavailableMessage })
this.setState({ ready: true })
} }
handleDecryptionError = () => { handleDecryptionError = () => {
@ -242,7 +255,6 @@ class ChatBox extends React.Component {
let memberkeys = await this.state.client.downloadKeys(members); let memberkeys = await this.state.client.downloadKeys(members);
for (const userId in memberkeys) { for (const userId in memberkeys) {
for (const deviceId in memberkeys[userId]) { for (const deviceId in memberkeys[userId]) {
console.log("verifying device", `${userId} - ${deviceId}`)
await this.state.client.setDeviceVerified(userId, deviceId); await this.state.client.setDeviceVerified(userId, deviceId);
} }
} }
@ -254,9 +266,9 @@ class ChatBox extends React.Component {
const chatTime = currentDate.toLocaleTimeString() const chatTime = currentDate.toLocaleTimeString()
let roomConfig = { let roomConfig = {
room_alias_name: `private-support-chat-${uuid()}`, room_alias_name: `private-support-chat-${uuid()}`,
invite: [BOT_USERNAME], invite: [this.props.botUsername],
visibility: 'private', visibility: 'private',
name: `${chatDate} - ${this.props.roomName} - started at ${chatTime}`, name: `${chatTime}, ${chatDate} - ${this.props.roomName}`,
} }
const isCryptoEnabled = await this.state.client.isCryptoEnabled() const isCryptoEnabled = await this.state.client.isCryptoEnabled()
@ -273,7 +285,7 @@ class ChatBox extends React.Component {
const { room_id } = await this.state.client.createRoom(roomConfig) const { room_id } = await this.state.client.createRoom(roomConfig)
this.state.client.setPowerLevel(room_id, BOT_USERNAME, 100) this.state.client.setPowerLevel(room_id, this.props.botUsername, 100)
if (isCryptoEnabled) { if (isCryptoEnabled) {
this.verifyAllRoomDevices(room_id) this.verifyAllRoomDevices(room_id)
@ -281,7 +293,7 @@ class ChatBox extends React.Component {
this.displayBotMessage({ body: UNENCRYPTION_NOTICE }) this.displayBotMessage({ body: UNENCRYPTION_NOTICE })
} }
this.displayBotMessage({ body: CONFIRMATION_MESSAGE }) this.displayBotMessage({ body: this.props.confirmationMessage })
this.setState({ this.setState({
roomId: room_id, roomId: room_id,
@ -330,7 +342,7 @@ class ChatBox extends React.Component {
const msg = { const msg = {
id: uuid(), id: uuid(),
type: 'm.room.message', type: 'm.room.message',
sender: BOT_USERNAME, sender: this.props.botUsername,
roomId: roomId || this.state.roomId, roomId: roomId || this.state.roomId,
content: content, content: content,
} }
@ -443,7 +455,7 @@ class ChatBox extends React.Component {
} else { } else {
this.displayFakeMessage({ body: this.state.inputValue }, 'from-me') this.displayFakeMessage({ body: this.state.inputValue }, 'from-me')
this.displayBotMessage({ body: EXIT_MESSAGE }) this.displayBotMessage({ body: this.props.exitMessage })
return this.setState({ inputValue: "" }) return this.setState({ inputValue: "" })
} }
} }
@ -471,7 +483,7 @@ class ChatBox extends React.Component {
{ {
messages.map((message, index) => { messages.map((message, index) => {
return( return(
<Message key={message.id} message={message} userId={userId} botId={BOT_USERNAME} /> <Message key={message.id} message={message} userId={userId} botId={this.props.botUsername} />
) )
}) })
} }
@ -513,14 +525,25 @@ class ChatBox extends React.Component {
ChatBox.propTypes = { ChatBox.propTypes = {
matrixServerUrl: PropTypes.string.isRequired, matrixServerUrl: PropTypes.string.isRequired,
roomName: PropTypes.string.isRequired, botUsername: PropTypes.string.isRequired,
termsUrl: PropTypes.string, termsUrl: PropTypes.string.isRequired,
privacyStatement: PropTypes.string, introMessage: PropTypes.string.isRequired,
roomName: PropTypes.string,
agreementMessage: PropTypes.string,
confirmationMessage: PropTypes.string,
exitMessage: PropTypes.string,
chatUnavailableMessage: PropTypes.string,
anonymousDisplayName: PropTypes.string,
} }
ChatBox.defaultProps = { ChatBox.defaultProps = {
matrixServerUrl: DEFAULT_MATRIX_SERVER,
roomName: DEFAULT_ROOM_NAME, roomName: DEFAULT_ROOM_NAME,
introMessage: DEFAULT_INTRO_MESSAGE,
agreementMessage: DEFAULT_AGREEMENT_MESSAGE,
confirmationMessage: DEFAULT_CONFIRMATION_MESSAGE,
exitMessage: DEFAULT_EXIT_MESSAGE,
anonymousDisplayName: DEFAULT_ANONYMOUS_DISPLAY_NAME,
chatUnavailableMessage: DEFAULT_CHAT_UNAVAILABLE_MESSAGE,
} }
export default ChatBox; export default ChatBox;