Moves create displayname dialog to sign-in plugin.

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

@@ -19,7 +19,7 @@ import Count from 'coral-plugin-comment-count/CommentCount';
 import CommentBox from 'coral-plugin-commentbox/CommentBox';
 import UserBox from '../../coral-sign-in/components/UserBox';
 import SignInContainer from '../../coral-sign-in/containers/SignInContainer';
-import ChangeDisplayNameContainer from '../../coral-framework/containers/ChangeDisplayNameContainer';
+import ChangeDisplayNameContainer from '../../coral-sign-in/containers/ChangeDisplayNameContainer';
 import SuspendedAccount from '../../coral-framework/components/SuspendedAccount';
 import SettingsContainer from '../../coral-settings/containers/SettingsContainer';
 import RestrictedContent from '../../coral-framework/components/RestrictedContent';

client/coral-framework/actions/auth.js

@@ -12,6 +12,9 @@ export const createDisplayNameRequest = () => ({type: actions.CREATE_DISPLAYNAME
 export const showCreateDisplayNameDialog = () => ({type: actions.SHOW_CREATEDISPLAYNAME_DIALOG});
 export const hideCreateDisplayNameDialog = () => ({type: actions.HIDE_CREATEDISPLAYNAME_DIALOG});
 
+const createDisplayNameSuccess = () => ({type: actions.CREATEDISPLAYNAME_SUCCESS});
+const createDisplayNameFailure = error => ({type: actions.CREATEDISPLAYNAME_FAILURE, error});
+
 export const updateDisplayName = displayName => ({type: actions.UPDATE_DISPLAYNAME, displayName});
 
 export const createDisplayName = (userId, formData) => dispatch => {
@@ -27,9 +30,6 @@ export const createDisplayName = (userId, formData) => dispatch => {
     });
 };
 
-const createDisplayNameSuccess = () => ({type: actions.CREATEDISPLAYNAME_SUCCESS});
-const createDisplayNameFailure = error => ({type: actions.CREATEDISPLAYNAME_FAILURE, error});
-
 export const changeView = view => dispatch =>
   dispatch({
     type: actions.CHANGE_VIEW,

client/coral-framework/components/Alert.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import styles from './styles.css';
-
-const Alert = ({cStyle = 'error', children, className, ...props}) => (
-  <div
-    className={`${styles.alert} ${styles[`alert--${cStyle}`]} ${className}`}
-    {...props}
-  >
-    {children}
-  </div>
-);
-
-export default Alert;

client/coral-framework/components/FormField.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import styles from './styles.css';
-
-const FormField = ({className, showErrors = false, errorMsg, label, ...props}) => (
-  <div className={`${styles.formField} ${className ? className : ''}`}>
-    <label htmlFor={props.id}>
-      {label}
-    </label>
-    <input
-      className={showErrors && errorMsg ? styles.error : ''}
-      name={props.id}
-      {...props}
-    />
-    {showErrors && errorMsg && <span className={styles.errorMsg}><span className={styles.attention}>!</span>{errorMsg}</span>}
-  </div>
-);
-
-export default FormField;

client/coral-framework/components/styles.css

@@ -1,140 +0,0 @@
-.dialog {
-    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: 280px;
-    top: 10px;
-}
-
-.header {
-    margin-bottom: 20px;
-}
-
-.header h1, .separator h1{
-    text-align: center;
-    font-size: 1.2em;
-}
-
-.formField {
-    margin-top: 15px;
-}
-
-.formField label {
-    font-size: 1.08em;
-    font-weight: bold;
-    margin-bottom: 5px;
-}
-
-.formField input {
-    width: 100%;
-    display: block;
-    border: none;
-    outline: none;
-    border: 1px solid rgba(0,0,0,.12);
-    padding: 10px 6px;
-    box-sizing: border-box;
-    border-radius: 2px;
-    margin: 5px auto;
-}
-
-.footer {
-    margin: 20px auto 10px;
-    text-align: center;
-}
-
-.footer span {
-    display: block;
-    margin-bottom: 5px;
-}
-
-.footer a {
-    color: #2c69b6;
-    cursor: pointer;
-    margin: 0 5px;
-}
-
-.socialConnections {
-    margin-bottom: 20px;
-}
-
-.signInButton {
-    margin-top: 10px;
-}
-
-.close {
-    font-size: 20px;
-    line-height: 14px;
-    top: 10px;
-    right: 10px;
-    position: absolute;
-    display: block;
-    font-weight: bold;
-    color: #363636;
-    cursor: pointer;
-}
-
-.close:hover {
-    color: #6b6b6b;
-}
-
-input.error{
-    border: solid 2px #f44336;
-}
-
-.errorMsg, .hint {
-    color: grey;
-    font-weight: 600;
-    padding: 3px 0 16px;
-}
-
-.alert {
-    padding: 10px;
-    margin-bottom: 20px;
-    border-radius: 2px;
-}
-
-.alert--success {
-    border: solid 1px #1ec00e;
-    background: #cbf1b8;
-    color: #006900;
-}
-
-.alert--error {
-    background: #FFEBEE;
-    color: #B71C1C;
-}
-
-.userBox {
-  padding: 10px 0 20px;
-  letter-spacing: 0.1px;
-}
-
-.userBox a {
-    color: black;
-    font-weight: bold;
-    cursor: pointer;
-    margin: 0px;
-    margin-left: 4px;
-    padding-bottom: 2px;
-    border-bottom: solid 1px black;
-}
-
-.attention {
-    display: inline-block;
-    width: 15px;
-    height: 15px;
-    background: #B71C1C;
-    color: #FFEBEE;
-    font-weight: bolder;
-    padding: 4px;
-    vertical-align: middle;
-    border-radius: 20px;
-    box-sizing: border-box;
-    font-size: 9px;
-    line-height: 7px;
-    text-align: center;
-    margin-right: 5px;
-}
-
-.action {
-    margin-top: 15px;
-}

client/coral-framework/translations.json

@@ -4,16 +4,6 @@
     "successBioUpdate": "Your Bio has been updated",
     "contentNotAvailable": "This content is not available",
     "suspendedAccountMsg": "Your account is currently suspended. This means that you cannot Like, Flag, or write comments. Please contact moderator@fakeurl.com for more information",
-    "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.",
-      "displayName": "Display Name",
-      "save": "Save",
-      "requiredField": "Required field",
-      "errorCreate": "Error when changing display name",
-      "checkTheForm": "Invalid Form. Please, check the fields",
-      "specialCharacters": "Display names can contain letters, numbers and _ only"
-    },
     "error": {
       "emailNotVerified": "Email address {0} not verified.",
       "email": "Not a valid E-Mail",
@@ -37,16 +27,6 @@
     "successBioUpdate": "Tu bio fue actualizada",
     "contentNotAvailable": "El contenido no se encuentra disponible",
     "suspendedAccountMsg": "Tu cuenta se encuentra suspendida. Esto significa que no puedes dar Like, Marcar o escribir commentarios. Por favor, contacta moderator@fakeurl for more information",
-    "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.",
-      "displayName": "Nombre a mostrar",
-      "save": "Guardar",
-      "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 _"
-    },
     "error": {
       "emailNotVerified": "Dirección de correo electrónico {0} no verificada.",
       "email": "No es un email válido",

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import FormField from './FormField';
+import FormField from 'coral-ui/components/FormField';
 import Alert from './Alert';
 import Button from 'coral-ui/components/Button';
 import {Dialog} from 'coral-ui';
@@ -25,7 +25,7 @@ const CreateDisplayNameDialog = ({open, handleClose, offset, formData, handleSub
         </h1>
       </div>
       <div>
-        <p>{lang.t('createdisplay.yourusername')}</p>
+        <label htmlFor="displayName">{lang.t('createdisplay.yourusername')}</label>
         { props.auth.error && <Alert>{props.auth.error}</Alert> }
         <form id="saveDisplayName" onSubmit={handleSubmitDisplayName}>
           <FormField
@@ -35,7 +35,7 @@ const CreateDisplayNameDialog = ({open, handleClose, offset, formData, handleSub
             value={formData.displayName}
             onChange={handleChange}
           />
-          { props.errors.displayName && <span className={styles.hint}> {lang.t('createdisplay.specialCharacters')} </span> }
+        { props.errors.displayName && <span className={styles.hint}> {lang.t('createdisplay.specialCharacters')} </span> }
           <div className={styles.action}>
             <Button id="save" type="submit" className={styles.saveButton}>{lang.t('createdisplay.save')}</Button>
           </div>

client/coral-sign-in/translations.js

@@ -26,7 +26,17 @@ export default {
       passwordsDontMatch: 'Passwords don\'t match.',
       specialCharacters: 'Display names can contain letters, numbers and _ only',
       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.',
+      displayName: 'Display Name',
+      save: 'Save',
+      requiredField: 'Required field',
+      errorCreate: 'Error when changing display name',
+      checkTheForm: 'Invalid Form. Please, check the fields',
+      specialCharacters: 'Display names can contain letters, numbers and _ only'
+    },
   },
   es: {
     'signIn': {
@@ -55,6 +65,16 @@ export default {
       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: '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.',
+      displayName: 'Nombre a mostrar',
+      save: 'Guardar',
+      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 _'
+    },
   }
 };