Basic registration form functionality

app/gabsocial/actions/auth.js

@@ -6,6 +6,10 @@ export const AUTH_APP_AUTHORIZED = 'AUTH_APP_AUTHORIZED';
 export const AUTH_LOGGED_IN      = 'AUTH_LOGGED_IN';
 export const AUTH_LOGGED_OUT     = 'AUTH_LOGGED_OUT';
 
+export const AUTH_REGISTER_REQUEST = 'AUTH_REGISTER_REQUEST';
+export const AUTH_REGISTER_SUCCESS = 'AUTH_REGISTER_SUCCESS';
+export const AUTH_REGISTER_FAIL    = 'AUTH_REGISTER_FAIL';
+
 export function createAuthApp() {
   return (dispatch, getState) => {
     const appToken = getState().getIn(['auth', 'app', 'access_token']);
@@ -57,6 +61,17 @@ export function logOut() {
   };
 }
 
+export function register(params) {
+  return (dispatch, getState) => {
+    dispatch({ type: AUTH_REGISTER_REQUEST });
+    return api(getState).post('/api/v1/accounts', params).then(response => {
+      dispatch({ type: AUTH_REGISTER_SUCCESS, response });
+    }).catch(error => {
+      dispatch({ type: AUTH_REGISTER_FAIL, error });
+    });
+  };
+}
+
 export function authAppCreated(app) {
   return {
     type: AUTH_APP_CREATED,

app/gabsocial/features/forms/index.js

@@ -115,7 +115,7 @@ FieldsGroup.propTypes = {
 };
 
 export const Checkbox = props => (
-  <SimpleInput type='checkbox' {...props} />
+  <SimpleInput type='checkbox' value {...props} />
 );
 
 export class RadioGroup extends ImmutablePureComponent {

app/gabsocial/features/landing_page/components/registration_form.js

@@ -9,6 +9,7 @@ import {
   TextInput,
   Checkbox,
 } from 'gabsocial/features/forms';
+import { register } from 'gabsocial/actions/auth';
 
 const mapStateToProps = (state, props) => ({
   instance: state.get('instance'),
@@ -21,8 +22,16 @@ class RegistrationForm extends ImmutablePureComponent {
     instance: ImmutablePropTypes.map,
   }
 
+  onInputChange = e => {
+    this.setState({ [e.target.name]: e.target.value });
+  }
+
+  onCheckboxChange = e => {
+    this.setState({ [e.target.name]: e.target.checked });
+  }
+
   onSubmit = e => {
-    // TODO: Dispatch action
+    this.props.dispatch(register(this.state));
   }
 
   render() {
@@ -38,6 +47,7 @@ class RegistrationForm extends ImmutablePureComponent {
                 placeholder='Username'
                 name='username'
                 autoComplete='off'
+                onChange={this.onInputChange}
                 required
               />
               <SimpleInput
@@ -45,6 +55,7 @@ class RegistrationForm extends ImmutablePureComponent {
                 name='email'
                 type='email'
                 autoComplete='off'
+                onChange={this.onInputChange}
                 required
               />
               <SimpleInput
@@ -52,13 +63,15 @@ class RegistrationForm extends ImmutablePureComponent {
                 name='password'
                 type='password'
                 autoComplete='off'
+                onChange={this.onInputChange}
                 required
               />
               <SimpleInput
                 placeholder='Confirm password'
-                name='password_confirmation'
+                name='confirm'
                 type='password'
                 autoComplete='off'
+                onChange={this.onInputChange}
                 required
               />
             </div>
@@ -66,9 +79,11 @@ class RegistrationForm extends ImmutablePureComponent {
               <Checkbox
                 label={<>I agree to the <Link to='/about/tos' target='_blank'>Terms of Service</Link>.</>}
                 name='agreement'
+                onChange={this.onCheckboxChange}
                 required
               />
             </div>
+            <input type='hidden' name='locale' value='en_US' />
             <div className='actions'>
               <button name='button' type='submit' className='btn button button-primary'>Sign up</button>
             </div>