Merge branch 'master' into admin-improvements

client/coral-admin/src/components/UserDetailComment.js

@@ -123,7 +123,7 @@ class UserDetailComment extends React.Component {
                 <IfHasLink text={comment.body}>
                   <span className={styles.hasLinks}>
                     {/* TODO: translate string */}
-                    <Icon name="error_outline" /> Contains Link
+                    <Icon name="error_outline" /> {t('common.contains_link')}
                   </span>
                 </IfHasLink>
                 <div className={styles.actions}>

client/coral-admin/src/routes/Configure/components/Wordlist.js

@@ -6,7 +6,7 @@ import ConfigureCard from 'coral-framework/components/ConfigureCard';
 
 const Wordlist = ({ suspectWords, bannedWords, onChangeWordlist }) => (
   <div>
-    <ConfigureCard title={t('configure.banned_words_title')}>
+    <ConfigureCard collapsible title={t('configure.banned_words_title')}>
       <p>{t('configure.banned_word_text')}</p>
       <TagsInput
         value={bannedWords}
@@ -16,7 +16,7 @@ const Wordlist = ({ suspectWords, bannedWords, onChangeWordlist }) => (
         onChange={tags => onChangeWordlist('banned', tags)}
       />
     </ConfigureCard>
-    <ConfigureCard title={t('configure.suspect_word_title')}>
+    <ConfigureCard collapsible title={t('configure.suspect_word_title')}>
       <p>{t('configure.suspect_word_text')}</p>
       <TagsInput
         value={suspectWords}

client/coral-admin/src/routes/Moderation/components/Comment.js

@@ -183,8 +183,7 @@ class Comment extends React.Component {
               <div className={styles.sideActions}>
                 <IfHasLink text={comment.body}>
                   <span className={styles.hasLinks}>
-                    {/* TODO: translate string */}
-                    <Icon name="error_outline" /> Contains Link
+                    <Icon name="error_outline" /> {t('common.contains_link')}
                   </span>
                 </IfHasLink>
                 <div className={`actions ${styles.actions}`}>

client/coral-admin/src/routes/Stories/containers/Stories.js

@@ -50,7 +50,7 @@ class StoriesContainer extends Component {
     const { updateAssetState } = this.props;
 
     try {
-      updateAssetState(id, closeStream ? Date.now() : null);
+      await updateAssetState(id, closeStream ? Date.now() : null);
       this.fetchAssets();
     } catch (err) {
       console.error(err);

client/coral-framework/components/ConfigureCard.css

@@ -1,49 +1,48 @@
 .card {
-  margin-bottom: 20px;
-  align-items: flex-start;
-  min-height: 100px;
   max-width: 600px;
+  min-height: 100px;
+  flex-direction: row;
+  align-items: flex-start;
+  margin-bottom: 20px;
   overflow: visible;
 }
 
+.collapsibleCard {
+  min-height: auto;
+}
+
+.enabledCard {
+  border-left: 7px solid #00796b;
+}
+
+.action {
+  flex-shrink: 0;
+  margin-right: 12px;
+}
+
+.wrapper {
+  flex-grow: 1;
+}
+
 .header {
-  margin-top: 3px;
-  margin-bottom: 7px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 2px;
+}
+
+.title {
   font-size: 18px;
   font-weight: 500;
 }
 
-.wrapper {
-  width: 100%;
+.body {
+  margin-top: 7px;
   font-size: 14px;
   letter-spacing: 0;
 }
 
-.action {
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 20px;
-}
-
-.content {
-  display: inline-block;
-  padding: 0px 30px;
-  box-sizing: border-box;
-}
-
-.enabledSetting {
-  border-left-color: #00796b;
-  border-left-style: solid;
-  border-left-width: 7px;
-}
-
-.disabledSetting {
-  padding-left: 22px;
-}
-
-.disabledSettingText {
+.disabledBody {
   color: #ccc;
   pointer-events: none;
 }

client/coral-framework/components/ConfigureCard.js

@@ -1,46 +1,69 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import styles from './ConfigureCard.css';
+import classnames from 'classnames/bind';
 import { Card } from 'coral-ui';
-import { Checkbox } from 'react-mdl';
-import cn from 'classnames';
+import { Checkbox, IconButton } from 'react-mdl';
 
-const ConfigureCard = ({
-  title,
-  children,
-  className,
-  onCheckbox,
-  checked,
-  ...rest
-}) => (
-  <Card
-    {...rest}
-    className={cn(styles.card, className, {
-      [styles.enabledSetting]: checked === true,
-      [styles.disabledSetting]: checked === false,
-    })}
-  >
-    {checked !== undefined && (
-      <div className={styles.action}>
-        <Checkbox onChange={onCheckbox} checked={checked} />
-      </div>
-    )}
-    <div
-      className={cn(styles.wrapper, {
-        [styles.content]: checked !== undefined,
-      })}
-    >
-      <div className={styles.header}>{title}</div>
-      <div
-        className={cn({
-          [styles.disabledSettingText]: checked === false,
+import styles from './ConfigureCard.css';
+
+const cn = classnames.bind(styles);
+
+class ConfigureCard extends PureComponent {
+  state = {
+    isOpen: !this.props.collapsible,
+  };
+
+  toggle = () => this.setState({ isOpen: !this.state.isOpen });
+
+  render() {
+    const {
+      title,
+      children,
+      className,
+      onCheckbox,
+      checked,
+      collapsible,
+      ...rest
+    } = this.props;
+
+    const { isOpen } = this.state;
+
+    const iconName = isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down';
+
+    return (
+      <Card
+        {...rest}
+        className={cn(styles.card, className, {
+          enabledCard: checked === true,
+          collapsibleCard: collapsible,
         })}
       >
-        {children}
-      </div>
-    </div>
-  </Card>
-);
+        {checked !== undefined && (
+          <div className={styles.action}>
+            <Checkbox onChange={onCheckbox} checked={checked} />
+          </div>
+        )}
+        <div className={styles.wrapper}>
+          <div className={styles.header}>
+            <div className={styles.title}>{title}</div>
+            {collapsible && (
+              <IconButton onClick={this.toggle} name={iconName} ripple />
+            )}
+          </div>
+          {isOpen && (
+            <div
+              className={cn(styles.body, {
+                disabledBody: checked === false,
+              })}
+            >
+              {children}
+            </div>
+          )}
+        </div>
+      </Card>
+    );
+  }
+}
 
 ConfigureCard.propTypes = {
   title: PropTypes.string,
@@ -48,6 +71,7 @@ ConfigureCard.propTypes = {
   onCheckbox: PropTypes.func,
   checked: PropTypes.bool,
   children: PropTypes.node,
+  collapsible: PropTypes.bool,
 };
 
 export default ConfigureCard;

locales/en.yml

@@ -48,6 +48,7 @@ en:
   comment_post_notif_premod: 'Thank you for posting. Our moderation team will review your comment shortly.'
   comment_singular: Comment
   common:
+    contains_link: 'Contains Link'
     copy: Copy
     copied: 'Copied'
     notsupported: 'Not supported'

locales/es.yml

@@ -45,6 +45,7 @@ es:
   comment_post_notif_premod: 'Gracias por el comentario. Nuestro equipo de moderación va a revisarlo muy pronto.'
   comment_singular: Comentario
   common:
+    contains_link: 'Contiene enlace'
     copy: Copiar
     error: 'Ha ocurrido un error.'
     reaction: reacción
@@ -400,6 +401,7 @@ es:
   other: Otro
   password_reset:
     change_password: 'Cambio de contraseña'
+    change_password_help: 'Por favor, introduzca una nueva contraseña. ¡Hazlo seguro!'
     confirm_new_password: 'Confirme su nueva contraseña'
     mail_sent: 'Si tiene una cuenta registrada, un enlace para resetear su clave ha sido enviado a esa dirección de correo.'
     new_password: 'Nueva contraseña'

plugins/talk-plugin-local-auth/client/components/Profile.js

@@ -178,10 +178,12 @@ class Profile extends React.Component {
         },
       },
       notify,
+      success: hasChangedUsername,
     } = this.props;
     const { editing, formData, showDialog } = this.state;
 
-    const usernameCanBeUpdated = canUsernameBeUpdated(status);
+    const usernameCanBeUpdated =
+      canUsernameBeUpdated(status) && !hasChangedUsername;
 
     return (
       <section
@@ -232,6 +234,7 @@ class Profile extends React.Component {
                   validationType="username"
                   disabled={!usernameCanBeUpdated}
                   columnDisplay
+                  errorMsg={this.state.errors.newUsername}
                 >
                   <div className={styles.bottomText}>
                     <span>
@@ -307,6 +310,7 @@ Profile.propTypes = {
   notify: PropTypes.func.isRequired,
   username: PropTypes.string,
   emailAddress: PropTypes.string,
+  success: PropTypes.bool.isRequired,
 };
 
 export default Profile;

plugins/talk-plugin-local-auth/translations.yml

@@ -302,25 +302,28 @@ de:
         path: "Mein Profil > Profil-Einstellungen"
         alert: "E-Mail-Adresse hinzugefügt!"
 es:
+  email:
+    email_change_original:
+      subject: Cambio de correo electrónico
+      body: Su dirección de correo electrónico ha cambiado de {0} a {1}. Si no solicitó este cambio, póngase en contacto con {2}.
+  error:
+    NO_LOCAL_PROFILE: No hay una dirección de correo electrónico asociada a esta cuenta.
+    LOCAL_PROFILE: Una dirección de correo electrónico ya está asociada a esta cuenta.
+    INCORRECT_PASSWORD: La contraseña dada fue incorrecta.
   talk-plugin-local-auth:
-    email:
-      email_change_original:
-        subject: Cambio de correo electrónico
-        body: Su dirección de correo electrónico ha cambiado de {0} a {1}. Si no solicitó este cambio, póngase en contacto con {2}.
-    error:
-      NO_LOCAL_PROFILE: No hay una dirección de correo electrónico asociada a esta cuenta.
-      LOCAL_PROFILE: Una dirección de correo electrónico ya está asociada a esta cuenta.
-      INCORRECT_PASSWORD: La contraseña dada fue incorrecta.
     change_password:
+      save: "Salvar"
+      cancel: "Cancelar"
+      edit: "Editar"
+      changed_password_msg: "Senha alterada - Sua senha foi alterada com sucesso"
+      forgot_password_sent: "Esqueceu a senha - Nós enviamos um email para recuperação da senha"
       change_password: "Cambiar Contraseña"
       passwords_dont_match: "Las contraseñas no coinciden"
       required_field: "Este campo es requerido"
       forgot_password: "Olvidaste tu contraseña?"
-      save: "Guardar"
-      cancel: "Cancelar"
-      edit: "Editar"
-      changed_password_msg: "Contraseña Actualizada - Tu contraseña ha sido exitosamente actualizada"
-      forgot_password_sent: "Contraseña Olvidada - Te enviamos un email para recuperar tu contraseña"
+      old_password: "Contraseña anterior"
+      new_password: "Contraseña nueva"
+      confirm_new_password: "Confirme contraseña nueva"
     change_username:
       change_username_note: "El usuario puede ser cambiado cada 14 días."
       is_not_eligible: "Ahora mismo no se puede cambiar su nombre de usuario."
@@ -329,11 +332,13 @@ es:
       cancel: "Cancelar"
       confirm_username_change: "Confirmar Cambio de Usuario"
       description: "Estás intentando cambiar tu usuario. Tu nuevo usuario aparecerá en todos tus pasados y futuros comentarios."
-      old_username: "Usuario viejo"
+      old_username: "Usuario anterior"
       new_username: "Usuario nuevo"
+      re_enter: "Escriba usuario nuevo otra vez"
       bottom_note: "Nota: No podrás cambiar tu usuario por 14 días"
       confirm_changes: "Confirmar Cambios"
       username_does_not_match: "El usuario no coincide"
+      cant_be_equal: "Tu nuev@ {0} tiene que ser diferente"
       changed_username_success_msg: "Usuario Actualizado - Tu usuario ha sido exitosamente actualizado. No podrás cambiar el usuario por 14 días."
       change_username_attempt: "El usuario no puede ser actualizado. Los usuarios pueden ser cambiados cada 14 días."
     change_email: