Skip to content

Commit

Permalink
Merge pull request #22 from intern0t/implementing-encryption
Browse files Browse the repository at this point in the history 
Added encryption, a message is first sent to the server & marked emitted.
  • Loading branch information
@intern0t
intern0t committed Jan 11, 2019
2 parents bfb58b5 + 55d80db commit f46056d
Show file tree
Hide file tree
Showing 3 changed files with 315 additions and 117 deletions.
144 changes: 128 additions & 16 deletions src/components/Brightbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,12 @@ import { ConversationConsumer } from "../contexts/ConversationProvider";

class Brightbar extends Component {
state = {
filterBy: ""
filterBy: "",
newRoomInfo: {
note: "",
key: "",
keyVisible: false
}
};

onFilterChange = e => {
Expand All @@ -34,6 +39,53 @@ class Brightbar extends Component {
}
};

onAddNewRoom = e => {
e.preventDefault();
const { newRoomInfo } = this.state;
const { generatedRoomID, addNewRoom } = this.context;
console.log(newRoomInfo);
if (
generatedRoomID &&
newRoomInfo.note &&
newRoomInfo.key &&
newRoomInfo.note.length > 0 &&
newRoomInfo.key.length > 0
) {
let newRoom = {
note: newRoomInfo.note,
key: newRoomInfo.key
};
addNewRoom(newRoom);
this.setState(prevState => ({
...prevState,
newRoomInfo: { ...prevState.newRoomInfo, note: "", key: "" }
}));
}
};

onFieldsChange = e => {
let changedField = e.target || undefined;
if (changedField && changedField.value && changedField.name) {
this.setState(prevState => ({
...prevState,
newRoomInfo: {
...prevState.newRoomInfo,
[changedField.name]: changedField.value
}
}));
}
};

keyVisibilityHandle = () => {
this.setState(prevState => ({
...prevState,
newRoomInfo: {
...prevState.newRoomInfo,
keyVisible: !prevState.newRoomInfo.keyVisible
}
}));
};

render() {
return (
<AppConsumer>
Expand Down Expand Up @@ -96,11 +148,28 @@ class Brightbar extends Component {
}}
>
<AddNewConversation
roomKey={
this.state.newRoomInfo.key
}
roomNote={
this.state.newRoomInfo.note
}
close={
toggleNewConversationModal
}
generate={generateRoomID}
generated={generatedRoomID}
onAddNewRoom={this.onAddNewRoom}
keyIsVisible={
this.state.newRoomInfo
.keyVisible
}
onKeyVisibilityHandle={
this.keyVisibilityHandle
}
onFieldsChange={
this.onFieldsChange
}
/>
</Modal>
</div>
Expand Down Expand Up @@ -177,7 +246,17 @@ const ConversationEntry = ({ room, messages, activeRoomID, nickname }) => {
);
};

const AddNewConversation = ({ close, generate, generated }) => {
const AddNewConversation = ({
roomKey,
roomNote,
close,
generate,
generated,
onAddNewRoom,
onFieldsChange,
keyIsVisible,
onKeyVisibilityHandle
}) => {
return (
<div
className="modal-container"
Expand All @@ -198,59 +277,92 @@ const AddNewConversation = ({ close, generate, generated }) => {
>
<div>
<div>
<label htmlFor="private-key">Room ID</label>
<label htmlFor="note">Note</label>
</div>
<div>
<input
type="text"
name="private-key"
className="text-input"
placeholder="Generated Room ID for your room."
value={generated}
readOnly
name="note"
placeholder="To easily identify this room."
onChange={onFieldsChange}
value={roomNote}
/>
<Icon
icon="fas fa-sync"
onClick={generate}
icon="fas fa-undo"
onClick={onKeyVisibilityHandle}
style={{
cursor: "pointer",
margin: "0 10px",
color: "#0092FF"
}}
title={"Clear note field."}
/>
</div>
</div>
<div>
<div>
<label htmlFor="room-identifier">Note</label>
<label htmlFor="roomid">Room ID</label>
</div>
<div>
<input
type="text"
name="roomid"
className="text-input"
name="room-identifier"
placeholder="To better identify this room."
placeholder="Generated Room ID for your room."
value={generated}
readOnly
/>
<Icon
icon="fas fa-sync"
onClick={generate}
style={{
cursor: "pointer",
margin: "0 10px",
color: "#0092FF"
}}
title="Generate a new room ID."
/>
</div>
</div>
<div>
<div>
<label htmlFor="private-key">Private Key</label>
<label htmlFor="key">Private Key</label>
</div>
<div>
<input
type="password"
type={`${keyIsVisible ? "text" : "password"}`}
className="text-input"
name="private-key"
name="key"
placeholder="Used to encrypt and decrypt messages."
onChange={onFieldsChange}
value={roomKey}
/>
<Icon
icon={`fas fa-eye${keyIsVisible ? "-slash" : ""}`}
onClick={onKeyVisibilityHandle}
style={{
cursor: "pointer",
margin: "0 10px",
color: "#0092FF"
}}
title={`Click to ${
keyIsVisible ? "hide" : "reveal"
} your key.`}
/>
</div>
</div>
<div className="buttons-wrapper">
<button className="button" onClick={close}>
Close
</button>
<button className="button inform">Update</button>
<button
className="button inform"
type="submit"
onClick={onAddNewRoom}
>
Add Room
</button>
</div>
</form>
</div>
Expand Down
44 changes: 38 additions & 6 deletions src/components/pages/Conversation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import aes from "crypto-js/aes";
class Conversation extends Component {
state = {
message: "",
conversationSettingsModalDisplayed: false
conversationSettingsModalDisplayed: false,
keyIsVisible: false
};

componentDidMount() {
Expand Down Expand Up @@ -77,7 +78,7 @@ class Conversation extends Component {
room => room.rid === activeRoomID
)[0];
let cipherText = aes.encrypt(message, currentRoom.key);
console.log(cipherText.toString());
console.log(cipherText.toString(), currentRoom.key);

let newMessageEntry = {
date: Math.floor(Date.now() / 1000),
Expand All @@ -95,6 +96,13 @@ class Conversation extends Component {
this.scrollToBottom();
};

onKeyVisibilityHandle = e => {
this.setState(prevState => ({
...prevState,
keyIsVisible: !prevState.keyIsVisible
}));
};

render() {
let otherUser = "Anonymous";
return (
Expand All @@ -106,7 +114,8 @@ class Conversation extends Component {
nickname,
leaveRoom,
setNickname,
setKey
setKey,
veil
}) => {
let theRoom = rooms.filter(
room => room.rid === activeRoomID
Expand Down Expand Up @@ -139,7 +148,7 @@ class Conversation extends Component {
: otherUser}
<Tip
updated={true}
color="#82D455"
color={veil.connected ? '#82D455' : '#FF4E00'}
title={"Online"}
/>
<span style={{ fontSize: "11px" }}>
Expand Down Expand Up @@ -230,6 +239,10 @@ class Conversation extends Component {
currentRoom={theRoom[0]}
setNickname={setNickname}
setKey={setKey}
keyIsVisible={this.state.keyIsVisible}
onKeyVisibilityHandle={
this.onKeyVisibilityHandle
}
/>
</Modal>
) : null}
Expand Down Expand Up @@ -273,7 +286,9 @@ const ConversationSettings = ({
close,
leaveRoom,
setNickname,
setKey
setKey,
keyIsVisible,
onKeyVisibilityHandle
}) => {
return (
<div className="modal-container">
Expand Down Expand Up @@ -337,7 +352,7 @@ const ConversationSettings = ({
</div>
<div>
<input
type="password"
type={`${keyIsVisible ? "text" : "password"}`}
className="text-input"
name="private-key"
placeholder="Used to encrypt and decrypt messages."
Expand All @@ -346,6 +361,23 @@ const ConversationSettings = ({
? setKey(e.target.value)
: null;
}}
defaultValue={
currentRoom && currentRoom.key
? currentRoom.key
: ""
}
/>
<Icon
icon={`fas fa-eye${keyIsVisible ? "-slash" : ""}`}
onClick={onKeyVisibilityHandle}
style={{
cursor: "pointer",
margin: "0 10px",
color: "#0092FF"
}}
title={`Click to ${
keyIsVisible ? "hide" : "reveal"
} your key.`}
/>
</div>
</div>
Expand Down

0 comments on commit f46056d

Please sign in to comment.