diff --git a/env b/env deleted file mode 100644 index 21d19c1..0000000 --- a/env +++ /dev/null @@ -1,7 +0,0 @@ -NODE_ENV=development - -DB_HOST=localhost -DB_USER=root -DB_PASSWORD=root -DB_NAME=test -JWT_SECRET=chingu \ No newline at end of file diff --git a/package.json b/package.json index 6de8bd5..58a152e 100644 --- a/package.json +++ b/package.json @@ -19,9 +19,11 @@ }, "homepage": "https://github.com/chingu-voyage4/Bears-Team-5#readme", "dependencies": { + "axios": "^0.18.0", "babel-loader": "^7.1.3", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", + "babel-polyfill": "^6.26.0", "babel-preset-react": "^6.24.1", "bcrypt": "^1.0.3", "body-parser": "^1.18.2", @@ -41,6 +43,7 @@ "prop-types": "^15.6.1", "react": "16.0.0", "react-dom": "16.0.0", + "react-modal": "^3.3.2", "sass-loader": "^6.0.6", "style-loader": "^0.20.2", "webpack": "^4.0.1", diff --git a/src/app.jsx b/src/app.jsx index 7f61557..d9edf4e 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,25 +1,22 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import ProfilePage from './components/ProfilePage'; +import UserAuthentication from './components/UserAuthentication'; -const likedArticles = [ - { - author: { - username: 'Yoda', - details: 'Awesome, I am' - }, - title: 'Do or do not, there is not try' - }, - { - author: { - username: 'Darth Vader', - details: 'You have failed me yet again' - }, - title: 'I am your father!' - } -]; +// const likedArticles = [ +// { +// author: { +// username: 'Yoda', +// details: 'Awesome, I am' +// }, +// title: 'Do or do not, there is not try' +// }, +// { +// author: { +// username: 'Darth Vader', +// details: 'You have failed me yet again' +// }, +// title: 'I am your father!' +// } +// ]; -ReactDOM.render( - , - document.getElementById('app') -); +ReactDOM.render(, document.getElementById('app')); diff --git a/src/components/SignUpForm.jsx b/src/components/SignUpForm.jsx new file mode 100644 index 0000000..14cb7e3 --- /dev/null +++ b/src/components/SignUpForm.jsx @@ -0,0 +1,134 @@ +import React, { Component } from 'react'; +import axios from 'axios'; +import Modal from 'react-modal'; + +export default class SignUpPage extends Component { + state = { + username: '', + email: '', + password: '', + confirmPassword: '', + modalIsOpen: false, + errors: [] + }; + + closeModal = () => { + this.setState(() => ({ modalIsOpen: false })); + }; + + onUsernameChange = e => { + const value = e.target.value; + this.setState(() => ({ + username: value + })); + }; + + onEmailChange = e => { + const value = e.target.value; + this.setState(() => ({ + email: value + })); + }; + + onPasswordChange = e => { + const value = e.target.value; + this.setState(() => ({ + password: value + })); + }; + + onConfirmPasswordChange = e => { + const value = e.target.value; + this.setState(() => ({ + confirmPassword: value + })); + }; + + onSubmit = e => { + e.preventDefault(); + const data = { + username: this.state.username, + password: this.state.password, + confirmpassword: this.state.confirmPassword, + email: this.state.email + }; + const url = 'http://localhost:4000/api/user'; + axios({ + url, + method: 'post', + data: JSON.stringify(data), + headers: { + 'Content-Type': 'application/json' + }, + modalIsOpen: false + }) + .then(response => { + this.setState(() => ({ modalIsOpen: true })); + }) + .catch(error => { + const errors = error.response.data.errors.map(error => error.msg); + this.setState(() => ({ errors })); + }); + }; + + render() { + return ( +
+
+ {this.state.errors.map((error, index) => ( +

{error.charAt(0).toUpperCase() + error.slice(1)}

+ ))} + +
+ +
+ +
+ +
+ +
+ this.setState(() => ({ modalIsOpen: false }))} + > + × +

You have successfully registered!

+ +
+ ); + } +} diff --git a/src/components/UserAuthentication.jsx b/src/components/UserAuthentication.jsx new file mode 100644 index 0000000..0ebfcea --- /dev/null +++ b/src/components/UserAuthentication.jsx @@ -0,0 +1,42 @@ +import React, { Component } from 'react'; +import Modal from 'react-modal'; +import SignUpForm from './SignUpForm'; + +class UserAuthentication extends Component { + state = { + modalContent: 'Sign Up', + modalIsOpen: false + }; + + triggerModal = e => { + const modalContent = e.target.name; + this.setState(() => ({ modalContent, modalIsOpen: true })); + }; + + closeModal = () => { + this.setState(() => ({ modalIsOpen: false })); + }; + + render() { + return ( +
+ + + this.setState(() => ({ modalIsOpen: false }))} + > + × + {this.state.modalContent === 'Sign Up' ? :

Log In

} + +
+ ); + } +} + +export default UserAuthentication; diff --git a/yarn.lock b/yarn.lock index b18691d..d09536d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -451,6 +451,13 @@ aws4@^1.2.1, aws4@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e" +axios@^0.18.0: + version "0.18.0" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102" + dependencies: + follow-redirects "^1.3.0" + is-buffer "^1.1.5" + axobject-query@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-0.1.0.tgz#62f59dbc59c9f9242759ca349960e7a2fe3c36c0" @@ -2959,6 +2966,10 @@ execa@^0.7.0: signal-exit "^3.0.0" strip-eof "^1.0.0" +exenv@^1.2.0: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + exit-hook@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8" @@ -3300,6 +3311,12 @@ flush-write-stream@^1.0.0, flush-write-stream@^1.0.2: inherits "^2.0.1" readable-stream "^2.0.4" +follow-redirects@^1.3.0: + version "1.4.1" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.4.1.tgz#d8120f4518190f55aac65bb6fc7b85fcd666d6aa" + dependencies: + debug "^3.1.0" + for-in@^0.1.3: version "0.1.8" resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1" @@ -6687,7 +6704,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.6.0, prop-types@^15.6.1: +prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1: version "15.6.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca" dependencies: @@ -6854,6 +6871,14 @@ react-dom@16.0.0: object-assign "^4.1.1" prop-types "^15.6.0" +react-modal@^3.3.2: + version "3.3.2" + resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.3.2.tgz#b13da9490653a7c76bc0e9600323eb1079c620e7" + dependencies: + exenv "^1.2.0" + prop-types "^15.5.10" + warning "^3.0.0" + react-reconciler@^0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.7.0.tgz#9614894103e5f138deeeb5eabaf3ee80eb1d026d" @@ -8619,6 +8644,12 @@ walker@~1.0.5: dependencies: makeerror "1.0.x" +warning@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" + dependencies: + loose-envify "^1.0.0" + watch@~0.18.0: version "0.18.0" resolved "https://registry.yarnpkg.com/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986"