External plugin auth fully working, now refactor

client/coral-embed-stream/src/components/Embed.js

@@ -1,8 +1,8 @@
 import React from 'react';
 const lang = new I18n(translations);
 import Stream from '../containers/Stream';
+import Slot from 'coral-framework/components/Slot';
 import I18n from 'coral-framework/modules/i18n/i18n';
-import UserBox from 'coral-sign-in/components/UserBox';
 import translations from 'coral-framework/translations';
 import {TabBar, Tab, TabContent, Button} from 'coral-ui';
 import Count from 'coral-plugin-comment-count/CommentCount';
@@ -34,12 +34,10 @@ export default class Embed extends React.Component {
   handleShowProfile = () => this.props.setActiveTab('profile');
 
   render () {
-    const {activeTab, logout, viewAllComments, commentId} = this.props;
+    const {activeTab, viewAllComments, commentId} = this.props;
     const {asset: {totalCommentCount}} = this.props.root;
     const {loggedIn, isAdmin, user} = this.props.auth;
 
-    const userBox = <UserBox user={user} onLogout={logout} onShowProfile={this.handleShowProfile}/>;
-
     return (
       <div>
         <div className="commentStream">
@@ -48,6 +46,7 @@ export default class Embed extends React.Component {
             <Tab>{lang.t('myProfile')}</Tab>
             <Tab restricted={!isAdmin}>Configure Stream</Tab>
           </TabBar>
+
           {
             commentId &&
               <Button
@@ -58,8 +57,8 @@ export default class Embed extends React.Component {
                 {lang.t('showAllComments')}
               </Button>
           }
+          <Slot fill="embed"/>
           <TabContent show={activeTab === 'stream'}>
-            { loggedIn ? userBox : null }
             <Stream data={this.props.data} root={this.props.root} />
           </TabContent>
           <TabContent show={activeTab === 'profile'}>
@@ -67,7 +66,6 @@ export default class Embed extends React.Component {
           </TabContent>
           <TabContent show={activeTab === 'config'}>
             <RestrictedContent restricted={!loggedIn}>
-              { loggedIn ? userBox : null }
               <ConfigureStreamContainer />
             </RestrictedContent>
           </TabContent>

client/coral-embed-stream/src/components/Stream.js

@@ -10,8 +10,6 @@ import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import SuspendedAccount from 'coral-framework/components/SuspendedAccount';
 import RestrictedContent from 'coral-framework/components/RestrictedContent';
-import ChangeUsernameContainer
-  from 'coral-sign-in/containers/ChangeUsernameContainer';
 
 class Stream extends React.Component {
   setActiveReplyBox = (reactKey) => {
@@ -109,9 +107,6 @@ class Stream extends React.Component {
               </RestrictedContent>
             </div>
           : <p>{asset.settings.closedMessage}</p>}
-        {loggedIn &&
-          user &&
-          <ChangeUsernameContainer loggedIn={loggedIn} user={user} />}
         {loggedIn && <ModerationLink assetId={asset.id} isAdmin={isAdmin} />}
 
         {highlightedComment

client/coral-sign-in/components/UserBox.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import styles from './styles.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations';
-const lang = new I18n(translations);
-
-const UserBox = ({className, user, onLogout, onShowProfile}) => (
-  <div className={`${styles.userBox} ${className ? className : ''}`}>
-    {lang.t('signIn.loggedInAs')}
-    <a onClick={onShowProfile}>{user.username}</a>. {lang.t('signIn.notYou')}
-    <a className={styles.logout} onClick={onLogout} id='logout'>{lang.t('signIn.logout')}</a>
-  </div>
-);
-
-export default UserBox;

client/coral-sign-in/containers/SignInContainer.js

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export const SignInContainer = () => (
-  <Slot fill="login"/>
-);

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

@@ -4,7 +4,7 @@ import {connect} from 'react-redux';
 import validate from 'coral-framework/helpers/validate';
 import errorMsj from 'coral-framework/helpers/error';
 
-import CreateUsernameDialog from '../components/CreateUsernameDialog';
+import CreateUsernameDialog from './CreateUsernameDialog';
 
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
@@ -16,12 +16,12 @@ import {
   invalidForm,
   validForm,
   createUsername
-} from '../../coral-framework/actions/auth';
+} from 'coral-framework/actions/auth';
 
 class ChangeUsernameContainer extends Component {
   initialState = {
     formData: {
-      username: '',
+      username: ''
     },
     errors: {},
     showErrors: false
@@ -39,19 +39,22 @@ class ChangeUsernameContainer extends Component {
 
   handleChange(e) {
     const {name, value} = e.target;
-    this.setState((state) => ({
-      ...state,
-      formData: {
-        ...state.formData,
-        [name]: value
+    this.setState(
+      state => ({
+        ...state,
+        formData: {
+          ...state.formData,
+          [name]: value
+        }
+      }),
+      () => {
+        this.validation(name, value);
       }
-    }), () => {
-      this.validation(name, value);
-    });
+    );
   }
 
   addError(name, error) {
-    return this.setState((state) => ({
+    return this.setState(state => ({
       errors: {
         ...state.errors,
         [name]: error
@@ -67,15 +70,15 @@ class ChangeUsernameContainer extends Component {
     } else if (!validate[name](value)) {
       addError(name, errorMsj[name]);
     } else {
-      const { [name]: prop, ...errors } = this.state.errors; // eslint-disable-line
+      const {[name]: prop, ...errors} = this.state.errors; // eslint-disable-line
       // Removes Error
-      this.setState((state) => ({...state, errors}));
+      this.setState(state => ({...state, errors}));
     }
   }
 
   isCompleted() {
     const {formData} = this.state;
-    return !Object.keys(formData).filter((prop) => !formData[prop].length).length;
+    return !Object.keys(formData).filter(prop => !formData[prop].length).length;
   }
 
   displayErrors(show = true) {
@@ -117,19 +120,17 @@ class ChangeUsernameContainer extends Component {
   }
 }
 
-const mapStateToProps = (state) => ({
-  auth: state.auth.toJS()
-});
+const mapStateToProps = ({auth, user}) => ({auth, user});
 
-const mapDispatchToProps = (dispatch) => ({
-  createUsername: (userid, formData) => dispatch(createUsername(userid, formData)),
+const mapDispatchToProps = dispatch => ({
+  createUsername: (userid, formData) =>
+    dispatch(createUsername(userid, formData)),
   showCreateUsernameDialog: () => dispatch(showCreateUsernameDialog()),
   hideCreateUsernameDialog: () => dispatch(hideCreateUsernameDialog()),
-  invalidForm: (error) => dispatch(invalidForm(error)),
+  invalidForm: error => dispatch(invalidForm(error)),
   validForm: () => dispatch(validForm())
 });
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ChangeUsernameContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(
+  ChangeUsernameContainer
+);

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

@@ -16,7 +16,9 @@ const SignInButton = ({loggedIn, showSignInDialog}) => (
   </div>
 );
 
-const mapStateToProps = ({auth}) => ({loggedIn: auth.loggedIn});
+const mapStateToProps = ({auth}) => ({
+  loggedIn: auth.toJS().loggedIn
+});
 
 const mapDispatchToProps = dispatch =>
   bindActionCreators({showSignInDialog}, dispatch);

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

@@ -1,5 +1,6 @@
 import React, {Component, PropTypes} from 'react';
 import {connect} from 'react-redux';
+import SignDialog from './SignDialog';
 import validate from 'coral-framework/helpers/validate';
 import errorMsj from 'coral-framework/helpers/error';
 import I18n from 'coral-framework/modules/i18n/i18n';
@@ -181,7 +182,16 @@ class SignInContainer extends Component {
 
     return (
       <div>
-        This is my login
+        <SignDialog
+          open={true}
+          view={auth.view}
+          emailVerificationEnabled={requireEmailConfirmation}
+          emailVerificationLoading={emailVerificationLoading}
+          emailVerificationSuccess={emailVerificationSuccess}
+          {...this}
+          {...this.state}
+          {...this.props}
+        />
       </div>
     );
   }

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import styles from './styles.css';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import translations from '../translations';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import {showSignInDialog, logout} from 'coral-framework/actions/auth';
+const lang = new I18n(translations);
+
+const UserBox = ({loggedIn, user, logout, onShowProfile}) => (
+  <div>
+    {
+      loggedIn ? (
+        <div className={styles.userBox}>
+          {lang.t('signIn.loggedInAs')}
+          <a onClick={onShowProfile}>{user.username}</a>. {lang.t('signIn.notYou')}
+          <a className={styles.logout} onClick={() => logout()}>
+            {lang.t('signIn.logout')}
+          </a>
+        </div>
+      ) : null
+    }
+  </div>
+);
+
+const mapStateToProps = ({auth, user}) => ({
+  loggedIn: auth.toJS().loggedIn,
+  user: user.toJS()
+});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({logout}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(UserBox);

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

@@ -1,9 +1,11 @@
 import SignInButton from './components/SignInButton';
 import SignInContainer from './components/SignInContainer';
+import UserBox from './components/UserBox';
+import ChangeUserNameContainer from './components/ChangeUserNameContainer';
 
 export default {
   slots: {
-    stream: [SignInButton],
+    stream: [UserBox, SignInButton, ChangeUserNameContainer],
     login: [SignInContainer]
   }
 };

plugins/coral-plugin-auth/client/translations.json

@@ -1,10 +1,102 @@
 {
   "en": {
-    "like": "Like",
-    "liked": "Liked"
+    "signIn": {
+      "emailVerifyCTA": "Please verify your email address.",
+      "requestNewVerifyEmail": "Request another email:",
+      "verifyEmail": "Thank you for creating an account! We sent an email to the address you provided to verify your account.",
+      "verifyEmail2": "You must verify your account before engaging with the community.",
+      "notYou": "Not you?",
+      "loggedInAs": "Logged in as",
+      "facebookSignIn": "Sign in with Facebook",
+      "facebookSignUp": "Sign up with Facebook",
+      "logout": "Logout",
+      "signIn": "Sign in to join the conversation",
+      "or": "Or",
+      "email": "E-mail Address",
+      "password": "Password",
+      "forgotYourPass": "Forgot your password?",
+      "needAnAccount": "Need an account?",
+      "register": "Register",
+      "signUp": "Sign Up",
+      "confirmPassword": "Confirm Password",
+      "username": "Username",
+      "alreadyHaveAnAccount": "Already have an account?",
+      "recoverPassword": "Recover password",
+      "emailInUse": "Email address already in use",
+      "emailORusernameInUse": "Email address or Username already in use",
+      "requiredField": "This field is required",
+      "passwordsDontMatch": "Passwords don't match.",
+      "specialCharacters": "Usernames can contain letters, numbers and _ only",
+      "checkTheForm": "Invalid Form. Please, check the fields"
+    },
+    "createdisplay": {
+      "writeyourusername": "Edit your username",
+      "yourusername": "Your username appears on every comment you post.",
+      "ifyoudontchangeyourname": "If you don't change your username at this step, your Facebook display name will appear alongside of all your comments.",
+      "username": "Username",
+      "continue": "Continue with the same Facebook username",
+      "save": "Save",
+      "fakecommentdate": "1 minute ago",
+      "fakecommentbody": "This is an example comment. Readers can share their thoughts and opinions with newsrooms in the comments section.",
+      "requiredField": "Required field",
+      "errorCreate": "Error when changing username",
+      "checkTheForm": "Invalid Form. Please, check the fields",
+      "specialCharacters": "Usernames can contain letters, numbers and _ only"
+    },
+    "permalink": {
+      "permalink": "Link"
+    },
+    "report": "Report",
+    "like": "Like"
   },
   "es": {
-    "like": "Me Gusta",
-    "liked": "Me Gustó"
+    "signIn": {
+      "emailVerifyCTA": "Por favor verifique su e-mail.",
+      "requestNewVerifyEmail": "Enviar otro correo:",
+      "verifyEmail": "¡Gracias por crear una cuenta! Le enviamos un correo a la dirección que dio para verificar su cuenta.",
+      "verifyEmail2": "Debe verificarla antes de poder involucrarse en la comunidad.",
+      "notYou": "¿No eres tu?",
+      "loggedInAs": "Entraste como",
+      "facebookSignIn": "Entrar con Facebook",
+      "facebookSignUp": "Regístrate con Facebook",
+      "logout": "Salir",
+      "signIn": "Entrar para Unirte a la Conversación",
+      "or": "o",
+      "email": "E-mail",
+      "password": "Contraseña",
+      "forgotYourPass": "¿Has olvidado tu contraseña?",
+      "needAnAccount": "¿Necesitas una cuenta?",
+      "register": "Regístrate",
+      "signUp": "Registro",
+      "confirmPassword": "Confirmar Contraseña",
+      "username": "Nombre",
+      "alreadyHaveAnAccount": "¿Ya tienes una cuenta?",
+      "recoverPassword": "Recuperar contraseña",
+      "emailInUse": "Este e-mail se encuentra en uso",
+      "emailORusernameInUse": "Este e-mail ó nombre de usuario se encuentran en uso",
+      "requiredField": "Este campo es requerido",
+      "passwordsDontMatch": "Las contraseñas no coinciden",
+      "specialCharacters": "Los nombres pueden contener letras, números y _",
+      "checkTheForm": "Formulario Inválido. Por favor, completa los campos"
+    },
+    "createdisplay": {
+      "writeyourusername": "Edita tu nombre",
+      "yourusername": "Tu nombre aparece en cada comentario que publiques.",
+      "ifyoudontchangeyourname": "Si no modificas tu nombre de usuario en este paso, tu nombre de Facebook aparecera al lado de cada comentario que publiques.",
+      "username": "Nombre",
+      "continue": "Continuar con nombre de Facebook",
+      "save": "Guardar",
+      "fakecommentdate": "hace un minuto",
+      "fakecommentbody": "Este es un comentario de ejemplo. Las lectoras pueden compartir sus ideas  y opiniones con los periodistas en la sección de comentarios.",
+      "requiredField": "Campo necesario",
+      "errorCreate": "Hubo un error al cambiar el nombre de usuario",
+      "checkTheForm": "Formulario Inválido. Por favor, verifica los campos",
+      "specialCharacters": "Sólo pueden contener letras, números y _"
+    },
+    "permalink": {
+      "permalink": "Enlace"
+    },
+    "report": "Marcar",
+    "like": "Me gusta"
   }
 }