adding login view

4 files changed, 163 insertions, 0 deletions

diff --git a/animism-align/frontend/app/views/auth/auth.actions.js b/animism-align/frontend/app/views/auth/auth.actions.js
new file mode 100644
index 0000000..d7663b7
--- /dev/null
+++ b/animism-align/frontend/app/views/auth/auth.actions.js
@@ -0,0 +1,33 @@
+import fetch from 'node-fetch'
+
+import { session } from 'app/session'
+
+const urls = {
+  login: "/api/v1/auth/login",
+}
+
+export const login = (data) => dispatch => (
+  fetch(urls.login, {
+    method: 'POST',
+    body: JSON.stringify(data),
+    credentials: 'same-origin',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+    }
+  })
+  .then(req => req.json())
+  .then(res => {
+    if (res.access_token) {
+      session.set('access_token', res.access_token)
+    }
+    return res
+  })
+  .catch(error => {
+    console.error(error)
+  })
+)
+
+export const logout = () => dispatch => {
+  session.set('access_token', '')
+}
diff --git a/animism-align/frontend/app/views/auth/auth.css b/animism-align/frontend/app/views/auth/auth.css
new file mode 100644
index 0000000..e9ceb85
--- /dev/null
+++ b/animism-align/frontend/app/views/auth/auth.css
@@ -0,0 +1,25 @@
+.auth {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  background: linear-gradient(#190051, #1c0406);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.login {
+  background: #333;
+  padding: 1rem;
+  box-shadow: 0 5px 10px #000;
+}
+.login h6 {
+  width: 100%;
+  text-align: center;
+  font-family: 'Georgia', serif;
+  font-size: 1.5rem;
+  font-weight: normal;
+  font-style: italic;
+  margin: 0 0 1rem 0;
+  transform: skew(11deg);
+  color: #fff;
+}
diff --git a/animism-align/frontend/app/views/auth/auth.gate.js b/animism-align/frontend/app/views/auth/auth.gate.js
new file mode 100644
index 0000000..498d32a
--- /dev/null
+++ b/animism-align/frontend/app/views/auth/auth.gate.js
@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+
+import './auth.css'
+
+import actions from 'app/actions'
+
+import AuthLogin from './auth.login'
+
+export default class AuthGate extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  componentDidMount() {
+    // actions.site.loadProject()
+  }
+
+  componentDidUpdate() {
+
+  }
+
+  render() {
+    return (
+      <div className='auth'>
+        <AuthLogin />
+      </div>
+    )
+  }
+}
\ No newline at end of file
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