5.4-end-authentication-v2.1

Carlos Rufo Jimenez · Carlos Rufo Jimenez · commit b61420089de2 · 2018-03-23T17:24:27.000+01:00
diff --git a/server/src/generated/prisma.graphql b/server/src/generated/prisma.graphql
@@ -141,16 +141,15 @@ input LinkUpdateManyWithoutPostedByInput {
   connect: [LinkWhereUniqueInput!]
   disconnect: [LinkWhereUniqueInput!]
   delete: [LinkWhereUniqueInput!]
-  update: [LinkUpdateWithoutPostedByInput!]
-  upsert: [LinkUpsertWithoutPostedByInput!]
+  update: [LinkUpdateWithWhereUniqueWithoutPostedByInput!]
+  upsert: [LinkUpsertWithWhereUniqueWithoutPostedByInput!]
 }
 
 input LinkUpdateOneWithoutVotesInput {
   create: LinkCreateWithoutVotesInput
   connect: LinkWhereUniqueInput
-  disconnect: LinkWhereUniqueInput
-  delete: LinkWhereUniqueInput
-  update: LinkUpdateWithoutVotesInput
+  delete: Boolean
+  update: LinkUpdateWithoutVotesDataInput
   upsert: LinkUpsertWithoutVotesInput
 }
 
@@ -160,34 +159,28 @@ input LinkUpdateWithoutPostedByDataInput {
   votes: VoteUpdateManyWithoutLinkInput
 }
 
-input LinkUpdateWithoutPostedByInput {
-  where: LinkWhereUniqueInput!
-  data: LinkUpdateWithoutPostedByDataInput!
-}
-
 input LinkUpdateWithoutVotesDataInput {
   description: String
   url: String
   postedBy: UserUpdateOneWithoutLinksInput
 }
 
