encryption ui improvements

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 {

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

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

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;