diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 66ae8ade8..72c75ce27 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,9 +1,10 @@ # Contributor's Guide -Welcome! We are very excited that you are interested in contributing to Talk. +Welcome! We are very excited that you are interested in contributing to Talk. This document is a companion to help you approach contributing. If it does not do so, please [let us know how we can improve it](https://github.com/coralproject/talk/issues)! +By contributing to this project you agree to the [Code of Conduct](https://coralproject.net/code-of-conduct.html). ## Product Roadmap @@ -13,7 +14,7 @@ You can view product ideas and our longer term roadmap here https://trello.com/b ## Contribute to the documentation -Clear docs are a prerequisite for a successful open source project. We value non-code and code contributions equally. +Clear docs are a prerequisite for a successful open source project. We value non-code and code contributions equally. We are looking for _documentarians_ to: @@ -40,7 +41,7 @@ Talk is designed to integrate into existing environments in a variety of ways: If you're considering deploying Talk, [please let us know](https://github.com/coralproject/talk/wiki/Contact-Us)! We are quite literally doing this for you and want to help you succeed any way we can. -If you are writing custom integration code in your fork of Talk, please consider keeping it generic and filing a Pull Request to contribute it back to the project! See our [forking and merging guidelines](https://github.com/coralproject/talk/wiki/Forking,-Branching-and-Merging) for more info. +If you are writing custom integration code in your fork of Talk, please consider keeping it generic and filing a Pull Request to contribute it back to the project! See our [forking and merging guidelines](https://github.com/coralproject/talk/wiki/Forking,-Branching-and-Merging) for more info. ## Write some code @@ -48,9 +49,9 @@ First, [set up a dev environment](https://github.com/coralproject/talk/blob/mast ### Build a New Feature / Plugin -Talk is beginning life as a Commenting Platform, but is architected to support many varieties of community engagement. +Talk is beginning life as a Commenting Platform, but is architected to support many varieties of community engagement. -Please [contact us](https://github.com/coralproject/talk/wiki/Contact-Us) early and often if you'd like to help. We would love to hear your ideas for features and plugins and help you find a way to productively engage the project. +Please [contact us](https://github.com/coralproject/talk/wiki/Contact-Us) early and often if you'd like to help. We would love to hear your ideas for features and plugins and help you find a way to productively engage the project. To get an idea of where the Coral Team is going, see: @@ -66,13 +67,10 @@ Examples: ### Work on the Core -There is always more work to be done to make an application more stable, scaleable and secure. +There is always more work to be done to make an application more stable, scaleable and secure. If you see issues in the code or have ideas on how we may improve Talk, please consider: * [contributing a fix](https://github.com/coralproject/talk/wiki/Forking,-Branching-and-Merging), * [filing an issue](https://github.com/coralproject/talk/issues), or * or otherwise [letting us know](https://github.com/coralproject/talk/wiki/Contact-Us). - - - diff --git a/INSTALL.md b/INSTALL.md index f5f82f294..008c4cba3 100644 --- a/INSTALL.md +++ b/INSTALL.md @@ -1,95 +1,94 @@ -# Installing a dev environment - -By contributing to this project you agree to the [Code of Conduct](https://coralproject.net/code-of-conduct.html). +# Installation ## Requirements ### System -- Any flavor of Linux, OSX or Windows +- Any flavour of Linux, OSX or Windows - 1GB memory (minimum) - 5GB storage (minimum) -### Software +## Installation From Source -* [Node](https://nodejs.org/es/download/package-manager) v7 or later -* Mongo v3.2 or later -* Redis v3.2 or later +### Requirements + +There are some runtime requirements for running Talk from source: + +- [Node](https://nodejs.org/) v7 or later +- [MongoDB](https://www.mongodb.com/) v3.2 or later +- [Redis](https://redis.io/) v3.2 or later +- [Yarn](https://yarnpkg.com/) v0.19.1 or later _Please be sure to check the versions of these requirements. Insufficient versions of these may lead to unexpected errors!_ -## First time setup +### Installing -### Installation +```bash +# Download the tarball containing the repository +curl -L https://github.com/coralproject/talk/tarball/master -o coralproject-talk.tar.gz -Navigate to a directory. +# Untar that file and change to that directory +tar xpf coralproject-talk.tar.gz +mv coralproject-talk-* coralproject-talk +cd coralproject-talk -``` -git clone https://github.com/coralproject/talk -cd talk -yarn install -``` +# Install package dependancies +yarn -### Environmental Variables - -Talk uses environmental variables for configuration. You can learn about them in the [README file](README.md). - - -## Workflows - -### The server - -Starting the server: - -``` -yarn start -``` - -Browse to `http://localhost:3000` (or your custom port.) - -### Building the front end - -Our build process will build all front end components registered [here](https://github.com/coralproject/talk/blob/6052cac1d3494f8060325a88bb2ce03c88c2f94c/webpack.config.dev.js#L9-L15). - -One time build: - -``` +# Build static files yarn build ``` -Build, then rebuild when a file is updated (development build): +### Running -``` -yarn build-watch +Refer to the `README.md` file for required configuration variables to add to the +environment. + +You can start the server after configuring the server using the command: + +```bash +yarn start ``` +You can see other scripts we've made available by consulting the `package.json` +file under the `scripts` key including: -### Testing +- `yarn test` run unit tests +- `yarn e2e` run end to end tests +- `yarn build-watch` watch for changes to client files and build static assets +- `yarn dev-start` watch for changes to server files and reload the server -Run all tests once: +## Installation From Docker Hub -` -yarn test -` +### Requirements -Run our end to end tests (will install Selenium and nightwatch): +There are some runtime requirements for running Talk for Docker: -` -yarn e2e -` +- [MongoDB](https://www.mongodb.com/) v3.2 or later +- [Redis](https://redis.io/) v3.2 or later +- [Docker](https://www.docker.com/) v1.13.0 or later +- [Docker Compose](https://docs.docker.com/compose/) v1.10.0 or later -_Please ensure all tests are passing before submitting a PR!_ +_Please be sure to check the versions of these requirements. Insufficient versions of these may lead to unexpected errors!_ -## Troubleshooting +### Installing +```bash +# Create a directory for talk +mkdir coralproject-talk +cd coralproject-talk -##### Can't ping the redis server! +# Download the docker-compose.yml file from the repository +curl -LO https://raw.githubusercontent.com/coralproject/talk/master/docker-compose.yml +``` -- Check that Redis Server is running. -- Check that TALK_REDIS_URL is set. - -##### Authenticaiton doesn't work! - -- Make sure Redis is the correct version. +At this stage, you should refer to the `README.md` file for required +configuration variables to add to the environment key for the `talk` service +listed in the `docker-compose.yml` file. +### Running +```bash +# Start the services using compose +docker-compose up -d +``` diff --git a/README.md b/README.md index 79c523925..f47fbd2f6 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Talk [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk) -A commenting platform from [The Coral Project](https://coralproject.net). +A commenting platform from [The Coral Project](https://coralproject.net). Talk enters a closed beta in March 2017, but you can download the code for our alpha here. [Read more about Talk here.](https://coralproject.net/products/talk.html) ## Contributing to Talk @@ -12,7 +12,7 @@ See our [Contribution Guide](https://github.com/coralproject/talk/blob/master/CO To set up a development environment or build from source, see [INSTALL.md](https://github.com/coralproject/talk/blob/master/INSTALL.md). -To launch a Talk server of your own from your browser without any need to muck about in a terminal or think about engineering concepts, stay tuned. We will launch [our installer](https://github.com/coralproject/talk-install) shortly!! +To launch a Talk server of your own from your browser without any need to muck about in a terminal or think about engineering concepts, stay tuned. We will launch [our installer](https://github.com/coralproject/talk-install) shortly! ### Configuration @@ -37,6 +37,7 @@ Facebook Login enabled app. - `TALK_SMTP_PASSWORD` (*required for email*) - password for the SMTP provider you are using. - `TALK_SMTP_HOST` (*required for email*) - SMTP host url with format `smtp.domain.com`. - `TALK_SMTP_PORT` (*required for email*) - SMTP port. +- `TALK_INSTALL_LOCK` (_optional for dynamic setup_) - Defaults to `FALSE`. When `TRUE`, disables the dynamic setup endpoint. Refer to the wiki page on [Configuration Loading](https://github.com/coralproject/talk/wiki/Configuration-Loading) for alternative methods of loading configuration during development. diff --git a/bin/cli b/bin/cli index 5b52d96b9..c0690e455 100755 --- a/bin/cli +++ b/bin/cli @@ -4,7 +4,7 @@ * Module dependencies. */ -const util = require('../util'); +// const util = require('./util'); const program = require('./commander'); program @@ -15,18 +15,14 @@ program .command('users', 'work with the application auth') .parse(process.argv); -// If there is no command listed, output help. -if (!process.argv.slice(2).length) { - program.outputHelp(); - return; -} - -// The ensures that the child process that is created here is always cleaned up -// properly when the parent process dies. -util.onshutdown([ - (signal) => { - if ((program.runningCommand.killed === false) && (program.runningCommand.exitCode === null)) { - program.runningCommand.kill(signal); - } +/** + * When this provess exists, check to see if we have a running command, if we do + * check to see if it is still running. If it is, then kill it with a SIGINT + * signal. This is for the use case where we want to kill the process that is + * labled with the PID written out by the parent process. + */ +process.once('exit', () => { + if ((program.runningCommand.killed === false) && (program.runningCommand.exitCode === null)) { + program.runningCommand.kill('SIGINT'); } -]); +}); diff --git a/bin/cli-assets b/bin/cli-assets index 76ca5735b..166152baf 100755 --- a/bin/cli-assets +++ b/bin/cli-assets @@ -10,7 +10,7 @@ const Table = require('cli-table'); const AssetModel = require('../models/asset'); const mongoose = require('../services/mongoose'); const scraper = require('../services/scraper'); -const util = require('../util'); +const util = require('./util'); // Register the shutdown criteria. util.onshutdown([ diff --git a/bin/cli-jobs b/bin/cli-jobs index 4d348fabb..f22e1068b 100755 --- a/bin/cli-jobs +++ b/bin/cli-jobs @@ -7,7 +7,7 @@ const program = require('./commander'); const scraper = require('../services/scraper'); const mailer = require('../services/mailer'); -const util = require('../util'); +const util = require('./util'); const mongoose = require('../services/mongoose'); const kue = require('../services/kue'); diff --git a/bin/cli-serve b/bin/cli-serve index 0427dcf34..08b451904 100755 --- a/bin/cli-serve +++ b/bin/cli-serve @@ -2,13 +2,12 @@ const app = require('../app'); const program = require('./commander'); -const debug = require('debug')('talk:server'); const http = require('http'); const scraper = require('../services/scraper'); const mailer = require('../services/mailer'); const kue = require('../services/kue'); const mongoose = require('../services/mongoose'); -const util = require('../util'); +const util = require('./util'); /** * Get port from environment and store in Express. @@ -79,7 +78,7 @@ function onListening() { let bind = typeof addr === 'string' ? `pipe ${ addr}` : `port ${ addr.port}`; - debug(`Listening on ${ bind}`); + console.log(`Listening on ${ bind}`); } /** diff --git a/bin/cli-setup b/bin/cli-setup index eaa2b90b1..185b04f01 100755 --- a/bin/cli-setup +++ b/bin/cli-setup @@ -9,7 +9,10 @@ const inquirer = require('inquirer'); const mongoose = require('../services/mongoose'); const SettingModel = require('../models/setting'); const SettingsService = require('../services/settings'); -const util = require('../util'); +const SetupService = require('../services/setup'); +const UsersService = require('../services/users'); +const util = require('./util'); +const errors = require('../errors'); // Register the shutdown criteria. util.onshutdown([ @@ -29,60 +32,165 @@ program // Setup the application //============================================================================== -SettingsService - .init() - .then((settings) => { - if (program.defaults) { - return settings.save(); - } +const performSetup = () => { - console.log('We\'ll ask you some questions in order to setup your installation of Talk.\n'); - - return inquirer.prompt([ - { - type: 'input', - name: 'organizationName', - message: 'Organization Name', - default: settings.organizationName, - validate: (input) => { - if (input && input.length > 0) { - return true; - } - - return 'Organization Name is required.'; - } - }, - { - type: 'list', - choices: SettingModel.MODERATION_OPTIONS, - name: 'moderation', - default: settings.moderation, - message: 'Select a moderation mode' - }, - { - type: 'confirm', - name: 'requireEmailConfirmation', - default: settings.requireEmailConfirmation, - message: 'Should emails always be confirmed' - } - ]) - .then((answers) => { - - // Update the settings that were changed. - Object.keys(answers).forEach((key) => { - if (answers[key] !== undefined) { - settings[key] = answers[key]; - } + if (program.defaults) { + return SettingsService + .init() + .then(() => { + console.log('Settings created.'); + console.log('\nTalk is now installed!'); + util.shutdown(); + }) + .catch((err) => { + console.error(err); + util.shutdown(1); }); + } - return settings.save(); + // Get the current settings, we are expecing an error here. + return SettingsService + .retrieve() + .then(() => { + + // We should NOT have gotten a settings object, this means that the + // application is already setup. Error out here. + throw errors.ErrSettingsInit; + + }) + .catch((err) => { + + // If the error is `not init`, then we're good, otherwise, it's something + // else. + if (err !== errors.ErrSettingsNotInit) { + throw err; + } + + }) + .then(() => { + + // Create the base settings model. + let settings = new SettingModel(); + + console.log('We\'ll ask you some questions in order to setup your installation of Talk.\n'); + + return inquirer.prompt([ + { + type: 'input', + name: 'organizationName', + message: 'Organization Name', + default: settings.organizationName, + validate: (input) => { + if (input && input.length > 0) { + return true; + } + + return 'Organization Name is required.'; + } + }, + { + type: 'list', + choices: SettingModel.MODERATION_OPTIONS, + name: 'moderation', + default: settings.moderation, + message: 'Select a moderation mode' + }, + { + type: 'confirm', + name: 'requireEmailConfirmation', + default: settings.requireEmailConfirmation, + message: 'Should emails always be confirmed' + } + ]) + .then((answers) => { + + // Update the settings that were changed. + Object.keys(answers).forEach((key) => { + if (answers[key] !== undefined) { + settings[key] = answers[key]; + } + }); + + console.log('\nWe\'ll ask you some questions about your first admin user.\n'); + + return inquirer.prompt([ + { + type: 'input', + name: 'displayName', + message: 'Display Name', + filter: (displayName) => { + return UsersService + .isValidDisplayName(displayName, false) + .catch((err) => { + throw err.message; + }); + } + }, + { + name: 'email', + message: 'Email', + format: 'email', + validate: (value) => { + if (value && value.length >= 3) { + return true; + } + + return 'Email is required'; + } + }, + { + name: 'password', + message: 'Password', + type: 'password', + filter: (password) => { + return UsersService + .isValidPassword(password) + .catch((err) => { + throw err.message; + }); + } + }, + { + name: 'confirmPassword', + message: 'Confirm Password', + type: 'password', + filter: (confirmPassword) => { + return UsersService + .isValidPassword(confirmPassword) + .catch((err) => { + throw err.message; + }); + } + }, + ]); + }) + .then((user) => { + + if (user.password !== user.confirmPassword) { + return Promise.reject(new Error('Passwords do not match')); + } + + return SetupService.setup({ + settings: settings.toObject(), + user: { + email: user.email, + displayName: user.displayName, + password: user.password + } + }); + }); + }) + .then(({user}) => { + console.log('Settings created.'); + console.log(`User ${user.id} created.`); + console.log('\nTalk is now installed!'); + util.shutdown(); + }) + .catch((err) => { + console.error(err); + util.shutdown(1); }); - }) - .then(() => { - console.log('Talk is now installed!'); - util.shutdown(); - }) - .catch((err) => { - console.error(err); - util.shutdown(1); - }); +}; + +// Start tthe setup process. +performSetup(); diff --git a/bin/cli-users b/bin/cli-users index 072a143ee..01f46ad2e 100755 --- a/bin/cli-users +++ b/bin/cli-users @@ -9,7 +9,7 @@ const inquirer = require('inquirer'); const UsersService = require('../services/users'); const UserModel = require('../models/user'); const mongoose = require('../services/mongoose'); -const util = require('../util'); +const util = require('./util'); const Table = require('cli-table'); const validateRequired = (msg = 'Field is required', len = 1) => (input) => { diff --git a/bin/commander.js b/bin/commander.js index 2a3d1e363..ad346a911 100644 --- a/bin/commander.js +++ b/bin/commander.js @@ -2,7 +2,6 @@ const pkg = require('../package.json'); const dotenv = require('dotenv'); const fs = require('fs'); const program = require('commander'); -const util = require('../util'); // Perform rewrites to the runtime environment variables based on the contents // of the process.env.REWRITE_ENV if it exists. This is done here as it is the @@ -27,6 +26,10 @@ const parseArgs = require('minimist')(process.argv.slice(2), { } }); +/** + * If the config flag is present, then we have to load the configuration from + * the file specified. We will then load those values into the environment. + */ if (parseArgs.config) { let envConfig = dotenv.parse(fs.readFileSync(parseArgs.config, {encoding: 'utf8'})); @@ -35,8 +38,15 @@ if (parseArgs.config) { }); } -// If the `--pid` flag is used, put the current pid there. +/** + * If the pid flag is present, then we have to create a pid file at the location + * specified. + */ if (parseArgs.pid) { + const util = require('./util'); + + console.log('Wrote PID'); + util.pid(parseArgs.pid); } diff --git a/util.js b/bin/util.js similarity index 100% rename from util.js rename to bin/util.js diff --git a/circle.yml b/circle.yml index f9ac9ea41..bae929df7 100644 --- a/circle.yml +++ b/circle.yml @@ -35,7 +35,7 @@ test: deployment: release: - tag: /[0-9]+(\.[0-9]+)*/ + tag: /v[0-9]+(\.[0-9]+)*/ commands: - bash ./scripts/deploy.sh diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js index 9c0f271cc..bebe6a19b 100644 --- a/client/coral-admin/src/AppRouter.js +++ b/client/coral-admin/src/AppRouter.js @@ -7,15 +7,19 @@ import Configure from 'containers/Configure/Configure'; import Streams from 'containers/Streams/Streams'; import CommunityContainer from 'containers/Community/CommunityContainer'; import LayoutContainer from 'containers/LayoutContainer'; +import InstallContainer from 'containers/Install/InstallContainer'; const routes = ( - - - - - - - +
+ + + + + + + + +
); const AppRouter = () => ; diff --git a/client/coral-admin/src/actions/comments.js b/client/coral-admin/src/actions/comments.js index 3c1437de7..ac7af12fd 100644 --- a/client/coral-admin/src/actions/comments.js +++ b/client/coral-admin/src/actions/comments.js @@ -15,7 +15,7 @@ export const fetchModerationQueueComments = () => { return Promise.all([ coralApi('/queue/comments/premod'), - coralApi('/queue/users/pending'), + coralApi('/queue/users/flagged'), coralApi('/queue/comments/rejected'), coralApi('/queue/comments/flagged') ]) @@ -46,7 +46,7 @@ export const fetchPendingUsersQueue = () => { return dispatch => { dispatch({type: commentTypes.COMMENTS_MODERATION_QUEUE_FETCH_REQUEST}); - return coralApi('/queue/users/pending') + return coralApi('/queue/users/flagged') .then(addUsersCommentsActions.bind(this, dispatch)); }; }; diff --git a/client/coral-admin/src/actions/install.js b/client/coral-admin/src/actions/install.js new file mode 100644 index 000000000..a74a1929f --- /dev/null +++ b/client/coral-admin/src/actions/install.js @@ -0,0 +1,109 @@ +import coralApi from 'coral-framework/helpers/response'; +import * as actions from '../constants/install'; +import validate from 'coral-framework/helpers/validate'; +import errorMsj from 'coral-framework/helpers/error'; + +export const nextStep = () => ({type: actions.NEXT_STEP}); +export const previousStep = () => ({type: actions.PREVIOUS_STEP}); +export const goToStep = step => ({type: actions.GO_TO_STEP, step}); + +const installRequest = () => ({type: actions.INSTALL_REQUEST}); +const installSuccess = () => ({type: actions.INSTALL_SUCCESS}); +const installFailure = error => ({type: actions.INSTALL_FAILURE, error}); + +const addError = (name, error) => ({type: actions.ADD_ERROR, name, error}); +const hasError = error => ({type: actions.HAS_ERROR, error}); +const clearErrors = () => ({type: actions.CLEAR_ERRORS}); + +const validation = (formData, dispatch, next) => { + if (!(formData != null)) { + return dispatch(hasError()); + } + + // Required Validation + const empty = Object.keys(formData).filter(name => { + const cond = !formData[name].length; + + if (cond) { + + // Adding Error + dispatch(addError(name, 'This field is required.')); + } else { + dispatch(addError(name, '')); + } + + return cond; + }); + + if (empty.length) { + return dispatch(hasError()); + } + + // RegExp Validation + const validation = Object.keys(formData).filter(name => { + const cond = !validate[name](formData[name]); + if (cond) { + + // Adding Error + dispatch(addError(name, errorMsj[name])); + } else { + dispatch(addError(name, '')); + } + + return cond; + }); + + if (validation.length) { + return dispatch(hasError()); + } + + dispatch(clearErrors()); + next(); +}; + +export const submitSettings = () => (dispatch, getState) => { + const settingsFormData = getState().install.toJS().data.settings; + validation(settingsFormData, dispatch, function() { + dispatch(nextStep()); + }); +}; + +export const submitUser = () => (dispatch, getState) => { + const userFormData = getState().install.toJS().data.user; + validation(userFormData, dispatch, function() { + const data = getState().install.toJS().data; + dispatch(installRequest()); + coralApi('/setup', {method: 'POST', body: data}) + .then(result => { + console.log(result); + dispatch(installSuccess()); + dispatch(nextStep()); + }) + .catch(error => { + console.error(error); + dispatch(installFailure(`${error.message}`)); + }); + }); +}; + +export const updateSettingsFormData = (name, value) => ({type: actions.UPDATE_FORMDATA_SETTINGS, name, value}); +export const updateUserFormData = (name, value) => ({type: actions.UPDATE_FORMDATA_USER, name, value}); + +const checkInstallRequest = () => ({type: actions.CHECK_INSTALL_REQUEST}); +const checkInstallSuccess = installed => ({type: actions.CHECK_INSTALL_SUCCESS, installed}); +const checkInstallFailure = error => ({type: actions.CHECK_INSTALL_FAILURE, error}); + +export const checkInstall = next => dispatch => { + dispatch(checkInstallRequest()); + coralApi('/setup') + .then(({installed}) => { + dispatch(checkInstallSuccess(installed)); + if (installed) { + next(); + } + }) + .catch(error => { + console.error(error); + dispatch(checkInstallFailure(`${error.message}`)); + }); +}; diff --git a/client/coral-admin/src/actions/users.js b/client/coral-admin/src/actions/users.js index 44f0325d9..954d89820 100644 --- a/client/coral-admin/src/actions/users.js +++ b/client/coral-admin/src/actions/users.js @@ -21,3 +21,11 @@ export const sendNotificationEmail = (userId, subject, body) => { .catch(error => dispatch({type: userTypes.USER_EMAIL_FAILURE, error})); }; }; + +// let a user edit their username +export const enableUsernameEdit = (userId) => { + return (dispatch) => { + return coralApi(`/users/${userId}/username-enable`, {method: 'POST'}) + .catch(error => dispatch({type: userTypes.USERNAME_ENABLE_FAILURE, error})); + }; +}; diff --git a/client/coral-admin/src/components/ModerationList.js b/client/coral-admin/src/components/ModerationList.js index c1df40d31..47e91e551 100644 --- a/client/coral-admin/src/components/ModerationList.js +++ b/client/coral-admin/src/components/ModerationList.js @@ -3,7 +3,7 @@ import styles from './ModerationList.css'; import key from 'keymaster'; import Hammer from 'hammerjs'; import Comment from './Comment'; -import UserAction from './UserAction'; +import User from './User'; import SuspendUserModal from './SuspendUserModal'; // Each action has different meaning and configuration @@ -138,7 +138,7 @@ export default class ModerationList extends React.Component { if (menuOption === 'REJECTED') { this.setState({suspendUserModal: action}); } else if (menuOption === 'ACCEPTED') { - this.props.userStatusUpdate('ACTIVE', action.item_id); + this.props.userStatusUpdate('APPROVED', action.item_id); } } } @@ -177,7 +177,7 @@ export default class ModerationList extends React.Component { // If the item is an action... const user = users[item.item_id]; - modItem = user && { +const User = props => { const {action, user} = props; let userStatus = user.status; - const links = user.settings.bio ? linkify.getMatches(user.settings.bio) : []; // Do not display unless the user status is 'pending' or 'banned'. // This means that they have already been reviewed and approved. @@ -27,8 +21,6 @@ const UserAction = props => { {user.displayName}
- {links ? - Contains Link : null}
{props.modActions.map( (action, i) => @@ -48,32 +40,12 @@ const UserAction = props => { {lang.t('comment.banned_user')} : null}
- { - user.settings.bio && -
-
-
{lang.t('user.user_bio')}:
- - - - - -
-
- }
{`${action.count} ${action.action_type === 'flag_bio' ? lang.t('user.bio_flags') : lang.t('user.username_flags')}`}
; }; -export default UserAction; - -const linkStyles = { - backgroundColor: 'rgb(255, 219, 135)', - padding: '1px 2px' -}; +export default User; const lang = new I18n(translations); diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js index 4e2b391c8..3e6598d6e 100644 --- a/client/coral-admin/src/components/ui/Header.js +++ b/client/coral-admin/src/components/ui/Header.js @@ -6,34 +6,49 @@ import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../../translations.json'; import {Logo} from './Logo'; -export default ({handleLogout}) => ( +export default ({handleLogout, restricted = false}) => (
- - {lang.t('configure.moderate')} - {lang.t('configure.community')} - {lang.t('configure.configure')} + { + !restricted ? +
+ + + {lang.t('configure.moderate')} + + + {lang.t('configure.community')} + + + {lang.t('configure.configure')} + {lang.t('configure.streams')} - -
-
    -
  • -
    - - - Sign Out - -
    -
    • -
  • - {`v${process.env.VERSION}`} -
    • -
-
+ activeClassName={styles.active}> + {lang.t('configure.streams')} + + +
+
    +
  • +
    + + + Sign Out + +
    +
    • +
  • + {`v${process.env.VERSION}`} +
    • +
+
+
+ : + null + }
); diff --git a/client/coral-admin/src/constants/install.js b/client/coral-admin/src/constants/install.js new file mode 100644 index 000000000..b3fd7e0d0 --- /dev/null +++ b/client/coral-admin/src/constants/install.js @@ -0,0 +1,16 @@ +export const NEXT_STEP = 'NEXT_STEP'; +export const GO_TO_STEP = 'GO_TO_STEP'; +export const PREVIOUS_STEP = 'PREVIOUS_STEP'; +export const ADD_ERROR = 'ADD_ERROR'; +export const HAS_ERROR = 'HAS_ERROR'; +export const SHOW_ERRORS = 'SHOW_ERRORS'; +export const CLEAR_ERRORS = 'CLEAR_ERRORS'; +export const INSTALL_REQUEST = 'INSTALL_REQUEST'; +export const INSTALL_SUCCESS = 'INSTALL_SUCCESS'; +export const INSTALL_FAILURE = 'INSTALL_FAILURE'; +export const UPDATE_FORMDATA_USER = 'UPDATE_FORMDATA_USER'; +export const UPDATE_FORMDATA_SETTINGS = 'UPDATE_FORMDATA_SETTINGS'; + +export const CHECK_INSTALL_REQUEST = 'CHECK_INSTALL_REQUEST'; +export const CHECK_INSTALL_SUCCESS = 'CHECK_INSTALL_SUCCESS'; +export const CHECK_INSTALL_FAILURE = 'CHECK_INSTALL_FAILURE'; diff --git a/client/coral-admin/src/constants/users.js b/client/coral-admin/src/constants/users.js index 3cd5e5b4b..9cd7e2093 100644 --- a/client/coral-admin/src/constants/users.js +++ b/client/coral-admin/src/constants/users.js @@ -2,4 +2,5 @@ export const UPDATE_STATUS_REQUEST = 'UPDATE_STATUS_REQUEST'; export const UPDATE_STATUS_SUCCESS = 'UPDATE_STATUS_SUCCESS'; export const UPDATE_STATUS_FAILURE = 'UPDATE_STATUS_FAILURE'; export const USER_EMAIL_FAILURE = 'USER_EMAIL_FAILURE'; +export const USERNAME_ENABLE_FAILURE = 'USERNAME_ENABLE_FAILURE'; export const USERS_MODERATION_QUEUE_FETCH_SUCCESS = 'USERS_MODERATION_QUEUE_FETCH_SUCCESS'; diff --git a/client/coral-admin/src/containers/Configure/EmbedLink.js b/client/coral-admin/src/containers/Configure/EmbedLink.js index 105b531c5..413f421d7 100644 --- a/client/coral-admin/src/containers/Configure/EmbedLink.js +++ b/client/coral-admin/src/containers/Configure/EmbedLink.js @@ -25,8 +25,24 @@ class EmbedLink extends Component { } render () { - const embedText = `
`; - + const location = window.location; + const talkBaseUrl = [ + location.protocol, + '//', + location.hostname, + location.port ? (`:${ window.location.port}`) : '' + ].join(''); + const coralJsUrl = [talkBaseUrl, '/embed.js'].join(''); + const nonce = String(Math.random()).slice(2); + const streamElementId = `coral_talk_${nonce}`; + const embedText = ` +
+ + `.trim(); return (

{this.props.title}

diff --git a/client/coral-admin/src/containers/Install/InstallContainer.js b/client/coral-admin/src/containers/Install/InstallContainer.js new file mode 100644 index 000000000..7a8634180 --- /dev/null +++ b/client/coral-admin/src/containers/Install/InstallContainer.js @@ -0,0 +1,93 @@ +import React, {Component} from 'react'; +import {connect} from 'react-redux'; +import styles from './style.css'; +import {Wizard, WizardNav} from 'coral-ui'; +import {Layout} from '../../components/ui/Layout'; + +import { + nextStep, + previousStep, + goToStep, + updateUserFormData, + updateSettingsFormData, + submitSettings, + submitUser, + checkInstall +} from '../../actions/install'; + +import InitialStep from './components/Steps/InitialStep'; +import AddOrganizationName from './components/Steps/AddOrganizationName'; +import CreateYourAccount from './components/Steps/CreateYourAccount'; +import FinalStep from './components/Steps/FinalStep'; + +class InstallContainer extends Component { + componentDidMount() { + const {checkInstall} = this.props; + checkInstall(() => { + this.context.router.push('/admin'); + }); + } + + render() { + const {install} = this.props; + + return ( + +
+ { + !install.alreadyInstalled ? ( +
+

Welcome to the Coral Project

+ { install.step !== 0 ? : null } + + + + + + +
+ ) : ( +
Talk is already installed
+ ) + } +
+ + ); + } +} + +InstallContainer.contextTypes = { + router: React.PropTypes.object +}; + +const mapStateToProps = state => ({ + install: state.install.toJS() +}); + +const mapDispatchToProps = dispatch => ({ + checkInstall: next => dispatch(checkInstall(next)), + nextStep: () => dispatch(nextStep()), + previousStep: () => dispatch(previousStep()), + goToStep: step => dispatch(goToStep(step)), + handleSettingsChange: e => { + const {name, value} = e.currentTarget; + dispatch(updateSettingsFormData(name, value)); + }, + handleUserChange: e => { + const {name, value} = e.currentTarget; + dispatch(updateUserFormData(name, value)); + }, + handleSettingsSubmit: e => { + e.preventDefault(); + dispatch(submitSettings()); + }, + handleUserSubmit: e => { + e.preventDefault(); + dispatch(submitUser()); + } +}); + +export default connect( + mapStateToProps, + mapDispatchToProps +)(InstallContainer); diff --git a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js new file mode 100644 index 000000000..0f85bbad4 --- /dev/null +++ b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js @@ -0,0 +1,30 @@ +import React from 'react'; +import styles from './style.css'; +import {FormField, Button} from 'coral-ui'; + +const AddOrganizationName = props => { + const {handleSettingsChange, handleSettingsSubmit, install} = props; + return ( +
+

+ Please tell us the name of your organization. This will appear in emails when + inviting new team members +

+
+
+ + + +
+
+ ); +}; + +export default AddOrganizationName; diff --git a/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js b/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js new file mode 100644 index 000000000..91c664c37 --- /dev/null +++ b/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js @@ -0,0 +1,65 @@ +import React from 'react'; +import styles from './style.css'; +import {FormField, Button, Spinner} from 'coral-ui'; + +const InitialStep = props => { + const {handleUserChange, handleUserSubmit, install} = props; + return ( +
+
+
+ + + + + + + + + { + !props.install.isLoading ? + + : + + } + {props.install.installRequest === 'FAILURE' &&
Error: {props.install.installRequestError}
} + +
+
+ ); +}; + +export default InitialStep; diff --git a/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js b/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js new file mode 100644 index 000000000..e549ebe63 --- /dev/null +++ b/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js @@ -0,0 +1,20 @@ +import React from 'react'; +import styles from './style.css'; +import {Button} from 'coral-ui'; +import {Link} from 'react-router'; + +const InitialStep = () => { + return ( +
+

+ Thanks for installing Talk! We sent an email to verify your email + address. While you finish setting the account, you can start engaging + with your readers now. +

+ + +
+ ); +}; + +export default InitialStep; diff --git a/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js new file mode 100644 index 000000000..9f9770fe9 --- /dev/null +++ b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js @@ -0,0 +1,19 @@ +import React from 'react'; +import styles from './style.css'; +import {Button} from 'coral-ui'; + +const InitialStep = props => { + const {nextStep} = props; + return ( +
+

+ The remainder of the Talk installation will take about ten minutes. + Once you complete the following two steps, you will have a free + installation and provision of Mongo and Redis. +

+ +
+ ); +}; + +export default InitialStep; diff --git a/client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js b/client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js new file mode 100644 index 000000000..156916ab0 --- /dev/null +++ b/client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js @@ -0,0 +1,44 @@ +import React from 'react'; +import styles from './style.css'; +import {Button, Select, Option, FormField} from 'coral-ui'; + +const InviteTeamMembers = props => { + const {nextStep} = props; + return ( +
+

Invite Team Members

+

+ Once registered, new team members will receive an email to Create + their password. +

+
+
+ + + + + +
+ + +
+ + + +
+
+ ); +}; + +export default InviteTeamMembers; diff --git a/client/coral-admin/src/containers/Install/components/Steps/style.css b/client/coral-admin/src/containers/Install/components/Steps/style.css new file mode 100644 index 000000000..161c72685 --- /dev/null +++ b/client/coral-admin/src/containers/Install/components/Steps/style.css @@ -0,0 +1,77 @@ +.step { + padding: 20px 0; + + h3 { + max-width: 450px; + margin: 0 auto; + text-align: left; + font-size: 1.4em; + font-weight: bold; + } + + p { + max-width: 450px; + margin: 0 auto 30px; + font-size: 1.1em; + text-align: left; + } + + > button { + min-width: 145px; + a { + text-decoration: none; + color: inherit; + } + } + + .form { + max-width: 300px; + margin: 30px auto; + text-align: left; + + form > button { + margin: 30px 0; + } + + .formField { + text-align: left; + + label { + text-align: left; + display: block; + margin: 10px 0; + font-weight: 400; + font-size: 1.08em; + } + + > input { + border: solid 1px rgba(0, 0, 0, 0.23); + padding: 10px; + border-radius: 3px; + width: 100%; + box-sizing: border-box; + transition: border-color 0.2s ease; + font-size: 1em; + + &:focus { + border-color: black; + } + } + } + } +} + +.finalStep { + button { + width: 225px; + margin-right: 10px; + } +} + +.error { + background: #FFEBEE; + color: #B71C1C; + padding: 10px; + margin-bottom: 20px; + border-radius: 2px; +} diff --git a/client/coral-admin/src/containers/Install/style.css b/client/coral-admin/src/containers/Install/style.css new file mode 100644 index 000000000..62f7ffe04 --- /dev/null +++ b/client/coral-admin/src/containers/Install/style.css @@ -0,0 +1,12 @@ +.Install { + max-width: 900px; + margin: 0 auto; + text-align: center; + padding: 50px 0; + + h2 { + font-size: 2em; + font-weight: 500; + margin: 0; + } +} diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index 074d071e5..cd1a3e59f 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -1,7 +1,9 @@ -import React from 'react'; +import React, {Component} from 'react'; import key from 'keymaster'; import {connect} from 'react-redux'; import {compose} from 'react-apollo'; +import {Spinner} from 'coral-ui'; +import {withRouter} from 'react-router'; import {modQueueQuery} from '../../graphql/queries'; @@ -20,8 +22,9 @@ import {userStatusUpdate, sendNotificationEmail} from 'actions/users'; import {setActiveTab, toggleModal, singleView} from 'actions/moderation'; import ModerationQueue from './ModerationQueue'; +import ModerationQueueHeader from './components/ModerationQueueHeader'; -class ModerationContainer extends React.Component { +class ModerationContainer extends Component { componentWillMount() { const {toggleModal, singleView} = this.props; @@ -43,16 +46,6 @@ class ModerationContainer extends React.Component { onTabClick = (activeTab) => { const {setActiveTab} = this.props; setActiveTab(activeTab); - - if (activeTab === 'premod') { - this.props.fetchPremodQueue(); - } else if (activeTab === 'rejected') { - this.props.fetchRejectedQueue(); - } else if (activeTab === 'flagged') { - this.props.fetchFlaggedQueue(); - } else { - this.props.fetchModerationQueueComments(); - } } onClose = () => { @@ -61,40 +54,32 @@ class ModerationContainer extends React.Component { } render () { - const {comments, actions, settings, moderation} = this.props; + const {data, moderation} = this.props; - // Remove all this filters - const premodIds = comments.ids.filter(id => comments.byId[id].status === 'PREMOD'); - const rejectedIds = comments.ids.filter(id => comments.byId[id].status === 'REJECTED'); - const flaggedIds = comments.ids.filter(id => - comments.byId[id].flagged === true && - comments.byId[id].status !== 'REJECTED' && - comments.byId[id].status !== 'ACCEPTED' - ); - const userActionIds = actions.ids.filter(id => actions.byId[id].item_type === 'USERS'); - - // show the Pre-Mod tab if premod is enabled globally OR there are pre-mod comments in the db. - let enablePremodTab = (settings.settings && settings.settings.moderation === 'PRE') || premodIds.length; + if (data.loading) { + return
; + } return ( - +
+ + +
); } } -ModerationContainer.contextTypes = { - router: React.PropTypes.func.isRequired -}; +// ModerationContainer.contextTypes = { +// router: React.PropTypes.func.isRequired +// }; const mapStateToProps = state => ({ moderation: state.moderation.toJS(), @@ -120,13 +105,14 @@ const mapDispatchToProps = dispatch => ({ dispatch(fetchModerationQueueComments()); }), suspendUser: (userId, subject, text) => dispatch(userStatusUpdate('suspended', userId)) - .then(() => dispatch(sendNotificationEmail(userId, subject, text))) - .then(() => dispatch(fetchModerationQueueComments())) + .then(() => dispatch(sendNotificationEmail(userId, subject, text))) + .then(() => dispatch(fetchModerationQueueComments())) , updateStatus: (action, comment) => dispatch(updateStatus(action, comment)) }); export default compose( connect(mapStateToProps, mapDispatchToProps), + withRouter, modQueueQuery )(ModerationContainer); diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainerOld.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainerOld.js new file mode 100644 index 000000000..50e45124d --- /dev/null +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainerOld.js @@ -0,0 +1,132 @@ +import React from 'react'; +import key from 'keymaster'; +import {connect} from 'react-redux'; +import {compose} from 'react-apollo'; + +import {modQueueQuery} from '../../graphql/queries'; + +import { + updateStatus, + showBanUserDialog, + hideBanUserDialog, + fetchPremodQueue, + fetchRejectedQueue, + fetchFlaggedQueue, + fetchModerationQueueComments, +} from 'actions/comments'; + +import {fetchSettings} from 'actions/settings'; +import {userStatusUpdate, sendNotificationEmail} from 'actions/users'; +import {setActiveTab, toggleModal, singleView} from 'actions/moderation'; + +import ModerationQueue from './ModerationQueue'; + +class ModerationContainer extends React.Component { + + componentWillMount() { + const {toggleModal, singleView} = this.props; + + this.props.fetchModerationQueueComments(); + this.props.fetchSettings(); + + key('s', () => singleView()); + key('shift+/', () => toggleModal(true)); + key('esc', () => toggleModal(false)); + } + + componentWillUnmount() { + key.unbind('s'); + key.unbind('shift+/'); + key.unbind('esc'); + } + + onTabClick = (activeTab) => { + const {setActiveTab} = this.props; + setActiveTab(activeTab); + + if (activeTab === 'premod') { + this.props.fetchPremodQueue(); + } else if (activeTab === 'rejected') { + this.props.fetchRejectedQueue(); + } else if (activeTab === 'flagged') { + this.props.fetchFlaggedQueue(); + } else { + this.props.fetchModerationQueueComments(); + } + } + + onClose = () => { + const {toggleModal} = this.props; + toggleModal(false); + } + + render () { + const {comments, actions, settings, moderation} = this.props; + + // Remove all this filters + const premodIds = comments.ids.filter(id => comments.byId[id].status === 'PREMOD'); + const rejectedIds = comments.ids.filter(id => comments.byId[id].status === 'REJECTED'); + const flaggedIds = comments.ids.filter(id => + comments.byId[id].flagged === true && + comments.byId[id].status !== 'REJECTED' && + comments.byId[id].status !== 'ACCEPTED' + ); + const userActionIds = actions.ids.filter(id => actions.byId[id].item_type === 'USERS'); + + // show the Pre-Mod tab if premod is enabled globally OR there are pre-mod comments in the db. + let enablePremodTab = (settings.settings && settings.settings.moderation === 'PRE') || premodIds.length; + + return ( + + ); + } +} + +ModerationContainer.contextTypes = { + router: React.PropTypes.func.isRequired +}; + +const mapStateToProps = state => ({ + moderation: state.moderation.toJS(), + comments: state.comments.toJS(), + settings: state.settings.toJS(), + users: state.users.toJS(), + actions: state.actions.toJS() +}); + +const mapDispatchToProps = dispatch => ({ + setActiveTab: tab => dispatch(setActiveTab(tab)), + toggleModal: open => dispatch(toggleModal(open)), + singleView: () => dispatch(singleView()), + + fetchSettings: () => dispatch(fetchSettings()), + fetchModerationQueueComments: () => dispatch(fetchModerationQueueComments()), + fetchPremodQueue: () => dispatch(fetchPremodQueue()), + fetchRejectedQueue: () => dispatch(fetchRejectedQueue()), + fetchFlaggedQueue: () => dispatch(fetchFlaggedQueue()), + showBanUserDialog: (userId, userName, commentId) => dispatch(showBanUserDialog(userId, userName, commentId)), + hideBanUserDialog: () => dispatch(hideBanUserDialog(false)), + userStatusUpdate: (status, userId, commentId) => dispatch(userStatusUpdate(status, userId, commentId)).then(() => { + dispatch(fetchModerationQueueComments()); + }), + suspendUser: (userId, subject, text) => dispatch(userStatusUpdate('suspended', userId)) + .then(() => dispatch(sendNotificationEmail(userId, subject, text))) + .then(() => dispatch(fetchModerationQueueComments())) + , + updateStatus: (action, comment) => dispatch(updateStatus(action, comment)) +}); + +export default compose( + connect(mapStateToProps, mapDispatchToProps), + modQueueQuery +)(ModerationContainer); diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js index 09b02daed..961642e84 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js @@ -1,212 +1,22 @@ -import React, {PropTypes} from 'react'; -import styles from './ModerationQueue.css'; +import React from 'react'; -import ModerationKeysModal from 'components/ModerationKeysModal'; -import ModerationList from 'components/ModerationList'; -import BanUserDialog from 'components/BanUserDialog'; +// import Comment from '../../components/Comment'; -import I18n from 'coral-framework/modules/i18n/i18n'; -import translations from '../../translations.json'; - -const lang = new I18n(translations); - -const ModerationQueue = (props) => ( -
-
-
- { - e.preventDefault(); - props.onTabClick('all'); - }} - className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'all' ? styles.active : ''}`} - > - {lang.t('modqueue.all')} - - { - props.enablePremodTab - ? { - e.preventDefault(); - props.onTabClick('premod'); - }} - className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'premod' ? styles.active : ''}`}> - {lang.t('modqueue.premod')} - - : null - } - { - e.preventDefault(); - props.onTabClick('account'); - }} - className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'account' ? styles.active : ''}`}> - {lang.t('modqueue.account')} - - { - e.preventDefault(); - props.onTabClick('rejected'); - }} - className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'rejected' ? styles.active : ''}`} - > - {lang.t('modqueue.rejected')} - - { - e.preventDefault(); - props.onTabClick('flagged'); - }} - className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'flagged' ? styles.active : ''}`} - > - {lang.t('modqueue.flagged')} - -
-
- { - props.activeTab === 'all' && -
- - -
- } -
+export default (props) => { + return ( +
+ {/* */} { - props.enablePremodTab - ?
- { - props.activeTab === 'premod' && -
- - -
- } -
- : null + props.data[props.activeTab].map((comment, i) => +
+ {comment.body} +
+ ) } - -
- { - props.activeTab === 'account' && -
- - -
- } -
-
- { - props.activeTab === 'flagged' && -
- - -
- } -
-
- { - props.activeTab === 'rejected' && -
- - -
- } -
- -
-
-); - -ModerationQueue.propTypes = { - enablePremodTab: PropTypes.bool.isRequired + ); }; - -export default ModerationQueue; diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueueOld.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueueOld.js new file mode 100644 index 000000000..09b02daed --- /dev/null +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueueOld.js @@ -0,0 +1,212 @@ +import React, {PropTypes} from 'react'; +import styles from './ModerationQueue.css'; + +import ModerationKeysModal from 'components/ModerationKeysModal'; +import ModerationList from 'components/ModerationList'; +import BanUserDialog from 'components/BanUserDialog'; + +import I18n from 'coral-framework/modules/i18n/i18n'; +import translations from '../../translations.json'; + +const lang = new I18n(translations); + +const ModerationQueue = (props) => ( +
+
+
+ { + e.preventDefault(); + props.onTabClick('all'); + }} + className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'all' ? styles.active : ''}`} + > + {lang.t('modqueue.all')} + + { + props.enablePremodTab + ? { + e.preventDefault(); + props.onTabClick('premod'); + }} + className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'premod' ? styles.active : ''}`}> + {lang.t('modqueue.premod')} + + : null + } + { + e.preventDefault(); + props.onTabClick('account'); + }} + className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'account' ? styles.active : ''}`}> + {lang.t('modqueue.account')} + + { + e.preventDefault(); + props.onTabClick('rejected'); + }} + className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'rejected' ? styles.active : ''}`} + > + {lang.t('modqueue.rejected')} + + { + e.preventDefault(); + props.onTabClick('flagged'); + }} + className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'flagged' ? styles.active : ''}`} + > + {lang.t('modqueue.flagged')} + +
+
+ { + props.activeTab === 'all' && +
+ + +
+ } +
+ { + props.enablePremodTab + ?
+ { + props.activeTab === 'premod' && +
+ + +
+ } +
+ : null + } + +
+ { + props.activeTab === 'account' && +
+ + +
+ } +
+
+ { + props.activeTab === 'flagged' && +
+ + +
+ } +
+
+ { + props.activeTab === 'rejected' && +
+ + +
+ } +
+ + +
+
+); + +ModerationQueue.propTypes = { + enablePremodTab: PropTypes.bool.isRequired +}; + +export default ModerationQueue; diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationQueueHeader.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationQueueHeader.js new file mode 100644 index 000000000..01fe2e98b --- /dev/null +++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationQueueHeader.js @@ -0,0 +1,62 @@ +import React from 'react'; +import styles from '../ModerationQueue.css'; +import I18n from 'coral-framework/modules/i18n/i18n'; +import translations from '../../../translations.json'; + +const lang = new I18n(translations); + +const ModerationQueueHeader = (props) => ( +
+
+ { + e.preventDefault(); + props.onTabClick('all'); + }} + className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'all' ? styles.active : ''}`} + > + {lang.t('modqueue.all')} + + { + props.enablePremodTab + ? { + e.preventDefault(); + props.onTabClick('premod'); + }} + className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'premod' ? styles.active : ''}`}> + {lang.t('modqueue.premod')} + + : null + } + { + e.preventDefault(); + props.onTabClick('account'); + }} + className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'account' ? styles.active : ''}`}> + {lang.t('modqueue.account')} + + { + e.preventDefault(); + props.onTabClick('rejected'); + }} + className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'rejected' ? styles.active : ''}`} + > + {lang.t('modqueue.rejected')} + + { + e.preventDefault(); + props.onTabClick('flagged'); + }} + className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'flagged' ? styles.active : ''}`} + > + {lang.t('modqueue.flagged')} + +
+
+); + +export default ModerationQueueHeader; diff --git a/client/coral-admin/src/graphql/fragments/commentView.graphql b/client/coral-admin/src/graphql/fragments/commentView.graphql new file mode 100644 index 000000000..29f9b3bfe --- /dev/null +++ b/client/coral-admin/src/graphql/fragments/commentView.graphql @@ -0,0 +1,18 @@ +fragment commentView on Comment { + id + body + created_at + status + user { + id + name: displayName + } + actions { + type: action_type + count + current: current_user { + id + created_at + } + } +} diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js index 20cf1af8f..0a3de5bbc 100644 --- a/client/coral-admin/src/graphql/queries/index.js +++ b/client/coral-admin/src/graphql/queries/index.js @@ -4,7 +4,7 @@ import MOD_QUEUE_QUERY from './modQueueQuery.graphql'; export const modQueueQuery = graphql(MOD_QUEUE_QUERY, { options: () => ({ variables: { - asset_url: 'id' + asset_id: 'bae04102-33b5-4f43-b827-45d9ba9f2b37' } }) }); diff --git a/client/coral-admin/src/graphql/queries/modQueueQuery.graphql b/client/coral-admin/src/graphql/queries/modQueueQuery.graphql index e26e440f8..fda130510 100644 --- a/client/coral-admin/src/graphql/queries/modQueueQuery.graphql +++ b/client/coral-admin/src/graphql/queries/modQueueQuery.graphql @@ -1,20 +1,34 @@ -query ModQueue { - flagged_comments: comments(query: { +#import "../fragments/commentView.graphql" + +query ($asset_id: ID!) { + premod: comments(query: { + statuses: [PREMOD], + asset_id: $asset_id + }) { + ...commentView + } + flagged: comments(query: { action_type: FLAG, asset_id: $asset_id - }) { - id - } - accepted_comments: comments(query: { + }) { + ...commentView + } + all: comments(query: { statuses: [ACCEPTED], asset_id: $asset_id - }) { - id - } - rejected_comments: comments(query: { + }) { + ...commentView + } + account: comments(query: { + statuses: [ACCEPTED], + asset_id: $asset_id + }) { + ...commentView + } + rejected: comments(query: { statuses: [REJECTED], asset_id: $asset_id - }) { - id - } + }) { + ...commentView + } } diff --git a/client/coral-admin/src/reducers/install.js b/client/coral-admin/src/reducers/install.js new file mode 100644 index 000000000..a49f76b5e --- /dev/null +++ b/client/coral-admin/src/reducers/install.js @@ -0,0 +1,91 @@ +import {Map} from 'immutable'; + +import * as actions from '../constants/install'; + +const initialState = Map({ + isLoading: false, + data: Map({ + settings: Map({ + organizationName: '' + }), + user: Map({ + displayName: '', + email: '', + password: '', + confirmPassword: '' + }) + }), + errors: Map({ + organizationName: '', + displayName: '', + email: '', + password: '', + confirmPassword: '' + }), + showErrors: false, + hasError: false, + error: null, + step: 0, + navItems: [{ + text: '1. Add Organization Name', + step: 1 + }, + { + text: '2. Create your account', + step: 2 + }], + installRequest: null, + installRequestError: null, + alreadyInstalled: false +}); + +export default function install (state = initialState, action) { + switch (action.type) { + case actions.NEXT_STEP: + return state + .set('step', state.get('step') + 1); + case actions.PREVIOUS_STEP: + return state + .set('step', state.get('step') - 1); + case actions.GO_TO_STEP: + return state + .set('step', action.step); + case actions.UPDATE_FORMDATA_SETTINGS: + return state + .setIn(['data', 'settings', action.name], action.value); + case actions.UPDATE_FORMDATA_USER: + return state + .setIn(['data', 'user', action.name], action.value); + case actions.HAS_ERROR: + return state + .merge({ + hasError: true, + showErrors: true + }); + case actions.ADD_ERROR: + return state + .setIn(['errors', action.name], action.error); + case actions.CLEAR_ERRORS: + return state + .set('errors', Map()); + case actions.INSTALL_REQUEST: + return state + .set('isLoading', true); + case actions.INSTALL_SUCCESS: + return state + .set('isLoading', false) + .set('installRequest', 'SUCCESS'); + case actions.INSTALL_FAILURE: + return state + .merge({ + isLoading: false, + installRequest: 'FAILURE', + installRequestError: action.error + }); + case actions.CHECK_INSTALL_SUCCESS: + return state + .set('alreadyInstalled', action.installed); + default : + return state; + } +} diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json index a4256848e..6dffeae42 100644 --- a/client/coral-admin/src/translations.json +++ b/client/coral-admin/src/translations.json @@ -50,7 +50,7 @@ "configure": { "enable-pre-moderation": "Enable pre-moderation", "enable-pre-moderation-text": "Moderators must approve any comment before it is published.", - "require-email-verification": "Require Email Confirmation", + "require-email-verification": "Require Email Verification", "require-email-verification-text": "New Users must verify their email before commenting", "include-comment-stream": "Include Comment Stream Description for Readers.", "include-comment-stream-desc": "Write a message to be added to the top of your comment stream. Pose a topic, include community guidelines, etc.", diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index 778614880..c0c0d57d1 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/client/coral-embed-stream/src/Comment.js @@ -94,14 +94,7 @@ class Comment extends React.Component { style={{marginLeft: depth * 30}}>
+ author={comment.user}/>
diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js index 550fc5fc1..a853efead 100644 --- a/client/coral-embed-stream/src/Embed.js +++ b/client/coral-embed-stream/src/Embed.js @@ -11,6 +11,7 @@ const {fetchAssetSuccess} = assetActions; import {queryStream} from 'coral-framework/graphql/queries'; import {postComment, postAction, deleteAction} from 'coral-framework/graphql/mutations'; +import {editName} from 'coral-framework/actions/user'; import {Notification, notificationActions, authActions, assetActions, pym} from 'coral-framework'; import Stream from './Stream'; @@ -20,6 +21,7 @@ import CommentBox from 'coral-plugin-commentbox/CommentBox'; import UserBox from 'coral-sign-in/components/UserBox'; import SignInContainer from 'coral-sign-in/containers/SignInContainer'; import SuspendedAccount from 'coral-framework/components/SuspendedAccount'; +import ChangeDisplayNameContainer from '../../coral-sign-in/containers/ChangeDisplayNameContainer'; import SettingsContainer from 'coral-settings/containers/SettingsContainer'; import RestrictedContent from 'coral-framework/components/RestrictedContent'; import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer'; @@ -83,6 +85,8 @@ class Embed extends Component { const openStream = closedAt === null; + const banned = user && user.status === 'BANNED'; + const expandForLogin = showSignInDialog ? { minHeight: document.body.scrollHeight + 200 } : {}; @@ -99,7 +103,7 @@ class Embed extends Component { Settings Configure Stream - {loggedIn && } + {loggedIn && } { openStream @@ -108,7 +112,12 @@ class Embed extends Component { content={asset.settings.infoBoxContent} enable={asset.settings.infoBoxEnable} /> - }> + + }> { user ? : null @@ -130,7 +138,8 @@ class Embed extends Component {
:

{asset.settings.closedMessage}

} - {!loggedIn && } + {!loggedIn && } + {loggedIn && user && } - - + + - - + + - + -
+
); } @@ -191,6 +200,7 @@ const mapDispatchToProps = dispatch => ({ }); }, clearNotification: () => dispatch(clearNotification()), + editName: (displayName) => dispatch(editName(displayName)), showSignInDialog: (offset) => dispatch(showSignInDialog(offset)), logout: () => dispatch(logout()), dispatch: d => dispatch(d) diff --git a/client/coral-embed/index.js b/client/coral-embed/index.js new file mode 100644 index 000000000..4a7e753ca --- /dev/null +++ b/client/coral-embed/index.js @@ -0,0 +1,193 @@ +/* eslint-disable no-var, prefer-template */ +/** + * @file Exposes the main 'window.Coral.Talk' API that developers can use to + * render Talk streams in their webpages + * @todo Currently implemented to be included directly via diff --git a/views/article.ejs b/views/article.ejs index 7382f6c35..1315acac6 100644 --- a/views/article.ejs +++ b/views/article.ejs @@ -8,6 +8,7 @@ +