Merge pull request #334 from coralproject/story-140080313-modal-dn

Prompt for username when signing up with Facebook

client/coral-framework/helpers/response.js

@@ -45,7 +45,7 @@ const handleResp = res => {
       }
 
       if (err.error && err.error.translation_key) {
-        message = err.error.translation_key;
+        error.translation_key = err.error.translation_key;
       }
 
       error.message = message;

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

@@ -3,14 +3,18 @@ import TextField from 'coral-ui/components/TextField';
 import Alert from './Alert';
 import Button from 'coral-ui/components/Button';
 import {Dialog} from 'coral-ui';
+import FakeComment from './FakeComment';
+
 import styles from './styles.css';
+
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 const lang = new I18n(translations);
 
-const CreateUsernameDialog = ({open, handleClose, offset, formData, handleSubmitUsername, handleChange, ...props}) => (
+const CreateUsernameDialog = ({open, handleClose, offset, formData, handleSubmitUsername, handleChange, ...props}) => {
+  return (
   <Dialog
-    className={styles.dialog}
+    className={styles.dialogusername}
     id="createUsernameDialog"
     open={open}
     style={{
@@ -25,24 +29,32 @@ const CreateUsernameDialog = ({open, handleClose, offset, formData, handleSubmit
         </h1>
       </div>
       <div>
-        <label htmlFor="username">{lang.t('createdisplay.yourusername')}</label>
+        <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> }
         <form id="saveUsername" onSubmit={handleSubmitUsername}>
-          <TextField
-            id="username"
-            type="string"
-            label={lang.t('createdisplay.username')}
-            value={formData.username}
-            onChange={handleChange}
-          />
-        { props.errors.username && <span className={styles.hint}> {lang.t('createdisplay.specialCharacters')} </span> }
-          <div className={styles.action}>
+          { props.errors.username && <span className={styles.hint}> {lang.t('createdisplay.specialCharacters')} </span> }
+          <div className={styles.saveusername}>
+            <TextField
+              id="username"
+              type="string"
+              label={lang.t('createdisplay.username')}
+              value={formData.username}
+              onChange={handleChange}
+            />
             <Button id="save" type="submit" className={styles.saveButton}>{lang.t('createdisplay.save')}</Button>
           </div>
       </form>
       </div>
     </div>
   </Dialog>
-);
+  );
+};
 
 export default CreateUsernameDialog;

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import styles from 'coral-embed-stream/src/Comment.css';
+
+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';
+
+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">
+              <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">
+          <div className="coral-plugin-permalinks-container">
+            <button className="coral-plugin-permalinks-button">
+              <i className="coral-plugin-permalinks-icon material-icons" aria-hidden={true}>link</i>
+              {lang.t('permalink.permalink')}
+            </button>
+          </div>
+          <div className={`${'coral-plugin-flags'}-container`}>
+            <button className={`${'coral-plugin-flags'}-button`}>
+              <span className={`${'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>
+    );
+  }
+}
+
+export default FakeComment;

client/coral-sign-in/components/styles.css

@@ -118,7 +118,7 @@ input.error{
 }
 
 .action {
-    margin-top: 15px;
+    margin-top: 0px;
 }
 
 .passwordRequestSuccess {
@@ -141,6 +141,40 @@ input.error{
     display: block;
 }
 
-.confirmSubmit {
+/* Change username Dialog*/
 
+.dialogusername {
+  border: none;
+  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
+  width: 400px;
+  top: 10px;
+}
+
+.yourusername {
+  display: block;
+}
+
+.example {
+  display: block;
+}
+
+.ifyoudont {
+  display: block;
+  margin-top: 15px;
+}
+
+.saveusername {
+  display: block;
+  width: 100%;
+}
+
+.savebutton {
+  display: inline;
+  background-color: rgb(105,105,105);
+  color: white;
+}
+
+.fakeComment {
+  display: block;
+  margin-bottom: 5px;
 }

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

@@ -29,6 +29,7 @@ class ChangeUsernameContainer extends 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);
@@ -103,7 +104,7 @@ class ChangeUsernameContainer extends Component {
     return (
       <div>
         <CreateUsernameDialog
-          open={auth.showCreateUsernameDialog && auth.fromSignUp}
+          open={auth.showCreateUsernameDialog && auth.user.canEditName}
           offset={offset}
           handleClose={this.handleClose}
           loggedIn={loggedIn}

client/coral-sign-in/translations.js

@@ -30,15 +30,24 @@ export default {
       checkTheForm: 'Invalid Form. Please, check the fields'
     },
     'createdisplay': {
-      writeyourusername: 'Write your username',
-      yourusername: 'Your username is publicly visible on all comments you post. A username is needed before you can post your first comment.',
+      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: {
     'signIn': {
@@ -71,14 +80,23 @@ export default {
       checkTheForm: 'Formulario Inválido. Por favor, completa los campos'
     },
     'createdisplay': {
-      writeyourusername: 'Escribe tu nombre',
-      yourusername: 'Tu nombre es visible publicamente en todos los comentarios que publiques. Es necesario tener un nombre de usuario antes de poder publicar tu primer comentario.',
-      username: 'Nombre a mostrar',
+      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 Invalido. Por favor, verifica los campos',
       specialCharacters: 'Sólo pueden contener letras, números y _'
     },
+    'permalink': {
+      permalink: 'Enlace'
+    },
+    'report': 'Informe',
+    'like': 'Me gusta',
   }
 };

routes/api/auth/index.js

@@ -2,7 +2,6 @@ const express = require('express');
 const passport = require('../../../services/passport');
 const authorization = require('../../../middleware/authorization');
 const errors = require('../../../errors');
-const UsersService = require('../../../services/users');
 
 const router = express.Router();
 
@@ -61,6 +60,7 @@ const HandleAuthCallback = (req, res, next) => (err, user) => {
 /**
  * Returns the response to the login attempt via a popup callback with some JS.
  */
+
 const HandleAuthPopupCallback = (req, res, next) => (err, user) => {
   if (err) {
     return res.render('auth-callback', {err: JSON.stringify(err), data: null});
@@ -70,20 +70,15 @@ const HandleAuthPopupCallback = (req, res, next) => (err, user) => {
     return res.render('auth-callback', {err: JSON.stringify(errors.ErrNotAuthorized), data: null});
   }
 
-  // Authorize the user to edit their username.
-  UsersService.toggleNameEdit(user.id, true)
-    .then(() => {
-      
-      // Perform the login of the user!
-      req.logIn(user, (err) => {
-        if (err) {
-          return res.render('auth-callback', {err: JSON.stringify(err), data: null});
-        }
+  // Perform the login of the user!
+  req.logIn(user, (err) => {
+    if (err) {
+      return res.render('auth-callback', {err: JSON.stringify(err), data: null});
+    }
 
-        // We logged in the user! Let's send back the user data.
-        res.render('auth-callback', {err: null, data: JSON.stringify(user)});
-      });
-    });
+    // We logged in the user! Let's send back the user data.
+    res.render('auth-callback', {err: null, data: JSON.stringify(user)});
+  });
 };
 
 /**

services/users.js

@@ -124,6 +124,8 @@ module.exports = class UsersService {
           return user;
         }
 
+        // User does not exist and need to be created.
+
         let username = UsersService.castUsername(displayName);
 
         // The user was not found, lets create them!
@@ -131,7 +133,8 @@ module.exports = class UsersService {
           username,
           lowercaseUsername: username.toLowerCase(),
           roles: [],
-          profiles: [{id, provider}]
+          profiles: [{id, provider}],
+          canEditName: true
         });
 
         return user.save();