Merge branch 'master' into translations-de-4.4.1

plugins/talk-plugin-facebook-auth/client/actions.js

@@ -1,3 +1,5 @@
+import { handlePopupAuth } from 'plugin-api/beta/client/utils';
+
 export const loginWithFacebook = () => (dispatch, _, { rest }) => {
-  window.location = `${rest.uri}/auth/facebook`;
+  handlePopupAuth(`${rest.uri}/auth/facebook`);
 };

plugins/talk-plugin-facebook-auth/client/index.js

@@ -5,6 +5,7 @@ import translations from './translations.yml';
 export default {
   translations,
   slots: {
+    authExternalAdminSignIn: [SignIn],
     authExternalSignIn: [SignIn],
     authExternalSignUp: [SignUp],
   },

plugins/talk-plugin-google-auth/client/actions.js

@@ -1,3 +1,5 @@
+import { handlePopupAuth } from 'plugin-api/beta/client/utils';
+
 export const loginWithGoogle = () => (dispatch, _, { rest }) => {
-  window.location = `${rest.uri}/auth/google`;
+  handlePopupAuth(`${rest.uri}/auth/google`);
 };

plugins/talk-plugin-google-auth/client/index.js

@@ -5,6 +5,7 @@ import translations from './translations.yml';
 export default {
   translations,
   slots: {
+    authExternalAdminSignIn: [SignIn],
     authExternalSignIn: [SignIn],
     authExternalSignUp: [SignUp],
   },

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

@@ -223,11 +223,21 @@ class Profile extends React.Component {
                   disabled={!usernameCanBeUpdated}
                   columnDisplay
                 >
-                  <span className={styles.bottomText}>
-                    {t(
-                      'talk-plugin-local-auth.change_username.change_username_note'
+                  <div className={styles.bottomText}>
+                    <span>
+                      {t(
+                        'talk-plugin-local-auth.change_username.change_username_note'
+                      )}
+                    </span>
+                    {!usernameCanBeUpdated && (
+                      <b>
+                        {' '}
+                        {t(
+                          'talk-plugin-local-auth.change_username.is_not_eligible'
+                        )}
+                      </b>
                     )}
-                  </span>
+                  </div>
                 </InputField>
                 <InputField
                   icon="email"

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

@@ -19,7 +19,8 @@ en:
       changed_password_msg: "Changed Password - Your password has been successfully changed"
       forgot_password_sent: "Forgot Password - We sent you an email to recover your password"
     change_username:
-      change_username_note: "Usernames can only be changed once every 14 days. Your username is not currently eligible to be updated."
+      change_username_note: "Usernames can only be changed once every 14 days."
+      is_not_eligible: "You cannot currently change your username."
       save: "Save"
       edit_profile: "Edit Profile"
       cancel: "Cancel"
@@ -151,7 +152,8 @@ es:
       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"
     change_username:
-      change_username_note: "El usuario puede ser cambiado cada 14 días"
+      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."
       save: "Guardar"
       edit_profile: "Editar Perfil"
       cancel: "Cancelar"

plugins/talk-plugin-profile-data/client/components/DeleteMyAccount.js

@@ -63,17 +63,18 @@ class DeleteMyAccount extends React.Component {
         <p className="talk-plugin-auth--delete-my-account-description">
           {t('delete_request.delete_my_account_description')}
         </p>
-        <p className="talk-plugin-auth--delete-my-account-description">
-          {scheduledDeletionDate &&
-            t(
-              'delete_request.already_submitted_request_description',
-              moment(scheduledDeletionDate).format('MMM Do YYYY, h:mm:ss a')
-            )}
-        </p>
         {scheduledDeletionDate ? (
-          <Button onClick={this.cancelAccountDeletion}>
-            {t('delete_request.cancel_account_deletion_request')}
-          </Button>
+          <div>
+            <p className="talk-plugin-auth--delete-my-account-description">
+              {t(
+                'delete_request.already_submitted_request_description',
+                moment(scheduledDeletionDate).format('MMM Do YYYY, h:mm:ss a')
+              )}
+            </p>
+            <Button onClick={this.cancelAccountDeletion}>
+              {t('delete_request.cancel_account_deletion_request')}
+            </Button>
+          </div>
         ) : (
           <Button icon="delete" onClick={this.showDialog}>
             {t('delete_request.delete_my_account')}

plugins/talk-plugin-rich-text/client/components/rte/components/Button.js

@@ -7,21 +7,17 @@ class Button extends React.Component {
   render() {
     const {
       className,
-      title,
-      onClick,
       children,
       active,
       activeClassName,
-      disabled,
+      ...rest
     } = this.props;
     return (
       <button
         className={cn(className, styles.button, {
           [cn(styles.active, activeClassName)]: active,
         })}
-        title={title}
-        onClick={onClick}
-        disabled={disabled}
+        {...rest}
       >
         {children}
       </button>
@@ -32,11 +28,8 @@ class Button extends React.Component {
 Button.propTypes = {
   className: PropTypes.string,
   activeClassName: PropTypes.string,
-  title: PropTypes.string,
-  onClick: PropTypes.func,
   children: PropTypes.node,
   active: PropTypes.bool,
-  disabled: PropTypes.bool,
 };
 
 export default Button;

plugins/talk-plugin-rich-text/client/components/rte/factories/createToggle.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '../components/Button';
+import bowser from 'bowser';
 
 /**
  *  createToggle creates a button that can be active, inactive or disabled
@@ -32,7 +33,17 @@ const createToggle = (
       this.execCommand();
     };
 
+    // Detect whether there was focus on the RTE before the click.
+    hadFocusBeforeClick = false;
+    handleMouseDown = () => (this.hadFocusBeforeClick = this.props.api.focused);
+
     handleClick = () => {
+      // Skip IOS when the focus was not there before.
+      // IOS fails to focus to the RTE correctly and scrolls to nirvana.
+      // See https://www.pivotaltracker.com/story/show/157607216
+      if (!this.hadFocusBeforeClick && bowser.ios) {
+        return;
+      }
       this.props.api.focus();
       this.formatToggle();
       this.props.api.focus();
@@ -62,6 +73,7 @@ const createToggle = (
         <Button
           className={className}
           title={title}
+          onMouseDown={this.handleMouseDown}
           onClick={this.handleClick}
           active={this.state.active}
           disabled={disabled || this.state.disabled}

plugins/talk-plugin-rich-text/client/components/rte/lib/dom.js

@@ -381,9 +381,13 @@ export function isBogusBR(node) {
 }
 
 /**
- * Returns an array of all nodes after `node`.
+ * Returns an array of all nodes after `node` in a _line_.
  */
 export function getRightOfNode(node) {
+  if (node.tagName === 'BR') {
+    return [];
+  }
+
   let result = [];
   let cur = node;
   while (
@@ -515,10 +519,10 @@ export function outdentBlock(node, changeSelection) {
 
   // A new lines to substitute the missing block element.
   const needLineAfter =
-    node.nextSibling &&
-    !isBlockElement(node.nextSibling) &&
-    node.lastChild &&
-    !isBlockElement(node.lastChild);
+    !node.lastChild ||
+    (node.nextSibling &&
+      !isBlockElement(node.nextSibling) &&
+      !isBlockElement(node.lastChild));
   const needLineBefore =
     node.previousSibling &&
     !isBlockElement(node.previousSibling) &&