Break out registration form
This commit is contained in:
Alex Gleason
parent
4801962988
commit
84ee8880e1
2 changed files with 79 additions and 40 deletions
|
|
@ -0,0 +1,77 @@
|
|||
import React from 'react';
|
||||
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';
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
instance: state.get('instance'),
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
class RegistrationForm extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
instance: ImmutablePropTypes.map,
|
||||
}
|
||||
|
||||
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'>
|
||||
<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'>
|
||||
<TextInput
|
||||
placeholder='Username'
|
||||
name='username'
|
||||
autoComplete='off'
|
||||
required
|
||||
/>
|
||||
<TextInput
|
||||
placeholder='E-mail address'
|
||||
name='email'
|
||||
type='email'
|
||||
autoComplete='off'
|
||||
required
|
||||
/>
|
||||
<TextInput
|
||||
placeholder='Password'
|
||||
name='password'
|
||||
type='password'
|
||||
autoComplete='off'
|
||||
required
|
||||
/>
|
||||
<TextInput
|
||||
placeholder='Confirm password'
|
||||
name='password_confirmation'
|
||||
type='password'
|
||||
autoComplete='off'
|
||||
required
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
<div className='actions'>
|
||||
<button name='button' type='submit' className='btn button button-primary'>Sign up</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ import { connect } from 'react-redux';
|
|||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { Link } from 'react-router-dom';
|
||||
import LoginForm from 'gabsocial/features/auth_login/components/login_form';
|
||||
import RegistrationForm from './components/registration_form';
|
||||
import NotificationsContainer from 'gabsocial/features/ui/containers/notifications_container';
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
|
|
@ -62,46 +63,7 @@ class LandingPage extends ImmutablePureComponent {
|
|||
</div>
|
||||
</div>
|
||||
<div className='landing-columns--right'>
|
||||
<div className='box-widget'>
|
||||
<form className='simple_form new_user' id='new_user' noValidate='novalidate' action='/auth' acceptCharset='UTF-8' method='post'>
|
||||
<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'>
|
||||
<div className='input with_label string required user_account_username'>
|
||||
<div className='label_input'>
|
||||
<div className='label_input__wrapper'>
|
||||
<input aria-label='Username' autoComplete='off' placeholder='Username' className='string required' required='required' aria-required='true' type='text' name='user[account_attributes][username]' id='user_account_attributes_username' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='input email required user_email'>
|
||||
<input aria-label='E-mail address' autoComplete='off' className='string email required' required='required' aria-required='true' placeholder='E-mail address' type='email' name='user[email]' id='user_email' />
|
||||
</div>
|
||||
<div className='input password required user_password'>
|
||||
<input aria-label='Password' autoComplete='off' className='password required' required='required' aria-required='true' placeholder='Password' type='password' name='user[password]' id='user_password' />
|
||||
</div>
|
||||
<div className='input password required user_password_confirmation'>
|
||||
<input aria-label='Confirm password' autoComplete='off' className='password required' required='required' aria-required='true' placeholder='Confirm password' type='password' name='user[password_confirmation]' id='user_password_confirmation' />
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
<div className='actions'>
|
||||
<button name='button' type='submit' className='btn button button-primary'>Sign up</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<RegistrationForm />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue