diff --git a/client/source/scripts/actions/AuthActions.js b/client/source/scripts/actions/AuthActions.js
new file mode 100644
index 00000000..e932f6ac
--- /dev/null
+++ b/client/source/scripts/actions/AuthActions.js
@@ -0,0 +1,129 @@
+import axios from 'axios';
+
+import ActionTypes from '../constants/ActionTypes';
+import AppDispatcher from '../dispatcher/AppDispatcher';
+
+const AuthActions = {
+ authenticate: (credentials) => {
+ return axios.post('/auth/authenticate', credentials)
+ .then((json = {}) => {
+ return json.data;
+ })
+ .then((data) => {
+ AppDispatcher.dispatchServerAction({
+ type: ActionTypes.AUTH_LOGIN_SUCCESS,
+ data
+ });
+ })
+ .catch((error) => {
+ AppDispatcher.dispatchServerAction({
+ type: ActionTypes.AUTH_LOGIN_ERROR,
+ error: error.data.message
+ });
+ });
+ },
+
+ createUser: (credentials) => {
+ return axios.put('/auth/users', credentials)
+ .then((json = {}) => {
+ return json.data;
+ })
+ .then((data) => {
+ AppDispatcher.dispatchServerAction({
+ type: ActionTypes.AUTH_CREATE_USER_SUCCESS,
+ data
+ });
+ })
+ .catch((error) => {
+ AppDispatcher.dispatchServerAction({
+ type: ActionTypes.AUTH_CREATE_USER_ERROR,
+ error
+ });
+ });
+ },
+
+ deleteUser: (username) => {
+ return axios.delete(`/auth/users/${username}`)
+ .then((json = {}) => {
+ return json.data;
+ })
+ .then((data) => {
+ AppDispatcher.dispatchServerAction({
+ type: ActionTypes.AUTH_DELETE_USER_SUCCESS,
+ data: {
+ username,
+ ...data
+ }
+ });
+ })
+ .catch((error) => {
+ AppDispatcher.dispatchServerAction({
+ type: ActionTypes.AUTH_DELETE_USER_ERROR,
+ error: {
+ username,
+ ...error
+ }
+ });
+ });
+ },
+
+ fetchUsers: () => {
+ return axios.get('/auth/users')
+ .then((json = {}) => {
+ return json.data;
+ })
+ .then((data) => {
+ AppDispatcher.dispatchServerAction({
+ type: ActionTypes.AUTH_LIST_USERS_SUCCESS,
+ data
+ });
+ })
+ .catch((error) => {
+ AppDispatcher.dispatchServerAction({
+ type: ActionTypes.AUTH_LIST_USERS_ERROR,
+ error
+ });
+ });
+ },
+
+ register: (credentials) => {
+ return axios.post('/auth/register', credentials)
+ .then((json = {}) => {
+ return json.data;
+ })
+ .then((data) => {
+ AppDispatcher.dispatchServerAction({
+ type: ActionTypes.AUTH_REGISTER_SUCCESS,
+ data
+ });
+ })
+ .catch((error) => {
+ AppDispatcher.dispatchServerAction({
+ type: ActionTypes.AUTH_REGISTER_ERROR,
+ error
+ });
+ });
+ },
+
+ verify: () => {
+ // We need to prevent caching this endpoint.
+ return axios.get(`/auth/verify?${Date.now()}`)
+ .then((json = {}) => {
+ return json.data;
+ })
+ .then((data) => {
+ AppDispatcher.dispatchServerAction({
+ type: ActionTypes.AUTH_VERIFY_SUCCESS,
+ data
+ });
+ })
+ .catch((error) => {
+ AppDispatcher.dispatchServerAction({
+ type: ActionTypes.AUTH_VERIFY_ERROR,
+ error
+ });
+ });
+ }
+};
+
+export default AuthActions;
diff --git a/client/source/scripts/components/auth/AuthForm.js b/client/source/scripts/components/auth/AuthForm.js
new file mode 100644
index 00000000..76a8ea03
--- /dev/null
+++ b/client/source/scripts/components/auth/AuthForm.js
@@ -0,0 +1,105 @@
+import classnames from'classnames';
+import React from'react';
+
+import EventTypes from '../../constants/EventTypes';
+import FloodActions from '../../actions/FloodActions';
+import AuthStore from '../../stores/AuthStore';
+
+const METHODS_TO_BIND = ['handleAuthError', 'handleSubmitClick'];
+
+export default class AuthForm extends React.Component {
+ constructor() {
+ super();
+
+ this.state = {error: null}
+
+ METHODS_TO_BIND.forEach((method) => {
+ this[method] = this[method].bind(this);
+ });
+ }
+
+ componentDidMount() {
+ AuthStore.listen(EventTypes.AUTH_LOGIN_ERROR, this.handleAuthError);
+ AuthStore.listen(EventTypes.AUTH_REGISTER_ERROR, this.handleAuthError);
+ }
+
+ componentWillUnmount() {
+ AuthStore.unlisten(EventTypes.AUTH_LOGIN_ERROR, this.handleAuthError);
+ AuthStore.unlisten(EventTypes.AUTH_REGISTER_ERROR, this.handleAuthError);
+ }
+
+ getValue(fieldName) {
+ return this.state[fieldName];
+ }
+
+ handleSubmitClick() {
+ if (this.props.mode === 'login') {
+ AuthStore.authenticate({
+ username: this.refs.username.value,
+ password: this.refs.password.value
+ });
+ } else {
+ AuthStore.register({
+ username: this.refs.username.value,
+ password: this.refs.password.value
+ });
+ }
+ }
+
+ handleAuthError(error) {
+ this.setState({error});
+ }
+
+ render() {
+ let actionText = null;
+ let error = null;
+ let headerText = null;
+
+ if (this.props.mode === 'login') {
+ actionText = 'Log In';
+ headerText = 'Login';
+ } else {
+ actionText = 'Create Account';
+ headerText = 'Create an Account';
+ }
+
+ if (!!this.state.error) {
+ error = (
+
+
+ {this.state.error}
+
+
+
+
+
{headerText}
+
+
+
+ {error}
+
+
+
+
+