Logins and logouts (sessions) are working

src/actions/accounts.js

@@ -0,0 +1,18 @@
+export const LOGIN = 'LOGIN';
+export const LOGOUT = 'LOGOUT';
+
+export function login(id, email, username, token) {
+	return {
+		type: LOGIN,
+		id: id,
+		email: email,
+		username: username,
+		token: token
+	};
+}
+
+export function logout() {
+	return {
+		type: LOGOUT
+	};
+}

src/actions/actions.jsx

@@ -1,7 +0,0 @@
-export const ACTION_NAME = 'ACTION_NAME';
-
-export function actionName() {
-	return {
-		type: ACTION_NAME
-	};
-}

src/components/pages/home.jsx

@@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
 
 //panels
 import Signup from '../panels/signup.jsx';
+import Login from '../panels/login.jsx';
+import Logout from '../panels/logout.jsx';
 
 class Home extends React.Component {
 	constructor(props) {
@@ -13,10 +15,33 @@ class Home extends React.Component {
 	}
 
 	render() {
+		//well this is goofy
+		let SidePanel;
+
+		if (this.props.id) {
+			SidePanel = () => {
+				return (
+					<div>
+						<p>You are logged in.</p>
+						<Logout />
+					</div>
+				);
+			};
+		} else {
+			SidePanel = () => {
+				return (
+					<div>
+						<Signup />
+						<Login />
+					</div>
+				);
+			};
+		}
+
 		return (
 			<div className='page'>
 				<p>This is the home page.</p>
-				<Signup />
+				<SidePanel />
 			</div>
 		);
 	}
@@ -24,7 +49,7 @@ class Home extends React.Component {
 
 function mapStoreToProps(store) {
 	return {
-		//
+		id: store.account.id
 	}
 }
 

src/components/panels/login.jsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { login } from '../../actions/accounts.js';
+import { validateEmail } from '../../../common/utilities.js';
+
+class Login extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			email: '',
+			password: '',
+			warning: ''
+		};
+	}
+
+	render() {
+		let warningStyle = {
+			display: this.state.warning.length > 0 ? 'flex' : 'none'
+		};
+
+		return (
+			<div className='panel'>
+				<h1>Login</h1>
+
+				<div className='warning' style={warningStyle}>
+					<p>{this.state.warning}</p>
+				</div>
+
+				<form action='/login' method='post' onSubmit={(e) => this.submit(e)}>
+					<div>
+						<label>Email:</label>
+						<input type='text' name='email' value={this.state.email} onChange={this.updateEmail.bind(this)} />
+					</div>
+
+					<div>
+						<label>Password:</label>
+						<input type='password' name='password' value={this.state.password} onChange={this.updatePassword.bind(this)} />
+					</div>
+
+					<button type='submit'>Login</button>
+				</form>
+			</div>
+		);
+	}
+
+	submit(e) {
+		e.preventDefault();
+
+		if (!this.validateInput()) {
+			return;
+		}
+
+		//build the XHR
+		let form = e.target;
+		let formData = new FormData(form);
+		let xhr = new XMLHttpRequest();
+
+		xhr.onreadystatechange = () => {
+			if (xhr.readyState === 4) {
+				if (xhr.status === 200) {
+					let json = JSON.parse(xhr.responseText);
+					this.props.login(json.id, json.email, json.username, json.token);
+				}
+
+				else if (xhr.status === 400) {
+					this.setWarning(xhr.responseText);
+				}
+			}
+		};
+
+		//send the XHR
+		xhr.open('POST', form.action, true);
+		xhr.send(formData);
+	}
+
+	validateInput(e) {
+		if (!validateEmail(this.state.email)) {
+			this.setWarning('Invalid Email');
+			return false;
+		}
+
+		if (this.state.password.length < 8) {
+			this.setWarning('Minimum password length is 8 characters');
+			return false;
+		}
+
+		return true;
+	}
+
+	setWarning(s) {
+		this.setState({
+			warning: s
+		});
+	}
+
+	clearInput() {
+		this.setState({
+			email: '',
+			password: '',
+			warning: ''
+		});
+	}
+
+	updateEmail(evt) {
+		this.setState({
+			email: evt.target.value
+		});
+	}
+
+	updatePassword(evt) {
+		this.setState({
+			password: evt.target.value
+		});
+	}
+}
+
+function mapStoreToProps(store) {
+	return {
+		//
+	}
+}
+
+function mapDispatchToProps(dispatch) {
+	return {
+		login: (id, email, username, token) => { dispatch(login(id, email, username, token)) }
+	}
+}
+
+Login = connect(mapStoreToProps, mapDispatchToProps)(Login);
+
+export default Login;

