auth gate on main app. pull in auth routes from bucky.

1 files changed, 86 insertions, 0 deletions

diff --git a/app/client/auth/login.component.js b/app/client/auth/login.component.js
new file mode 100644
index 0000000..4ffab34
--- /dev/null
+++ b/app/client/auth/login.component.js
@@ -0,0 +1,86 @@
+import { h, Component } from 'preact';
+// import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Redirect } from 'react-router-dom';
+// import { Link } from 'react-router-dom';
+import * as authActions from './auth.actions';
+
+import { Group, Param, TextInput, Button } from '../common';
+
+class Login extends Component {
+  state = {
+    username: '',
+    password: '',
+  }
+  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,
+    })
+  }
+  handleSubmit(e) {
+    e.preventDefault()
+    this.props.actions.login(this.state.username, this.state.password)
+  }
+  render(){
+    if (this.props.auth.isAuthenticated) {
+      return <Redirect to="/" />
+    }
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <h1>Log in</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}
+          />
+          <Button
+            loading={this.props.auth.loading}
+          >
+            Login
+          </Button>
+          {this.renderAuthError()}
+        </Group>
+      </form>
+    )
+  }
+  renderAuthError(){
+    if (this.props.auth.error) {
+      return (
+        <div className='form-input-hint'>{"There was an error logging you in (bad password?)"}</div>
+      )
+    }
+    return null
+  }
+}
+
+const mapStateToProps = (state) => ({
+  auth: state.auth,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators(authActions, dispatch)
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Login);