adding login view

1 files changed, 76 insertions, 0 deletions

diff --git a/animism-align/frontend/app/views/auth/auth.login.js b/animism-align/frontend/app/views/auth/auth.login.js
new file mode 100644
index 0000000..9ba4c0b
--- /dev/null
+++ b/animism-align/frontend/app/views/auth/auth.login.js
@@ -0,0 +1,76 @@
+import React, { Component } from 'react'
+
+import './auth.css'
+
+import actions from 'app/actions'
+import { TextInput, SubmitButton } from 'app/common'
+
+export default class AuthLogin extends Component {
+  state = {
+    data: {
+      username: "",
+      password: "",
+    },
+    error: null,
+  }
+
+  constructor(props) {
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+
+  handleChange(e) {
+    e && e.preventDefault()
+    console.log(e.target.name, e.target.value)
+    this.setState({
+      data: {
+        ...this.state.data,
+        [e.target.name]: e.target.value
+      }
+    })
+  }
+
+  handleSubmit(e) {
+    e && e.preventDefault()
+    this.setState({ error: null })
+    actions.auth.login(this.state)
+    .then(res => {
+      console.log(res)
+      if (res.error) {
+        this.props.onAuthenticate()
+      } else {
+        this.setState({ error })
+      }
+    })
+  }
+
+  render() {
+    return (
+      <form className='login' onSubmit={this.handleSubmit}>
+        <h6>
+          Welcome to the Animism Editor
+        </h6>
+        <TextInput
+          title="Username"
+          name="username"
+          data={this.state.data}
+          onChange={this.handleChange}
+          autoComplete="off"
+        />
+        <TextInput
+          type="password"
+          title="Password"
+          name="password"
+          data={this.state.data}
+          onChange={this.handleChange}
+          autoComplete="off"
+        />
+        <SubmitButton
+          title="Log in"
+          after={this.state.error}
+        />
+      </form>
+    )
+  }
+}
\ No newline at end of file