diff --git a/.gitignore b/.gitignore index eff774450..3b59ff2f5 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,4 @@ dist/coral-admin/bundle.js *.iml .env gaba.cfg +.idea/ diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 000000000..94a25f7f4 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/client/coral-admin/src/actions/auth.js b/client/coral-admin/src/actions/auth.js new file mode 100644 index 000000000..c7643cc08 --- /dev/null +++ b/client/coral-admin/src/actions/auth.js @@ -0,0 +1,16 @@ +import * as actions from '../constants/auth'; +import {base, handleResp, getInit} from '../helpers/response'; + +// Check Login + +const checkLoginRequest = () => ({type: actions.CHECK_LOGIN_REQUEST}); +const checkLoginSuccess = user => ({type: actions.CHECK_LOGIN_SUCCESS, user}); +const checkLoginFailure = error => ({type: actions.CHECK_LOGIN_FAILURE, error}); + +export const checkLogin = () => dispatch => { + dispatch(checkLoginRequest()); + fetch(`${base}/auth`, getInit('GET')) + .then(handleResp) + .then(user => dispatch(checkLoginSuccess(user))) + .catch(error => dispatch(checkLoginFailure(error))); +}; diff --git a/client/coral-admin/src/components/ui/Header.css b/client/coral-admin/src/components/ui/Header.css index e69de29bb..b80dca496 100644 --- a/client/coral-admin/src/components/ui/Header.css +++ b/client/coral-admin/src/components/ui/Header.css @@ -0,0 +1,4 @@ +.header { + background: #505050; + overflow: hidden; +} diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js index 2e0f77b6e..4a9c09de5 100644 --- a/client/coral-admin/src/components/ui/Header.js +++ b/client/coral-admin/src/components/ui/Header.js @@ -4,9 +4,11 @@ import {Link} from 'react-router'; import styles from './Header.css'; import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../../translations.json'; +import {Logo} from './Logo'; export default () => ( -
+
+ {lang.t('configure.moderate')} {lang.t('configure.community')} diff --git a/client/coral-admin/src/components/ui/Logo.css b/client/coral-admin/src/components/ui/Logo.css new file mode 100644 index 000000000..e764af627 --- /dev/null +++ b/client/coral-admin/src/components/ui/Logo.css @@ -0,0 +1,18 @@ +.logo h1 { + color: #272727; + font-size: 20px; + padding: 0 30px; +} + +.logo span { + display: inline-block; + margin-left: 10px; + font-size: 18px; + vertical-align: middle; +} + +.logo { + background: #E5E5E5; +} + + diff --git a/client/coral-admin/src/components/ui/Logo.js b/client/coral-admin/src/components/ui/Logo.js new file mode 100644 index 000000000..df6c42f26 --- /dev/null +++ b/client/coral-admin/src/components/ui/Logo.js @@ -0,0 +1,12 @@ +import React from 'react'; +import styles from './Logo.css'; +import {CoralLogo} from 'coral-ui'; + +export const Logo = () => ( +
+

+ + Talk +

+
+); diff --git a/client/coral-admin/src/constants/auth.js b/client/coral-admin/src/constants/auth.js new file mode 100644 index 000000000..c6cb6c944 --- /dev/null +++ b/client/coral-admin/src/constants/auth.js @@ -0,0 +1,7 @@ +export const CHECK_LOGIN_REQUEST = 'CHECK_LOGIN_REQUEST'; +export const CHECK_LOGIN_SUCCESS = 'CHECK_LOGIN_SUCCESS'; +export const CHECK_LOGIN_FAILURE = 'CHECK_LOGIN_FAILURE'; + +export const LOGOUT_REQUEST = 'LOGOUT_REQUEST'; +export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS'; +export const LOGOUT_FAILURE = 'LOGOUT_FAILURE'; diff --git a/client/coral-admin/src/containers/LayoutContainer.js b/client/coral-admin/src/containers/LayoutContainer.js index 921af251d..429f2cc4d 100644 --- a/client/coral-admin/src/containers/LayoutContainer.js +++ b/client/coral-admin/src/containers/LayoutContainer.js @@ -1,9 +1,12 @@ import React, {Component} from 'react'; import {connect} from 'react-redux'; - import {Layout} from '../components/ui/Layout'; +import {checkLogin} from 'coral-framework/actions/auth'; class LayoutContainer extends Component { + componentWillMount () { + this.props.checkLogin(); + } render () { return ; } @@ -11,9 +14,16 @@ class LayoutContainer extends Component { LayoutContainer.propTypes = {}; -const mapStateToProps = () => ({}); +const mapStateToProps = state => ({ + auth: state.auth.toJS() +}); -const mapDispatchToProps = (dispatch) => ({dispatch}); +const mapDispatchToProps = dispatch => ({ + checkLogin: () => dispatch(checkLogin()), +}); -export default connect(mapStateToProps, mapDispatchToProps)(LayoutContainer); +export default connect( + mapStateToProps, + mapDispatchToProps +)(LayoutContainer); diff --git a/client/coral-admin/src/reducers/auth.js b/client/coral-admin/src/reducers/auth.js new file mode 100644 index 000000000..bdb2bb074 --- /dev/null +++ b/client/coral-admin/src/reducers/auth.js @@ -0,0 +1,26 @@ +import {Map} from 'immutable'; +import * as actions from '../constants/auth'; + +const initialState = Map({ + loggedIn: false, + user: null +}); + +export default function auth (state = initialState, action) { + switch (action.type) { + case actions.CHECK_LOGIN_FAILURE: + return state + .set('loggedIn', false) + .set('user', null); + case actions.CHECK_LOGIN_SUCCESS: + return state + .set('loggedIn', true) + .set('user', action.user); + case actions.LOGOUT_SUCCESS: + return state + .set('loggedIn', false) + .set('user', null); + default : + return state; + } +} diff --git a/client/coral-admin/src/reducers/index.js b/client/coral-admin/src/reducers/index.js index 1b29ced69..61029539a 100644 --- a/client/coral-admin/src/reducers/index.js +++ b/client/coral-admin/src/reducers/index.js @@ -2,11 +2,13 @@ import {combineReducers} from 'redux'; import comments from 'reducers/comments'; import settings from 'reducers/settings'; import community from 'reducers/community'; +import auth from 'reducers/auth'; // Combine all reducers into a main one export default combineReducers({ settings, comments, - community + community, + auth }); diff --git a/client/coral-framework/actions/auth.js b/client/coral-framework/actions/auth.js index a1a44611f..360517a32 100644 --- a/client/coral-framework/actions/auth.js +++ b/client/coral-framework/actions/auth.js @@ -19,8 +19,8 @@ export const cleanState = () => ({type: actions.CLEAN_STATE}); // Sign In Actions const signInRequest = () => ({type: actions.FETCH_SIGNIN_REQUEST}); -const signInSuccess = (user) => ({type: actions.FETCH_SIGNIN_SUCCESS, user}); -const signInFailure = (error) => ({type: actions.FETCH_SIGNIN_FAILURE, error}); +const signInSuccess = user => ({type: actions.FETCH_SIGNIN_SUCCESS, user}); +const signInFailure = error => ({type: actions.FETCH_SIGNIN_FAILURE, error}); export const fetchSignIn = (formData) => dispatch => { dispatch(signInRequest()); @@ -114,3 +114,16 @@ export const logout = () => dispatch => { export const validForm = () => ({type: actions.VALID_FORM}); export const invalidForm = error => ({type: actions.INVALID_FORM, error}); +// Check Login + +const checkLoginRequest = () => ({type: actions.CHECK_LOGIN_REQUEST}); +const checkLoginSuccess = user => ({type: actions.CHECK_LOGIN_SUCCESS, user}); +const checkLoginFailure = error => ({type: actions.CHECK_LOGIN_FAILURE, error}); + +export const checkLogin = () => dispatch => { + dispatch(checkLoginRequest()); + fetch(`${base}/auth`, getInit('GET')) + .then(handleResp) + .then(user => dispatch(checkLoginSuccess(user))) + .catch(error => dispatch(checkLoginFailure(error))); +}; diff --git a/client/coral-framework/constants/auth.js b/client/coral-framework/constants/auth.js index a6a2c44f8..07ca2e661 100644 --- a/client/coral-framework/constants/auth.js +++ b/client/coral-framework/constants/auth.js @@ -27,3 +27,7 @@ export const LOGOUT_FAILURE = 'LOGOUT_FAILURE'; export const INVALID_FORM = 'INVALID_FORM'; export const VALID_FORM = 'VALID_FORM'; +export const CHECK_LOGIN_REQUEST = 'CHECK_LOGIN_REQUEST'; +export const CHECK_LOGIN_SUCCESS = 'CHECK_LOGIN_SUCCESS'; +export const CHECK_LOGIN_FAILURE = 'CHECK_LOGIN_FAILURE'; + diff --git a/client/coral-framework/reducers/auth.js b/client/coral-framework/reducers/auth.js index 3e454892f..d0cc698a2 100644 --- a/client/coral-framework/reducers/auth.js +++ b/client/coral-framework/reducers/auth.js @@ -33,6 +33,14 @@ export default function auth (state = initialState, action) { case actions.FETCH_SIGNIN_REQUEST: return state .set('isLoading', true); + case actions.CHECK_LOGIN_FAILURE: + return state + .set('loggedIn', false) + .set('user', null); + case actions.CHECK_LOGIN_SUCCESS: + return state + .set('loggedIn', true) + .set('user', action.user); case actions.FETCH_SIGNIN_SUCCESS: return state .set('loggedIn', true) @@ -40,7 +48,8 @@ export default function auth (state = initialState, action) { case actions.FETCH_SIGNIN_FAILURE: return state .set('isLoading', false) - .set('error', action.error); + .set('error', action.error) + .set('user', null); case actions.FETCH_SIGNIN_FACEBOOK_SUCCESS: return state .set('user', action.user) diff --git a/client/coral-sign-in/containers/SignInContainer.js b/client/coral-sign-in/containers/SignInContainer.js index fc85fd3c4..3e666948a 100644 --- a/client/coral-sign-in/containers/SignInContainer.js +++ b/client/coral-sign-in/containers/SignInContainer.js @@ -18,7 +18,8 @@ import { fetchForgotPassword, facebookCallback, invalidForm, - validForm + validForm, + checkLogin } from '../../coral-framework/actions/auth'; class SignInContainer extends Component { @@ -43,6 +44,10 @@ class SignInContainer extends Component { this.addError = this.addError.bind(this); } + componentWillMount () { + this.props.checkLogin(); + } + componentDidMount() { window.authCallback = this.props.facebookCallback; const {formData} = this.state; @@ -147,6 +152,7 @@ const mapStateToProps = state => ({ }); const mapDispatchToProps = dispatch => ({ + checkLogin: () => dispatch(checkLogin()), facebookCallback: (err, data) => dispatch(facebookCallback(err, data)), fetchSignUp: formData => dispatch(fetchSignUp(formData)), fetchSignIn: formData => dispatch(fetchSignIn(formData)), diff --git a/client/coral-ui/components/CoralLogo.js b/client/coral-ui/components/CoralLogo.js new file mode 100644 index 000000000..f85fd6f2d --- /dev/null +++ b/client/coral-ui/components/CoralLogo.js @@ -0,0 +1,42 @@ +import React, {PropTypes} from 'react'; + +const CoralLogo = ({height = '30px', width = '30px', stroke = '#FFFFFF'}) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +CoralLogo.propTypes = { + height: PropTypes.string, + width: PropTypes.string, + stroke: PropTypes.string +}; + +export default CoralLogo; + diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js index 5116a16dd..8efb5dc7f 100644 --- a/client/coral-ui/index.js +++ b/client/coral-ui/index.js @@ -1 +1,2 @@ export {default as Dialog} from './components/Dialog'; +export {default as CoralLogo} from './components/CoralLogo';