add #

renderer/pages/#.js

@@ -0,0 +1,144 @@
+'use strict'
+
+// Packages
+import { Component } from 'react'
+
+// Layouts
+import Page from './../layouts/page'
+
+// Components
+import Row from './../components/row'
+import Input from './../components/input'
+import Button from './../components/button'
+import ButtonLink from './../components/button-link'
+
+// Services
+import api from './../services/api'
+
+// Theme
+import { colors, typography } from './../theme'
+
+class # extends Component {
+  constructor() {
+    super()
+
+    this.inputChange = this.inputChange.bind(this)
+    this.on# = this.on#.bind(this)
+
+    this.state = {
+      email: '',
+      username: '',
+      password: ''
+    }
+  }
+
+  inputChange(event) {
+    const { target } = event
+    const { name, value } = target
+
+    this.setState({ [name]: value })
+  }
+
+  on#(e) {
+    e.preventDefault()
+    const { email, username, password } = this.state
+
+    api
+      .post('/#', {
+        email,
+        username,
+        password
+      })
+      .then(res => {
+        console.log(res)
+      })
+      .catch(err => {
+        console.log(err)
+      })
+  }
+
+  render() {
+    const { email, username, password } = this.state
+
+    return (
+      <Page>
+        <Row>
+          <section>
+            <h1>
+              Welcome to <span>Taskr</span>
+            </h1>
+
+            <form onSubmit={this.on#}>
+              <fieldset>
+                <Input
+                  label="Email"
+                  name="email"
+                  placeholder="Your email"
+                  onChange={this.inputChange}
+                  value={email}
+                  inputRef="email"
+                />
+
+                <Input
+                  label="Username"
+                  name="username"
+                  placeholder="Username"
+                  onChange={this.inputChange}
+                  value={username}
+                  inputRef="username"
+                />
+
+                <Input
+                  label="Password"
+                  name="password"
+                  type="password"
+                  placeholder="Your password"
+                  onChange={this.inputChange}
+                  value={password}
+                  inputRef="password"
+                />
+              </fieldset>
+
+              <Button type="submit">#</Button>
+            </form>
+            <ButtonLink href="/" color="dark">
+              Forgot password?
+            </ButtonLink>
+          </section>
+        </Row>
+
+        <style jsx>{`
+          section {
+            display: flex;
+            flex-direction: column;
+            min-height: 580px;
+            justify-content: space-between;
+            padding-top: 100px;
+            padding-bottom: 30px;
+          }
+
+          h1 {
+            color: ${colors.white};
+            font-weight: ${typography.thin};
+            font-size: 40px;
+            line-height: 50px;
+          }
+
+          span {
+            font-weight: ${typography.bold};
+          }
+
+          form {
+            margin-top: 50px;
+            flex-basis: 270px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+          }
+        `}</style>
+      </Page>
+    )
+  }
+}
+
+export default #