1 files changed, 101 insertions, 0 deletions
diff --git a/app/client/auth/signup.component.js b/app/client/auth/signup.component.js
new file mode 100644
index 0000000..c86d31b
--- /dev/null
+++ b/app/client/auth/signup.component.js
@@ -0,0 +1,101 @@
+import { h, Component } from 'preact';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Redirect } from 'react-router-dom';
+import actions from './auth.actions';
+
+import { Group, Param, TextInput, Button } from '../common';
+
+class Signup extends Component {
+  state = {
+    username: '',
+    password: '',
+    password2: '',
+  }
+  constructor() {
+    super()
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+  handleChange(e) {
+    const name = e.target.name
+    const value = e.target.value
+    this.setState({
+      [name]: value,
+      error: null,
+    })
+  }
+  validate(){
+    if (!this.state.password || this.state.password !== this.state.password2) {
+      return false
+    }
+    return true
+  }
+  handleSubmit(e) {
+    e.preventDefault()
+    if (!this.validate) {
+      return this.props.actions.setError('bad password')
+    }
+    this.props.actions.signup(this.state)
+  }
+  render(){
+    if (this.props.auth.isAuthenticated) {
+      return <Redirect to="/" />
+    }
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <h1>New account</h1><br />
+        <Group>
+          <TextInput
+            autofocus
+            autocapitalize="off"
+            autocomplete="off"
+            title="Username"
+            name="username"
+            type="text"
+            value={this.state.username}
+            onChange={this.handleChange}
+          />
+          <TextInput
+            title="Password"
+            name="password"
+            type="password"
+            value={this.state.password}
+            onChange={this.handleChange}
+          />
+          <TextInput
+            title="Password again :)"
+            name="password2"
+            type="password"
+            value={this.state.password2}
+            onChange={this.handleChange}
+          />
+          <Button
+            loading={this.props.auth.loading}
+          >
+            Login
+          </Button>
+          {this.renderAuthError()}
+        </Group>
+      </form>
+    )
+  }
+  renderAuthError(){
+    if (this.props.auth.error) {
+      return (
+        <div className='form-input-hint'>{"Please doublecheck the form"}</div>
+      )
+    }
+    return null
+  }
+}
+
+const mapStateToProps = (state) => ({
+  auth: state.auth,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators({ ...actions }, dispatch)
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Signup);