From 268e7cee101a1beba0e80af3550fe83ab56fdd04 Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Tue, 14 Aug 2018 12:01:14 -0400 Subject: 31 and 32 --- .../31/frontend/components/RequestReset.js | 58 +++++++ stepped-solutions/31/frontend/components/Reset.js | 84 +++++++++++ stepped-solutions/31/frontend/pages/reset.js | 10 ++ stepped-solutions/31/frontend/pages/signup.js | 20 +++ stepped-solutions/32/backend/src/mail.js | 28 ++++ .../32/backend/src/resolvers/Mutation.js | 167 +++++++++++++++++++++ 6 files changed, 367 insertions(+) create mode 100755 stepped-solutions/31/frontend/components/RequestReset.js create mode 100755 stepped-solutions/31/frontend/components/Reset.js create mode 100755 stepped-solutions/31/frontend/pages/reset.js create mode 100755 stepped-solutions/31/frontend/pages/signup.js create mode 100755 stepped-solutions/32/backend/src/mail.js create mode 100755 stepped-solutions/32/backend/src/resolvers/Mutation.js diff --git a/stepped-solutions/31/frontend/components/RequestReset.js b/stepped-solutions/31/frontend/components/RequestReset.js new file mode 100755 index 0000000..dbc77ab --- /dev/null +++ b/stepped-solutions/31/frontend/components/RequestReset.js @@ -0,0 +1,58 @@ +import React, { Component } from 'react'; +import { Mutation } from 'react-apollo'; +import gql from 'graphql-tag'; +import Form from './styles/Form'; +import Error from './ErrorMessage'; + +const REQUEST_RESET_MUTATION = gql` + mutation REQUEST_RESET_MUTATION($email: String!) { + requestReset(email: $email) { + message + } + } +`; + +class Signin extends Component { + state = { + email: '', + }; + saveToState = e => { + this.setState({ [e.target.name]: e.target.value }); + }; + render() { + return ( + + {(reset, { error, loading, called }) => ( +
{ + e.preventDefault(); + await reset(); + this.setState({ email: '' }); + }} + > +
+

Request a password reset

+ + {!error && !loading && called &&

Success! Check your email for a reset link!

} + + + +
+
+ )} + + ); + } +} + +export default Signin; diff --git a/stepped-solutions/31/frontend/components/Reset.js b/stepped-solutions/31/frontend/components/Reset.js new file mode 100755 index 0000000..a132f03 --- /dev/null +++ b/stepped-solutions/31/frontend/components/Reset.js @@ -0,0 +1,84 @@ +import React, { Component } from 'react'; +import { Mutation } from 'react-apollo'; +import gql from 'graphql-tag'; +import PropTypes from 'prop-types'; +import Form from './styles/Form'; +import Error from './ErrorMessage'; +import { CURRENT_USER_QUERY } from './User'; + +const RESET_MUTATION = gql` + mutation RESET_MUTATION($resetToken: String!, $password: String!, $confirmPassword: String!) { + resetPassword(resetToken: $resetToken, password: $password, confirmPassword: $confirmPassword) { + id + email + name + } + } +`; + +class Reset extends Component { + static propTypes = { + resetToken: PropTypes.string.isRequired, + }; + state = { + password: '', + confirmPassword: '', + }; + saveToState = e => { + this.setState({ [e.target.name]: e.target.value }); + }; + render() { + return ( + + {(reset, { error, loading, called }) => ( +
{ + e.preventDefault(); + await reset(); + this.setState({ password: '', confirmPassword: '' }); + }} + > +
+

Reset Your Password

+ + + + + + +
+
+ )} + + ); + } +} + +export default Reset; diff --git a/stepped-solutions/31/frontend/pages/reset.js b/stepped-solutions/31/frontend/pages/reset.js new file mode 100755 index 0000000..118ba72 --- /dev/null +++ b/stepped-solutions/31/frontend/pages/reset.js @@ -0,0 +1,10 @@ +import Reset from '../components/Reset'; + +const Sell = props => ( +
+

Reset Your Password {props.query.resetToken}

+ +
+); + +export default Sell; diff --git a/stepped-solutions/31/frontend/pages/signup.js b/stepped-solutions/31/frontend/pages/signup.js new file mode 100755 index 0000000..342cfea --- /dev/null +++ b/stepped-solutions/31/frontend/pages/signup.js @@ -0,0 +1,20 @@ +import Signup from '../components/Signup'; +import Signin from '../components/Signin'; +import RequestReset from '../components/RequestReset'; +import styled from 'styled-components'; + +const Columns = styled.div` + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-gap: 20px; +`; + +const SignupPage = props => ( + + + + + +); + +export default SignupPage; diff --git a/stepped-solutions/32/backend/src/mail.js b/stepped-solutions/32/backend/src/mail.js new file mode 100755 index 0000000..5274310 --- /dev/null +++ b/stepped-solutions/32/backend/src/mail.js @@ -0,0 +1,28 @@ +const nodemailer = require('nodemailer'); + +const transport = nodemailer.createTransport({ + host: process.env.MAIL_HOST, + port: process.env.MAIL_PORT, + auth: { + user: process.env.MAIL_USER, + pass: process.env.MAIL_PASS, + }, +}); + +const makeANiceEmail = text => ` +
+

Hello There!

+

${text}

+ +

😘, Wes Bos

+
+`; + +exports.transport = transport; +exports.makeANiceEmail = makeANiceEmail; diff --git a/stepped-solutions/32/backend/src/resolvers/Mutation.js b/stepped-solutions/32/backend/src/resolvers/Mutation.js new file mode 100755 index 0000000..294fc00 --- /dev/null +++ b/stepped-solutions/32/backend/src/resolvers/Mutation.js @@ -0,0 +1,167 @@ +const bcrypt = require('bcryptjs'); +const jwt = require('jsonwebtoken'); +const { randomBytes } = require('crypto'); +const { promisify } = require('util'); +const { transport, makeANiceEmail } = require('../mail'); + +const Mutations = { + async createItem(parent, args, ctx, info) { + // TODO: Check if they are logged in + + const item = await ctx.db.mutation.createItem( + { + data: { + ...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 + Click Here to Reset`), + }); + + // 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; + }, +}; + +module.exports = Mutations; -- cgit v1.3