From f1c9453620a117c91a0ae47c1859ee40859a7f3f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 22 Apr 2020 23:15:29 -0500
Subject: [PATCH] Use React components in registration form

---
 app/gabsocial/features/forms/index.js         |  6 +--
 .../components/registration_form.js           | 37 +++++++++++--------
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/app/gabsocial/features/forms/index.js b/app/gabsocial/features/forms/index.js
index c92e2ead6..7cb91cc36 100644
--- a/app/gabsocial/features/forms/index.js
+++ b/app/gabsocial/features/forms/index.js
@@ -79,16 +79,16 @@ export class SimpleInput extends ImmutablePureComponent {
 
 }
 
-export const SimpleForm = ({ children, onSubmit }) => (
-  <form className='simple_form' onSubmit={onSubmit}>{children}</form>
+export const SimpleForm = ({ children, ...props }) => (
+  <form className='simple_form' {...props}>{children}</form>
 );
 
 SimpleForm.propTypes = {
   children: PropTypes.node,
-  onSubmit: PropTypes.func,
 };
 
 SimpleForm.defaultProps = {
+  acceptCharset: 'UTF-8',
   onSubmit: e => e.preventDefault(),
 };
 
diff --git a/app/gabsocial/features/landing_page/components/registration_form.js b/app/gabsocial/features/landing_page/components/registration_form.js
index b45719607..21eba9750 100644
--- a/app/gabsocial/features/landing_page/components/registration_form.js
+++ b/app/gabsocial/features/landing_page/components/registration_form.js
@@ -3,7 +3,12 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { TextInput } from 'gabsocial/features/forms';
+import {
+  SimpleForm,
+  SimpleInput,
+  TextInput,
+  Checkbox,
+} from 'gabsocial/features/forms';
 
 const mapStateToProps = (state, props) => ({
   instance: state.get('instance'),
@@ -16,12 +21,17 @@ class RegistrationForm extends ImmutablePureComponent {
     instance: ImmutablePropTypes.map,
   }
 
+  onSubmit = e => {
+    // TODO: Dispatch action
+    e.preventDefault();
+  }
+
   render() {
     const { instance } = this.props;
 
     return (
       <div className='box-widget'>
-        <form className='simple_form new_user' id='new_user' noValidate='novalidate' action='/auth' acceptCharset='UTF-8' method='post'>
+        <SimpleForm onSubmit={this.onSubmit}>
           <div className='simple_form__overlay-area'>
             <p className='lead'>With an account on <strong>{instance.get('title')}</strong> you'll be able to follow people on any server in the fediverse.</p>
             <div className='fields-group'>
@@ -31,21 +41,21 @@ class RegistrationForm extends ImmutablePureComponent {
                 autoComplete='off'
                 required
               />
-              <TextInput
+              <SimpleInput
                 placeholder='E-mail address'
                 name='email'
                 type='email'
                 autoComplete='off'
                 required
               />
-              <TextInput
+              <SimpleInput
                 placeholder='Password'
                 name='password'
                 type='password'
                 autoComplete='off'
                 required
               />
-              <TextInput
+              <SimpleInput
                 placeholder='Confirm password'
                 name='password_confirmation'
                 type='password'
@@ -54,22 +64,17 @@ class RegistrationForm extends ImmutablePureComponent {
               />
             </div>
             <div className='fields-group'>
-              <div className='input with_label boolean optional user_agreement'>
-                <div className='label_input'>
-                  <label className='boolean optional' htmlFor='user_agreement'>I agree to the <Link to='/about/tos' target='_blank'>Terms of Service</Link>.</label>
-                  <div className='label_input__wrapper'>
-                    <label className='checkbox'>
-                      <input className='boolean' type='checkbox' name='user[agreement]' id='user_agreement' />
-                    </label>
-                  </div>
-                </div>
-              </div>
+              <Checkbox
+                label={<>I agree to the <Link to='/about/tos' target='_blank'>Terms of Service</Link>.</>}
+                name='agreement'
+                required
+              />
             </div>
             <div className='actions'>
               <button name='button' type='submit' className='btn button button-primary'>Sign up</button>
             </div>
           </div>
-        </form>
+        </SimpleForm>
       </div>
     );
   }