-input LinkUpdateWithoutVotesInput {
-  where: LinkWhereUniqueInput!
-  data: LinkUpdateWithoutVotesDataInput!
-}
-
-input LinkUpsertWithoutPostedByInput {
+input LinkUpdateWithWhereUniqueWithoutPostedByInput {
   where: LinkWhereUniqueInput!
-  update: LinkUpdateWithoutPostedByDataInput!
-  create: LinkCreateWithoutPostedByInput!
+  data: LinkUpdateWithoutPostedByDataInput!
 }
 
 input LinkUpsertWithoutVotesInput {
-  where: LinkWhereUniqueInput!
   update: LinkUpdateWithoutVotesDataInput!
   create: LinkCreateWithoutVotesInput!
 }
 
+input LinkUpsertWithWhereUniqueWithoutPostedByInput {
+  where: LinkWhereUniqueInput!
+  update: LinkUpdateWithoutPostedByDataInput!
+  create: LinkCreateWithoutPostedByInput!
+}
+
 input LinkWhereInput {
   AND: [LinkWhereInput!]
   OR: [LinkWhereInput!]
@@ -403,18 +396,17 @@ input UserUpdateInput {
 input UserUpdateOneWithoutLinksInput {
   create: UserCreateWithoutLinksInput
   connect: UserWhereUniqueInput
-  disconnect: UserWhereUniqueInput
-  delete: UserWhereUniqueInput
-  update: UserUpdateWithoutLinksInput
+  disconnect: Boolean
+  delete: Boolean
+  update: UserUpdateWithoutLinksDataInput
   upsert: UserUpsertWithoutLinksInput
 }
 
 input UserUpdateOneWithoutVotesInput {
   create: UserCreateWithoutVotesInput
   connect: UserWhereUniqueInput
-  disconnect: UserWhereUniqueInput
-  delete: UserWhereUniqueInput
-  update: UserUpdateWithoutVotesInput
+  delete: Boolean
+  update: UserUpdateWithoutVotesDataInput
   upsert: UserUpsertWithoutVotesInput
 }
 
@@ -425,31 +417,19 @@ input UserUpdateWithoutLinksDataInput {
   votes: VoteUpdateManyWithoutUserInput
 }
 
-input UserUpdateWithoutLinksInput {
-  where: UserWhereUniqueInput!
-  data: UserUpdateWithoutLinksDataInput!
-}
-
 input UserUpdateWithoutVotesDataInput {
   name: String
   email: String
   password: String
   links: LinkUpdateManyWithoutPostedByInput
 }
 
-input UserUpdateWithoutVotesInput {
-  where: UserWhereUniqueInput!
-  data: UserUpdateWithoutVotesDataInput!
-}
-
 input UserUpsertWithoutLinksInput {
-  where: UserWhereUniqueInput!
   update: UserUpdateWithoutLinksDataInput!
   create: UserCreateWithoutLinksInput!
 }
 
 input UserUpsertWithoutVotesInput {
-  where: UserWhereUniqueInput!
   update: UserUpdateWithoutVotesDataInput!
   create: UserCreateWithoutVotesInput!
 }
@@ -600,44 +580,44 @@ input VoteUpdateManyWithoutLinkInput {
   connect: [VoteWhereUniqueInput!]
   disconnect: [VoteWhereUniqueInput!]
   delete: [VoteWhereUniqueInput!]
-  update: [VoteUpdateWithoutLinkInput!]
-  upsert: [VoteUpsertWithoutLinkInput!]
+  update: [VoteUpdateWithWhereUniqueWithoutLinkInput!]
+  upsert: [VoteUpsertWithWhereUniqueWithoutLinkInput!]
 }
 
 input VoteUpdateManyWithoutUserInput {
   create: [VoteCreateWithoutUserInput!]
   connect: [VoteWhereUniqueInput!]
   disconnect: [VoteWhereUniqueInput!]
   delete: [VoteWhereUniqueInput!]
-  update: [VoteUpdateWithoutUserInput!]
-  upsert: [VoteUpsertWithoutUserInput!]
+  update: [VoteUpdateWithWhereUniqueWithoutUserInput!]
+  upsert: [VoteUpsertWithWhereUniqueWithoutUserInput!]
 }
 
 input VoteUpdateWithoutLinkDataInput {
   user: UserUpdateOneWithoutVotesInput
 }
 
-input VoteUpdateWithoutLinkInput {
-  where: VoteWhereUniqueInput!
-  data: VoteUpdateWithoutLinkDataInput!
-}
-
 input VoteUpdateWithoutUserDataInput {
   link: LinkUpdateOneWithoutVotesInput
 }
 
-input VoteUpdateWithoutUserInput {
+input VoteUpdateWithWhereUniqueWithoutLinkInput {
+  where: VoteWhereUniqueInput!
+  data: VoteUpdateWithoutLinkDataInput!
+}
+
+input VoteUpdateWithWhereUniqueWithoutUserInput {
   where: VoteWhereUniqueInput!
   data: VoteUpdateWithoutUserDataInput!
 }
 
-input VoteUpsertWithoutLinkInput {
+input VoteUpsertWithWhereUniqueWithoutLinkInput {
   where: VoteWhereUniqueInput!
   update: VoteUpdateWithoutLinkDataInput!
   create: VoteCreateWithoutLinkInput!
 }
 
-input VoteUpsertWithoutUserInput {
+input VoteUpsertWithWhereUniqueWithoutUserInput {
   where: VoteWhereUniqueInput!
   update: VoteUpdateWithoutUserDataInput!
   create: VoteCreateWithoutUserInput!
diff --git a/server/src/resolvers/Mutation.js b/server/src/resolvers/Mutation.js
@@ -3,7 +3,11 @@ const jwt = require('jsonwebtoken')
 const { APP_SECRET, getUserId } = require('../utils')
 
 function post(parent, { url, description }, ctx, info) {
-  return ctx.db.mutation.createLink({ data: { url, description } }, info)
+  const userId = getUserId(ctx)
+  return ctx.db.mutation.createLink(
+    { data: { url, description, postedBy: { connect: { id: userId } } } },
+    info
+  )
 }
 
 async function signup(parent, args, ctx, info) {
@@ -55,7 +59,7 @@ async function vote(parent, args, ctx, info) {
         link: { connect: { id: linkId } },
       },
     },
-    info,
+    info
   )
 }
 
diff --git a/src/components/App.js b/src/components/App.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import LinkList from './LinkList'
 import CreateLink from './CreateLink'
 import Header from './Header'
+import Login from './Login'
 import { Switch, Route } from 'react-router-dom'
 
 class App extends Component {
@@ -11,6 +12,7 @@ class App extends Component {
         <Header />
         <div className="ph3 pv1 background-gray">
           <Switch>
+            <Route exact path="/login" component={Login} />
             <Route exact path="/" component={LinkList} />
             <Route exact path="/create" component={CreateLink} />
           </Switch>
@@ -20,4 +22,4 @@ class App extends Component {
   }
 }
 
-export default App
+export default App
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,24 +1,47 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import { withRouter } from 'react-router'
+import { AUTH_TOKEN } from '../constants'
 
 class Header extends Component {
   render() {
+    const authToken = localStorage.getItem(AUTH_TOKEN)
     return (
       <div className="flex pa1 justify-between nowrap orange">
         <div className="flex flex-fixed black">
           <div className="fw7 mr1">Hacker News</div>
           <Link to="/" className="ml1 no-underline black">
             new
           </Link>
-          <div className="ml1">|</div>
-          <Link to="/create" className="ml1 no-underline black">
-            submit
-          </Link>
+          {authToken && (
+            <div className="flex">
+              <div className="ml1">|</div>
+              <Link to="/create" className="ml1 no-underline black">
+                submit
+              </Link>
+            </div>
+          )}
+        </div>
+        <div className="flex flex-fixed">
+          {authToken ? (
+            <div
+              className="ml1 pointer black"
+              onClick={() => {
+                localStorage.removeItem(AUTH_TOKEN)
+                this.props.history.push(`/`)
+              }}
+            >
+              logout
+            </div>
+          ) : (
+            <Link to="/login" className="ml1 no-underline black">
+              login
+            </Link>
+          )}
         </div>
       </div>
     )
   }
 }
 
-export default withRouter(Header)
+export default withRouter(Header)
diff --git a/src/components/Login.js b/src/components/Login.js
@@ -0,0 +1,92 @@
+import React, { Component } from 'react'
+import { AUTH_TOKEN } from '../constants'
+import { compose, Mutation } from 'react-apollo'
+import gql from 'graphql-tag'
+
+const SIGNUP_MUTATION = gql`
+  mutation SignupMutation($email: String!, $password: String!, $name: String!) {
+    signup(email: $email, password: $password, name: $name) {
+      token
+    }
+  }
+`
+
+const LOGIN_MUTATION = gql`
+  mutation LoginMutation($email: String!, $password: String!) {
+    login(email: $email, password: $password) {
+      token
+    }
+  }
+`
+
+class Login extends Component {
+  state = {
+    login: true, // switch between Login and SignUp
+    email: '',
+    password: '',
+    name: '',
+  }
+
+  render() {
+    const { email, password, name } = this.state
+    return (
+      <div>
+        <h4 className="mv3">{this.state.login ? 'Login' : 'Sign Up'}</h4>
+        <div className="flex flex-column">
+          {!this.state.login && (
+            <input
+              value={this.state.name}
+              onChange={e => this.setState({ name: e.target.value })}
+              type="text"
+              placeholder="Your name"
+            />
+          )}
+          <input
+            value={this.state.email}
+            onChange={e => this.setState({ email: e.target.value })}
+            type="text"
+            placeholder="Your email address"
+          />
+          <input
+            value={this.state.password}
+            onChange={e => this.setState({ password: e.target.value })}
+            type="password"
+            placeholder="Choose a safe password"
+          />
+        </div>
+        <div className="flex mt3">
+          <Mutation
+            mutation={this.state.login ? LOGIN_MUTATION : SIGNUP_MUTATION}
+            variables={{ email, password, name }}
+            onCompleted={data => this._confirm(data)}
+          >
+            {mutation => (
+              <div className="pointer mr2 button" onClick={mutation}>
+                {this.state.login ? 'login' : 'create account'}
+              </div>
+            )}
+          </Mutation>
+          <div
+            className="pointer button"
+            onClick={() => this.setState({ login: !this.state.login })}
+          >
+            {this.state.login
+              ? 'need to create an account?'
+              : 'already have an account?'}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  _confirm = data => {
+    const { token } = this.state.login ? data.login : data.signup
+    this._saveUserData(token) && this.props.history.push(`/`)
+  }
+
+  _saveUserData = token => {
+    localStorage.setItem(AUTH_TOKEN, token)
+  }
+}
+
+export default Login
diff --git a/src/constants.js b/src/constants.js
@@ -0,0 +1 @@
+export const AUTH_TOKEN = 'auth-token'
diff --git a/src/index.js b/src/index.js

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,11 @@ const jwt = require('jsonwebtoken')`
`3`	`3`	`const { APP_SECRET, getUserId } = require('../utils')`
`4`	`4`
`5`	`5`	`function post(parent, { url, description }, ctx, info) {`
`6`		`- return ctx.db.mutation.createLink({ data: { url, description } }, info)`
	`6`	`+ const userId = getUserId(ctx)`
	`7`	`+ return ctx.db.mutation.createLink(`
	`8`	`+ { data: { url, description, postedBy: { connect: { id: userId } } } },`
	`9`	`+ info`
	`10`	`+ )`
`7`	`11`	`}`
`8`	`12`
`9`	`13`	`async function signup(parent, args, ctx, info) {`
`@@ -55,7 +59,7 @@ async function vote(parent, args, ctx, info) {`
`55`	`59`	`link: { connect: { id: linkId } },`
`56`	`60`	`},`
`57`	`61`	`},`
`58`		`- info,`
	`62`	`+ info`
`59`	`63`	`)`
`60`	`64`	`}`
`61`	`65`