Merge branch 'master' into graphql-errors-handling

This commit is contained in:
Kim Gardner
2017-05-26 16:53:13 -04:00
committed by GitHub
55 changed files with 924 additions and 574 deletions
+5
View File
@@ -3,5 +3,10 @@ client/lib
**/*.html
plugins/*
!plugins/coral-plugin-facebook-auth
!plugins/coral-plugin-auth
!plugins/coral-plugin-respect
!plugins/coral-plugin-offtopic
!plugins/coral-plugin-like
!plugins/coral-plugin-mod
!plugins/coral-plugin-love
node_modules
+1
View File
@@ -17,6 +17,7 @@ coverage/
plugins.json
plugins/*
!plugins/coral-plugin-facebook-auth
!plugins/coral-plugin-auth
!plugins/coral-plugin-respect
!plugins/coral-plugin-offtopic
!plugins/coral-plugin-like
+2
View File
@@ -58,6 +58,8 @@ alternative methods of loading configuration during development.
- iPad
- iPad Pro
- iPhone 7 Plus
- iPhone 7
- iPhone 6 Plus
- iPhone 6
- iPhone 5
+4
View File
@@ -11,6 +11,8 @@ const errors = require('./errors');
const {createGraphOptions} = require('./graph');
const apollo = require('graphql-server-express');
const accepts = require('accepts');
const compression = require('compression');
const cookieParser = require('cookie-parser');
const app = express();
@@ -31,6 +33,8 @@ app.set('trust proxy', 1);
app.use(helmet({
frameguard: false
}));
app.use(compression());
app.use(cookieParser());
app.use(bodyParser.json());
//==============================================================================
+1 -1
View File
@@ -8,7 +8,7 @@ import {
UPDATE_ASSETS
} from '../constants/assets';
import coralApi from '../../../coral-framework/helpers/response';
import coralApi from '../../../coral-framework/helpers/request';
/**
* Action disptacher related to assets
+26 -6
View File
@@ -1,6 +1,7 @@
import bowser from 'bowser';
import * as actions from '../constants/auth';
import coralApi from 'coral-framework/helpers/request';
import * as Storage from 'coral-framework/helpers/storage';
import coralApi from 'coral-framework/helpers/response';
import {handleAuthToken} from 'coral-framework/actions/auth';
//==============================================================================
@@ -9,16 +10,31 @@ import {handleAuthToken} from 'coral-framework/actions/auth';
export const handleLogin = (email, password, recaptchaResponse) => (dispatch) => {
dispatch({type: actions.LOGIN_REQUEST});
const params = {method: 'POST', body: {email, password}};
const params = {
method: 'POST',
body: {
email,
password
}
};
if (recaptchaResponse) {
params.headers = {'X-Recaptcha-Response': recaptchaResponse};
params.headers = {
'X-Recaptcha-Response': recaptchaResponse
};
}
return coralApi('/auth/local', params)
.then(({user, token}) => {
if (!user) {
Storage.removeItem('token');
if (!bowser.safari && !bowser.ios) {
Storage.removeItem('token');
}
return dispatch(checkLoginFailure('not logged in'));
}
dispatch(handleAuthToken(token));
dispatch(checkLoginSuccess(user));
})
@@ -52,7 +68,9 @@ const forgotPassowordFailure = () => ({
export const requestPasswordReset = (email) => (dispatch) => {
dispatch(forgotPassowordRequest(email));
return coralApi('/account/password/reset', {method: 'POST', body: {email}})
const redirectUri = location.href;
return coralApi('/account/password/reset', {method: 'POST', body: {email, loc: redirectUri}})
.then(() => dispatch(forgotPassowordSuccess()))
.catch((error) => dispatch(forgotPassowordFailure(error)));
};
@@ -81,7 +99,9 @@ export const checkLogin = () => (dispatch) => {
return coralApi('/auth')
.then(({user}) => {
if (!user) {
Storage.removeItem('token');
if (!bowser.safari && !bowser.ios) {
Storage.removeItem('token');
}
return dispatch(checkLoginFailure('not logged in'));
}
+1 -1
View File
@@ -14,7 +14,7 @@ import {
HIDE_SUSPENDUSER_DIALOG
} from '../constants/community';
import coralApi from '../../../coral-framework/helpers/response';
import coralApi from '../../../coral-framework/helpers/request';
export const fetchAccounts = (query = {}) => (dispatch) => {
+1 -1
View File
@@ -1,4 +1,4 @@
import coralApi from 'coral-framework/helpers/response';
import coralApi from 'coral-framework/helpers/request';
import * as actions from '../constants/install';
import validate from 'coral-framework/helpers/validate';
import errorMsj from 'coral-framework/helpers/error';
+1 -1
View File
@@ -1,4 +1,4 @@
import coralApi from '../../../coral-framework/helpers/response';
import coralApi from '../../../coral-framework/helpers/request';
export const SETTINGS_LOADING = 'SETTINGS_LOADING';
export const SETTINGS_RECEIVED = 'SETTINGS_RECEIVED';
+1 -1
View File
@@ -1,4 +1,4 @@
import coralApi from '../../../coral-framework/helpers/response';
import coralApi from '../../../coral-framework/helpers/request';
import * as userTypes from '../constants/users';
/**
+3 -3
View File
@@ -2,12 +2,12 @@ import React from 'react';
import {Router, Route, browserHistory} from 'react-router';
import Embed from './containers/Embed';
import SignInContainer from 'coral-sign-in/containers/SignInContainer';
import {LoginContainer} from 'coral-sign-in/containers/LoginContainer';
const routes = (
<div>
<Route exact path="/embed/stream/login" component={SignInContainer}/>
<Route exact path="*" component={Embed}/>
<Route exact path="/embed/stream/login" component={LoginContainer}/>
<Route path="*" component={Embed}/>
</div>
);
@@ -1,74 +1,68 @@
import React from 'react';
const lang = new I18n(translations);
import Stream from '../containers/Stream';
import Slot from 'coral-framework/components/Slot';
import {can} from 'coral-framework/services/perms';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from 'coral-framework/translations';
import {can} from 'coral-framework/services/perms';
const lang = new I18n(translations);
import {TabBar, Tab, TabContent, Button} from 'coral-ui';
import Stream from '../containers/Stream';
import Count from 'coral-plugin-comment-count/CommentCount';
import UserBox from 'coral-sign-in/components/UserBox';
import ProfileContainer from 'coral-settings/containers/ProfileContainer';
import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer';
import ConfigureStreamContainer
from 'coral-configure/containers/ConfigureStreamContainer';
export default class Embed extends React.Component {
changeTab = (tab) => {
switch(tab) {
switch (tab) {
case 0:
this.props.setActiveTab('stream');
break;
case 1:
this.props.setActiveTab('profile');
// TODO: move data fetching to profile container.
// TODO: move data fetching to profile container.
this.props.data.refetch();
break;
case 2:
this.props.setActiveTab('config');
// TODO: move data fetching to config container.
// TODO: move data fetching to config container.
this.props.data.refetch();
break;
}
}
};
handleShowProfile = () => this.props.setActiveTab('profile');
render () {
const {activeTab, logout, viewAllComments, commentId} = this.props;
render() {
const {activeTab, viewAllComments, commentId} = this.props;
const {asset: {totalCommentCount}} = this.props.root;
const {loggedIn, user} = this.props.auth;
const userBox = <UserBox user={user} onLogout={logout} onShowProfile={this.handleShowProfile}/>;
const {user} = this.props.auth;
return (
<div>
<div className="commentStream">
<TabBar onChange={this.changeTab} activeTab={activeTab}>
<Tab><Count count={totalCommentCount}/></Tab>
<Tab><Count count={totalCommentCount} /></Tab>
<Tab>{lang.t('myProfile')}</Tab>
<Tab restricted={!can(user, 'UPDATE_CONFIG')}>Configure Stream</Tab>
</TabBar>
{
commentId &&
<Button
cStyle='darkGrey'
style={{float: 'right'}}
onClick={viewAllComments}
>
{lang.t('showAllComments')}
</Button>
}
{commentId &&
<Button
cStyle="darkGrey"
style={{float: 'right'}}
onClick={viewAllComments}
>
{lang.t('showAllComments')}
</Button>}
<Slot fill="embed" />
<TabContent show={activeTab === 'stream'}>
{ loggedIn ? userBox : null }
<Stream data={this.props.data} root={this.props.root} />
</TabContent>
<TabContent show={activeTab === 'profile'}>
<ProfileContainer />
</TabContent>
<TabContent show={activeTab === 'config'}>
{ loggedIn ? userBox : null }
<ConfigureStreamContainer />
</TabContent>
</div>
@@ -81,5 +75,5 @@ Embed.propTypes = {
data: React.PropTypes.shape({
loading: React.PropTypes.bool,
error: React.PropTypes.object
}).isRequired,
}).isRequired
};
@@ -1,22 +1,18 @@
import React, {PropTypes} from 'react';
import {Button} from 'coral-ui';
import LoadMore from './LoadMore';
import NewCount from './NewCount';
import Comment from '../containers/Comment';
import SuspendedAccount from './SuspendedAccount';
import Slot from 'coral-framework/components/Slot';
import InfoBox from 'coral-plugin-infobox/InfoBox';
import {can} from 'coral-framework/services/perms';
import I18n from 'coral-framework/modules/i18n/i18n';
import {ModerationLink} from 'coral-plugin-moderation';
import translations from 'coral-framework/translations';
import CommentBox from 'coral-plugin-commentbox/CommentBox';
import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
import IgnoredCommentTombstone from './IgnoredCommentTombstone';
import SuspendedAccount from './SuspendedAccount';
import RestrictedMessageBox
from 'coral-framework/components/RestrictedMessageBox';
import {can} from 'coral-framework/services/perms';
import ChangeUsernameContainer
from 'coral-sign-in/containers/ChangeUsernameContainer';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from 'coral-framework/translations';
const lang = new I18n(translations);
@@ -55,7 +51,10 @@ class Stream extends React.Component {
: comment;
const banned = user && user.status === 'BANNED';
const temporarilySuspended = user && user.suspension.until && new Date(user.suspension.until) > new Date();
const temporarilySuspended =
user &&
user.suspension.until &&
new Date(user.suspension.until) > new Date();
const hasOlderComments = !!(asset &&
asset.lastComment &&
@@ -66,10 +65,15 @@ class Stream extends React.Component {
? asset.comments[0].created_at
: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString();
const commentIsIgnored = (comment) => {
return me && me.ignoredUsers && me.ignoredUsers.find((u) => u.id === comment.user.id);
return (
me &&
me.ignoredUsers &&
me.ignoredUsers.find((u) => u.id === comment.user.id)
);
};
return (
<div id="stream">
<Slot fill="stream" />
{open
? <div id="commentBox">
<InfoBox
@@ -80,52 +84,44 @@ class Stream extends React.Component {
content={asset.settings.questionBoxContent}
enable={asset.settings.questionBoxEnable}
/>
{!banned && temporarilySuspended &&
{!banned &&
temporarilySuspended &&
<RestrictedMessageBox>
{
lang.t('temporarilySuspended',
this.props.root.settings.organizationName,
lang.timeago(user.suspension.until),
)
}
</RestrictedMessageBox>
}
{lang.t(
'temporarilySuspended',
this.props.root.settings.organizationName,
lang.timeago(user.suspension.until)
)}
</RestrictedMessageBox>}
{banned &&
<SuspendedAccount
canEditName={user && user.canEditName}
editName={editName}
/>
}
{loggedIn && !banned && !temporarilySuspended &&
/>}
{loggedIn &&
!banned &&
!temporarilySuspended &&
<CommentBox
addNotification={this.props.addNotification}
postComment={this.props.postComment}
appendItemArray={this.props.appendItemArray}
updateItem={this.props.updateItem}
setCommentCountCache={this.props.setCommentCountCache}
commentCountCache={commentCountCache}
assetId={asset.id}
premod={asset.settings.moderation}
isReply={false}
authorId={user.id}
charCountEnable={asset.settings.charCountEnable}
maxCharCount={asset.settings.charCount}
/>
}
addNotification={this.props.addNotification}
postComment={this.props.postComment}
appendItemArray={this.props.appendItemArray}
updateItem={this.props.updateItem}
setCommentCountCache={this.props.setCommentCountCache}
commentCountCache={commentCountCache}
assetId={asset.id}
premod={asset.settings.moderation}
isReply={false}
authorId={user.id}
charCountEnable={asset.settings.charCountEnable}
maxCharCount={asset.settings.charCount}
/>}
</div>
: <p>{asset.settings.closedMessage}</p>}
{!loggedIn &&
<Button
id="coralSignInButton"
onClick={this.props.showSignInDialog}
full
>
Sign in to comment
</Button>}
{loggedIn &&
user &&
<ChangeUsernameContainer loggedIn={loggedIn} user={user} />}
{loggedIn && <ModerationLink assetId={asset.id} isAdmin={can(user, 'MODERATE_COMMENTS')} />}
<ModerationLink
assetId={asset.id}
isAdmin={can(user, 'MODERATE_COMMENTS')}
/>}
{/* the highlightedComment is isolated after the user followed a permalink */}
{highlightedComment
@@ -163,41 +159,38 @@ class Stream extends React.Component {
setCommentCountCache={this.props.setCommentCountCache}
/>
<div className="embed__stream">
{comments.map(
(comment) => {
return (commentIsIgnored(comment)
? <IgnoredCommentTombstone key={comment.id} />
: <Comment
data={this.props.data}
root={this.props.root}
disableReply={!open}
setActiveReplyBox={this.setActiveReplyBox}
activeReplyBox={this.props.activeReplyBox}
addNotification={addNotification}
depth={0}
postComment={postComment}
asset={asset}
currentUser={user}
postFlag={postFlag}
postDontAgree={postDontAgree}
addCommentTag={addCommentTag}
removeCommentTag={removeCommentTag}
ignoreUser={ignoreUser}
commentIsIgnored={commentIsIgnored}
loadMore={loadMore}
deleteAction={deleteAction}
showSignInDialog={showSignInDialog}
key={comment.id}
reactKey={comment.id}
comment={comment}
pluginProps={pluginProps}
charCountEnable={asset.settings.charCountEnable}
maxCharCount={asset.settings.charCount}
editComment={this.props.editComment}
/>
);
}
)}
{comments.map((comment) => {
return commentIsIgnored(comment)
? <IgnoredCommentTombstone key={comment.id} />
: <Comment
data={this.props.data}
root={this.props.root}
disableReply={!open}
setActiveReplyBox={this.setActiveReplyBox}
activeReplyBox={this.props.activeReplyBox}
addNotification={addNotification}
depth={0}
postComment={postComment}
asset={asset}
currentUser={user}
postFlag={postFlag}
postDontAgree={postDontAgree}
addCommentTag={addCommentTag}
removeCommentTag={removeCommentTag}
ignoreUser={ignoreUser}
commentIsIgnored={commentIsIgnored}
loadMore={loadMore}
deleteAction={deleteAction}
showSignInDialog={showSignInDialog}
key={comment.id}
reactKey={comment.id}
comment={comment}
pluginProps={pluginProps}
charCountEnable={asset.settings.charCountEnable}
maxCharCount={asset.settings.charCount}
editComment={this.props.editComment}
/>;
})}
</div>
<LoadMore
topLevel={true}
@@ -226,7 +219,7 @@ Stream.propTypes = {
ignoreUser: React.PropTypes.func,
// edit a comment, passed (id, asset_id, { body })
editComment: React.PropTypes.func,
editComment: React.PropTypes.func
};
export default Stream;
+2 -4
View File
@@ -8,16 +8,14 @@ import './graphql';
import {addExternalConfig} from 'coral-embed-stream/src/actions/config';
import reducers from './reducers';
import localStore, {injectReducers} from 'coral-framework/services/store';
import store, {injectReducers} from 'coral-framework/services/store';
import AppRouter from './AppRouter';
import {pym} from 'coral-framework';
injectReducers(reducers);
const store = (window.opener && window.opener.coralStore) ? window.opener.coralStore : localStore;
// Don't run this in the popup.
if (store === localStore) {
if (!window.opener) {
store.dispatch(checkLogin());
pym.sendMessage('getConfig');
+1 -1
View File
@@ -1,5 +1,5 @@
import * as actions from '../constants/asset';
import coralApi from '../helpers/response';
import coralApi from '../helpers/request';
import {addNotification} from '../actions/notification';
import I18n from 'coral-framework/modules/i18n/i18n';
+50 -31
View File
@@ -1,15 +1,15 @@
import {pym} from 'coral-framework';
import * as Storage from '../helpers/storage';
import * as actions from '../constants/auth';
import coralApi, {base} from '../helpers/response';
import jwtDecode from 'jwt-decode';
import {pym} from 'coral-framework';
import bowser from 'bowser';
import * as actions from '../constants/auth';
import * as Storage from '../helpers/storage';
import coralApi, {base} from '../helpers/request';
const lang = new I18n(translations);
import translations from './../translations';
import I18n from '../../coral-framework/modules/i18n/i18n';
// Dialog Actions
export const showSignInDialog = () => (dispatch) => {
export const showSignInDialog = () => (dispatch, getState) => {
const signInPopUp = window.open(
'/embed/stream/login',
'Login',
@@ -21,6 +21,10 @@ export const showSignInDialog = () => (dispatch) => {
let loaded = false;
signInPopUp.onload = () => {
loaded = true;
// Fire some actions inside the popups reducer, to initialize required state.
const required = getState().asset.toJS().settings.requireEmailConfirmation;
signInPopUp.coralStore.dispatch(setRequireEmailVerification(required));
};
// Use `onunload` instead of `onbeforeunload` which is not supported in IOS Safari.
@@ -96,6 +100,11 @@ export const cleanState = () => ({
type: actions.CLEAN_STATE
});
export const setRequireEmailVerification = (required) => ({
type: actions.SET_REQUIRE_EMAIL_VERIFICATION,
required,
});
// Sign In Actions
const signInRequest = () => ({
@@ -121,26 +130,31 @@ export const handleAuthToken = (token) => (dispatch) => {
// SIGN IN
//==============================================================================
export const fetchSignIn = (formData) => (dispatch) => {
dispatch(signInRequest());
return coralApi('/auth/local', {method: 'POST', body: formData})
.then(({token}) => {
dispatch(handleAuthToken(token));
dispatch(hideSignInDialog());
})
.catch((error) => {
if (error.metadata) {
export const fetchSignIn = (formData) => {
return (dispatch) => {
dispatch(signInRequest());
// the user might not have a valid email. prompt the user user re-request the confirmation email
dispatch(
signInFailure(lang.t('error.emailNotVerified', error.metadata))
);
} else {
return coralApi('/auth/local', {method: 'POST', body: formData})
.then(({token}) => {
if (!bowser.safari && !bowser.ios) {
dispatch(handleAuthToken(token));
}
dispatch(hideSignInDialog());
})
.catch((error) => {
if (error.metadata) {
// invalid credentials
dispatch(signInFailure(lang.t('error.emailPasswordError')));
}
});
// the user might not have a valid email. prompt the user user re-request the confirmation email
dispatch(
signInFailure(lang.t('error.emailNotVerified', error.metadata))
);
} else {
// invalid credentials
dispatch(signInFailure(lang.t('error.emailPasswordError')));
}
});
};
};
//==============================================================================
@@ -187,7 +201,7 @@ export const fetchSignUpFacebook = () => (dispatch) => {
);
};
export const facebookCallback = (err, data) => (dispatch, getState) => {
export const facebookCallback = (err, data) => (dispatch) => {
if (err) {
dispatch(signInFacebookFailure(err));
return;
@@ -196,10 +210,6 @@ export const facebookCallback = (err, data) => (dispatch, getState) => {
dispatch(handleAuthToken(data.token));
dispatch(signInFacebookSuccess(data.user));
dispatch(hideSignInDialog());
const {user: {canEditName, status}} = getState().auth.toJS();
if (canEditName && status !== 'BANNED') {
dispatch(showCreateUsernameDialog());
}
} catch (err) {
dispatch(signInFacebookFailure(err));
return;
@@ -269,7 +279,9 @@ export const fetchForgotPassword = (email) => (dispatch) => {
export const logout = () => (dispatch) => {
return coralApi('/auth', {method: 'DELETE'}).then(() => {
Storage.removeItem('token');
if (!bowser.safari && !bowser.ios) {
Storage.removeItem('token');
}
dispatch({type: actions.LOGOUT});
});
};
@@ -292,11 +304,18 @@ export const checkLogin = () => (dispatch) => {
coralApi('/auth')
.then((result) => {
if (!result.user) {
Storage.removeItem('token');
if (!bowser.safari && !bowser.ios) {
Storage.removeItem('token');
}
throw new Error('Not logged in');
}
dispatch(checkLoginSuccess(result.user));
// Display create username dialog if necessary.
if (result.user.canEditName && result.user.status !== 'BANNED') {
dispatch(showCreateUsernameDialog());
}
})
.catch((error) => {
console.error(error);
+1 -1
View File
@@ -1,5 +1,5 @@
import {addNotification} from '../actions/notification';
import coralApi from '../helpers/response';
import coralApi from '../helpers/request';
import * as actions from '../constants/auth';
import I18n from 'coral-framework/modules/i18n/i18n';
+3
View File
@@ -46,3 +46,6 @@ export const VERIFY_EMAIL_REQUEST = 'VERIFY_EMAIL_REQUEST';
export const VERIFY_EMAIL_SUCCESS = 'VERIFY_EMAIL_SUCCESS';
export const VERIFY_EMAIL_FAILURE = 'VERIFY_EMAIL_FAILURE';
export const UPDATE_USERNAME = 'UPDATE_USERNAME';
export const SET_REQUIRE_EMAIL_VERIFICATION = 'SET_REQUIRE_EMAIL_VERIFICATION';
@@ -1,22 +1,26 @@
import bowser from 'bowser';
import * as Storage from './storage';
import merge from 'lodash/merge';
const buildOptions = (inputOptions = {}) => {
const defaultOptions = {
method: 'GET',
headers: {
Accept: 'application/json',
Authorization: `Bearer ${Storage.getItem('token')}`,
'Content-Type': 'application/json'
'Content-Type': 'application/json',
},
credentials: 'same-origin'
};
let options = Object.assign({}, defaultOptions, inputOptions);
options.headers = Object.assign(
{},
defaultOptions.headers,
inputOptions.headers
);
let options = merge({}, defaultOptions, inputOptions);
if (!bowser.safari && !bowser.ios) {
let authorization = Storage.getItem('token');
if (authorization) {
options.headers.Authorization = `Bearer ${authorization}`;
}
}
if (options.method.toLowerCase() !== 'get') {
options.body = JSON.stringify(options.body);
+5 -1
View File
@@ -16,7 +16,8 @@ const initialState = Map({
emailVerificationLoading: false,
emailVerificationSuccess: false,
successSignUp: false,
fromSignUp: false
fromSignUp: false,
requireEmailConfirmation: false,
});
const purge = (user) => {
@@ -142,6 +143,9 @@ export default function auth (state = initialState, action) {
return state
.set('emailVerificationSuccess', true)
.set('emailVerificationLoading', false);
case actions.SET_REQUIRE_EMAIL_VERIFICATION:
return state
.set('requireEmailConfirmation', action.required);
default :
return state;
}
+6 -1
View File
@@ -1,5 +1,6 @@
import {createNetworkInterface} from 'apollo-client';
import * as Storage from '../helpers/storage';
import bowser from 'bowser';
//==============================================================================
// NETWORK INTERFACE
@@ -21,7 +22,11 @@ networkInterface.use([{
if (!req.options.headers) {
req.options.headers = {}; // Create the header object if needed.
}
req.options.headers['authorization'] = `Bearer ${Storage.getItem('token')}`;
if (!bowser.safari && !bowser.ios) {
req.options.headers['authorization'] = `Bearer ${Storage.getItem('token')}`;
}
next();
}
}]);
@@ -1,66 +0,0 @@
import React from 'react';
import styles from 'coral-embed-stream/src/components/Comment.css';
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 I18n from 'coral-framework/modules/i18n/i18n';
import translations from '../translations';
const lang = new I18n(translations);
class FakeComment extends React.Component {
constructor (props) {
super(props);
}
render () {
const {username, created_at, body} = this.props;
return (
<div
className={`comment ${styles.Comment}`}
style={{marginLeft: 0 * 30}}>
<hr aria-hidden={true} />
<AuthorName
author={{'name': username}}/>
<PubDate created_at={created_at} />
<Content body={body} />
<div className="commentActionsLeft comment__action-container">
<div className={`${'coral-plugin-likes'}-container`}>
<button className={'coral-plugin-likes-button'}>
<span className={'coral-plugin-likes-button-text'}>{lang.t('like')}</span>
<i className={`${'coral-plugin-likes'}-icon material-icons`}
aria-hidden={true}>thumb_up</i>
</button>
</div>
<ReplyButton
onClick={() => {}}
parentCommentId={'commentID'}
currentUserId={{}}
banned={false}
/>
</div>
<div className="commentActionsRight comment__action-container">
<div className="coral-plugin-permalinks-container">
<button className="coral-plugin-permalinks-button">
<span className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}>{lang.t('permalink.permalink')}</span>
<i className="coral-plugin-permalinks-icon material-icons" aria-hidden={true}>link</i>
</button>
</div>
<div className={`${'coral-plugin-flags'}-container`}>
<button className={`${'coral-plugin-flags'}-button`}>
<span className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}>{lang.t('report')}</span>
<i className={`${'coral-plugin-flags'}-icon material-icons`}
aria-hidden={true}>flag</i>
</button>
</div>
</div>
</div>
);
}
}
export default FakeComment;
@@ -1,15 +0,0 @@
import React from 'react';
import styles from './styles.css';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from '../translations';
const lang = new I18n(translations);
const UserBox = ({className, user, onLogout, onShowProfile}) => (
<div className={`${styles.userBox} ${className ? className : ''}`}>
{lang.t('signIn.loggedInAs')}
<a onClick={onShowProfile}>{user.username}</a>. {lang.t('signIn.notYou')}
<a className={styles.logout} onClick={onLogout} id='logout'>{lang.t('signIn.logout')}</a>
</div>
);
export default UserBox;
@@ -0,0 +1,6 @@
import React from 'react';
import Slot from 'coral-framework/components/Slot';
export const LoginContainer = () => (
<Slot fill="login"/>
);
+4 -1
View File
@@ -1,6 +1,6 @@
{
"name": "talk",
"version": "1.6.0",
"version": "1.7.0",
"description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
"main": "app.js",
"scripts": {
@@ -54,10 +54,13 @@
"app-module-path": "^2.2.0",
"bcrypt": "^1.0.2",
"body-parser": "^1.17.1",
"bowser": "^1.7.0",
"cli-table": "^0.3.1",
"colors": "^1.1.2",
"commander": "^2.9.0",
"compression": "^1.6.2",
"connect-redis": "^3.1.0",
"cookie-parser": "^1.4.3",
"cross-spawn": "^5.1.0",
"csurf": "^1.9.0",
"dataloader": "^1.3.0",
+6 -2
View File
@@ -1,9 +1,13 @@
{
"server": [
"coral-plugin-respect",
"coral-plugin-facebook-auth"
"coral-plugin-like",
"coral-plugin-facebook-auth",
"coral-plugin-auth"
],
"client": [
"coral-plugin-respect"
"coral-plugin-respect",
"coral-plugin-like",
"coral-plugin-auth"
]
}
+14
View File
@@ -0,0 +1,14 @@
{
"presets": [
"es2015"
],
"plugins": [
"add-module-exports",
"transform-class-properties",
"transform-decorators-legacy",
"transform-object-assign",
"transform-object-rest-spread",
"transform-async-to-generator",
"transform-react-jsx"
]
}
@@ -0,0 +1,23 @@
{
"env": {
"browser": true,
"es6": true,
"mocha": true
},
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
}
},
"parser": "babel-eslint",
"plugins": [
"react"
],
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"no-console": ["warn", { "allow": ["warn", "error"] }]
}
}
@@ -1,13 +1,12 @@
import React, {Component} from 'react';
import React from 'react';
import {connect} from 'react-redux';
import validate from 'coral-framework/helpers/validate';
import errorMsj from 'coral-framework/helpers/error';
import CreateUsernameDialog from '../components/CreateUsernameDialog';
import I18n from 'coral-framework/modules/i18n/i18n';
import {bindActionCreators} from 'redux';
import translations from '../translations';
import I18n from 'coral-framework/modules/i18n/i18n';
import errorMsj from 'coral-framework/helpers/error';
import validate from 'coral-framework/helpers/validate';
import CreateUsernameDialog from './CreateUsernameDialog';
const lang = new I18n(translations);
import {
@@ -16,50 +15,57 @@ import {
invalidForm,
validForm,
createUsername
} from '../../coral-framework/actions/auth';
class ChangeUsernameContainer extends Component {
initialState = {
formData: {
username: '',
},
errors: {},
showErrors: false
};
} from 'coral-framework/actions/auth';
class ChangeUsernameContainer extends React.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);
this.handleClose = this.handleClose.bind(this);
this.addError = this.addError.bind(this);
}
handleChange(e) {
const {name, value} = e.target;
this.setState((state) => ({
...state,
this.state = {
formData: {
...state.formData,
[name]: value
}
}), () => {
this.validation(name, value);
});
username: (props.auth.user && props.auth.user.username) || ''
},
errors: {},
showErrors: false
};
}
addError(name, error) {
componentWillReceiveProps(next) {
if (!this.props.auth.showCreateUsernameDialog && next.auth.showCreateUsernameDialog) {
this.setState({
formData: {
username: (this.props.auth.user && this.props.auth.user.username) || '',
},
});
}
}
handleChange = (e) => {
const {name, value} = e.target;
this.setState(
(state) => ({
...state,
formData: {
...state.formData,
[name]: value
}
}),
() => {
this.validation(name, value);
}
);
};
addError = (name, error) => {
return this.setState((state) => ({
errors: {
...state.errors,
[name]: error
}
}));
}
};
validation(name, value) {
validation = (name, value) => {
const {addError} = this;
if (!value.length) {
@@ -67,37 +73,37 @@ class ChangeUsernameContainer extends Component {
} else if (!validate[name](value)) {
addError(name, errorMsj[name]);
} else {
const { [name]: prop, ...errors } = this.state.errors; // eslint-disable-line
const {[name]: prop, ...errors} = this.state.errors; // eslint-disable-line
// Removes Error
this.setState((state) => ({...state, errors}));
}
}
};
isCompleted() {
isCompleted = () => {
const {formData} = this.state;
return !Object.keys(formData).filter((prop) => !formData[prop].length).length;
}
};
displayErrors(show = true) {
displayErrors = (show = true) => {
this.setState({showErrors: show});
}
};
handleSubmitUsername(e) {
handleSubmitUsername = (e) => {
e.preventDefault();
const {errors} = this.state;
const {validForm, invalidForm} = this.props;
this.displayErrors();
if (this.isCompleted() && !Object.keys(errors).length) {
this.props.createUsername(this.props.user.id, this.state.formData);
this.props.createUsername(this.props.auth.user.id, this.state.formData);
validForm();
} else {
invalidForm(lang.t('createdisplay.checkTheForm'));
}
}
};
handleClose() {
handleClose = () => {
this.props.hideCreateUsernameDialog();
}
};
render() {
const {loggedIn, auth} = this.props;
@@ -117,19 +123,22 @@ class ChangeUsernameContainer extends Component {
}
}
const mapStateToProps = (state) => ({
auth: state.auth.toJS()
const mapStateToProps = ({auth}) => ({
auth: auth.toJS()
});
const mapDispatchToProps = (dispatch) => ({
createUsername: (userid, formData) => dispatch(createUsername(userid, formData)),
showCreateUsernameDialog: () => dispatch(showCreateUsernameDialog()),
hideCreateUsernameDialog: () => dispatch(hideCreateUsernameDialog()),
invalidForm: (error) => dispatch(invalidForm(error)),
validForm: () => dispatch(validForm())
});
const mapDispatchToProps = (dispatch) =>
bindActionCreators(
{
createUsername,
showCreateUsernameDialog,
hideCreateUsernameDialog,
invalidForm,
validForm
},
dispatch
);
export default connect(
mapStateToProps,
mapDispatchToProps
)(ChangeUsernameContainer);
export default connect(mapStateToProps, mapDispatchToProps)(
ChangeUsernameContainer
);
@@ -1,21 +1,26 @@
import React from 'react';
import TextField from 'coral-ui/components/TextField';
import Button from 'coral-ui/components/Button';
import {Dialog, Alert} from 'coral-ui';
import FakeComment from './FakeComment';
import styles from './styles.css';
import I18n from 'coral-framework/modules/i18n/i18n';
import {Dialog, Alert, TextField} from 'coral-ui';
import {FakeComment} from './FakeComment';
import translations from '../translations';
import Button from 'coral-ui/components/Button';
import I18n from 'coral-framework/modules/i18n/i18n';
const lang = new I18n(translations);
const CreateUsernameDialog = ({open, handleClose, formData, handleSubmitUsername, handleChange, ...props}) => {
return (
const CreateUsernameDialog = ({
open,
handleClose,
formData,
handleSubmitUsername,
handleChange,
...props
}) => (
<Dialog
className={styles.dialogusername}
id="createUsernameDialog"
open={open}>
open={open}
>
<span className={styles.close} onClick={handleClose}>×</span>
<div>
<div className={styles.header}>
@@ -24,17 +29,24 @@ const CreateUsernameDialog = ({open, handleClose, formData, handleSubmitUsername
</h1>
</div>
<div>
<p className={styles.yourusername}>{lang.t('createdisplay.yourusername')}</p>
<p className={styles.yourusername}>
{lang.t('createdisplay.yourusername')}
</p>
<FakeComment
className={styles.fakeComment}
username={formData.username}
created_at={Date.now()}
body={lang.t('createdisplay.fakecommentbody')}
/>
<p className={styles.ifyoudont}>{lang.t('createdisplay.ifyoudontchangeyourname')}</p>
{ props.auth.error && <Alert>{props.auth.error}</Alert> }
<p className={styles.ifyoudont}>
{lang.t('createdisplay.ifyoudontchangeyourname')}
</p>
{props.auth.error && <Alert>{props.auth.error}</Alert>}
<form id="saveUsername" onSubmit={handleSubmitUsername}>
{ props.errors.username && <span className={styles.hint}> {lang.t('createdisplay.specialCharacters')} </span> }
{props.errors.username &&
<span className={styles.hint}>
{' '}{lang.t('createdisplay.specialCharacters')}{' '}
</span>}
<div className={styles.saveusername}>
<TextField
id="username"
@@ -44,13 +56,14 @@ const CreateUsernameDialog = ({open, handleClose, formData, handleSubmitUsername
value={formData.username}
onChange={handleChange}
/>
<Button id="save" type="submit" className={styles.saveButton}>{lang.t('createdisplay.save')}</Button>
<Button id="save" type="submit" className={styles.saveButton}>
{lang.t('createdisplay.save')}
</Button>
</div>
</form>
</form>
</div>
</div>
</Dialog>
);
};
);
export default CreateUsernameDialog;
@@ -0,0 +1,73 @@
import React from 'react';
import translations from '../translations';
import {ReplyButton} from 'coral-plugin-replies';
import PubDate from 'coral-plugin-pubdate/PubDate';
import I18n from 'coral-framework/modules/i18n/i18n';
import AuthorName from 'coral-plugin-author-name/AuthorName';
import Content from 'coral-plugin-commentcontent/CommentContent';
import styles from 'coral-embed-stream/src/components/Comment.css';
const lang = new I18n(translations);
export const FakeComment = ({username, created_at, body}) => (
<div className={`comment ${styles.Comment}`} style={{marginLeft: 0 * 30}}>
<hr aria-hidden={true} />
<AuthorName author={{name: username}} />
<PubDate created_at={created_at} />
<Content body={body} />
<div className="commentActionsLeft comment__action-container">
<div className={`${'coral-plugin-likes'}-container`}>
<button className={'coral-plugin-likes-button'}>
<span className={'coral-plugin-likes-button-text'}>
{lang.t('like')}
</span>
<i
className={`${'coral-plugin-likes'}-icon material-icons`}
aria-hidden={true}
>
thumb_up
</i>
</button>
</div>
<ReplyButton
onClick={() => {}}
parentCommentId={'commentID'}
currentUserId={{}}
banned={false}
/>
</div>
<div className="commentActionsRight comment__action-container">
<div className="coral-plugin-permalinks-container">
<button className="coral-plugin-permalinks-button">
<span
className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}
>
{lang.t('permalink.permalink')}
</span>
<i
className="coral-plugin-permalinks-icon material-icons"
aria-hidden={true}
>
link
</i>
</button>
</div>
<div className={`${'coral-plugin-flags'}-container`}>
<button className={`${'coral-plugin-flags'}-button`}>
<span
className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}
>
{lang.t('report')}
</span>
<i
className={`${'coral-plugin-flags'}-icon material-icons`}
aria-hidden={true}
>
flag
</i>
</button>
</div>
</div>
</div>
);
@@ -1,22 +1,18 @@
import React from 'react';
import styles from './styles.css';
import translations from '../translations';
import Button from 'coral-ui/components/Button';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from '../translations';
const lang = new I18n(translations);
class ForgotContent extends React.Component {
constructor (props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit (e) {
handleSubmit = (e) => {
e.preventDefault();
this.props.fetchForgotPassword(this.emailInput.value);
}
};
render () {
render() {
const {changeView, auth} = this.props;
const {passwordRequestSuccess, passwordRequestFailure} = auth;
@@ -29,29 +25,47 @@ class ForgotContent extends React.Component {
<div className={styles.textField}>
<label htmlFor="email">{lang.t('signIn.email')}</label>
<input
ref={(input) => this.emailInput = input}
ref={(input) => (this.emailInput = input)}
type="text"
style={{fontSize: 16}}
id="email"
name="email" />
name="email"
/>
</div>
<Button type="submit" cStyle="black" className={styles.signInButton} full>
<Button
type="submit"
cStyle="black"
className={styles.signInButton}
full
>
{lang.t('signIn.recoverPassword')}
</Button>
{
passwordRequestSuccess
? <p className={styles.passwordRequestSuccess}>{passwordRequestSuccess}</p>
: null
}
{
passwordRequestFailure
? <p className={styles.passwordRequestFailure}>{passwordRequestFailure}</p>
: null
}
{passwordRequestSuccess
? <p className={styles.passwordRequestSuccess}>
{passwordRequestSuccess}
</p>
: null}
{passwordRequestFailure
? <p className={styles.passwordRequestFailure}>
{passwordRequestFailure}
</p>
: null}
</form>
<div className={styles.footer}>
<span>{lang.t('signIn.needAnAccount')} <a onClick={() => changeView('SIGNUP')}>{lang.t('signIn.register')}</a></span>
<span>{lang.t('signIn.alreadyHaveAnAccount')} <a onClick={() => changeView('SIGNIN')}>{lang.t('signIn.signIn')}</a></span>
<span>
{lang.t('signIn.needAnAccount')}
{' '}
<a onClick={() => changeView('SIGNUP')}>
{lang.t('signIn.register')}
</a>
</span>
<span>
{lang.t('signIn.alreadyHaveAnAccount')}
{' '}
<a onClick={() => changeView('SIGNIN')}>
{lang.t('signIn.signIn')}
</a>
</span>
</div>
</div>
);
@@ -6,12 +6,9 @@ import SignInContent from './SignInContent';
import SignUpContent from './SignUpContent';
import ForgotContent from './ForgotContent';
const SignDialog = ({open, view, handleClose, ...props}) => (
<Dialog
className={styles.dialog}
id="signInDialog"
open={open}>
<span className={styles.close} onClick={handleClose}>×</span>
const SignDialog = ({open, view, hideSignInDialog, ...props}) => (
<Dialog className={styles.dialog} id="signInDialog" open={open}>
<span className={styles.close} onClick={hideSignInDialog}>×</span>
{view === 'SIGNIN' && <SignInContent {...props} />}
{view === 'SIGNUP' && <SignUpContent {...props} />}
{view === 'FORGOT' && <ForgotContent {...props} />}
@@ -0,0 +1,24 @@
import React from 'react';
import {Button} from 'coral-ui';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {showSignInDialog} from 'coral-framework/actions/auth';
const SignInButton = ({loggedIn, showSignInDialog}) => (
<div>
{!loggedIn
? <Button id="coralSignInButton" onClick={showSignInDialog} full>
Sign in to comment
</Button>
: null}
</div>
);
const mapStateToProps = ({auth}) => ({
loggedIn: auth.toJS().loggedIn
});
const mapDispatchToProps = (dispatch) =>
bindActionCreators({showSignInDialog}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(SignInButton);
@@ -1,11 +1,13 @@
import React, {Component, PropTypes} from 'react';
import React from 'react';
import {connect} from 'react-redux';
import SignDialog from '../components/SignDialog';
import validate from 'coral-framework/helpers/validate';
import errorMsj from 'coral-framework/helpers/error';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from '../translations';
import {pym} from 'coral-framework';
import SignDialog from './SignDialog';
import {bindActionCreators} from 'redux';
import translations from '../translations';
import I18n from 'coral-framework/modules/i18n/i18n';
import errorMsj from 'coral-framework/helpers/error';
import validate from 'coral-framework/helpers/validate';
const lang = new I18n(translations);
import {
@@ -23,34 +25,22 @@ import {
checkLogin
} from 'coral-framework/actions/auth';
class SignInContainer extends Component {
initialState = {
formData: {
email: '',
username: '',
password: '',
confirmPassword: ''
},
emailToBeResent: '',
errors: {},
showErrors: false
};
class SignInContainer extends React.Component {
constructor(props) {
super(props);
this.state = this.initialState;
this.addError = this.addError.bind(this);
this.handleAuth = this.handleAuth.bind(this);
this.handleSignUp = this.handleSignUp.bind(this);
this.handleSignIn = this.handleSignIn.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleChangeEmail = this.handleChangeEmail.bind(this);
this.handleResendVerification = this.handleResendVerification.bind(this);
}
static propTypes = {
requireEmailConfirmation: PropTypes.bool.isRequired
};
this.state = {
formData: {
email: '',
username: '',
password: '',
confirmPassword: ''
},
emailToBeResent: '',
errors: {},
showErrors: false
};
}
componentWillMount() {
this.props.checkLogin();
@@ -71,7 +61,7 @@ class SignInContainer extends Component {
window.removeEventListener('storage', this.handleAuth);
}
handleAuth(e) {
handleAuth = (e) => {
// Listening to FB changes
// FB localStorage key is 'auth'
@@ -81,9 +71,9 @@ class SignInContainer extends Component {
const {err, data} = JSON.parse(e.newValue);
authCallback(err, data);
}
}
};
handleChange(e) {
handleChange = (e) => {
const {name, value} = e.target;
this.setState(
(state) => ({
@@ -97,14 +87,14 @@ class SignInContainer extends Component {
this.validation(name, value);
}
);
}
};
handleChangeEmail(e) {
handleChangeEmail = (e) => {
const {value} = e.target;
this.setState({emailToBeResent: value});
}
};
handleResendVerification(e) {
handleResendVerification = (e) => {
e.preventDefault();
this.props
.requestConfirmEmail(
@@ -115,21 +105,21 @@ class SignInContainer extends Component {
setTimeout(() => {
// allow success UI to be shown for a second, and then close the modal
this.props.handleClose();
this.props.hideSignInDialog();
}, 2500);
});
}
};
addError(name, error) {
addError = (name, error) => {
return this.setState((state) => ({
errors: {
...state.errors,
[name]: error
}
}));
}
};
validation(name, value) {
validation = (name, value) => {
const {addError} = this;
const {formData} = this.state;
@@ -147,18 +137,18 @@ class SignInContainer extends Component {
// Removes Error
this.setState((state) => ({...state, errors}));
}
}
};
isCompleted() {
isCompleted = () => {
const {formData} = this.state;
return !Object.keys(formData).filter((prop) => !formData[prop].length).length;
}
};
displayErrors(show = true) {
displayErrors = (show = true) => {
this.setState({showErrors: show});
}
};
handleSignUp(e) {
handleSignUp = (e) => {
e.preventDefault();
const {errors} = this.state;
const {fetchSignUp, validForm, invalidForm} = this.props;
@@ -169,30 +159,28 @@ class SignInContainer extends Component {
} else {
invalidForm(lang.t('signIn.checkTheForm'));
}
}
};
handleSignIn(e) {
handleSignIn = (e) => {
e.preventDefault();
this.props.fetchSignIn(this.state.formData);
}
};
render() {
const {auth, requireEmailConfirmation} = this.props;
const {emailVerificationLoading, emailVerificationSuccess} = auth;
const {auth} = this.props;
const {requireEmailConfirmation, emailVerificationLoading, emailVerificationSuccess} = auth;
return (
<div>
<SignDialog
open={true}
view={auth.view}
emailVerificationEnabled={requireEmailConfirmation}
emailVerificationLoading={emailVerificationLoading}
emailVerificationSuccess={emailVerificationSuccess}
{...this}
{...this.state}
{...this.props}
/>
</div>
<SignDialog
open={true}
view={auth.view}
emailVerificationEnabled={requireEmailConfirmation}
emailVerificationLoading={emailVerificationLoading}
emailVerificationSuccess={emailVerificationSuccess}
{...this}
{...this.state}
{...this.props}
/>
);
}
}
@@ -201,20 +189,23 @@ const mapStateToProps = (state) => ({
auth: state.auth.toJS()
});
const mapDispatchToProps = (dispatch) => ({
checkLogin: () => dispatch(checkLogin()),
facebookCallback: (err, data) => dispatch(facebookCallback(err, data)),
fetchSignUp: (formData, url) => dispatch(fetchSignUp(formData, url)),
fetchSignIn: (formData) => dispatch(fetchSignIn(formData)),
fetchSignInFacebook: () => dispatch(fetchSignInFacebook()),
fetchSignUpFacebook: () => dispatch(fetchSignUpFacebook()),
fetchForgotPassword: (formData) => dispatch(fetchForgotPassword(formData)),
requestConfirmEmail: (email, url) =>
dispatch(requestConfirmEmail(email, url)),
changeView: (view) => dispatch(changeView(view)),
handleClose: () => dispatch(hideSignInDialog()),
invalidForm: (error) => dispatch(invalidForm(error)),
validForm: () => dispatch(validForm())
});
const mapDispatchToProps = (dispatch) =>
bindActionCreators(
{
checkLogin,
facebookCallback,
fetchSignUp,
fetchSignIn,
fetchSignInFacebook,
fetchSignUpFacebook,
fetchForgotPassword,
requestConfirmEmail,
changeView,
hideSignInDialog,
invalidForm,
validForm
},
dispatch
);
export default connect(mapStateToProps, mapDispatchToProps)(SignInContainer);
@@ -18,17 +18,17 @@ const SignInContent = ({
auth,
fetchSignInFacebook
}) => {
return (
<div className="coral-sign-in">
<div className={`${styles.header} header`}>
<h1>
{auth.emailVerificationFailure ? lang.t('signIn.emailVerifyCTA') : lang.t('signIn.signIn')}
{auth.emailVerificationFailure
? lang.t('signIn.emailVerifyCTA')
: lang.t('signIn.signIn')}
</h1>
</div>
{ auth.error && <Alert>{auth.error}</Alert> }
{
auth.emailVerificationFailure
{auth.error && <Alert>{auth.error}</Alert>}
{auth.emailVerificationFailure
? <form onSubmit={handleResendVerification}>
<p>{lang.t('signIn.requestNewVerifyEmail')}</p>
<TextField
@@ -36,8 +36,11 @@ const SignInContent = ({
type="email"
label={lang.t('signIn.email')}
value={emailToBeResent}
onChange={handleChangeEmail} />
<Button id='resendConfirmEmail' type='submit' cStyle='black' full>Send Email</Button>
onChange={handleChangeEmail}
/>
<Button id="resendConfirmEmail" type="submit" cStyle="black" full>
Send Email
</Button>
{emailVerificationLoading && <Spinner />}
{emailVerificationSuccess && <Success />}
</form>
@@ -70,23 +73,29 @@ const SignInContent = ({
onChange={handleChange}
/>
<div className={styles.action}>
{
!auth.isLoading ?
<Button id='coralLogInButton' type="submit" cStyle="black" className={styles.signInButton} full>
{lang.t('signIn.signIn')}
</Button>
:
<Spinner />
}
{!auth.isLoading
? <Button
id="coralLogInButton"
type="submit"
cStyle="black"
className={styles.signInButton}
full
>
{lang.t('signIn.signIn')}
</Button>
: <Spinner />}
</div>
</form>
</div>
}
</div>}
<div className={`${styles.footer} footer`}>
<span><a onClick={() => changeView('FORGOT')}>{lang.t('signIn.forgotYourPass')}</a></span>
<span>
<a onClick={() => changeView('FORGOT')}>
{lang.t('signIn.forgotYourPass')}
</a>
</span>
<span>
{lang.t('signIn.needAnAccount')}
<a onClick={() => changeView('SIGNUP')} id='coralRegister'>
<a onClick={() => changeView('SIGNUP')} id="coralRegister">
{lang.t('signIn.register')}
</a>
</span>
@@ -1,39 +1,26 @@
import React, {PropTypes} from 'react';
import {Button, TextField, Spinner, Success, Alert} from 'coral-ui';
import styles from './styles.css';
import I18n from 'coral-framework/modules/i18n/i18n';
import React from 'react';
import translations from '../translations';
import I18n from 'coral-framework/modules/i18n/i18n';
import {Button, TextField, Spinner, Success, Alert} from 'coral-ui';
const lang = new I18n(translations);
class SignUpContent extends React.Component {
constructor (props) {
super(props);
this.successfulSignup = false;
componentWillReceiveProps(next) {
if (
!this.props.emailVerificationEnabled &&
!this.props.auth.successSignUp &&
next.auth.successSignUp
) {
setTimeout(() => {
this.props.changeView('SIGNIN');
}, 2000);
}
}
static propTypes = {
emailVerificationEnabled: PropTypes.bool.isRequired,
fetchSignUpFacebook: PropTypes.func.isRequired,
changeView: PropTypes.func.isRequired,
handleSignUp: PropTypes.func.isRequired,
showErrors: PropTypes.bool,
errors: PropTypes.shape({
email: PropTypes.string,
username: PropTypes.string,
password: PropTypes.string,
confirmPassword: PropTypes.string,
}),
formData: PropTypes.shape({
email: PropTypes.string,
username: PropTypes.string,
password: PropTypes.string,
confirmPassword: PropTypes.string
})
}
render () {
render() {
const {
handleChange,
formData,
@@ -43,18 +30,8 @@ class SignUpContent extends React.Component {
showErrors,
changeView,
handleSignUp,
fetchSignUpFacebook} = this.props;
const beforeSignup = !auth.isLoading && !auth.successSignUp;
const successfulSignup = !auth.isLoading && auth.successSignUp;
// the first time we render a successfulSignup, trigger a timer
if ((this.successfulSignup ^ successfulSignup) && !emailVerificationEnabled) {
setTimeout(() => {
changeView('SIGNIN');
}, 1000);
this.successfulSignup = true;
}
fetchSignUpFacebook
} = this.props;
return (
<div>
@@ -64,8 +41,8 @@ class SignUpContent extends React.Component {
</h1>
</div>
{ auth.error && <Alert>{auth.error}</Alert> }
{ beforeSignup &&
{auth.error && <Alert>{auth.error}</Alert>}
{!auth.successSignUp &&
<div>
<div className={styles.socialConnections}>
<Button cStyle="facebook" onClick={fetchSignUpFacebook} full>
@@ -109,7 +86,10 @@ class SignUpContent extends React.Component {
onChange={handleChange}
minLength="8"
/>
{ errors.password && <span className={styles.hint}> Password must be at least 8 characters. </span> }
{errors.password &&
<span className={styles.hint}>
{' '}Password must be at least 8 characters.{' '}
</span>}
<TextField
id="confirmPassword"
type="password"
@@ -122,26 +102,35 @@ class SignUpContent extends React.Component {
minLength="8"
/>
<div className={styles.action}>
<Button type="submit" cStyle="black" id='coralSignUpButton' className={styles.signInButton} full>
<Button
type="submit"
cStyle="black"
id="coralSignUpButton"
className={styles.signInButton}
full
>
{lang.t('signIn.signUp')}
</Button>
{ auth.isLoading && <Spinner /> }
{auth.isLoading && <Spinner />}
</div>
</form>
</div>
}
{
successfulSignup &&
</div>}
{auth.successSignUp &&
<div>
<Success />
{
emailVerificationEnabled &&
<p>{lang.t('signIn.verifyEmail')}<br /><br />{lang.t('signIn.verifyEmail2')}</p>
}
</div>
}
{emailVerificationEnabled &&
<p>
{lang.t('signIn.verifyEmail')}
<br />
<br />
{lang.t('signIn.verifyEmail2')}
</p>}
</div>}
<div className={styles.footer}>
{lang.t('signIn.alreadyHaveAnAccount')} <a id="coralSignInViewTrigger" onClick={() => changeView('SIGNIN')}>
{lang.t('signIn.alreadyHaveAnAccount')} <a
id="coralSignInViewTrigger"
onClick={() => changeView('SIGNIN')}
>
{lang.t('signIn.signIn')}
</a>
</div>
@@ -0,0 +1,34 @@
import React from 'react';
import styles from './styles.css';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import translations from '../translations';
import I18n from 'coral-framework/modules/i18n/i18n';
import {logout} from 'coral-framework/actions/auth';
const lang = new I18n(translations);
const UserBox = ({loggedIn, user, logout, onShowProfile}) => (
<div>
{
loggedIn ? (
<div className={styles.userBox}>
{lang.t('signIn.loggedInAs')}
<a onClick={onShowProfile}>{user.username}</a>. {lang.t('signIn.notYou')}
<a className={styles.logout} onClick={() => logout()}>
{lang.t('signIn.logout')}
</a>
</div>
) : null
}
</div>
);
const mapStateToProps = ({auth}) => ({
loggedIn: auth.toJS().loggedIn,
user: auth.toJS().user
});
const mapDispatchToProps = (dispatch) =>
bindActionCreators({logout}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(UserBox);
+12
View File
@@ -0,0 +1,12 @@
import UserBox from './components/UserBox';
import SignInButton from './components/SignInButton';
import SignInContainer from './components/SignInContainer';
import ChangeUserNameContainer from './components/ChangeUsername';
export default {
slots: {
stream: [UserBox, SignInButton, ChangeUserNameContainer],
login: [SignInContainer]
}
};
@@ -0,0 +1,102 @@
{
"en": {
"signIn": {
"emailVerifyCTA": "Please verify your email address.",
"requestNewVerifyEmail": "Request another email:",
"verifyEmail": "Thank you for creating an account! We sent an email to the address you provided to verify your account.",
"verifyEmail2": "You must verify your account before engaging with the community.",
"notYou": "Not you?",
"loggedInAs": "Logged in as",
"facebookSignIn": "Sign in with Facebook",
"facebookSignUp": "Sign up with Facebook",
"logout": "Logout",
"signIn": "Sign in to join the conversation",
"or": "Or",
"email": "E-mail Address",
"password": "Password",
"forgotYourPass": "Forgot your password?",
"needAnAccount": "Need an account?",
"register": "Register",
"signUp": "Sign Up",
"confirmPassword": "Confirm Password",
"username": "Username",
"alreadyHaveAnAccount": "Already have an account?",
"recoverPassword": "Recover password",
"emailInUse": "Email address already in use",
"emailORusernameInUse": "Email address or Username already in use",
"requiredField": "This field is required",
"passwordsDontMatch": "Passwords don't match.",
"specialCharacters": "Usernames can contain letters, numbers and _ only",
"checkTheForm": "Invalid Form. Please, check the fields"
},
"createdisplay": {
"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",
"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",
"specialCharacters": "Usernames can contain letters, numbers and _ only"
},
"permalink": {
"permalink": "Link"
},
"report": "Report",
"like": "Like"
},
"es": {
"signIn": {
"emailVerifyCTA": "Por favor verifique su e-mail.",
"requestNewVerifyEmail": "Enviar otro correo:",
"verifyEmail": "¡Gracias por crear una cuenta! Le enviamos un correo a la dirección que dio para verificar su cuenta.",
"verifyEmail2": "Debe verificarla antes de poder involucrarse en la comunidad.",
"notYou": "¿No eres tu?",
"loggedInAs": "Entraste como",
"facebookSignIn": "Entrar con Facebook",
"facebookSignUp": "Regístrate con Facebook",
"logout": "Salir",
"signIn": "Entrar para Unirte a la Conversación",
"or": "o",
"email": "E-mail",
"password": "Contraseña",
"forgotYourPass": "¿Has olvidado tu contraseña?",
"needAnAccount": "¿Necesitas una cuenta?",
"register": "Regístrate",
"signUp": "Registro",
"confirmPassword": "Confirmar Contraseña",
"username": "Nombre",
"alreadyHaveAnAccount": "¿Ya tienes una cuenta?",
"recoverPassword": "Recuperar contraseña",
"emailInUse": "Este e-mail se encuentra en uso",
"emailORusernameInUse": "Este e-mail ó nombre de usuario se encuentran en uso",
"requiredField": "Este campo es requerido",
"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": "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",
"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 Inválido. Por favor, verifica los campos",
"specialCharacters": "Sólo pueden contener letras, números y _"
},
"permalink": {
"permalink": "Enlace"
},
"report": "Marcar",
"like": "Me gusta"
}
}
+2
View File
@@ -0,0 +1,2 @@
module.exports = {};
@@ -1,19 +1,18 @@
import React, { Component } from 'react';
import React, {Component} from 'react';
import styles from './style.css';
import Icon from './Icon';
import { I18n } from 'coral-framework';
import {I18n} from 'coral-framework';
import cn from 'classnames';
import translations from '../translations.json';
import { getMyActionSummary, getTotalActionCount } from 'coral-framework/utils';
import {getMyActionSummary, getTotalActionCount} from 'coral-framework/utils';
const lang = new I18n(translations);
const name = 'coral-plugin-like';
class LikeButton extends Component {
handleClick = () => {
const { postLike, showSignInDialog, deleteAction } = this.props;
const { root: { me }, comment } = this.props;
const {postLike, showSignInDialog, deleteAction} = this.props;
const {root: {me}, comment} = this.props;
const myLikeActionSummary = getMyActionSummary(
'LikeActionSummary',
@@ -42,7 +41,7 @@ class LikeButton extends Component {
};
render() {
const { comment } = this.props;
const {comment} = this.props;
if (!comment) {
return null;
@@ -56,7 +55,7 @@ class LikeButton extends Component {
<button
className={cn(
styles.button,
{ [styles.liked]: myLike },
{[styles.liked]: myLike},
`${name}-button`
)}
onClick={this.handleClick}
@@ -68,7 +67,7 @@ class LikeButton extends Component {
className={cn(
styles.icon,
'material-icons',
{ [styles.liked]: myLike },
{[styles.liked]: myLike},
`${name}-icon`
)}
aria-hidden={true}
@@ -1,12 +1,12 @@
import get from 'lodash/get';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { compose, gql, graphql } from 'react-apollo';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {compose, gql, graphql} from 'react-apollo';
import LikeButton from '../components/LikeButton';
import withFragments from 'coral-framework/hocs/withFragments';
import { showSignInDialog } from 'coral-framework/actions/auth';
import{showSignInDialog} from 'coral-framework/actions/auth';
const isLikeAction = a => a.__typename === 'LikeActionSummary';
const isLikeAction = (a) => a.__typename === 'LikeActionSummary';
const COMMENT_FRAGMENT = gql`
fragment LikeButton_updateFragment on Comment {
@@ -32,17 +32,17 @@ const withDeleteAction = graphql(
}
`,
{
props: ({ mutate }) => ({
props: ({mutate}) => ({
deleteAction: (id, commentId) => {
return mutate({
variables: { id },
variables: {id},
optimisticResponse: {
deleteAction: {
__typename: 'DeleteActionResponse',
errors: null
}
},
update: proxy => {
update: (proxy) => {
const fragmentId = `Comment_${commentId}`;
// Read the data from our cache for this query.
@@ -93,10 +93,10 @@ const withPostLike = graphql(
}
`,
{
props: ({ mutate }) => ({
postLike: like => {
props: ({mutate}) => ({
postLike: (like) => {
return mutate({
variables: { like },
variables: {like},
optimisticResponse: {
createLike: {
__typename: 'CreateLikeResponse',
@@ -125,6 +125,7 @@ const withPostLike = graphql(
}
if (idx < 0) {
// Add initial action when it doesn't exist.
data.action_summaries.push({
__typename: 'LikeActionSummary',
@@ -153,8 +154,8 @@ const withPostLike = graphql(
}
);
const mapDispatchToProps = dispatch =>
bindActionCreators({ showSignInDialog }, dispatch);
const mapDispatchToProps = (dispatch) =>
bindActionCreators({showSignInDialog}, dispatch);
const enhance = compose(
withFragments({
@@ -14,7 +14,7 @@ class LoveButton extends React.Component {
showSignInDialog,
alreadyReacted
} = this.props;
const {root: {me}, comment} = this.props;
const {root: {me}} = this.props;
// If the current user does not exist, trigger sign in dialog.
if (!me) {
+4 -4
View File
@@ -16,8 +16,8 @@ module.exports = {
__resolveType: {
post({action_type}) {
switch (action_type) {
case 'LOVE':
return 'LoveAction';
case 'LOVE':
return 'LoveAction';
}
}
}
@@ -26,8 +26,8 @@ module.exports = {
__resolveType: {
post({action_type}) {
switch (action_type) {
case 'LOVE':
return 'LoveActionSummary';
case 'LOVE':
return 'LoveActionSummary';
}
}
}
@@ -1,8 +1,9 @@
import React from 'react';
import styles from './styles.css'
import styles from './styles.css';
export default (props) => (
<div className={styles.box}>
Comment Status: {props.comment.status}
</div>
)
);
@@ -1,6 +1,6 @@
import React from 'react';
import Box from './Box';
import {Button} from 'coral-ui'
import {Button} from 'coral-ui';
import styles from './styles.css';
export default class Footer extends React.Component {
@@ -13,9 +13,9 @@ export default class Footer extends React.Component {
}
handleClick = () => {
this.setState(state => ({
this.setState((state) => ({
show: !state.show
}))
}));
}
render() {
+1 -3
View File
@@ -1,4 +1,2 @@
const {readFileSync} = require('fs');
const path = require('path');
module.exports = {};
@@ -10,7 +10,7 @@ class OffTopicCheckbox extends React.Component {
handleChange = (e) => {
if (e.target.checked) {
this.props.addTag(this.label)
this.props.addTag(this.label);
} else {
const idx = this.props.commentBox.tags.indexOf(this.label);
this.props.removeTag(idx);
@@ -25,14 +25,13 @@ class OffTopicCheckbox extends React.Component {
Off-Topic
</label>
</div>
)
);
}
}
const mapStateToProps = ({commentBox}) => ({commentBox});
const mapDispatchToProps = dispatch =>
const mapDispatchToProps = (dispatch) =>
bindActionCreators({addTag, removeTag}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(OffTopicCheckbox);
@@ -2,8 +2,8 @@ import React from 'react';
import styles from './styles.css';
const isOffTopic = (tags) => {
return !!tags.filter(tag => tag.name === 'OFF_TOPIC').length
}
return !!tags.filter((tag) => tag.name === 'OFF_TOPIC').length;
};
export default (props) => (
<span>
+2 -1
View File
@@ -22,9 +22,10 @@ router.get('/', (req, res, next) => {
/**
* This blacklists the token used to authenticate.
*/
router.delete('/', HandleLogout);
//==============================================================================
// =============================================================================
// PASSPORT ROUTES
//==============================================================================
+31 -1
View File
@@ -9,6 +9,7 @@ const errors = require('../errors');
const uuid = require('uuid');
const debug = require('debug')('talk:passport');
const {createClient} = require('./redis');
const bowser = require('bowser');
// Create a redis client to use for authentication.
const client = createClient();
@@ -32,6 +33,17 @@ const GenerateToken = (user) => JWT.sign({}, JWT_SECRET, {
audience: JWT_AUDIENCE
});
// SetTokenForSafari sends the token in a cookie for Safari clients.
const SetTokenForSafari = (req, res, token) => {
const browser = bowser._detect(req.headers['user-agent']);
if (browser.ios || browser.safari) {
res.cookie('authorization', token, {
httpOnly: true,
expires: new Date(Date.now() + 900000)
});
}
};
// HandleGenerateCredentials validates that an authentication scheme did indeed
// return a user, if it did, then sign and return the user and token to be used
// by the frontend to display and update the UI.
@@ -47,6 +59,8 @@ const HandleGenerateCredentials = (req, res, next) => (err, user) => {
// Generate the token to re-issue to the frontend.
const token = GenerateToken(user);
SetTokenForSafari(req, res, token);
// Send back the details!
res.json({user, token});
};
@@ -66,6 +80,8 @@ const HandleAuthPopupCallback = (req, res, next) => (err, user) => {
// Generate the token to re-issue to the frontend.
const token = GenerateToken(user);
SetTokenForSafari(req, res, token);
// We logged in the user! Let's send back the user data.
res.render('auth-callback', {auth: JSON.stringify({err: null, data: {user, token}})});
};
@@ -134,6 +150,7 @@ const HandleLogout = (req, res, next) => {
return next(err);
}
res.clearCookie('authorization');
res.status(204).end();
});
};
@@ -158,11 +175,24 @@ const CheckBlacklisted = (jwt) => new Promise((resolve, reject) => {
const JwtStrategy = require('passport-jwt').Strategy;
const ExtractJwt = require('passport-jwt').ExtractJwt;
let cookieExtractor = function(req) {
let token = null;
if (req && req.cookies) {
token = req.cookies['authorization'];
}
return token;
};
// Extract the JWT from the 'Authorization' header with the 'Bearer' scheme.
passport.use(new JwtStrategy({
// Prepare the extractor from the header.
jwtFromRequest: ExtractJwt.fromAuthHeaderWithScheme('Bearer'),
jwtFromRequest: ExtractJwt.fromExtractors([
cookieExtractor,
ExtractJwt.fromAuthHeaderWithScheme('Bearer')
]),
// Use the secret passed in which is loaded from the environment. This can be
// a certificate (loaded) or a HMAC key.
-1
View File
@@ -566,7 +566,6 @@ module.exports = class UsersService {
// endpoint.
return;
}
let redirectDomain;
try {
redirectDomain = url.parse(loc).hostname;
+36 -4
View File
@@ -1262,6 +1262,10 @@ boom@2.x.x:
dependencies:
hoek "2.x.x"
bowser@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.7.0.tgz#169de4018711f994242bff9a8009e77a1f35e003"
brace-expansion@^1.0.0:
version "1.1.7"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.7.tgz#3effc3c50e000531fb720eaff80f0ae8ef23cf59"
@@ -1395,6 +1399,10 @@ builtin-status-codes@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
bytes@2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.3.0.tgz#d5b680a165b6201739acb611542aabc2d8ceb070"
bytes@2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.4.0.tgz#7d97196f9d5baf7f6935e25985549edd2a6c2339"
@@ -1815,6 +1823,12 @@ component-emitter@^1.2.0:
version "1.2.1"
resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
compressible@~2.0.8:
version "2.0.10"
resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.10.tgz#feda1c7f7617912732b29bf8cf26252a20b9eecd"
dependencies:
mime-db ">= 1.27.0 < 2"
compression-webpack-plugin@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/compression-webpack-plugin/-/compression-webpack-plugin-0.4.0.tgz#811de04215f811ea6a12d4d8aed8457d758f13ac"
@@ -1824,6 +1838,17 @@ compression-webpack-plugin@^0.4.0:
optionalDependencies:
node-zopfli "^2.0.0"
compression@^1.6.2:
version "1.6.2"
resolved "https://registry.yarnpkg.com/compression/-/compression-1.6.2.tgz#cceb121ecc9d09c52d7ad0c3350ea93ddd402bc3"
dependencies:
accepts "~1.3.3"
bytes "2.3.0"
compressible "~2.0.8"
debug "~2.2.0"
on-headers "~1.0.1"
vary "~1.1.0"
concat-map@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -1925,6 +1950,13 @@ convert-source-map@^1.1.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"
cookie-parser@^1.4.3:
version "1.4.3"
resolved "https://registry.yarnpkg.com/cookie-parser/-/cookie-parser-1.4.3.tgz#0fe31fa19d000b95f4aadf1f53fdc2b8a203baa5"
dependencies:
cookie "0.3.1"
cookie-signature "1.0.6"
cookie-signature@1.0.6:
version "1.0.6"
resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
@@ -5143,14 +5175,14 @@ miller-rabin@^4.0.0:
bn.js "^4.0.0"
brorand "^1.0.1"
"mime-db@>= 1.27.0 < 2", mime-db@~1.27.0:
version "1.27.0"
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.27.0.tgz#820f572296bbd20ec25ed55e5b5de869e5436eb1"
mime-db@~1.12.0:
version "1.12.0"
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.12.0.tgz#3d0c63180f458eb10d325aaa37d7c58ae312e9d7"
mime-db@~1.27.0:
version "1.27.0"
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.27.0.tgz#820f572296bbd20ec25ed55e5b5de869e5436eb1"
mime-types@^2.1.10, mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.15, mime-types@~2.1.7:
version "2.1.15"
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.15.tgz#a4ebf5064094569237b8cf70046776d09fc92aed"