Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react';
- import Dropdown from 'react-dropdown'
- import FormInput from '../FormInput/FormInput';
- import FormCheckbox from '../FormCheckbox/FormCheckbox';
- import './RegistrationForm.css'
- import 'react-dropdown/style.css'
- export default class RegistrationForm extends React.Component {
- constructor(props) {
- super(props);
- this.state={
- // handles errors
- error_business_name: false,
- error_business_email: false,
- error_username: false,
- error_password: false,
- error_type: false,
- error_terms: false,
- error_policy: false,
- // stores form values
- email: null,
- business_name: null,
- username: null,
- password: null,
- website: null,
- terms: false,
- policy: false
- }
- }
- handleSubmit(e) {
- e.preventDefault();
- // validation - promise needed to ensure errors are set before they are checked
- const validate = new Promise((resolve, reject) => {
- this.state.email ? this.setState({ error_business_email: false }) : this.setState({ error_business_email: true });
- this.state.business_name ? this.setState({ error_business_name: false }) : this.setState({ error_business_name: true });
- this.state.username ? this.setState({ error_username: false }) : this.setState({ error_username: true });
- this.state.password ? this.setState({ error_password: false }) : this.setState({ error_password: true });
- this.state.type ? this.setState({ error_type: false }) : this.setState({ error_type: true });
- this.state.terms ? this.setState({ error_terms: false }) : this.setState({ error_terms: true });
- this.state.policy ? this.setState({ error_policy: false }) : this.setState({ error_policy: true });
- resolve();
- })
- validate
- .then(() => {
- if(this.state.error_business_email || this.state.error_business_name || this.state.error_username || this.state.error_password || this.state.error_type || this.state.error_terms || this.state.error_policy ) {
- return;
- } else {
- // stand-in for validated submission
- console.log({
- email: this.state.email,
- business_name: this.state.business_name,
- username: this.state.username,
- password: this.state.password,
- type: this.state.type,
- website: this.state.website
- })
- // stand-in purposes only
- alert("Your form was submitted");
- }
- })
- }
- render() {
- return (
- <main role="main" className="RegistrationForm">
- <img alt="Logo" src={require("../../images/logo.png")} />
- <form onSubmit={e => this.handleSubmit(e)}>
- <h1>LET'S GET STARTED</h1>
- <FormInput
- value="business_name"
- label="Business Name"
- onChange={event => this.setState({ business_name: event.target.value })}
- error={this.state.error_business_name}
- errorMessage="Please enter a valid business address"
- />
- <FormInput
- value="business_email"
- label="Business Email"
- onChange={event => this.setState({ email: event.target.value })}
- error={this.state.error_business_email}
- errorMessage="Please enter a valid business name"
- />
- <FormInput
- value="username"
- label="Create a Username"
- onChange={event => this.setState({ username: event.target.value })}
- error={this.state.error_username}
- errorMessage="Please enter a valid username"
- />
- <FormInput
- value="password"
- label="Password"
- onChange={event => this.setState({ password: event.target.value })}
- error={this.state.error_password}
- errorMessage="Please enter a valid password"
- subLabel="6 characters | 1 uppercase | 1 lowercase | 1 digit"
- type="password"
- />
- <FormInput
- value="website"
- label="Website"
- onChange={event => this.setState({ website: event.target.value })}
- subLabel="(Optional)"
- />
- <section className={this.state.error_type ? "error" : ""}>
- <label htmlFor="type">Type of Business</label>
- <Dropdown
- className={this.state.error_type ? "dropdown error-dropdown" : "dropdown"}
- options={["Accounting Firm", "Law Office", "Marketing Agency", "Other"]}
- onChange={e => this.setState({ type: e.value })}
- value={this.state.type}
- placeholder="Select your Business" id="type"
- />
- <p className="error-message">Please select a valid business type</p>
- </section>
- <FormCheckbox
- title="Terms of Service"
- topic="terms of service"
- onChange={event => this.setState({ terms: event.target.checked })}
- error={this.state.error_terms}
- errorMessage="Please agree to the terms of service"
- />
- <FormCheckbox
- title="Privacy Policy"
- topic="privacy policy"
- onChange={event => this.setState({ policy: event.target.checked })}
- error={this.state.error_policy}
- errorMessage="Please agree to our privacy policy"
- />
- <button>REGISTER</button>
- </form>
- </main>
- )
- }
- }
- import React from 'react';
- import './FormInput.css';
- const FormInput = props => {
- return (
- <section className={props.error ? "error" : ""}>
- <label htmlFor={props.value}>{props.label}<span className="sub-label">{props.subLabel}</span></label>
- <input
- className="text-input"
- id={props.value}
- onChange={event => props.onChange(event)}
- type={props.type}
- />
- <p className="error-message">{props.errorMessage}</p>
- </section>
- )
- }
- export default FormInput;
Add Comment
Please, Sign In to add comment