farm/src/components/create-account/CreateAccount.jsx

// Copyright 2020 Thomas Hintz
//
// This file is part of the Alpha Centauri Farming project.
//
// The Alpha Centauri Farming project is free software: you can
// redistribute it and/or modify it under the terms of the GNU General
// Public License as published by the Free Software Foundation, either
// version 3 of the License, or (at your option) any later version.
//
// The Alpha Centauri Farming project is distributed in the hope that
// it will be useful, but WITHOUT ANY WARRANTY; without even the
// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
// PURPOSE.  See the GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with the Alpha Centauri Farming project.  If not, see
// <https://www.gnu.org/licenses/>.

import React from 'react'
import { GroupBox, Row, Col, Button } from '../widgets.jsx'

export default class CreateAccount extends React.Component {
    state = {
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
        loading: false
    }
    onChange = (e) => {
        const target = e.target,
              value = target.value,
              name =  target.name;

        this.setState({
            [name]: value
        });
    }

    onSubmit = (e) => {
        e.preventDefault();
        this.setState({ loading: true });
        this.props.createAccount(this.state);
    }

    componentDidUpdate(prevProps) {
        if (this.state.loading && prevProps.errors !== this.props.errors) {
            this.setState({ loading: false });
        }
    }

    render() {
        return (
            <GroupBox title="Create Account">
                <form onSubmit={this.onSubmit}>
                    <Row>
                        <Col width="12">
                            <label>
                                Username
                                <input onChange={this.onChange} required name="username" type="text" />
                            </label>
                        </Col>
                    </Row>
                    <Row>
                        <Col width="12">
                            <label>
                                Email (optional)
                                <input onChange={this.onChange} name="email" type="email" />
                            </label>
                        </Col>
                    </Row>
                    <Row>
                        <Col width="12">
                            <label>
                                Password
                                <input onChange={this.onChange} required name="password" type="password" />
                            </label>
                        </Col>
                    </Row>
                    <Row>
                        <Col width="12">
                            <label>
                                Confirm Password
                                <input onChange={this.onChange} required name="confirmPassword" type="password" />
                            </label>
                        </Col>
                    </Row>
                    <Row>
                        <Col width="12">
                            {!this.state.loading ? (
                                 <>
                                     {this.props.errors.map((err, i) => (
                                         <p key={i}>
                                             Error: {err}
                                         </p>
                                     ))}
                                     <Button type="submit">Create Account</Button>
                                 </>
                            ) : (
                                 <span>Creating Account...</span>
                            )}
                        </Col>
                    </Row>
                </form>
            </GroupBox>
        );
    }
}