bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use React components in registration form

Browse source
This commit is contained in:
Alex Gleason 2020-04-22 23:15:29 -05:00
parent 252b3fbf51
commit f1c9453620
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 24 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/gabsocial/features/forms/index.js
View file

@ -79,16 +79,16 @@ export class SimpleInput extends ImmutablePureComponent {
} }
export const SimpleForm = ({ children, onSubmit }) => ( export const SimpleForm = ({ children, ...props }) => (
<form className='simple_form' onSubmit={onSubmit}>{children}</form> <form className='simple_form' {...props}>{children}</form>
); );
SimpleForm.propTypes = { SimpleForm.propTypes = {
children: PropTypes.node, children: PropTypes.node,
onSubmit: PropTypes.func,
}; };
SimpleForm.defaultProps = { SimpleForm.defaultProps = {
acceptCharset: 'UTF-8',
onSubmit: e => e.preventDefault(), onSubmit: e => e.preventDefault(),
}; };

37
app/gabsocial/features/landing_page/components/registration_form.js
View file

@ -3,7 +3,12 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Link } from 'react-router-dom'; 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) => ({ const mapStateToProps = (state, props) => ({
instance: state.get('instance'), instance: state.get('instance'),
@ -16,12 +21,17 @@ class RegistrationForm extends ImmutablePureComponent {
instance: ImmutablePropTypes.map, instance: ImmutablePropTypes.map,
} }
onSubmit = e => {
// TODO: Dispatch action
e.preventDefault();
}
render() { render() {
const { instance } = this.props; const { instance } = this.props;
return ( return (
<div className='box-widget'> <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'> <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> <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'> <div className='fields-group'>
@ -31,21 +41,21 @@ class RegistrationForm extends ImmutablePureComponent {
autoComplete='off' autoComplete='off'
required required
/> />
<TextInput <SimpleInput
placeholder='E-mail address' placeholder='E-mail address'
name='email' name='email'
type='email' type='email'
autoComplete='off' autoComplete='off'
required required
/> />
<TextInput <SimpleInput
placeholder='Password' placeholder='Password'
name='password' name='password'
type='password' type='password'
autoComplete='off' autoComplete='off'
required required
/> />
<TextInput <SimpleInput
placeholder='Confirm password' placeholder='Confirm password'
name='password_confirmation' name='password_confirmation'
type='password' type='password'
@ -54,22 +64,17 @@ class RegistrationForm extends ImmutablePureComponent {
/> />
</div> </div>
<div className='fields-group'> <div className='fields-group'>
<div className='input with_label boolean optional user_agreement'> <Checkbox
<div className='label_input'> label={<>I agree to the <Link to='/about/tos' target='_blank'>Terms of Service</Link>.</>}
<label className='boolean optional' htmlFor='user_agreement'>I agree to the <Link to='/about/tos' target='_blank'>Terms of Service</Link>.</label> name='agreement'
<div className='label_input__wrapper'> required
<label className='checkbox'> />
<input className='boolean' type='checkbox' name='user[agreement]' id='user_agreement' />
</label>
</div>
</div>
</div>
</div> </div>
<div className='actions'> <div className='actions'>
<button name='button' type='submit' className='btn button button-primary'>Sign up</button> <button name='button' type='submit' className='btn button button-primary'>Sign up</button>
</div> </div>
</div> </div>
</form> </SimpleForm>
</div> </div>
); );
} }