signup with api

bukinoshita · Feb 13, 2018 · 64d4fe2 · 64d4fe2
1 parent 3d8b173
commit 64d4fe2
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 20 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,7 @@ package-lock.json
 
 # Certificates
 Certificates.p12
+
+## .files
+.env
+.env.production
diff --git a/package.json b/package.json
@@ -33,6 +33,8 @@
   "dependencies": {
     "app-root-path": "^2.0.1",
     "axios": "^0.17.1",
+    "babel-plugin-inline-dotenv": "^1.1.2",
+    "babel-plugin-transform-inline-environment-variables": "^0.2.0",
     "classnames": "^2.2.5",
     "electron-is-dev": "^0.3.0",
     "electron-next": "^3.1.3",
@@ -82,5 +84,16 @@
       "prettier --semi false --single-quote --write",
       "git add"
     ]
+  },
+  "babel": {
+    "presets": ["next/babel"],
+    "env": {
+      "development": {
+        "plugins": ["inline-dotenv"]
+      },
+      "production": {
+        "plugins": ["transform-inline-environment-variables"]
+      }
+    }
   }
 }
diff --git a/renderer/components/settings/identity.js b/renderer/components/settings/identity.js
@@ -50,8 +50,8 @@ const Identity = ({ username, email }) => {
           display: flex;
           flex-direction: column;
           justify-content: center;
-          height: calc(580px - 215px);
-          max-height: calc(580px - 215px);
+          height: calc(580px - 246px);
+          max-height: calc(580px - 246px);
         }
 
         .avatar {

diff --git a/renderer/pages/settings.js b/renderer/pages/settings.js
@@ -30,7 +30,12 @@ class Settings extends Component {
     this.onSelectChange = this.onSelectChange.bind(this)
     this.selectTab = this.selectTab.bind(this)
 
-    this.state = { defaultOption: 'Today', tabSelected: 'Identity' }
+    this.state = {
+      defaultOption: 'Today',
+      tabSelected: 'Identity',
+      email: '',
+      username: ''
+    }
   }
 
   componentDidMount() {
@@ -39,7 +44,12 @@ class Settings extends Component {
     const { createOn } = user
     const tabSelected = tab ? tab : 'Identity'
 
-    this.setState({ defaultOption: createOn, tabSelected })
+    this.setState({
+      defaultOption: createOn,
+      tabSelected,
+      email: user.email,
+      username: user.username
+    })
   }
 
   componentWillReceiveProps({ url: { query: { tab } } }) {
@@ -82,7 +92,7 @@ class Settings extends Component {
 
   render() {
     let content
-    const { tabSelected, defaultOption } = this.state
+    const { tabSelected, defaultOption, username, email } = this.state
     const list = [
       { name: 'Identity', href: '/settings?tab=Identity' },
       { name: 'Account', href: '/settings?tab=Account' },
@@ -92,7 +102,7 @@ class Settings extends Component {
 
     switch (tabSelected) {
       case 'Identity':
-        content = <Identity />
+        content = <Identity username={username} email={email} />
         break
 
       case 'Account':

diff --git a/renderer/pages/signup.js b/renderer/pages/signup.js
@@ -3,6 +3,7 @@
 // Packages
 import { Component } from 'react'
 import Link from 'next/link'
+import Router from 'next/router'
 
 // Layouts
 import Page from './../layouts/page'
@@ -15,6 +16,8 @@ import ButtonLink from './../ui/button-link'
 
 // Services
 import api from './../services/api'
+import { setCookie } from './../services/cookies'
+import { getUser, updateUser } from './../services/local-storage'
 
 // Theme
 import { colors, typography } from './../theme'
@@ -28,7 +31,7 @@ class Signup extends Component {
 
     this.state = {
       email: '',
-      username: '',
+      name: '',
       password: ''
     }
   }
@@ -42,24 +45,39 @@ class Signup extends Component {
 
   onSignup(e) {
     e.preventDefault()
-    const { email, username, password } = this.state
+    const { email, name, password } = this.state
 
     api
       .post('/signup', {
         email,
-        username,
+        name,
         password
       })
       .then(res => {
-        console.log(res)
+        if (res.token) {
+          const { email, name, username, subscription } = res.user
+          const { user } = getUser()
+
+          setCookie(res.token)
+
+          user.token = res.token
+          user.email = email
+          user.name = name
+          user.username = username
+          user.subscription = subscription
+
+          updateUser(user)
+
+          return Router.push('/home?tab=Today')
+        }
       })
       .catch(err => {
         console.log(err)
       })
   }
 
   render() {
-    const { email, username, password } = this.state
+    const { email, name, password } = this.state
 
     return (
       <Page>
@@ -75,6 +93,15 @@ class Signup extends Component {
 
             <form onSubmit={this.onSignup}>
               <fieldset>
+                <Input
+                  label="Name"
+                  name="name"
+                  placeholder="Name"
+                  onChange={this.inputChange}
+                  value={name}
+                  inputRef="name"
+                />
+
                 <Input
                   label="Email"
                   name="email"
@@ -84,15 +111,6 @@ class Signup extends Component {
                   inputRef="email"
                 />
 
-                <Input
-                  label="Username"
-                  name="username"
-                  placeholder="Username"
-                  onChange={this.inputChange}
-                  value={username}
-                  inputRef="username"
-                />
-
                 <Input
                   label="Password"
                   name="password"

diff --git a/yarn.lock b/yarn.lock
@@ -575,6 +575,12 @@ babel-plugin-check-es2015-constants@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
+babel-plugin-inline-dotenv@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-inline-dotenv/-/babel-plugin-inline-dotenv-1.1.2.tgz#d9b43f48b1471506bdc5fe571a067472f16aedf6"
+  dependencies:
+    dotenv "^4.0.0"
+
 [email protected]:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-2.7.1.tgz#18be3c42ddf59f7a456c9e0512cd91394f6e4be1"
@@ -819,6 +825,10 @@ babel-plugin-transform-flow-strip-types@^6.22.0:
     babel-plugin-syntax-flow "^6.18.0"
     babel-runtime "^6.22.0"
 
+babel-plugin-transform-inline-environment-variables@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-inline-environment-variables/-/babel-plugin-transform-inline-environment-variables-0.2.0.tgz#37dad411a819667fd69c33e72f7a14ea1a50ba98"
+
 [email protected]:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"