src/components/panels/logout.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { logout } from '../../actions/accounts.js';
+
+class Logout extends React.Component {
+	constructor(props) {
+		super(props);
+	}
+
+	render() {
+		return (
+			<button type='submit' onClick={(e) => this.submit(e)}>Logout</button>
+		);
+	}
+
+	submit(e) {
+		e.preventDefault();
+
+		//build the XHR
+		let xhr = new XMLHttpRequest();
+		xhr.open('POST', '/logout', true);
+		xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+		xhr.send(JSON.stringify({
+			email: this.props.email,
+			token: this.props.token
+		}));
+
+		this.props.logout();
+	}
+}
+
+function mapStoreToProps(store) {
+	return {
+		email: store.account.email,
+		token: store.account.token
+	}
+}
+
+function mapDispatchToProps(dispatch) {
+	return {
+		logout: () => { dispatch(logout()) }
+	}
+}
+
+Logout = connect(mapStoreToProps, mapDispatchToProps)(Logout);
+
+export default Logout;

src/index.jsx

@@ -7,17 +7,27 @@ import thunk from 'redux-thunk';
 import DevTools from './dev_tools.jsx';
 import App from './components/app.jsx';
 
-import reducer from './reducers/reducer.jsx';
+import reducer from './reducers/reducer.js';
+
+//persistence
+let ITEM_NAME = 'account.kingdombattles';
+let account = localStorage.getItem(ITEM_NAME);
+account = account ? JSON.parse(account) : {};
 
 var store = createStore(
 	reducer,
-	{}, //initial state
+	{ account: account }, //initial state
 	compose(
 		applyMiddleware(thunk),
 		DevTools.instrument()
 	)
 );
 
+//persistence
+store.subscribe(() => {
+	localStorage.setItem(ITEM_NAME, JSON.stringify(store.getState().account));
+});
+
 //start the process
 ReactDOM.render(
 	<Provider store={store}>

src/reducers/accounts.js

@@ -0,0 +1,29 @@
+import { LOGIN, LOGOUT } from "../actions/accounts.js";
+
+const initialStore = {
+	id: 0,
+	email: '',
+	username: '',
+	token: 0
+};
+
+export function accountReducer(store = initialStore, action) {
+	switch(action.type) {
+		case LOGIN:
+			let newStore = JSON.parse(JSON.stringify(initialStore));
+
+			newStore.id = action.id;
+			newStore.email = action.email;
+			newStore.username = action.username;
+			newStore.token = action.token;
+
+			return newStore;
+
+		case LOGOUT:
+			return initialStore;
+
+		default:
+			return store;
+	}
+}
+

src/reducers/reducer.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux';
+import { accountReducer } from './accounts.js';
+
+//compile all reducers together
+export default combineReducers({
+	account: accountReducer
+});
+

src/reducers/reducer.jsx

@@ -1,14 +0,0 @@
-import { ACTION_NAME } from "../actions/actions.jsx";
-
-const initialState = {};
-
-export default function reducer(state = initialState, action) {
-	switch(action.type) {
-		case ACTION_NAME:
-			//DO NOTHING
-			return state;
-
-		default:
-			return state;
-	}
-}