Merge branch 'master' into story-138187767-mod-flag-names

client/coral-admin/src/components/ActionButton.js

@@ -1,21 +1,16 @@
 import React from 'react';
 import styles from './ModerationList.css';
-import BanUserButton from './BanUserButton';
-import {FabButton} from 'coral-ui';
+import {Button} from 'coral-ui';
 import {menuActionsMap} from '../containers/ModerationQueue/helpers/moderationQueueActionsMap';
 
-const ActionButton = ({type = '', user, ...props}) => {
-  if (type === 'BAN') {
-    return <BanUserButton user={user} onClick={() => props.showBanUserDialog(props.user, props.id)} />;
-  }
-
+const ActionButton = ({type = '', ...props}) => {
   return (
-    <FabButton
+    <Button
       className={`${type.toLowerCase()} ${styles.actionButton}`}
       cStyle={type.toLowerCase()}
       icon={menuActionsMap[type].icon}
       onClick={type === 'APPROVE' ? props.acceptComment : props.rejectComment}
-    />
+    >{menuActionsMap[type].text}</Button>
   );
 };
 

client/coral-admin/src/components/AdminLogin.js

@@ -0,0 +1,92 @@
+import React, {PropTypes} from 'react';
+import Layout from 'coral-admin/src/components/ui/Layout';
+import styles from './NotFound.css';
+import {Button, TextField, Alert, Success} from 'coral-ui';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../translations';
+const lang = new I18n(translations);
+
+class AdminLogin extends React.Component {
+
+  constructor (props) {
+    super(props);
+    this.state = {email: '', password: '', requestPassword: false};
+  }
+
+  handleSignIn = e => {
+    e.preventDefault();
+    this.props.handleLogin(this.state.email, this.state.password);
+  }
+
+  handleRequestPassword = e => {
+    e.preventDefault();
+    this.props.requestPasswordReset(this.state.email);
+  }
+
+  render () {
+    const {errorMessage} = this.props;
+    const signInForm = (
+      <form onSubmit={this.handleSignIn}>
+        {errorMessage && <Alert>{lang.t(`errors.${errorMessage}`)}</Alert>}
+        <TextField
+          label='Email Address'
+          value={this.state.email}
+          onChange={e => this.setState({email: e.target.value})} />
+        <TextField
+          label='Password'
+          value={this.state.password}
+          onChange={e => this.setState({password: e.target.value})}
+          type='password' />
+        <div style={{height: 10}}></div>
+        <Button
+          type='submit'
+          cStyle='black'
+          full
+          onClick={this.handleSignIn}>Sign In</Button>
+        <p className={styles.forgotPasswordCTA}>
+          Forgot your password? <a href="#" className={styles.forgotPasswordLink} onClick={e => {
+            e.preventDefault();
+            this.setState({requestPassword: true});
+          }}>Request a new one.</a>
+        </p>
+      </form>
+    );
+    const requestPasswordForm = (
+      this.props.passwordRequestSuccess
+      ? <p className={styles.passwordRequestSuccess} onClick={() => {
+        location.href = location.href;
+      }}>
+          {this.props.passwordRequestSuccess} <a className={styles.signInLink} href="#">Sign in</a>
+          <Success />
+        </p>
+      : <form onSubmit={this.handleRequestPassword}>
+        <TextField
+          label='Email Address'
+          value={this.state.email}
+          onChange={e => this.setState({email: e.target.value})} />
+        <Button
+          type='submit'
+          cStyle='black'
+          full
+          onClick={this.handleRequestPassword}>Reset Password</Button>
+      </form>
+    );
+    return (
+      <Layout fixedDrawer restricted={true}>
+        <div className={styles.loginLayout}>
+          <h1 className={styles.loginHeader}>Team sign in</h1>
+          <p className={styles.loginCTA}>Sign in to interact with your community.</p>
+          { this.state.requestPassword ? requestPasswordForm : signInForm }
+        </div>
+      </Layout>
+    );
+  }
+}
+
+AdminLogin.propTypes = {
+  handleLogin: PropTypes.func.isRequired,
+  passwordRequestSuccess: PropTypes.string,
+  loginError: PropTypes.string
+};
+
+export default AdminLogin;

client/coral-admin/src/components/BanUserButton.css

@@ -1,10 +1,11 @@
 .banButton {
-  width: 114px;
-  letter-spacing: 1px;
+  -webkit-transform: scale(.8);
+  transform: scale(.8);
+  margin: 0;
 
   i {
     vertical-align: middle;
-    margin-right: 10px;
+    margin-right: 5px;
     font-size: 14px;
   }
 }

client/coral-admin/src/components/BanUserButton.js

@@ -8,7 +8,7 @@ const lang = new I18n(translations);
 
 const BanUserButton = ({user, ...props}) => (
   <div className={styles.ban}>
-    <Button cStyle='darkGrey'
+    <Button cStyle='ban'
       className={`ban ${styles.banButton}`}
       disabled={user.status === 'BANNED' ? 'disabled' : ''}
       onClick={props.onClick}

client/coral-admin/src/components/Comment.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import timeago from 'timeago.js';
-import Linkify from 'react-linkify';
-
-import styles from './ModerationList.css';
-
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations.json';
-
-import Highlighter from 'react-highlight-words';
-import {Icon} from 'coral-ui';
-import ActionButton from './ActionButton';
-
-const linkify = new Linkify();
-
-// Render a single comment for the list
-const Comment = props => {
-  const {comment, author} = props;
-  let authorStatus = author.status;
-  const links = linkify.getMatches(comment.body);
-
-  return (
-    <li tabIndex={props.index} className={`mdl-card mdl-shadow--2dp ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
-      <div className={styles.itemHeader}>
-        <div className={styles.author}>
-          <span>{author.username || lang.t('comment.anon')}</span>
-          <span className={styles.created}>{timeago().format(comment.createdAt || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}</span>
-          {comment.flagged ? <p className={styles.flagged}>{lang.t('comment.flagged')}</p> : null}
-        </div>
-        <div className={styles.sideActions}>
-          {links ?
-          <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
-          <div className={`actions ${styles.actions}`}>
-            {props.modActions.map(
-              (action, i) =>
-              <ActionButton
-                option={action}
-                key={i}
-                type='COMMENTS'
-                comment={comment}
-                user={author}
-                menuOptionsMap={props.menuOptionsMap}
-                onClickAction={props.onClickAction}
-                onClickShowBanDialog={props.onClickShowBanDialog}/>
-            )}
-          </div>
-          {authorStatus === 'banned' ?
-          <span className={styles.banned}><Icon name='error_outline'/> {lang.t('comment.banned_user')}</span> : null}
-        </div>
-      </div>
-      <div className={styles.itemBody}>
-        <span className={styles.body}>
-          <Linkify  component='span' properties={{style: linkStyles}}>
-            <Highlighter
-              searchWords={props.suspectWords}
-              textToHighlight={comment.body} />
-          </Linkify>
-        </span>
-      </div>
-    </li>
-  );
-};
-
-export default Comment;
-
-const linkStyles = {
-  backgroundColor: 'rgb(255, 219, 135)',
-  padding: '1px 2px'
-};
-
-const lang = new I18n(translations);

client/coral-admin/src/components/FlagWidget.js

@@ -1,66 +0,0 @@
-import React, {PropTypes} from 'react';
-import {Link} from 'react-router';
-import styles from './FlagWidget.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations';
-
-const lang = new I18n(translations);
-
-const FlagWidget = ({assets}) => {
-
-  return (
-    <table className={styles.widgetTable}>
-      <thead className={styles.widgetHead}>
-        <tr>
-          <th></th>{/* empty on purpose */}
-          <th>{lang.t('streams.article')}</th>
-          <th>{lang.t('modqueue.flagged')}</th>
-          <th>{lang.t('modqueue.likes')}</th>
-          <th>{lang.t('dashboard.comment_count')}</th>
-        </tr>
-      </thead>
-      <tbody>
-        {
-          assets.length
-          ? assets.map((asset, index) => {
-            const flagSummary = asset.action_summaries.find(s => s.__typename === 'FlagAssetActionSummary');
-            const likeSummary = asset.action_summaries.find(s => s.__typename === 'LikeAssetActionSummary');
-            return (
-              <tr key={asset.id}>
-                <td>{index + 1}.</td>
-                <td>
-                  <Link to={`/admin/moderate/flagged/${asset.id}`}>{asset.title}</Link>
-                  <p className={styles.lede}>{asset.author} - Published: {new Date(asset.created_at).toLocaleDateString()}</p>
-                </td>
-                <td>{flagSummary ? flagSummary.actionCount : 0}</td>
-                <td>{likeSummary ? likeSummary.actionCount : 0}</td>
-                <td>{asset.commentCount}</td>
-              </tr>
-            );
-          })
-          : <tr><td colSpan="3">{lang.t('dashboard.no_flags')}</td></tr>
-        }
-      </tbody>
-    </table>
-  );
-};
-
-FlagWidget.propTypes = {
-  assets: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      title: PropTypes.string,
-      url: PropTypes.string,
-      commentCount: PropTypes.number,
-      action_summaries: PropTypes.arrayOf(
-        PropTypes.shape({
-          __typename: PropTypes.string.isRequired,
-          actionCount: PropTypes.number.isRequired,
-          actionableItemCount: PropTypes.number.isRequired
-        })
-      )
-    })
-  ).isRequired
-};
-
-export default FlagWidget;

client/coral-admin/src/components/ModerationList.css

@@ -178,6 +178,10 @@
   }
 }
 
+.selected {
+  border-radius: 10px;
+}
+
 
 .actionButton {
   transform: scale(.8);

client/coral-admin/src/components/NotFound.css

@@ -1,12 +1,37 @@
 .layout {
-    max-width: 800px;
-    margin: 0 auto;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.loginLayout {
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.loginHeader, .loginCTA, .forgotPasswordCTA, .passwordRequestSuccess {
+  text-align: center;
+  font-size: 16px;
+}
+
+.forgotPasswordLink, .signInLink {
+  color: blue;
+  font-weight: normal;
+  text-decoration: none;
+}
+
+.forgotPasswordLink:hover, .signInLink:hover {
+  text-decoration: underline;
 }
 
 .layout h1 {
-    font-size: 40px;
+  font-size: 40px;
 }
 
-.layout img {
-    width: 100%;
+.loginHeader {
+  font-size: 30px;
+}
+
+.passwordRequestSuccess {
+  cursor: pointer;
+  padding: 8px 14px;
 }

client/coral-admin/src/components/PermissionRequired.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import {Layout} from 'react-mdl';
-import styles from './NotFound.css';
-
-export const PermissionRequired = () => (
-  <Layout fixedDrawer>
-    <div className={styles.layout} >
-      <h1>Permission Required</h1>
-      <p>We’re sorry, but you don’t have access to that page.</p>
-      <img src="https://coralproject.net/images/communicorn.jpg" alt="Communicorn"/>
-    </div>
-  </Layout>
-);

client/coral-admin/src/components/ui/Drawer.js

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Navigation, Drawer} from 'react-mdl';
 import {IndexLink, Link} from 'react-router';
 import styles from './Drawer.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 
-export default ({handleLogout, restricted = false}) => (
+const CoralDrawer = ({handleLogout, restricted = false}) => (
   <Drawer className={styles.header}>
     { !restricted ?
       <div>
@@ -45,5 +45,11 @@ export default ({handleLogout, restricted = false}) => (
   </Drawer>
 );
 
+CoralDrawer.propTypes = {
+  handleLogout: PropTypes.func.isRequired,
+  restricted: PropTypes.bool // hide app elements from a logged out user
+};
+
 const lang = new I18n(translations);
 
+export default CoralDrawer;

client/coral-admin/src/components/ui/Header.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Navigation, Header, IconButton, MenuItem, Menu} from 'react-mdl';
 import {Link, IndexLink} from 'react-router';
 import styles from './Header.css';
@@ -6,7 +6,7 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import {Logo} from './Logo';
 
-export default ({handleLogout, restricted = false}) => (
+const CoralHeader = ({handleLogout, restricted = false}) => (
   <Header className={styles.header}>
     <Logo className={styles.logo} />
     {
@@ -14,28 +14,35 @@ export default ({handleLogout, restricted = false}) => (
       <div>
         <Navigation className={styles.nav}>
           <IndexLink
+            id='dashboardNav'
             className={styles.navLink}
             to="/admin/dashboard"
             activeClassName={styles.active}>
             {lang.t('configure.dashboard')}
           </IndexLink>
           <Link
+            id='moderateNav'
             className={styles.navLink}
             to="/admin/moderate"
             activeClassName={styles.active}>
             {lang.t('configure.moderate')}
           </Link>
-          <Link className={styles.navLink}
+          <Link
+            id='streamsNav'
+            className={styles.navLink}
             to="/admin/streams"
             activeClassName={styles.active}>
             {lang.t('configure.streams')}
           </Link>
-          <Link className={styles.navLink}
+          <Link
+            id='communityNav'
+            className={styles.navLink}
             to="/admin/community"
             activeClassName={styles.active}>
             {lang.t('configure.community')}
           </Link>
           <Link
+            id='configureNav'
             className={styles.navLink}
             to="/admin/configure"
             activeClassName={styles.active}>
@@ -64,4 +71,11 @@ export default ({handleLogout, restricted = false}) => (
   </Header>
 );
 
+CoralHeader.propTypes = {
+  handleLogout: PropTypes.func.isRequired,
+  restricted: PropTypes.bool // hide elemnts from a user that's logged out
+};
+
 const lang = new I18n(translations);
+
+export default CoralHeader;

client/coral-admin/src/components/ui/Layout.js

@@ -1,15 +1,22 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Layout as LayoutMDL} from 'react-mdl';
 import Header from './Header';
 import Drawer from './Drawer';
 import styles from './Layout.css';
 
-export const Layout = ({children, ...props}) => (
+const Layout = ({children, handleLogout = () => {}, restricted = false, ...props}) => (
   <LayoutMDL fixedDrawer>
-    <Header {...props} />
-    <Drawer {...props} />
-    <div className={styles.layout} >
+    <Header handleLogout={handleLogout} restricted={restricted} {...props} />
+    <Drawer handleLogout={handleLogout} restricted={restricted} {...props} />
+    <div className={styles.layout}>
       {children}
     </div>
   </LayoutMDL>
 );
+
+Layout.propTypes = {
+  handleLogout: PropTypes.func,
+  restricted: PropTypes.bool // hide elements from a user that's logged out
+};
+
+export default Layout;

client/coral-admin/src/components/ui/Logo.css

@@ -19,6 +19,7 @@
   background: #E5E5E5;
   height: 100%;
   width: 128px;
+  z-index: 10;
 }
 
 .base {