Merge branch 'master' into reject-username

client/coral-admin/src/components/External.css

@@ -0,0 +1,16 @@
+.external {
+  margin-bottom: 20px;
+}
+
+.separator h5 {
+  text-align: center;
+  font-size: 1.2em;
+}
+
+.slot > * {
+margin-bottom: 8px;
+
+&:last-child {
+  margin-bottom: 0px;
+}
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './External.css';
+import Slot from 'coral-framework/components/Slot';
+import IfSlotIsNotEmpty from 'coral-framework/components/IfSlotIsNotEmpty';
+
+const External = ({ slot }) => (
+  <IfSlotIsNotEmpty slot={slot}>
+    <div>
+      <div className={styles.external}>
+        <Slot fill={slot} className={styles.slot} />
+      </div>
+      <div className={styles.separator}>
+        <h5>Or</h5>
+      </div>
+    </div>
+  </IfSlotIsNotEmpty>
+);
+
+External.propTypes = {
+  slot: PropTypes.string.isRequired,
+};
+
+export default External;

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

@@ -4,6 +4,7 @@ import styles from './SignIn.css';
 import { Button, TextField, Alert } from 'coral-ui';
 import cn from 'classnames';
 import Recaptcha from 'coral-framework/components/Recaptcha';
+import External from './External';
 
 class SignIn extends React.Component {
   recaptcha = null;
@@ -33,48 +34,55 @@ class SignIn extends React.Component {
   render() {
     const { email, password, errorMessage, requireRecaptcha } = this.props;
     return (
-      <form className="talk-admin-login-sign-in" onSubmit={this.handleSubmit}>
-        {errorMessage && <Alert>{errorMessage}</Alert>}
-        <TextField
-          id="email"
-          label="Email Address"
-          value={email}
-          onChange={this.handleEmailChange}
-        />
-        <TextField
-          id="password"
-          label="Password"
-          value={password}
-          onChange={this.handlePasswordChange}
-          type="password"
-        />
-        {requireRecaptcha && (
-          <div className={styles.recaptcha}>
-            <Recaptcha
-              ref={this.handleRecaptchaRef}
-              onVerify={this.props.onRecaptchaVerify}
-            />
-          </div>
-        )}
-        <Button
-          className={cn(styles.signInButton, 'talk-admin-login-sign-in-button')}
-          type="submit"
-          cStyle="black"
-          full
-        >
-          Sign In
-        </Button>
-        <p className={styles.forgotPasswordCTA}>
-          Forgot your password?{' '}
-          <a
-            href="#"
-            className={styles.forgotPasswordLink}
-            onClick={this.handleForgotPasswordLink}
+      <div className="talk-admin-login-sign-in">
+        <External slot="authExternalAdminSignIn" />
+        <form onSubmit={this.handleSubmit}>
+          {errorMessage && <Alert>{errorMessage}</Alert>}
+          <TextField
+            id="email"
+            label="Email Address"
+            value={email}
+            onChange={this.handleEmailChange}
+          />
+          <TextField
+            id="password"
+            label="Password"
+            value={password}
+            onChange={this.handlePasswordChange}
+            type="password"
+          />
+          {requireRecaptcha && (
+            <div className={styles.recaptcha}>
+              <Recaptcha
+                ref={this.handleRecaptchaRef}
+                onVerify={this.props.onRecaptchaVerify}
+              />
+            </div>
+          )}
+          <Button
+            className={cn(
+              styles.signInButton,
+              'talk-admin-login-sign-in-button'
+            )}
+            type="submit"
+            cStyle="black"
+            full
           >
-            Request a new one.
-          </a>
-        </p>
-      </form>
+            Sign In
+          </Button>
+          <p className={styles.forgotPasswordCTA}>
+            {/* TODO: translate */}
+            Forgot your password?{' '}
+            <a
+              href="#"
+              className={styles.forgotPasswordLink}
+              onClick={this.handleForgotPasswordLink}
+            >
+              Request a new one.
+            </a>
+          </p>
+        </form>
+      </div>
     );
   }
 }

client/coral-admin/src/components/UserDetail.css

@@ -143,3 +143,7 @@
   border-color: #E45241;
   color: white;
 }
+
+.userDetailItem {
+  padding: 2px 0;
+}

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

@@ -234,7 +234,7 @@ class UserDetail extends React.Component {
 
           <div>
             <ul className={styles.userDetailList}>
-              <li>
+              <li className={styles.userDetailItem}>
                 <Icon name="assignment_ind" />
                 <span className={styles.userDetailItem}>
                   {t('user_detail.member_since')}:
@@ -242,11 +242,24 @@ class UserDetail extends React.Component {
                 {new Date(user.created_at).toLocaleString()}
               </li>
 
-              {user.profiles.map(({ id }) => (
-                <li key={id}>
-                  <Icon name="email" />
+              <li className={styles.userDetailItem}>
+                <Icon name="email" />
+                <span className={styles.userDetailItem}>
+                  {t('user_detail.email')}:
+                </span>
+                {user.email}{' '}
+                <ButtonCopyToClipboard
+                  className={styles.copyButton}
+                  icon="content_copy"
+                  copyText={user.email}
+                />
+              </li>
+
+              {user.profiles.map(({ provider, id }) => (
+                <li key={id} className={styles.userDetailItem}>
+                  <Icon name="device_hub" />
                   <span className={styles.userDetailItem}>
-                    {t('user_detail.email')}:
+                    {capitalize(provider)} {t('user_detail.id')}:
                   </span>
                   {id}{' '}
                   <ButtonCopyToClipboard

client/coral-admin/src/containers/SignIn.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withSignIn } from 'coral-framework/hocs';
+import { withSignIn, withPopupAuthHandler } from 'coral-framework/hocs';
 import { compose } from 'recompose';
 import SignIn from '../components/SignIn';
 
@@ -55,4 +55,4 @@ SignInContainer.propTypes = {
   requireRecaptcha: PropTypes.bool.isRequired,
 };
 
-export default compose(withSignIn)(SignInContainer);
+export default compose(withSignIn, withPopupAuthHandler)(SignInContainer);

client/coral-admin/src/containers/UserDetail.js

@@ -183,6 +183,7 @@ export const withUserDetailQuery = withQuery(
       id
       username
       created_at
+      email
       profiles {
         id
         provider

client/coral-admin/src/routes/Community/components/People.js

@@ -130,7 +130,9 @@ class People extends React.Component {
                             {user.username}
                           </button>
                           <span className={styles.email}>
-                            {user.profiles.map(({ id }) => id)}
+                            {user.email
+                              ? user.email
+                              : user.profiles.map(p => p.id).join(', ')}
                           </span>
                         </td>
                         <td className="mdl-data-table__cell--non-numeric">

client/coral-auth-callback/src/index.js

@@ -3,32 +3,36 @@ import { getStaticConfiguration } from 'coral-framework/services/staticConfigura
 import { createPostMessage } from 'coral-framework/services/postMessage';
 
 document.addEventListener('DOMContentLoaded', () => {
-  try {
-    const staticConfig = getStaticConfiguration();
-    const { STATIC_ORIGIN: origin } = staticConfig;
-    const postMessage = createPostMessage(origin);
+  const staticConfig = getStaticConfiguration();
+  const { STATIC_ORIGIN: origin } = staticConfig;
+  const postMessage = createPostMessage(origin);
 
-    // Get the auth element and parse it as JSON by decoding it.
-    const auth = document.getElementById('auth');
-    const doc = document.implementation.createHTMLDocument('');
-    doc.body.innerHTML = auth.innerText;
+  // Get the auth element and parse it as JSON by decoding it.
+  const auth = document.getElementById('auth');
+  const doc = document.implementation.createHTMLDocument('');
+  doc.body.innerHTML = auth.innerText;
 
-    // Auth state is contained within the node.
-    const { err, data } = JSON.parse(doc.body.textContent);
-    if (err) {
-      // TODO: send back the error message.
-      console.error(err);
+  // Auth state is contained within the node.
+  const { err, data } = JSON.parse(doc.body.textContent);
+  if (err) {
+    const errDiv = document.createElement('div');
+    if (err.message) {
+      errDiv.innerText = `${err.name}: ${err.message}`;
     } else {
-      // The data will contain a user and a token.
-      const { user, token } = data;
-
-      // Send the state back.
-      postMessage.post(HANDLE_SUCCESSFUL_LOGIN, { user, token });
+      errDiv.innerText = JSON.stringify(err);
     }
-  } finally {
-    // Always close the window.
-    setTimeout(() => {
-      window.close();
-    }, 50);
+    document.body.appendChild(errDiv);
+    throw err;
   }
+
+  // The data will contain a user and a token.
+  const { user, token } = data;
+
+  // Send the state back.
+  postMessage.post(HANDLE_SUCCESSFUL_LOGIN, { user, token });
+
+  // Close the window when all went well.
+  setTimeout(() => {
+    window.close();
+  }, 50);
 });

client/coral-embed-stream/src/tabs/stream/components/Comment.js

@@ -745,10 +745,21 @@ export default class Comment extends React.Component {
 
     const id = `c_${comment.id}`;
 
+    // props that are passed down the slots.
+    const slotPassthrough = {
+      action: 'deleted',
+      comment,
+    };
+
     return (
       <div className={rootClassName} id={id}>
         {isCommentDeleted(comment) ? (
-          <CommentTombstone action="deleted" />
+          <Slot
+            fill="commentTombstone"
+            defaultComponent={CommentTombstone}
+            size={1}
+            passthrough={slotPassthrough}
+          />
         ) : (
           <div>
             {this.renderComment()}

client/coral-embed-stream/src/tabs/stream/components/CommentTombstone.js

@@ -39,6 +39,7 @@ class CommentTombstone extends React.Component {
 
 CommentTombstone.propTypes = {
   action: PropTypes.string,
+  comment: PropTypes.object,
   onUndo: PropTypes.func,
 };
 

client/coral-embed-stream/src/tabs/stream/containers/Comment.js

@@ -24,6 +24,7 @@ const slots = [
   'commentAuthorName',
   'commentAuthorTags',
   'commentTimestamp',
+  'commentTombstone',
   'commentContent',
 ];
 

client/coral-framework/graphql/mutations.js

@@ -116,7 +116,7 @@ export const withRemoveTag = withMutation(
             asset_id: assetId,
             item_type: itemType,
           },
-          o3timisticResponse: {
+          optimisticResponse: {
             removeTag: {
               __typename: 'ModifyTagResponse',
               errors: null,

client/coral-framework/services/i18n.js

@@ -1,7 +1,10 @@
-import ta from 'timeago.js';
+import { negotiateLanguages } from 'fluent-langneg/compat';
+
 import has from 'lodash/has';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
+import first from 'lodash/first';
+import isUndefined from 'lodash/isUndefined';
 
 import moment from 'moment';
 import 'moment/locale/ar';
@@ -12,8 +15,8 @@ import 'moment/locale/fr';
 import 'moment/locale/nl';
 import 'moment/locale/pt-br';
 
-import { createStorage } from 'coral-framework/services/storage';
-
+// timeago
+import ta from 'timeago.js';
 import arTA from 'timeago.js/locales/ar';
 import daTA from 'timeago.js/locales/da';
 import deTA from 'timeago.js/locales/de';
@@ -24,6 +27,7 @@ import pt_BRTA from 'timeago.js/locales/pt_BR';
 import zh_CNTA from 'timeago.js/locales/zh_CN';
 import zh_TWTA from 'timeago.js/locales/zh_TW';
 
+// locales
 import ar from '../../../locales/ar.yml';
 import en from '../../../locales/en.yml';
 import da from '../../../locales/da.yml';
@@ -35,8 +39,9 @@ import pt_BR from '../../../locales/pt_BR.yml';
 import zh_CN from '../../../locales/zh_CN.yml';
 import zh_TW from '../../../locales/zh_TW.yml';
 
-const defaultLanguage = process.env.TALK_DEFAULT_LANG;
-const translations = {
+export const defaultLocale = process.env.TALK_DEFAULT_LANG.replace(/-/g, '_');
+
+export const translations = {
   ...ar,
   ...en,
   ...da,
@@ -49,84 +54,62 @@ const translations = {
   ...zh_TW,
 };
 
-let lang;
-let timeagoInstance;
+export const supportedLocales = Object.keys(translations);
 
-function setLocale(storage, locale) {
-  storage.setItem('locale', locale);
-}
+let LOCALE;
+let TIMEAGO_INSTANCE;
 
 // detectLanguage will try to get the locale from storage if available,
 // otherwise will try to get it from the navigator, otherwise, it will fallback
 // to the default language.
-function detectLanguage(storage) {
-  try {
-    const lang = storage.getItem('locale') || navigator.language;
-    if (lang) {
-      return lang;
-    }
-  } catch (err) {
-    console.warn(
-      'Error while trying to detect language, will fallback to',
-      err
-    );
-  }
-
-  console.warn('Could not detect language, will fallback to', defaultLanguage);
-  return defaultLanguage;
-}
-
-// getLocale will get the users locale from the local detector and parse it to a
-// format we can work with.
-function getLocale(storage) {
-  // Get the language from the local detector.
-  const lang = detectLanguage(storage);
-
-  // Some language strings come with additional subtags as defined in:
-  //
-  // https://www.ietf.org/rfc/bcp/bcp47.txt
-  //
-  // So we should strip that off if we find it.
-  return lang.split('-')[0];
-}
+const detectLanguage = () =>
+  first(
+    negotiateLanguages(navigator.languages, supportedLocales, {
+      defaultLocale,
+      strategy: 'lookup',
+    })
+  );
 
 export function setupTranslations() {
-  // Setup the translation framework with the storage.
-  const storage = createStorage('localStorage');
+  // locale
+  LOCALE = detectLanguage();
 
-  const locale = getLocale(storage);
-  setLocale(storage, locale);
-
-  // Setting moment
-  moment.locale(locale);
-
-  // Extract language key.
-  lang = locale.split('-')[0];
-
-  // Check if we have a translation in this language.
-  if (!(lang in translations)) {
-    lang = defaultLanguage;
-  }
+  // moment
+  moment.locale(LOCALE);
 
+  // timeago
   ta.register('ar', arTA);
   ta.register('es', esTA);
   ta.register('da', daTA);
   ta.register('de', deTA);
   ta.register('fr', frTA);
-  ta.register('nl_NL', nlTA);
-  ta.register('pt_BR', pt_BRTA);
-  ta.register('zh_CN', zh_CNTA);
-  ta.register('zh_TW', zh_TWTA);
-
-  timeagoInstance = ta();
+  ta.register('nl-NL', nlTA);
+  ta.register('pt-BR', pt_BRTA);
+  ta.register('zh-CN', zh_CNTA);
+  ta.register('zh-TW', zh_TWTA);
+  TIMEAGO_INSTANCE = ta();
 }
 
+/**
+ * loadTranslations will load the new language pack into the existing ones.
+ *
+ * @param {Object} newTranslations translation object to merge into the existing
+ *                                 languages.
+ */
 export function loadTranslations(newTranslations) {
+  // Merge the new translations into the existing translations.
   merge(translations, newTranslations);
+
+  // Push new languages into the supportedLocales array.
+  Object.keys(newTranslations).forEach(language => {
+    if (!supportedLocales.includes(language)) {
+      supportedLocales.push(language);
+    }
+  });
 }
 
 export function timeago(time) {
-  return timeagoInstance.format(new Date(time), lang);
+  return TIMEAGO_INSTANCE.format(new Date(time), LOCALE);
 }
 
 /**
@@ -140,24 +123,24 @@ export function timeago(time) {
  */
 export function t(key, ...replacements) {
   let translation;
-  if (has(translations[lang], key)) {
-    translation = get(translations[lang], key);
+  if (has(translations[LOCALE], key)) {
+    translation = get(translations[LOCALE], key);
   } else if (has(translations['en'], key)) {
     translation = get(translations['en'], key);
-    console.warn(`${lang}.${key} language key not set`);
+    console.warn(`${LOCALE}.${key} language key not set`);
   }
 
-  if (translation) {
-    // replace any {n} with the arguments passed to this method
-    replacements.forEach((str, i) => {
-      translation = translation.replace(new RegExp(`\\{${i}\\}`, 'g'), str);
-    });
-
-    return translation;
-  } else {
-    console.warn(`${lang}.${key} and en.${key} language key not set`);
+  if (!translation) {
+    console.warn(`${LOCALE}.${key} and en.${key} language key not set`);
     return key;
   }
+
+  // Handle replacements in the translation string.
+  return translation.replace(
+    /{(\d+)}/g,
+    (match, number) =>
+      !isUndefined(replacements[number]) ? replacements[number] : match
+  );
 }
 
 export default t;

client/coral-framework/services/postMessage.js

@@ -56,10 +56,10 @@ export function createPostMessage(origin, scope = 'client') {
       // Send the message.
       target.postMessage(msg, origin);
     },
-    subscribe: (handler, target = window) => {
+    subscribe(handler, target = window) {
       // If this handler is already attached to the target, detach it.
       if (has(listeners, [target, handler])) {
-        this.unsubscribeFromMessages(handler, target);
+        this.unsubscribe(handler, target);
       }
 
       // Wrap the listener with a origin check.
@@ -71,7 +71,7 @@ export function createPostMessage(origin, scope = 'client') {
       // Attach the listener to the target.
       target.addEventListener('message', listener);
     },
-    unsubscribe: (handler, target = window) => {
+    unsubscribe(handler, target = window) {
       if (!has(listeners, [target, handler])) {
         return;
       }

client/coral-framework/utils/index.js

@@ -273,3 +273,23 @@ export function translateError(error) {
   }
   return error.toString();
 }
+
+/**
+ * handlePopupAuth will optionally open a popup with the requested uri if the
+ * window is not already a popup.
+ *
+ * @param {String} uri the url to open the window? to
+ * @param {String} title the title of the new window? to open
+ * @param {String} features the features to use when opening a window?
+ */
+export function handlePopupAuth(
+  uri,
+  title = 'Login', // TODO: translate
+  features = 'menubar=0,resizable=0,width=500,height=550,top=200,left=500'
+) {
+  if (window.opener) {
+    window.location = uri;
+  } else {
+    window.open(uri, title, features);
+  }
+}