diff --git a/README.md b/README.md index 649d407..1f18f33 100644 --- a/README.md +++ b/README.md @@ -2,18 +2,18 @@ ##A Firebase Javascript Chat Application with Moderation -*(status: in progress, moderation not fully implemented)* +*(status: in progress)* This package provides a simple, scalable Javascript chat application using the REACT framework and [Firebase](https://www.firebase.com/). It currently allows annoymous user login to read/write messages to a common location (chat room). The most recent messages in the chat room are first loaded. -Main TODO: Moderation mode that requires messages to be approved by a trusted moderator. - ## Quick Start Guide This package contains a 'dist' directory which contains the chat widget in index.html (see release zip file). Before opening this page in a web browser, the index.html file should be modified. The Firebase account address must be specified in place of YOURADDR (signup for Firebase is free). The moderator mode can be toggled by setting data-moderatormode to "true" or "false". To use the moderator mode, an email/password must be registered for the given Firebase account. +This widget also allows one to enable a special moderator window so that all messages first go to that window and only show up on the main window if approved. To enable this, set data-moderatorwindow to "true". The moderator window should be "true" or "false" on both moderator and non-moderator windows. + ## Installation and Usage % npm install @@ -35,7 +35,7 @@ This chat application orders messages by timestamp. If there are a lot of messa ## Moderation Mode -To enable moderation mode, set "data-moderationmode" to "true". Currently, moderation mode requires that a email/password has been setup on Firebase for the given reference location. The moderator mode lets the user delete certain posts. TBD: allow messages to pass to the moderator before being public. +To enable moderation mode, set "data-moderationmode" to "true". Currently, moderation mode requires that a email/password has been setup on Firebase for the given reference location. The moderator mode lets the user delete certain posts. ## A Note on Authentication and Permissions @@ -53,7 +53,7 @@ For now, authentication is anonymous or uses a Firebase email/password for the m ## TODO -* Add a moderator mode to accept/reject posts. +* Hide old messages. * Allow component to take a Firebase token for login to allow server side control of user access and moderation. -* Provide a panel to allow moderators to broadcast messages. +* Provide a panel to allow moderators to broadcast messages and polls. * Export chat widget component for reuse in other REACT environments, allow for multiple chat windows. diff --git a/src/application.html b/src/application.html index 4a1a78d..5878f88 100644 --- a/src/application.html +++ b/src/application.html @@ -10,7 +10,7 @@ -
+
diff --git a/src/js/app.js b/src/js/app.js index c629dc0..6f45192 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -10,16 +10,24 @@ var Master = require('./components/ChatWidget.react'); * Renders component just to a DIV with DVIDServiceWidget. */ function loadInterface() { - var fireaddr, ismoderator, + var fireaddr, ismoderator, hasmwindow, element = document.getElementById("firesidechat"); fireaddr = element.getAttribute("data-fireaddr"); + var moderator = element.getAttribute("data-moderatormode"); ismoderator = false; if (moderator == "true") { ismoderator = true; } - React.render(, element); + + var mwindow = element.getAttribute("data-moderatorwindow"); + hasmwindow = false; + if (mwindow == "true") { + hasmwindow = true; + } + + React.render(, element); } // do not render component until diff --git a/src/js/components/ChatWidget.react.js b/src/js/components/ChatWidget.react.js index f36bfab..4ec0991 100644 --- a/src/js/components/ChatWidget.react.js +++ b/src/js/components/ChatWidget.react.js @@ -40,12 +40,18 @@ var ChatWidget = React.createClass({ this.setState({chatRef: chatRef}); }, render: function () { + var mwindow = + if (this.props.hasmwindow && this.props.ismoderator) { + mwindow = + } + if (this.state.userMode) { return (

{this.state.numUsers} users are connected

- + {mwindow} +
); } else { diff --git a/src/js/components/ChatWindow.react.js b/src/js/components/ChatWindow.react.js index a9adb9d..d4793d3 100644 --- a/src/js/components/ChatWindow.react.js +++ b/src/js/components/ChatWindow.react.js @@ -9,14 +9,31 @@ var ChatWindow = React.createClass({ getInitialState: function () { return { messages: [], - loadedAll: false + loadedAll: false, + readfirebase: null, + modfirebase: null } }, componentWillMount: function () { + var readfirebase = this.props.firebase + "/anonymous"; + if (this.props.ismwindow) { + readfirebase = this.props.firebase + "/moderated"; + } + + var modfirebase = this.props.firebase + "/moderated"; + if (this.props.ismwindow || (!(this.props.hasmwindow)) || this.props.ismoderator) { + modfirebase = this.props.firebase + "/anonymous"; + } + + var readfirebaseconn = new Firebase(readfirebase); + var modfirebaseconn = new Firebase(modfirebase); + + this.setState({readfirebase: readfirebaseconn, modfirebase: modfirebaseconn}); + // get initial messages (only grab last few) -- watch for changes // check if child was removed - this.props.firebase.orderByChild("timestamp").limitToLast(InitialLimit).on("child_added", this.updateMsgs); - this.props.firebase.orderByChild("timestamp").limitToLast(InitialLimit).on("child_removed", this.delMsgs); + readfirebaseconn.orderByChild("timestamp").limitToLast(InitialLimit).on("child_added", this.updateMsgs); + readfirebaseconn.orderByChild("timestamp").limitToLast(InitialLimit).on("child_removed", this.delMsgs); }, submitMsg: function () { // grab text and submit with username -- do not explicitly extend messages? @@ -25,7 +42,7 @@ var ChatWindow = React.createClass({ if (value === "") { return; } - this.props.firebase.push({ + this.state.modfirebase.push({ text: value, ismoderator: this.props.ismoderator, timestamp: Firebase.ServerValue.TIMESTAMP, @@ -57,11 +74,11 @@ var ChatWindow = React.createClass({ }, componentWillUnmount: function() { // global deref -- dangerous ?! - this.props.firebase.off() + this.state.readfirebase.off() }, showMore: function () { // show in increments of PageLimit - var query = this.props.firebase.orderByChild("timestamp").endAt(this.state.messages[0].timestamp).limitToLast(PageLimit); + var query = this.state.readfirebase.orderByChild("timestamp").endAt(this.state.messages[0].timestamp).limitToLast(PageLimit); // query older data and prepend to the currently loaded data // only need to call once @@ -90,17 +107,35 @@ var ChatWindow = React.createClass({ }, removeKey: function (delkey) { // get child and delete - this.props.firebase.child(delkey).remove(); + if (this.props.ismwindow) { + this.state.readfirebase.child(delkey).remove(); + } else { + this.state.modfirebase.child(delkey).remove(); + } + }, + acceptMsg: function (val) { + // accept message + this.state.modfirebase.push({ + text: val.text, + ismoderator: val.ismoderator, + timestamp: val.timestamp, // reset timestamp ?? + username: val.username + }); + this.state.readfirebase.child(val.key).remove(); }, render: function () { // render submission box with button - var msgbox = ( -
- - - -
- ); + var msgbox = ; + + if (!this.props.ismwindow) { + var msgbox = ( +
+ + + +
+ ); + } // render text with messages (alternate colors) var messages = this.state.messages.slice().reverse(); var count = 0; @@ -113,7 +148,11 @@ var ChatWindow = React.createClass({
Show More
) } - + + var modstr = ""; + if (this.props.ismwindow) { + modstr = "mod"; + } return (
@@ -128,11 +167,12 @@ var ChatWindow = React.createClass({ color = "White"; } count += 1; - var rowref = "crow"+count.toString(); + var rowref = "crow"+count.toString() + modstr; // moderator mode allows messages to be deleted var that = this; var removeMessage = ; + var acceptMessage = ; var moderatorSym = ; if (val.ismoderator) { @@ -140,13 +180,17 @@ var ChatWindow = React.createClass({ } if (this.props.ismoderator) { - removeMessage = ; + removeMessage = ; + if (this.props.ismwindow) { + acceptMessage = ; + } } return ( {removeMessage} + {acceptMessage} {val.username}{moderatorSym}: {val.text} {timestr}