diff options
| -rwxr-xr-x | stepped-solutions/36/frontend/components/Permissions.js | 104 | ||||
| -rwxr-xr-x | stepped-solutions/36/frontend/components/User.js | 27 | ||||
| -rwxr-xr-x | stepped-solutions/37/backend/src/resolvers/Mutation.js | 207 | ||||
| -rwxr-xr-x | stepped-solutions/37/backend/src/schema.graphql | 32 | ||||
| -rwxr-xr-x | stepped-solutions/37/frontend/components/Permissions.js | 131 | ||||
| -rwxr-xr-x | stepped-solutions/37/frontend/components/styles/Table.js | 35 | ||||
| -rwxr-xr-x | stepped-solutions/38/backend/src/resolvers/Mutation.js | 215 | ||||
| -rwxr-xr-x | stepped-solutions/38/frontend/components/DeleteItem.js | 50 |
8 files changed, 801 insertions, 0 deletions
diff --git a/stepped-solutions/36/frontend/components/Permissions.js b/stepped-solutions/36/frontend/components/Permissions.js new file mode 100755 index 0000000..10b59ab --- /dev/null +++ b/stepped-solutions/36/frontend/components/Permissions.js @@ -0,0 +1,104 @@ +import { Query } from 'react-apollo'; +import Error from './ErrorMessage'; +import gql from 'graphql-tag'; +import Table from './styles/Table'; +import SickButton from './styles/SickButton'; +import PropTypes from 'prop-types'; + +const possiblePermissions = [ + 'ADMIN', + 'USER', + 'ITEMCREATE', + 'ITEMUPDATE', + 'ITEMDELETE', + 'PERMISSIONUPDATE', +]; + +const ALL_USERS_QUERY = gql` + query { + users { + id + name + email + permissions + } + } +`; + +const Permissions = props => ( + <Query query={ALL_USERS_QUERY}> + {({ data, loading, error }) => ( + <div> + <Error error={error} /> + <div> + <h2>Manage Permissions</h2> + <Table> + <thead> + <tr> + <th>Name</th> + <th>Email</th> + {possiblePermissions.map(permission => <th key={permission}>{permission}</th>)} + <th>👇🏻</th> + </tr> + </thead> + <tbody>{data.users.map(user => <UserPermissions user={user} key={user.id} />)}</tbody> + </Table> + </div> + </div> + )} + </Query> +); + +class UserPermissions extends React.Component { + static propTypes = { + user: PropTypes.shape({ + name: PropTypes.string, + email: PropTypes.string, + id: PropTypes.string, + permissions: PropTypes.array, + }).isRequired, + }; + state = { + permissions: this.props.user.permissions, + }; + handlePermissionChange = e => { + const checkbox = e.target; + // take a copy of the current permissions + let updatedPermissions = [...this.state.permissions]; + // figure out if we need to remove or add this permission + if (checkbox.checked) { + // add it in! + updatedPermissions.push(checkbox.value); + } else { + updatedPermissions = updatedPermissions.filter(permission => permission !== checkbox.value); + } + this.setState({ permissions: updatedPermissions }); + console.log(updatedPermissions); + }; + render() { + const user = this.props.user; + return ( + <tr> + <td>{user.name}</td> + <td>{user.email}</td> + {possiblePermissions.map(permission => ( + <td key={permission}> + <label htmlFor={`${user.id}-permission-${permission}`}> + <input + type="checkbox" + checked={this.state.permissions.includes(permission)} + value={permission} + onChange={this.handlePermissionChange} + /> + </label> + </td> + ))} + <td> + <SickButton>Update</SickButton> + </td> + </tr> + ); + } +} + +export default Permissions; diff --git a/stepped-solutions/36/frontend/components/User.js b/stepped-solutions/36/frontend/components/User.js new file mode 100755 index 0000000..a33649b --- /dev/null +++ b/stepped-solutions/36/frontend/components/User.js @@ -0,0 +1,27 @@ +import { Query } from 'react-apollo'; +import gql from 'graphql-tag'; +import PropTypes from 'prop-types'; + +const CURRENT_USER_QUERY = gql` + query { + me { + id + email + name + permissions + } + } +`; + +const User = props => ( + <Query {...props} query={CURRENT_USER_QUERY}> + {payload => console.log(payload) || props.children(payload)} + </Query> +); + +User.propTypes = { + children: PropTypes.func.isRequired, +}; + +export default User; +export { CURRENT_USER_QUERY }; diff --git a/stepped-solutions/37/backend/src/resolvers/Mutation.js b/stepped-solutions/37/backend/src/resolvers/Mutation.js new file mode 100755 index 0000000..f2ecc16 --- /dev/null +++ b/stepped-solutions/37/backend/src/resolvers/Mutation.js @@ -0,0 +1,207 @@ +const bcrypt = require('bcryptjs'); +const jwt = require('jsonwebtoken'); +const { randomBytes } = require('crypto'); +const { promisify } = require('util'); +const { transport, makeANiceEmail } = require('../mail'); +const { hasPermission } = require('../utils'); + +const Mutations = { + async createItem(parent, args, ctx, info) { + if (!ctx.request.userId) { + throw new Error('You must be logged in to do that!'); + } + + const item = await ctx.db.mutation.createItem( + { + data: { + // This is how to create a relationship between the Item and the User + user: { + connect: { + id: ctx.request.userId, + }, + }, + ...args, + }, + }, + info + ); + + console.log(item); + + return item; + }, + updateItem(parent, args, ctx, info) { + // first take a copy of the updates + const updates = { ...args }; + // remove the ID from the updates + delete updates.id; + // run the update method + return ctx.db.mutation.updateItem( + { + data: updates, + where: { + id: args.id, + }, + }, + info + ); + }, + async deleteItem(parent, args, ctx, info) { + const where = { id: args.id }; + // 1. find the item + const item = await ctx.db.query.item({ where }, `{ id title}`); + // 2. Check if they own that item, or have the permissions + // TODO + // 3. Delete it! + return ctx.db.mutation.deleteItem({ where }, info); + }, + async signup(parent, args, ctx, info) { + // lowercase their email + args.email = args.email.toLowerCase(); + // hash their password + const password = await bcrypt.hash(args.password, 10); + // create the user in the database + const user = await ctx.db.mutation.createUser( + { + data: { + ...args, + password, + permissions: { set: ['USER'] }, + }, + }, + info + ); + // create the JWT token for them + const token = jwt.sign({ userId: user.id }, process.env.APP_SECRET); + // We set the jwt as a cookie on the response + ctx.response.cookie('token', token, { + httpOnly: true, + maxAge: 1000 * 60 * 60 * 24 * 365, // 1 year cookie + }); + // Finalllllly we return the user to the browser + return user; + }, + async signin(parent, { email, password }, ctx, info) { + // 1. check if there is a user with that email + const user = await ctx.db.query.user({ where: { email } }); + if (!user) { + throw new Error(`No such user found for email ${email}`); + } + // 2. Check if their password is correct + const valid = await bcrypt.compare(password, user.password); + if (!valid) { + throw new Error('Invalid Password!'); + } + // 3. generate the JWT Token + const token = jwt.sign({ userId: user.id }, process.env.APP_SECRET); + // 4. Set the cookie with the token + ctx.response.cookie('token', token, { + httpOnly: true, + maxAge: 1000 * 60 * 60 * 24 * 365, + }); + // 5. Return the user + return user; + }, + signout(parent, args, ctx, info) { + ctx.response.clearCookie('token'); + return { message: 'Goodbye!' }; + }, + async requestReset(parent, args, ctx, info) { + // 1. Check if this is a real user + const user = await ctx.db.query.user({ where: { email: args.email } }); + if (!user) { + throw new Error(`No such user found for email ${args.email}`); + } + // 2. Set a reset token and expiry on that user + const randomBytesPromiseified = promisify(randomBytes); + const resetToken = (await randomBytesPromiseified(20)).toString('hex'); + const resetTokenExpiry = Date.now() + 3600000; // 1 hour from now + const res = await ctx.db.mutation.updateUser({ + where: { email: args.email }, + data: { resetToken, resetTokenExpiry }, + }); + // 3. Email them that reset token + const mailRes = await transport.sendMail({ + from: 'wes@wesbos.com', + to: user.email, + subject: 'Your Password Reset Token', + html: makeANiceEmail(`Your Password Reset Token is here! + \n\n + <a href="${process.env + .FRONTEND_URL}/reset?resetToken=${resetToken}">Click Here to Reset</a>`), + }); + + // 4. Return the message + return { message: 'Thanks!' }; + }, + async resetPassword(parent, args, ctx, info) { + // 1. check if the passwords match + if (args.password !== args.confirmPassword) { + throw new Error("Yo Passwords don't match!"); + } + // 2. check if its a legit reset token + // 3. Check if its expired + const [user] = await ctx.db.query.users({ + where: { + resetToken: args.resetToken, + resetTokenExpiry_gte: Date.now() - 3600000, + }, + }); + if (!user) { + throw new Error('This token is either invalid or expired!'); + } + // 4. Hash their new password + const password = await bcrypt.hash(args.password, 10); + // 5. Save the new password to the user and remove old resetToken fields + const updatedUser = await ctx.db.mutation.updateUser({ + where: { email: user.email }, + data: { + password, + resetToken: null, + resetTokenExpiry: null, + }, + }); + // 6. Generate JWT + const token = jwt.sign({ userId: updatedUser.id }, process.env.APP_SECRET); + // 7. Set the JWT cookie + ctx.response.cookie('token', token, { + httpOnly: true, + maxAge: 1000 * 60 * 60 * 24 * 365, + }); + // 8. return the new user + return updatedUser; + }, + async updatePermissions(parent, args, ctx, info) { + // 1. Check if they are logged in + if (!ctx.request.userId) { + throw new Error('You must be logged in!'); + } + // 2. Query the current user + const currentUser = await ctx.db.query.user( + { + where: { + id: ctx.request.userId, + }, + }, + info + ); + // 3. Check if they have permissions to do this + hasPermission(currentUser, ['ADMIN', 'PERMISSIONUPDATE']); + // 4. Update the permissions + return ctx.db.mutation.updateUser( + { + data: { + permissions: { + set: args.permissions, + }, + }, + where: { + id: args.userId, + }, + }, + info + ); + }, +}; + +module.exports = Mutations; diff --git a/stepped-solutions/37/backend/src/schema.graphql b/stepped-solutions/37/backend/src/schema.graphql new file mode 100755 index 0000000..c59d53a --- /dev/null +++ b/stepped-solutions/37/backend/src/schema.graphql @@ -0,0 +1,32 @@ +# import * from './generated/prisma.graphql' + +type SuccessMessage { + message: String +} + +type Mutation { + createItem(title: String, description: String, price: Int, image: String, largeImage: String): Item! + updateItem(id: ID!, title: String, description: String, price: Int): Item! + deleteItem(id: ID!): Item + signup(email: String!, password: String!, name: String!): User! + signin(email: String!, password: String!): User! + signout: SuccessMessage + requestReset(email: String!): SuccessMessage + resetPassword(resetToken: String!, password: String!, confirmPassword: String!): User! + updatePermissions(permissions: [Permission], userId: ID!): User +} + +type Query { + items(where: ItemWhereInput, orderBy: ItemOrderByInput, skip: Int, first: Int): [Item]! + item(where: ItemWhereUniqueInput!): Item + itemsConnection(where: ItemWhereInput): ItemConnection! + me: User + users: [User]! +} + +type User{ + id: ID! + name: String! + email: String! + permissions: [Permission!]! +} diff --git a/stepped-solutions/37/frontend/components/Permissions.js b/stepped-solutions/37/frontend/components/Permissions.js new file mode 100755 index 0000000..4b08c39 --- /dev/null +++ b/stepped-solutions/37/frontend/components/Permissions.js @@ -0,0 +1,131 @@ +import { Query, Mutation } from 'react-apollo'; +import Error from './ErrorMessage'; +import gql from 'graphql-tag'; +import Table from './styles/Table'; +import SickButton from './styles/SickButton'; +import PropTypes from 'prop-types'; + +const possiblePermissions = [ + 'ADMIN', + 'USER', + 'ITEMCREATE', + 'ITEMUPDATE', + 'ITEMDELETE', + 'PERMISSIONUPDATE', +]; + +const UPDATE_PERMISSIONS_MUTATION = gql` + mutation updatePermissions($permissions: [Permission], $userId: ID!) { + updatePermissions(permissions: $permissions, userId: $userId) { + id + permissions + name + email + } + } +`; + +const ALL_USERS_QUERY = gql` + query { + users { + id + name + email + permissions + } + } +`; + +const Permissions = props => ( + <Query query={ALL_USERS_QUERY}> + {({ data, loading, error }) => ( + <div> + <Error error={error} /> + <div> + <h2>Manage Permissions</h2> + <Table> + <thead> + <tr> + <th>Name</th> + <th>Email</th> + {possiblePermissions.map(permission => <th key={permission}>{permission}</th>)} + <th>👇🏻</th> + </tr> + </thead> + <tbody>{data.users.map(user => <UserPermissions user={user} key={user.id} />)}</tbody> + </Table> + </div> + </div> + )} + </Query> +); + +class UserPermissions extends React.Component { + static propTypes = { + user: PropTypes.shape({ + name: PropTypes.string, + email: PropTypes.string, + id: PropTypes.string, + permissions: PropTypes.array, + }).isRequired, + }; + state = { + permissions: this.props.user.permissions, + }; + handlePermissionChange = (e) => { + const checkbox = e.target; + // take a copy of the current permissions + let updatedPermissions = [...this.state.permissions]; + // figure out if we need to remove or add this permission + if (checkbox.checked) { + // add it in! + updatedPermissions.push(checkbox.value); + } else { + updatedPermissions = updatedPermissions.filter(permission => permission !== checkbox.value); + } + this.setState({ permissions: updatedPermissions }); + }; + render() { + const user = this.props.user; + return ( + <Mutation + mutation={UPDATE_PERMISSIONS_MUTATION} + variables={{ + permissions: this.state.permissions, + userId: this.props.user.id, + }} + > + {(updatePermissions, { loading, error }) => ( + <> + {error && <tr><td colspan="8"><Error error={error} /></td></tr>} + < tr > + <td>{user.name}</td> + <td>{user.email}</td> + {possiblePermissions.map(permission => ( + <td key={permission}> + <label htmlFor={`${user.id}-permission-${permission}`}> + <input + id={`${user.id}-permission-${permission}`} + type="checkbox" + checked={this.state.permissions.includes(permission)} + value={permission} + onChange={this.handlePermissionChange} + /> + </label> + </td> + ))} + <td> + <SickButton type="button" disabled={loading} onClick={updatePermissions}> + Updat{loading ? 'ing' : 'e'} + </SickButton> + </td> + </tr> + </> + ) + } + </Mutation> + ); + } +} + +export default Permissions; diff --git a/stepped-solutions/37/frontend/components/styles/Table.js b/stepped-solutions/37/frontend/components/styles/Table.js new file mode 100755 index 0000000..b2cd6c4 --- /dev/null +++ b/stepped-solutions/37/frontend/components/styles/Table.js @@ -0,0 +1,35 @@ +import styled from 'styled-components'; + +const Table = styled.table` + border-spacing: 0; + width: 100%; + border: 1px solid ${props => props.theme.offWhite}; + thead { + font-size: 10px; + } + td, + th { + border-bottom: 1px solid ${props => props.theme.offWhite}; + border-right: 1px solid ${props => props.theme.offWhite}; + padding: 5px; + position: relative; + &:last-child { + border-right: none; + width: 150px; + button { + width: 100%; + } + } + label { + padding: 10px 5px; + display: block; + } + } + tr { + &:hover { + background: ${props => props.theme.offWhite}; + } + } +`; + +export default Table; diff --git a/stepped-solutions/38/backend/src/resolvers/Mutation.js b/stepped-solutions/38/backend/src/resolvers/Mutation.js new file mode 100755 index 0000000..b48be39 --- /dev/null +++ b/stepped-solutions/38/backend/src/resolvers/Mutation.js @@ -0,0 +1,215 @@ +const bcrypt = require('bcryptjs'); +const jwt = require('jsonwebtoken'); +const { randomBytes } = require('crypto'); +const { promisify } = require('util'); +const { transport, makeANiceEmail } = require('../mail'); +const { hasPermission } = require('../utils'); + +const Mutations = { + async createItem(parent, args, ctx, info) { + if (!ctx.request.userId) { + throw new Error('You must be logged in to do that!'); + } + + const item = await ctx.db.mutation.createItem( + { + data: { + // This is how to create a relationship between the Item and the User + user: { + connect: { + id: ctx.request.userId, + }, + }, + ...args, + }, + }, + info + ); + + console.log(item); + + return item; + }, + updateItem(parent, args, ctx, info) { + // first take a copy of the updates + const updates = { ...args }; + // remove the ID from the updates + delete updates.id; + // run the update method + return ctx.db.mutation.updateItem( + { + data: updates, + where: { + id: args.id, + }, + }, + info + ); + }, + async deleteItem(parent, args, ctx, info) { + const where = { id: args.id }; + // 1. find the item + const item = await ctx.db.query.item({ where }, `{ id title user { id }}`); + // 2. Check if they own that item, or have the permissions + const ownsItem = item.user.id === ctx.request.userId; + const hasPermissions = ctx.request.user.permissions.some(permission => + ['ADMIN', 'ITEMDELETE'].includes(permission) + ); + + if (!ownsItem && hasPermissions) { + throw new Error("You don't have permission to do that!"); + } + + // 3. Delete it! + return ctx.db.mutation.deleteItem({ where }, info); + }, + async signup(parent, args, ctx, info) { + // lowercase their email + args.email = args.email.toLowerCase(); + // hash their password + const password = await bcrypt.hash(args.password, 10); + // create the user in the database + const user = await ctx.db.mutation.createUser( + { + data: { + ...args, + password, + permissions: { set: ['USER'] }, + }, + }, + info + ); + // create the JWT token for them + const token = jwt.sign({ userId: user.id }, process.env.APP_SECRET); + // We set the jwt as a cookie on the response + ctx.response.cookie('token', token, { + httpOnly: true, + maxAge: 1000 * 60 * 60 * 24 * 365, // 1 year cookie + }); + // Finalllllly we return the user to the browser + return user; + }, + async signin(parent, { email, password }, ctx, info) { + // 1. check if there is a user with that email + const user = await ctx.db.query.user({ where: { email } }); + if (!user) { + throw new Error(`No such user found for email ${email}`); + } + // 2. Check if their password is correct + const valid = await bcrypt.compare(password, user.password); + if (!valid) { + throw new Error('Invalid Password!'); + } + // 3. generate the JWT Token + const token = jwt.sign({ userId: user.id }, process.env.APP_SECRET); + // 4. Set the cookie with the token + ctx.response.cookie('token', token, { + httpOnly: true, + maxAge: 1000 * 60 * 60 * 24 * 365, + }); + // 5. Return the user + return user; + }, + signout(parent, args, ctx, info) { + ctx.response.clearCookie('token'); + return { message: 'Goodbye!' }; + }, + async requestReset(parent, args, ctx, info) { + // 1. Check if this is a real user + const user = await ctx.db.query.user({ where: { email: args.email } }); + if (!user) { + throw new Error(`No such user found for email ${args.email}`); + } + // 2. Set a reset token and expiry on that user + const randomBytesPromiseified = promisify(randomBytes); + const resetToken = (await randomBytesPromiseified(20)).toString('hex'); + const resetTokenExpiry = Date.now() + 3600000; // 1 hour from now + const res = await ctx.db.mutation.updateUser({ + where: { email: args.email }, + data: { resetToken, resetTokenExpiry }, + }); + // 3. Email them that reset token + const mailRes = await transport.sendMail({ + from: 'wes@wesbos.com', + to: user.email, + subject: 'Your Password Reset Token', + html: makeANiceEmail(`Your Password Reset Token is here! + \n\n + <a href="${process.env + .FRONTEND_URL}/reset?resetToken=${resetToken}">Click Here to Reset</a>`), + }); + + // 4. Return the message + return { message: 'Thanks!' }; + }, + async resetPassword(parent, args, ctx, info) { + // 1. check if the passwords match + if (args.password !== args.confirmPassword) { + throw new Error("Yo Passwords don't match!"); + } + // 2. check if its a legit reset token + // 3. Check if its expired + const [user] = await ctx.db.query.users({ + where: { + resetToken: args.resetToken, + resetTokenExpiry_gte: Date.now() - 3600000, + }, + }); + if (!user) { + throw new Error('This token is either invalid or expired!'); + } + // 4. Hash their new password + const password = await bcrypt.hash(args.password, 10); + // 5. Save the new password to the user and remove old resetToken fields + const updatedUser = await ctx.db.mutation.updateUser({ + where: { email: user.email }, + data: { + password, + resetToken: null, + resetTokenExpiry: null, + }, + }); + // 6. Generate JWT + const token = jwt.sign({ userId: updatedUser.id }, process.env.APP_SECRET); + // 7. Set the JWT cookie + ctx.response.cookie('token', token, { + httpOnly: true, + maxAge: 1000 * 60 * 60 * 24 * 365, + }); + // 8. return the new user + return updatedUser; + }, + async updatePermissions(parent, args, ctx, info) { + // 1. Check if they are logged in + if (!ctx.request.userId) { + throw new Error('You must be logged in!'); + } + // 2. Query the current user + const currentUser = await ctx.db.query.user( + { + where: { + id: ctx.request.userId, + }, + }, + info + ); + // 3. Check if they have permissions to do this + hasPermission(currentUser, ['ADMIN', 'PERMISSIONUPDATE']); + // 4. Update the permissions + return ctx.db.mutation.updateUser( + { + data: { + permissions: { + set: args.permissions, + }, + }, + where: { + id: args.userId, + }, + }, + info + ); + }, +}; + +module.exports = Mutations; diff --git a/stepped-solutions/38/frontend/components/DeleteItem.js b/stepped-solutions/38/frontend/components/DeleteItem.js new file mode 100755 index 0000000..e5e4752 --- /dev/null +++ b/stepped-solutions/38/frontend/components/DeleteItem.js @@ -0,0 +1,50 @@ +import React, { Component } from 'react'; +import { Mutation } from 'react-apollo'; +import gql from 'graphql-tag'; +import { ALL_ITEMS_QUERY } from './Items'; + +const DELETE_ITEM_MUTATION = gql` + mutation DELETE_ITEM_MUTATION($id: ID!) { + deleteItem(id: $id) { + id + } + } +`; + +class DeleteItem extends Component { + update = (cache, payload) => { + // manually update the cache on the client, so it matches the server + // 1. Read the cache for the items we want + const data = cache.readQuery({ query: ALL_ITEMS_QUERY }); + console.log(data, payload); + // 2. Filter the deleted itemout of the page + data.items = data.items.filter(item => item.id !== payload.data.deleteItem.id); + // 3. Put the items back! + cache.writeQuery({ query: ALL_ITEMS_QUERY, data }); + }; + render() { + return ( + <Mutation + mutation={DELETE_ITEM_MUTATION} + variables={{ id: this.props.id }} + update={this.update} + > + {(deleteItem, { error }) => ( + <button + onClick={() => { + if (confirm('Are you sure you want to delete this item?')) { + deleteItem().catch(err => { + alert(err.message); + }); + } + }} + > + {this.props.children} + </button> + )} + </Mutation> + ); + } +} + +export default DeleteItem; |