From 02c05e8ae157f985a12f12a31ddf29dff0fbfb24 Mon Sep 17 00:00:00 2001 From: gaba Date: Tue, 21 Feb 2017 12:43:02 -0800 Subject: [PATCH 1/9] CSS, translations and code for new create username dialog. --- .../components/CreateUsernameDialog.js | 25 ++++++------ client/coral-sign-in/components/styles.css | 39 ++++++++++++++++++- client/coral-sign-in/translations.js | 14 ++++--- 3 files changed, 60 insertions(+), 18 deletions(-) diff --git a/client/coral-sign-in/components/CreateUsernameDialog.js b/client/coral-sign-in/components/CreateUsernameDialog.js index d245b38ac..457641089 100644 --- a/client/coral-sign-in/components/CreateUsernameDialog.js +++ b/client/coral-sign-in/components/CreateUsernameDialog.js @@ -10,7 +10,7 @@ const lang = new I18n(translations); const CreateUsernameDialog = ({open, handleClose, offset, formData, handleSubmitUsername, handleChange, ...props}) => (
- +

{lang.t('createdisplay.yourusername')}

+
Example
+

{lang.t('createdisplay.ifyoudontchangeyourname')}

{ props.auth.error && {props.auth.error} }
- - { props.errors.username && {lang.t('createdisplay.specialCharacters')} } -
+ { props.errors.username && {lang.t('createdisplay.specialCharacters')} } +
+
+
diff --git a/client/coral-sign-in/components/styles.css b/client/coral-sign-in/components/styles.css index 60a252a20..77282d388 100644 --- a/client/coral-sign-in/components/styles.css +++ b/client/coral-sign-in/components/styles.css @@ -117,7 +117,7 @@ input.error{ } .action { - margin-top: 15px; + margin-top: 0px; } .passwordRequestSuccess { @@ -140,6 +140,41 @@ 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; +} + +.saveusername { + display: block; + width: 100%; +} + +.savebutton { + display: inline; + background-color: rgb(105,105,105); + color: white; +} + +.continuebutton { + background-color: black; + font-weight: bold; + color: white; + min-width: 200px; } diff --git a/client/coral-sign-in/translations.js b/client/coral-sign-in/translations.js index a2bb60819..4826f2f2c 100644 --- a/client/coral-sign-in/translations.js +++ b/client/coral-sign-in/translations.js @@ -30,9 +30,11 @@ 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', requiredField: 'Required field', errorCreate: 'Error when changing username', @@ -71,9 +73,11 @@ 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', requiredField: 'Campo necesario', errorCreate: 'Hubo un error al cambiar el nombre de usuario', From 5d0730b4d5f8d5078d65cf824e67c1afd86c2521 Mon Sep 17 00:00:00 2001 From: gaba Date: Tue, 21 Feb 2017 14:52:19 -0800 Subject: [PATCH 2/9] Adds fake comment component. --- .../components/CreateUsernameDialog.js | 14 +++-- .../coral-sign-in/components/FakeComment.js | 54 +++++++++++++++++++ client/coral-sign-in/components/styles.css | 6 +++ client/coral-sign-in/translations.js | 4 ++ 4 files changed, 75 insertions(+), 3 deletions(-) create mode 100644 client/coral-sign-in/components/FakeComment.js diff --git a/client/coral-sign-in/components/CreateUsernameDialog.js b/client/coral-sign-in/components/CreateUsernameDialog.js index 457641089..a01137733 100644 --- a/client/coral-sign-in/components/CreateUsernameDialog.js +++ b/client/coral-sign-in/components/CreateUsernameDialog.js @@ -3,7 +3,10 @@ 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); @@ -25,9 +28,14 @@ const CreateUsernameDialog = ({open, handleClose, offset, formData, handleSubmit
-

{lang.t('createdisplay.yourusername')}

-
Example
-

{lang.t('createdisplay.ifyoudontchangeyourname')}

+

{lang.t('createdisplay.yourusername')}

+ +

{lang.t('createdisplay.ifyoudontchangeyourname')}

{ props.auth.error && {props.auth.error} }
{ props.errors.username && {lang.t('createdisplay.specialCharacters')} } diff --git a/client/coral-sign-in/components/FakeComment.js b/client/coral-sign-in/components/FakeComment.js new file mode 100644 index 000000000..97afa59fa --- /dev/null +++ b/client/coral-sign-in/components/FakeComment.js @@ -0,0 +1,54 @@ +import React from 'react'; +import styles from 'coral-embed-stream/src/Comment.css'; + +import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton'; +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 FlagComment from 'coral-plugin-flags/FlagComment'; +import LikeButton from 'coral-plugin-likes/LikeButton'; + +class FakeComment extends React.Component { + constructor (props) { + super(props); + } + + render () { + const {username, created_at, body} = this.props; + + return ( +
+
+ + + +
+ {return;}} + deleteAction={()=>{return;}} + showSignInDialog={()=>{return;}} + currentUser={{}} + /> + {}} + parentCommentId={'commentID'} + currentUserId={{}} + banned={false} + /> +
+
+ + +
+
+ ); + } +} + +export default FakeComment; diff --git a/client/coral-sign-in/components/styles.css b/client/coral-sign-in/components/styles.css index 77282d388..81afe75e5 100644 --- a/client/coral-sign-in/components/styles.css +++ b/client/coral-sign-in/components/styles.css @@ -159,6 +159,7 @@ input.error{ .ifyoudont { display: block; + margin-top: 15px; } .saveusername { @@ -178,3 +179,8 @@ input.error{ color: white; min-width: 200px; } + +.fakeComment { + display: block; + margin-bottom: 5px; +} diff --git a/client/coral-sign-in/translations.js b/client/coral-sign-in/translations.js index 4826f2f2c..5693939af 100644 --- a/client/coral-sign-in/translations.js +++ b/client/coral-sign-in/translations.js @@ -36,6 +36,8 @@ export default { 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', @@ -79,6 +81,8 @@ export default { 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', From 1b79a105802ab456b16ecf6af3dc7f396e5dd398 Mon Sep 17 00:00:00 2001 From: gaba Date: Tue, 21 Feb 2017 16:36:50 -0800 Subject: [PATCH 3/9] Change username when it changes. --- client/coral-sign-in/components/CreateUsernameDialog.js | 8 +++++--- client/coral-sign-in/components/FakeComment.js | 1 - .../coral-sign-in/containers/ChangeUsernameContainer.js | 1 + 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/client/coral-sign-in/components/CreateUsernameDialog.js b/client/coral-sign-in/components/CreateUsernameDialog.js index a01137733..f0edc7398 100644 --- a/client/coral-sign-in/components/CreateUsernameDialog.js +++ b/client/coral-sign-in/components/CreateUsernameDialog.js @@ -11,7 +11,8 @@ 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 ( {lang.t('createdisplay.yourusername')}

@@ -54,6 +55,7 @@ const CreateUsernameDialog = ({open, handleClose, offset, formData, handleSubmit
-); + ); +}; export default CreateUsernameDialog; diff --git a/client/coral-sign-in/components/FakeComment.js b/client/coral-sign-in/components/FakeComment.js index 97afa59fa..c496e69d9 100644 --- a/client/coral-sign-in/components/FakeComment.js +++ b/client/coral-sign-in/components/FakeComment.js @@ -39,7 +39,6 @@ class FakeComment extends React.Component { onClick={() => {}} parentCommentId={'commentID'} currentUserId={{}} - banned={false} />
diff --git a/client/coral-sign-in/containers/ChangeUsernameContainer.js b/client/coral-sign-in/containers/ChangeUsernameContainer.js index 33ae63614..ca065169f 100644 --- a/client/coral-sign-in/containers/ChangeUsernameContainer.js +++ b/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); From 2c60285981581b4d3777f95fe6eacc95f43ff18a Mon Sep 17 00:00:00 2001 From: gaba Date: Wed, 22 Feb 2017 07:00:15 -0800 Subject: [PATCH 4/9] The component needs the banned value. --- client/coral-sign-in/components/FakeComment.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/coral-sign-in/components/FakeComment.js b/client/coral-sign-in/components/FakeComment.js index c496e69d9..97afa59fa 100644 --- a/client/coral-sign-in/components/FakeComment.js +++ b/client/coral-sign-in/components/FakeComment.js @@ -39,6 +39,7 @@ class FakeComment extends React.Component { onClick={() => {}} parentCommentId={'commentID'} currentUserId={{}} + banned={false} />
From 32bc754bf7435e3caa92c466f79a912c208052a4 Mon Sep 17 00:00:00 2001 From: gaba Date: Wed, 22 Feb 2017 11:22:51 -0800 Subject: [PATCH 5/9] It needs to send the translation key --- client/coral-framework/helpers/response.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/coral-framework/helpers/response.js b/client/coral-framework/helpers/response.js index 64803faef..0fce878cd 100644 --- a/client/coral-framework/helpers/response.js +++ b/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; From 5d0ea6a880c20e0655e2df080adbd3caefd24a22 Mon Sep 17 00:00:00 2001 From: gaba Date: Thu, 23 Feb 2017 09:48:59 -0800 Subject: [PATCH 6/9] Rmove continue button, fix bug with facebook signup. --- .../components/CreateUsernameDialog.js | 1 - client/coral-sign-in/components/styles.css | 7 ------ .../containers/ChangeUsernameContainer.js | 2 +- routes/api/auth/index.js | 23 ++++++++----------- services/users.js | 5 +++- 5 files changed, 14 insertions(+), 24 deletions(-) diff --git a/client/coral-sign-in/components/CreateUsernameDialog.js b/client/coral-sign-in/components/CreateUsernameDialog.js index f0edc7398..d0e348046 100644 --- a/client/coral-sign-in/components/CreateUsernameDialog.js +++ b/client/coral-sign-in/components/CreateUsernameDialog.js @@ -50,7 +50,6 @@ const CreateUsernameDialog = ({open, handleClose, offset, formData, handleSubmit />
- diff --git a/client/coral-sign-in/components/styles.css b/client/coral-sign-in/components/styles.css index 81afe75e5..617c8d1cb 100644 --- a/client/coral-sign-in/components/styles.css +++ b/client/coral-sign-in/components/styles.css @@ -173,13 +173,6 @@ input.error{ color: white; } -.continuebutton { - background-color: black; - font-weight: bold; - color: white; - min-width: 200px; -} - .fakeComment { display: block; margin-bottom: 5px; diff --git a/client/coral-sign-in/containers/ChangeUsernameContainer.js b/client/coral-sign-in/containers/ChangeUsernameContainer.js index ca065169f..c4450aa56 100644 --- a/client/coral-sign-in/containers/ChangeUsernameContainer.js +++ b/client/coral-sign-in/containers/ChangeUsernameContainer.js @@ -104,7 +104,7 @@ class ChangeUsernameContainer extends Component { return (
(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), changeusername: true}); + }); }; /** diff --git a/services/users.js b/services/users.js index cf3a0063d..b58776a75 100644 --- a/services/users.js +++ b/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(); From 022667c9aed1f778f2a07a1171116ba2e7fd2dd5 Mon Sep 17 00:00:00 2001 From: gaba Date: Thu, 23 Feb 2017 13:55:51 -0800 Subject: [PATCH 7/9] Brings some of the components into FakeComment --- .../coral-sign-in/components/FakeComment.js | 38 ++++++++++++------- client/coral-sign-in/translations.js | 12 +++++- 2 files changed, 36 insertions(+), 14 deletions(-) diff --git a/client/coral-sign-in/components/FakeComment.js b/client/coral-sign-in/components/FakeComment.js index 97afa59fa..75d4e51f1 100644 --- a/client/coral-sign-in/components/FakeComment.js +++ b/client/coral-sign-in/components/FakeComment.js @@ -1,13 +1,15 @@ import React from 'react'; import styles from 'coral-embed-stream/src/Comment.css'; -import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton'; 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 FlagComment from 'coral-plugin-flags/FlagComment'; -import LikeButton from 'coral-plugin-likes/LikeButton'; + +import I18n from 'coral-framework/modules/i18n/i18n'; +import translations from '../translations'; + +const lang = new I18n(translations); class FakeComment extends React.Component { constructor (props) { @@ -27,14 +29,13 @@ class FakeComment extends React.Component {
- {return;}} - deleteAction={()=>{return;}} - showSignInDialog={()=>{return;}} - currentUser={{}} - /> +
+ +
; {}} parentCommentId={'commentID'} @@ -43,8 +44,19 @@ class FakeComment extends React.Component { />
- - +
+ +
+
+ +
); diff --git a/client/coral-sign-in/translations.js b/client/coral-sign-in/translations.js index 5693939af..7a946c0bb 100644 --- a/client/coral-sign-in/translations.js +++ b/client/coral-sign-in/translations.js @@ -42,7 +42,12 @@ export default { 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': { @@ -88,5 +93,10 @@ export default { 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', } }; From d650779c1a3b83ea035ff9b0705874f15cf96996 Mon Sep 17 00:00:00 2001 From: gaba Date: Fri, 24 Feb 2017 16:08:25 -0800 Subject: [PATCH 8/9] Removes ; --- client/coral-sign-in/components/FakeComment.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/coral-sign-in/components/FakeComment.js b/client/coral-sign-in/components/FakeComment.js index 75d4e51f1..b5af6bf1c 100644 --- a/client/coral-sign-in/components/FakeComment.js +++ b/client/coral-sign-in/components/FakeComment.js @@ -35,7 +35,7 @@ class FakeComment extends React.Component { thumb_up - ; + {}} parentCommentId={'commentID'} From a429af3c0e9da6b9c7ab981ca8dabeab8fa969d2 Mon Sep 17 00:00:00 2001 From: gaba Date: Fri, 24 Feb 2017 16:09:22 -0800 Subject: [PATCH 9/9] Removes varialbe not used. --- routes/api/auth/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/routes/api/auth/index.js b/routes/api/auth/index.js index 8bd7a1263..fc3b87e51 100644 --- a/routes/api/auth/index.js +++ b/routes/api/auth/index.js @@ -77,7 +77,7 @@ const HandleAuthPopupCallback = (req, res, next) => (err, user) => { } // We logged in the user! Let's send back the user data. - res.render('auth-callback', {err: null, data: JSON.stringify(user), changeusername: true}); + res.render('auth-callback', {err: null, data: JSON.stringify(user)}); }); };