Continue with Facebook Funtionalit

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

@@ -3,7 +3,7 @@ import React from 'react';
 import {Button, Icon} from 'react-mdl';
 import timeago from 'timeago.js';
 import styles from './CommentList.css';
-import I18n from 'coral-framework/i18n/i18n';
+import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 
 // Render a single comment for the list

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

@@ -1,4 +1,4 @@
-import I18n from 'coral-framework/i18n/i18n';
+import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 import React from 'react';
 import Modal from 'components/Modal';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import I18n from 'coral-framework/i18n/i18n';
+import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations';
 import {Grid, Cell} from 'react-mdl';
 

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

@@ -13,7 +13,7 @@ import {
   Icon
 } from 'react-mdl';
 import styles from './Configure.css';
-import I18n from 'coral-framework/i18n/i18n';
+import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 
 class Configure extends React.Component {

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

@@ -5,7 +5,7 @@ import CommentList from 'components/CommentList';
 import {updateStatus} from 'actions/comments';
 import styles from './ModerationQueue.css';
 import key from 'keymaster';
-import I18n from 'coral-framework/i18n/i18n';
+import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 
 /*

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

@@ -15,6 +15,7 @@ import {ReplyBox, ReplyButton} from '../../coral-plugin-replies';
 import Pym from 'pym.js';
 import FlagButton from '../../coral-plugin-flags/FlagButton';
 import PermalinkButton from '../../coral-plugin-permalinks/PermalinkButton';
+import SignInContainer from '../../coral-sign-in/containers/SignInContainer';
 
 const {addItem, updateItem, postItem, getStream, postAction, appendItemArray} = itemActions;
 const {addNotification, clearNotification} = notificationActions;
@@ -111,6 +112,7 @@ class CommentStream extends Component {
               id={rootItemId}
               premod={this.props.config.moderation}
               reply={false}/>
+            <SignInContainer />
           </div>
           {
             rootItem.comments.map((commentId) => {

client/coral-framework/actions/auth.js

@@ -0,0 +1,61 @@
+import * as actions from '../constants/auth';
+import {base, handleResp} from '../helpers';
+
+export const loginFacebook = () => dispatch => {
+  dispatch(loginFacebookRequest());
+  window.open(
+    `${base}/auth/facebook`,
+    'Continue with Facebook',
+    'menubar=0,resizable=0,width=500,height=500,top=200,left=500'
+  );
+};
+
+export const loginFacebookCallback = (err, data) => {
+  let user;
+
+  if (err) {
+    console.error(err);
+    return;
+  }
+
+  try {
+    user = JSON.parse(data);
+  } catch (err) {
+    console.error('Can\'t parse the user json', err);
+    return;
+  }
+
+  console.log('User was loaded!', user);
+};
+
+export const logout = () => dispatch => {
+  dispatch(logoutRequest());
+  fetch(`${base}/api/v1/auth`, {
+    method: 'DELETE',
+    credentials: 'same-origin'
+  })
+  .then(handleResp)
+  .then(() => dispatch(dispatch(logoutSuccess())))
+  .catch(error => dispatch(logoutFailure(error)));
+};
+
+const logoutRequest = () => ({
+  type: actions.USER_LOGOUT_SUCCESS
+});
+
+const logoutSuccess = () => ({
+  type: actions.USER_LOGOUT_SUCCESS
+});
+
+const logoutFailure = (error) => ({
+  type: actions.USER_LOGOUT_SUCCESS,
+  error
+});
+
+export const loginFacebookRequest = () => ({
+  type: actions.USER_FACEBOOK_LOGIN_REQUEST
+});
+
+export const loginRequest = () => ({
+  type: actions.USER_SIGNIN_REQUEST
+});

client/coral-framework/actions/config.js

@@ -1,5 +1,3 @@
-/* @flow */
-
 import {fromJS} from 'immutable';
 
 /**

client/coral-framework/actions/notification.js

@@ -1,5 +1,3 @@
-/* Notification Actions */
-
 export const ADD_NOTIFICATION = 'ADD_NOTIFICATION';
 export const CLEAR_NOTIFICATION = 'CLEAR_NOTIFICATION';
 

client/coral-framework/constants/auth.js

@@ -0,0 +1,9 @@
+export const USER_LOGIN_REQUEST = 'USER_LOGIN_REQUEST';
+export const USER_LOGIN_SUCCESS = 'USER_LOGIN_SUCCESS';
+export const USER_LOGIN_FAILURE = 'USER_LOGIN_FAILURE';
+export const USER_FACEBOOK_LOGIN_REQUEST = 'USER_FACEBOOK_LOGIN_REQUEST';
+export const USER_FACEBOOK_SUCCESS = 'USER_FACEBOOK_SUCCESS';
+export const USER_FACEBOOK_FAILURE = 'USER_FACEBOOK_FAILURE';
+export const USER_LOGOUT_REQUEST = 'USER_LOGOUT_REQUEST';
+export const USER_LOGOUT_SUCCESS = 'USER_LOGOUT_SUCCESS';
+export const USER_LOGOUT_FAILURE = 'USER_LOGOUT_FAILURE';

client/coral-framework/helpers/index.js

@@ -0,0 +1,27 @@
+export const base = '/api/v1';
+
+export const getInit = (method, body) => {
+  const headers = new Headers({
+    'Content-Type': 'application/json',
+    'Accept': 'application/json'
+  });
+
+  const init = {method, headers};
+  if (method.toLowerCase() !== 'get') {
+    init.body = JSON.stringify(body);
+  }
+
+  return init;
+};
+
+export const handleResp = res => {
+  if (res.status === 401) {
+    throw new Error('Not Authorized to make this request');
+  } else if (res.status > 399) {
+    throw new Error('Error! Status ', res.status);
+  } else if (res.status === 204) {
+    return res.text();
+  } else {
+    return res.json();
+  }
+};

client/coral-framework/index.js

@@ -1,10 +1,10 @@
-import Notification from './notification/Notification';
-import store from './store/store';
-import {fetchConfig} from './store/actions/config';
-import * as itemActions from './store/actions/items';
-import I18n from './i18n/i18n';
-import * as notificationActions from './store/actions/notification';
-import * as authActions from './store/actions/auth';
+import Notification from './modules/notification/Notification';
+import store from './store';
+import {fetchConfig} from './actions/config';
+import * as itemActions from './actions/items';
+import I18n from './modules/i18n/i18n';
+import * as notificationActions from './actions/notification';
+import * as authActions from './actions/auth';
 
 export {
   Notification,

client/coral-framework/modules/i18n/i18n.js

@@ -1,5 +1,5 @@
 import timeago from 'timeago.js';
-import esTA from 'timeago.js/locales/es';
+import esTA from '../../../../node_modules/timeago.js/locales/es';
 
 /**
  * Default locales, this should be overriden by config file

client/coral-framework/reducers/auth.js

@@ -0,0 +1,22 @@
+import {Map} from 'immutable';
+//
+//import {
+//  FETCH_COMMENTERS_REQUEST,
+//  FETCH_COMMENTERS_FAILURE,
+//  FETCH_COMMENTERS_SUCCESS,
+//  SORT_UPDATE
+//} from '../constants/community';
+//
+const initialState = Map({
+  auth: Map(),
+  loggedIn: false,
+  error: '',
+  user: {}
+});
+
+export default function community (state = initialState, action) {
+  switch (action.type) {
+  default :
+    return state;
+  }
+}

client/coral-framework/store.js

@@ -1,4 +1,3 @@
-
 import {createStore, applyMiddleware} from 'redux';
 import thunk from 'redux-thunk';
 import mainReducer from './reducers';

client/coral-framework/store/actions/auth.js

@@ -1,17 +0,0 @@
-/* Auth Actions */
-
-export const SET_LOGGED_IN_USER = 'SET_LOGGED_IN_USER';
-export const LOG_OUT_USER = 'LOG_OUT_USER';
-
-export const setLoggedInUser = (user_id) => {
-  return {
-    type: SET_LOGGED_IN_USER,
-    user_id
-  };
-};
-
-export const LogOutUser = () => {
-  return {
-    type: LOG_OUT_USER
-  };
-};

client/coral-framework/store/reducers/auth.js

@@ -1,17 +0,0 @@
-/* Auth */
-
-import * as actions from '../actions/auth';
-import {fromJS} from 'immutable';
-
-const initialState = fromJS({});
-
-export default (state = initialState, action) => {
-  switch (action.type) {
-  case actions.SET_LOGGED_IN_USER:
-    return state.set('user', action.user_id);
-  case actions.LOG_OUT_USER:
-    return initialState;
-  default:
-    return state;
-  }
-};

client/coral-plugin-permalinks/PermalinkButton.js

@@ -1,5 +1,5 @@
 import React, {PropTypes} from 'react';
-import I18n from 'coral-framework/i18n/i18n';
+import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from './translations';
 import onClickOutside from 'react-onclickoutside';
 const name = 'coral-plugin-permalinks';

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './styles.css';
+
+const Button = ({type = 'local', children, ...props}) => (
+  <button
+    className={`${styles.button} ${styles[type]}`}
+    {...props}
+  >
+    {children}
+  </button>
+);
+
+export default Button;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import Button from './Button';
+
+const SignIn = ({openFacebookWindow, logout}) => (
+  <div>
+    <Button type="facebook" onClick={openFacebookWindow}>
+      Continue with Facebook
+    </Button>
+    <a onClick={logout}>
+      Logout
+    </a>
+  </div>
+);
+
+export default SignIn;

client/coral-sign-in/components/styles.css

@@ -0,0 +1,43 @@
+.button {
+    background: 0 0;
+    border: none;
+    border-radius: 2px;
+    color: #000;
+    display: block;
+    position: relative;
+    height: 36px;
+    min-width: 64px;
+    padding: 0 8px;
+    display: inline-block;
+    font-family: 'Roboto','Helvetica','Arial',sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0;
+    overflow: hidden;
+    will-change: box-shadow,transform;
+    -webkit-transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
+    transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
+    outline: none;
+    cursor: pointer;
+    text-decoration: none;
+    text-align: center;
+    line-height: 36px;
+    vertical-align: middle;
+}
+
+.local {
+    background: #E0E0E0;
+    color: #212121;
+}
+
+.facebook {
+    background-color: #4267b2;
+    border-color: #4267b2;
+    color: rgb(255, 255, 255);
+}
+
+.facebook:hover {
+    background-color: #365899;
+    border-color: #365899;
+}

client/coral-sign-in/containers/SignInContainer.js

@@ -0,0 +1,37 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+
+import SignIn from '../components/SignIn';
+
+import {
+  loginFacebookCallback,
+  loginFacebook,
+  logout
+} from '../../coral-framework/actions/auth';
+
+class SignInContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.openFacebookWindow = this.openFacebookWindow.bind(this);
+    this.logout = this.logout.bind(this);
+  }
+
+  componentDidMount() {
+    window.authCallback = loginFacebookCallback;
+  }
+
+  openFacebookWindow() {
+    this.props.dispatch(loginFacebook());
+  }
+
+  logout() {
+    this.props.dispatch(logout());
+  }
+
+  render() {
+    return <SignIn {...this} />;
+  }
+}
+
+export default connect(({auth}) => ({auth}))(SignInContainer);

