109 lines
3.8 KiB
JavaScript
109 lines
3.8 KiB
JavaScript
// 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>
|
|
);
|
|
}
|
|
}
|