Using sqlite database, mt proctor animation.

src/components/create-account/CreateAccount.jsx

@@ -0,0 +1,108 @@
+// 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>
+        );
+    }
+}