tests/client/coral-framework/store/authReducer.js

@@ -1,31 +0,0 @@
-import {Map} from 'immutable';
-import {expect} from 'chai';
-import authReducer from '../../../../client/coral-framework/store/reducers/auth';
-import * as actions from '../../../../client/coral-framework/store/actions/auth';
-
-describe ('authReducer', () => {
-  describe('SET_LOGGED_IN_USER', () => {
-    it('should set a logged in user', () => {
-      const action = {
-        type: actions.SET_LOGGED_IN_USER,
-        user_id: '123'
-      };
-      const store = new Map({});
-      const result = authReducer(store, action);
-      expect(result.get('user')).to.equal(action.user_id);
-    });
-  });
-
-  describe('LOG_OUT_USER', () => {
-    it('should clear the user store', () => {
-      const action = {
-        type: actions.LOG_OUT_USER
-      };
-      const store = new Map({
-        user: '123'
-      });
-      const result = authReducer(store, action);
-      expect(result.get('user')).to.equal(undefined);
-    });
-  });
-});

tests/client/coral-framework/store/itemActions.spec.js

@@ -2,7 +2,7 @@ import 'react';
 import 'redux';
 import {expect} from 'chai';
 import fetchMock from 'fetch-mock';
-import * as actions from '../../../../client/coral-framework/store/actions/items';
+import * as actions from '../../../../client/coral-framework/actions/items';
 import {Map} from 'immutable';
 
 import configureStore from 'redux-mock-store';

tests/client/coral-framework/store/itemReducer.spec.js

@@ -1,6 +1,6 @@
 import {Map, fromJS} from 'immutable';
 import {expect} from 'chai';
-import itemsReducer from '../../../../client/coral-framework/store/reducers/items';
+import itemsReducer from '../../../../client/coral-framework/reducers/items';
 
 describe ('itemsReducer', () => {
   describe('ADD_ITEM', () => {

tests/client/coral-framework/store/notificationReducer.spec.js

@@ -1,7 +1,7 @@
 import {Map} from 'immutable';
 import {expect} from 'chai';
-import notificationReducer from '../../../../client/coral-framework/store/reducers/notification';
-import * as actions from '../../../../client/coral-framework/store/actions/notification';
+import notificationReducer from '../../../../client/coral-framework/reducers/notification';
+import * as actions from '../../../../client/coral-framework/actions/notification';
 
 describe ('notificationsReducer', () => {
   describe('ADD_NOTIFICATION', () => {