Auth as a plugin

plugins/coral-plugin-auth/client/components/ChangeUsername.js

@@ -1,13 +1,12 @@
-import React, {Component} from 'react';
+import React from 'react';
 import {connect} from 'react-redux';
-
-import validate from 'coral-framework/helpers/validate';
+import {bindActionCreators} from 'redux';
+import translations from '../translations';
+import I18n from 'coral-framework/modules/i18n/i18n';
 import errorMsj from 'coral-framework/helpers/error';
-
+import validate from 'coral-framework/helpers/validate';
 import CreateUsernameDialog from './CreateUsernameDialog';
 
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations';
 const lang = new I18n(translations);
 
 import {
@@ -18,26 +17,20 @@ import {
   createUsername
 } from 'coral-framework/actions/auth';
 
-class ChangeUsernameContainer extends Component {
-  initialState = {
-    formData: {
-      username: ''
-    },
-    errors: {},
-    showErrors: false
-  };
-
+class ChangeUsernameContainer extends React.Component {
   constructor(props) {
     super(props);
-    this.initialState.formData.username = props.user.username;
-    this.state = this.initialState;
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmitUsername = this.handleSubmitUsername.bind(this);
-    this.handleClose = this.handleClose.bind(this);
-    this.addError = this.addError.bind(this);
+
+    this.state = {
+      formData: {
+        username: props.user.username
+      },
+      errors: {},
+      showErrors: false
+    };
   }
 
-  handleChange(e) {
+  handleChange = e => {
     const {name, value} = e.target;
     this.setState(
       state => ({
@@ -51,18 +44,18 @@ class ChangeUsernameContainer extends Component {
         this.validation(name, value);
       }
     );
-  }
+  };
 
-  addError(name, error) {
+  addError = (name, error) => {
     return this.setState(state => ({
       errors: {
         ...state.errors,
         [name]: error
       }
     }));
-  }
+  };
 
-  validation(name, value) {
+  validation = (name, value) => {
     const {addError} = this;
 
     if (!value.length) {
@@ -74,18 +67,18 @@ class ChangeUsernameContainer extends Component {
       // Removes Error
       this.setState(state => ({...state, errors}));
     }
-  }
+  };
 
-  isCompleted() {
+  isCompleted = () => {
     const {formData} = this.state;
     return !Object.keys(formData).filter(prop => !formData[prop].length).length;
-  }
+  };
 
-  displayErrors(show = true) {
+  displayErrors = (show = true) => {
     this.setState({showErrors: show});
-  }
+  };
 
-  handleSubmitUsername(e) {
+  handleSubmitUsername = e => {
     e.preventDefault();
     const {errors} = this.state;
     const {validForm, invalidForm} = this.props;
@@ -96,11 +89,11 @@ class ChangeUsernameContainer extends Component {
     } else {
       invalidForm(lang.t('createdisplay.checkTheForm'));
     }
-  }
+  };
 
-  handleClose() {
+  handleClose = () => {
     this.props.hideCreateUsernameDialog();
-  }
+  };
 
   render() {
     const {loggedIn, auth} = this.props;
@@ -122,14 +115,17 @@ class ChangeUsernameContainer extends Component {
 
 const mapStateToProps = ({auth, user}) => ({auth, user});
 
-const mapDispatchToProps = dispatch => ({
-  createUsername: (userid, formData) =>
-    dispatch(createUsername(userid, formData)),
-  showCreateUsernameDialog: () => dispatch(showCreateUsernameDialog()),
-  hideCreateUsernameDialog: () => dispatch(hideCreateUsernameDialog()),
-  invalidForm: error => dispatch(invalidForm(error)),
-  validForm: () => dispatch(validForm())
-});
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      createUsername,
+      showCreateUsernameDialog,
+      hideCreateUsernameDialog,
+      invalidForm,
+      validForm
+    },
+    dispatch
+  );
 
 export default connect(mapStateToProps, mapDispatchToProps)(
   ChangeUsernameContainer

plugins/coral-plugin-auth/client/components/CreateUsernameDialog.js

@@ -1,21 +1,26 @@
 import React from 'react';
-import TextField from 'coral-ui/components/TextField';
-import Button from 'coral-ui/components/Button';
-import {Dialog, Alert} from 'coral-ui';
-import FakeComment from './FakeComment';
-
 import styles from './styles.css';
-
-import I18n from 'coral-framework/modules/i18n/i18n';
+import {Dialog, Alert, TextField} from 'coral-ui';
+import {FakeComment} from './FakeComment';
 import translations from '../translations';
+import Button from 'coral-ui/components/Button';
+import I18n from 'coral-framework/modules/i18n/i18n';
+
 const lang = new I18n(translations);
 
-const CreateUsernameDialog = ({open, handleClose, formData, handleSubmitUsername, handleChange, ...props}) => {
-  return (
+const CreateUsernameDialog = ({
+  open,
+  handleClose,
+  formData,
+  handleSubmitUsername,
+  handleChange,
+  ...props
+}) => (
   <Dialog
     className={styles.dialogusername}
     id="createUsernameDialog"
-    open={open}>
+    open={open}
+  >
     <span className={styles.close} onClick={handleClose}>×</span>
     <div>
       <div className={styles.header}>
@@ -24,17 +29,24 @@ const CreateUsernameDialog = ({open, handleClose, formData, handleSubmitUsername
         </h1>
       </div>
       <div>
-        <p className={styles.yourusername}>{lang.t('createdisplay.yourusername')}</p>
+        <p className={styles.yourusername}>
+          {lang.t('createdisplay.yourusername')}
+        </p>
         <FakeComment
           className={styles.fakeComment}
           username={formData.username}
           created_at={Date.now()}
           body={lang.t('createdisplay.fakecommentbody')}
         />
-        <p className={styles.ifyoudont}>{lang.t('createdisplay.ifyoudontchangeyourname')}</p>
-        { props.auth.error && <Alert>{props.auth.error}</Alert> }
+        <p className={styles.ifyoudont}>
+          {lang.t('createdisplay.ifyoudontchangeyourname')}
+        </p>
+        {props.auth.error && <Alert>{props.auth.error}</Alert>}
         <form id="saveUsername" onSubmit={handleSubmitUsername}>
-          { props.errors.username && <span className={styles.hint}> {lang.t('createdisplay.specialCharacters')} </span> }
+          {props.errors.username &&
+            <span className={styles.hint}>
+              {' '}{lang.t('createdisplay.specialCharacters')}{' '}
+            </span>}
           <div className={styles.saveusername}>
             <TextField
               id="username"
@@ -44,13 +56,14 @@ const CreateUsernameDialog = ({open, handleClose, formData, handleSubmitUsername
               value={formData.username}
               onChange={handleChange}
             />
-            <Button id="save" type="submit" className={styles.saveButton}>{lang.t('createdisplay.save')}</Button>
+            <Button id="save" type="submit" className={styles.saveButton}>
+              {lang.t('createdisplay.save')}
+            </Button>
           </div>
-      </form>
+        </form>
       </div>
     </div>
   </Dialog>
-  );
-};
+);
 
 export default CreateUsernameDialog;

plugins/coral-plugin-auth/client/components/FakeComment.js

@@ -1,66 +1,72 @@
 import React from 'react';
-import styles from 'coral-embed-stream/src/components/Comment.css';
-
+import translations from '../translations';
+import {ReplyButton} from 'coral-plugin-replies';
+import PubDate from 'coral-plugin-pubdate/PubDate';
+import I18n from 'coral-framework/modules/i18n/i18n';
 import AuthorName from 'coral-plugin-author-name/AuthorName';
 import Content from 'coral-plugin-commentcontent/CommentContent';
-import PubDate from 'coral-plugin-pubdate/PubDate';
-import {ReplyButton} from 'coral-plugin-replies';
-
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations';
+import styles from 'coral-embed-stream/src/components/Comment.css';
 
 const lang = new I18n(translations);
 
-class FakeComment extends React.Component {
-  constructor (props) {
-    super(props);
-  }
-
-  render () {
-    const {username, created_at, body} = this.props;
-
-    return (
-      <div
-        className={`comment ${styles.Comment}`}
-        style={{marginLeft: 0 * 30}}>
-        <hr aria-hidden={true} />
-        <AuthorName
-          author={{'name': username}}/>
-        <PubDate created_at={created_at} />
-        <Content body={body} />
-          <div className="commentActionsLeft comment__action-container">
-              <div className={`${'coral-plugin-likes'}-container`}>
-                <button className={'coral-plugin-likes-button'}>
-                  <span className={'coral-plugin-likes-button-text'}>{lang.t('like')}</span>
-                  <i className={`${'coral-plugin-likes'}-icon material-icons`}
-                    aria-hidden={true}>thumb_up</i>
-                </button>
-              </div>
-              <ReplyButton
-                onClick={() => {}}
-                parentCommentId={'commentID'}
-                currentUserId={{}}
-                banned={false}
-              />
-            </div>
-        <div className="commentActionsRight comment__action-container">
-          <div className="coral-plugin-permalinks-container">
-            <button className="coral-plugin-permalinks-button">
-              <span className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}>{lang.t('permalink.permalink')}</span>
-              <i className="coral-plugin-permalinks-icon material-icons" aria-hidden={true}>link</i>
-            </button>
-          </div>
-          <div className={`${'coral-plugin-flags'}-container`}>
-            <button className={`${'coral-plugin-flags'}-button`}>
-              <span className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}>{lang.t('report')}</span>
-              <i className={`${'coral-plugin-flags'}-icon material-icons`}
-                aria-hidden={true}>flag</i>
-            </button>
-          </div>
-        </div>
+export const FakeComment = ({username, created_at, body}) => (
+  <div className={`comment ${styles.Comment}`} style={{marginLeft: 0 * 30}}>
+    <hr aria-hidden={true} />
+    <AuthorName author={{name: username}} />
+    <PubDate created_at={created_at} />
+    <Content body={body} />
+    <div className="commentActionsLeft comment__action-container">
+      <div className={`${'coral-plugin-likes'}-container`}>
+        <button className={'coral-plugin-likes-button'}>
+          <span className={'coral-plugin-likes-button-text'}>
+            {lang.t('like')}
+          </span>
+          <i
+            className={`${'coral-plugin-likes'}-icon material-icons`}
+            aria-hidden={true}
+          >
+            thumb_up
+          </i>
+        </button>
       </div>
-    );
-  }
-}
-
-export default FakeComment;
+      <ReplyButton
+        onClick={() => {}}
+        parentCommentId={'commentID'}
+        currentUserId={{}}
+        banned={false}
+      />
+    </div>
+    <div className="commentActionsRight comment__action-container">
+      <div className="coral-plugin-permalinks-container">
+        <button className="coral-plugin-permalinks-button">
+          <span
+            className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}
+          >
+            {lang.t('permalink.permalink')}
+          </span>
+          <i
+            className="coral-plugin-permalinks-icon material-icons"
+            aria-hidden={true}
+          >
+            link
+          </i>
+        </button>
+      </div>
+      <div className={`${'coral-plugin-flags'}-container`}>
+        <button className={`${'coral-plugin-flags'}-button`}>
+          <span
+            className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}
+          >
+            {lang.t('report')}
+          </span>
+          <i
+            className={`${'coral-plugin-flags'}-icon material-icons`}
+            aria-hidden={true}
+          >
+            flag
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+);

plugins/coral-plugin-auth/client/components/ForgotContent.js

@@ -1,22 +1,18 @@
 import React from 'react';
 import styles from './styles.css';
+import translations from '../translations';
 import Button from 'coral-ui/components/Button';
 import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations';
+
 const lang = new I18n(translations);
 
 class ForgotContent extends React.Component {
-  constructor (props) {
-    super(props);
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
-
-  handleSubmit (e) {
+  handleSubmit = e => {
     e.preventDefault();
     this.props.fetchForgotPassword(this.emailInput.value);
-  }
+  };
 
-  render () {
+  render() {
     const {changeView, auth} = this.props;
     const {passwordRequestSuccess, passwordRequestFailure} = auth;
 
@@ -29,29 +25,47 @@ class ForgotContent extends React.Component {
           <div className={styles.textField}>
             <label htmlFor="email">{lang.t('signIn.email')}</label>
             <input
-              ref={(input) => this.emailInput = input}
+              ref={input => (this.emailInput = input)}
               type="text"
               style={{fontSize: 16}}
               id="email"
-              name="email" />
+              name="email"
+            />
           </div>
-          <Button type="submit" cStyle="black" className={styles.signInButton} full>
+          <Button
+            type="submit"
+            cStyle="black"
+            className={styles.signInButton}
+            full
+          >
             {lang.t('signIn.recoverPassword')}
           </Button>
-          {
-            passwordRequestSuccess
-            ? <p className={styles.passwordRequestSuccess}>{passwordRequestSuccess}</p>
-            : null
-          }
-          {
-            passwordRequestFailure
-            ? <p className={styles.passwordRequestFailure}>{passwordRequestFailure}</p>
-            : null
-          }
+          {passwordRequestSuccess
+            ? <p className={styles.passwordRequestSuccess}>
+                {passwordRequestSuccess}
+              </p>
+            : null}
+          {passwordRequestFailure
+            ? <p className={styles.passwordRequestFailure}>
+                {passwordRequestFailure}
+              </p>
+            : null}
         </form>
         <div className={styles.footer}>
-          <span>{lang.t('signIn.needAnAccount')} <a onClick={() => changeView('SIGNUP')}>{lang.t('signIn.register')}</a></span>
-          <span>{lang.t('signIn.alreadyHaveAnAccount')} <a onClick={() => changeView('SIGNIN')}>{lang.t('signIn.signIn')}</a></span>
+          <span>
+            {lang.t('signIn.needAnAccount')}
+            {' '}
+            <a onClick={() => changeView('SIGNUP')}>
+              {lang.t('signIn.register')}
+            </a>
+          </span>
+          <span>
+            {lang.t('signIn.alreadyHaveAnAccount')}
+            {' '}
+            <a onClick={() => changeView('SIGNIN')}>
+              {lang.t('signIn.signIn')}
+            </a>
+          </span>
         </div>
       </div>
     );

plugins/coral-plugin-auth/client/components/SignDialog.js

@@ -6,12 +6,9 @@ import SignInContent from './SignInContent';
 import SignUpContent from './SignUpContent';
 import ForgotContent from './ForgotContent';
 
-const SignDialog = ({open, view, handleClose, ...props}) => (
-  <Dialog
-    className={styles.dialog}
-    id="signInDialog"
-    open={open}>
-    <span className={styles.close} onClick={handleClose}>×</span>
+const SignDialog = ({open, view, hideSignInDialog, ...props}) => (
+  <Dialog className={styles.dialog} id="signInDialog" open={open}>
+    <span className={styles.close} onClick={hideSignInDialog}>×</span>
     {view === 'SIGNIN' && <SignInContent {...props} />}
     {view === 'SIGNUP' && <SignUpContent {...props} />}
     {view === 'FORGOT' && <ForgotContent {...props} />}

plugins/coral-plugin-auth/client/components/SignInButton.js

@@ -6,13 +6,11 @@ import {showSignInDialog} from 'coral-framework/actions/auth';
 
 const SignInButton = ({loggedIn, showSignInDialog}) => (
   <div>
-    {
-      !loggedIn ? (
-        <Button id="coralSignInButton" onClick={showSignInDialog} full>
+    {!loggedIn
+      ? <Button id="coralSignInButton" onClick={showSignInDialog} full>
           Sign in to comment
         </Button>
-      ) : null
-    }
+      : null}
   </div>
 );
 

plugins/coral-plugin-auth/client/components/SignInContainer.js

@@ -169,18 +169,16 @@ class SignInContainer extends React.Component {
     const {emailVerificationLoading, emailVerificationSuccess} = auth;
 
     return (
-      <div>
-        <SignDialog
-          open={true}
-          view={auth.view}
-          emailVerificationEnabled={requireEmailConfirmation}
-          emailVerificationLoading={emailVerificationLoading}
-          emailVerificationSuccess={emailVerificationSuccess}
-          {...this}
-          {...this.state}
-          {...this.props}
-        />
-      </div>
+      <SignDialog
+        open={true}
+        view={auth.view}
+        emailVerificationEnabled={requireEmailConfirmation}
+        emailVerificationLoading={emailVerificationLoading}
+        emailVerificationSuccess={emailVerificationSuccess}
+        {...this}
+        {...this.state}
+        {...this.props}
+      />
     );
   }
 }

plugins/coral-plugin-auth/client/index.js

@@ -1,7 +1,7 @@
 import UserBox from './components/UserBox';
 import SignInButton from './components/SignInButton';
 import SignInContainer from './components/SignInContainer';
-import ChangeUserNameContainer from './components/ChangeUserNameContainer';
+import ChangeUserNameContainer from './components/ChangeUsername';
 
 export default {
   slots: {