From a599dfcf1bc8b6f4d9957a0870eb64fb92e56dd1 Mon Sep 17 00:00:00 2001 From: autumn-ragland Date: Thu, 18 Apr 2019 15:58:41 -0500 Subject: [PATCH] end of day --- client/package-lock.json | 161 ++++++++++++++++++++++++++++++ client/package.json | 1 + client/src/App.css | 32 +----- client/src/App.js | 53 ++++++---- client/src/TwitterHome.js | 68 +++++++++++++ client/src/TwitterLogout.js | 13 +++ client/src/TwitterProfile.js | 61 +++++++++++ client/src/TwitterRegistration.js | 60 +++++++++++ server/routes/users.js | 2 +- 9 files changed, 406 insertions(+), 45 deletions(-) create mode 100644 client/src/TwitterHome.js create mode 100644 client/src/TwitterLogout.js create mode 100644 client/src/TwitterProfile.js create mode 100644 client/src/TwitterRegistration.js diff --git a/client/package-lock.json b/client/package-lock.json index 5e11ef7..a53578c 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -3843,6 +3843,15 @@ "sha.js": "^2.4.8" } }, + "create-react-context": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz", + "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==", + "requires": { + "fbjs": "^0.8.0", + "gud": "^1.0.0" + } + }, "cross-spawn": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", @@ -4787,6 +4796,14 @@ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" }, + "encoding": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", + "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", + "requires": { + "iconv-lite": "~0.4.13" + } + }, "end-of-stream": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", @@ -5786,6 +5803,35 @@ "bser": "^2.0.0" } }, + "fbjs": { + "version": "0.8.17", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", + "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=", + "requires": { + "core-js": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + }, + "dependencies": { + "core-js": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" + }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "~2.0.3" + } + } + } + }, "figgy-pudding": { "version": "3.5.1", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz", @@ -6998,6 +7044,11 @@ "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=" }, + "gud": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", + "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" + }, "gzip-size": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz", @@ -7190,6 +7241,19 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "4.9.0", + "resolved": "https://registry.npmjs.org/history/-/history-4.9.0.tgz", + "integrity": "sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^2.2.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^0.4.0" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -7205,6 +7269,14 @@ "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz", "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==" }, + "hoist-non-react-statics": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz", + "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==", + "requires": { + "react-is": "^16.7.0" + } + }, "home-or-tmp": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz", @@ -8157,6 +8229,15 @@ "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" }, + "isomorphic-fetch": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", + "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", + "requires": { + "node-fetch": "^1.0.1", + "whatwg-fetch": ">=0.10.0" + } + }, "isstream": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", @@ -9616,6 +9697,15 @@ "lower-case": "^1.1.1" } }, + "node-fetch": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", + "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "requires": { + "encoding": "^0.1.11", + "is-stream": "^1.0.1" + } + }, "node-forge": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz", @@ -12998,6 +13088,52 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" }, + "react-router": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.0.tgz", + "integrity": "sha512-6EQDakGdLG/it2x9EaCt9ZpEEPxnd0OCLBHQ1AcITAAx7nCnyvnzf76jKWG1s2/oJ7SSviUgfWHofdYljFexsA==", + "requires": { + "@babel/runtime": "^7.1.2", + "create-react-context": "^0.2.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz", + "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=", + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "react-router-dom": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.0.0.tgz", + "integrity": "sha512-wSpja5g9kh5dIteZT3tUoggjnsa+TPFHSMrpHXMpFsaHhQkm/JNVGh2jiF9Dkh4+duj4MKCkwO6H08u6inZYgQ==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "2.1.8", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-2.1.8.tgz", @@ -14167,6 +14303,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=" }, + "resolve-pathname": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz", + "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -15627,6 +15768,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.4.tgz", + "integrity": "sha512-lMhRd/djQJ3MoaHEBrw8e2/uM4rs9YMNk0iOr8rHQ0QdbM7D4l0gFl3szKdeixrlyfm9Zqi4dxHCM2qVG8ND5g==" + }, + "tiny-warning": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz", + "integrity": "sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -15778,6 +15929,11 @@ "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, + "ua-parser-js": { + "version": "0.7.19", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz", + "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==" + }, "uglify-js": { "version": "3.4.10", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz", @@ -16074,6 +16230,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz", + "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/client/package.json b/client/package.json index 7e20116..6a09b42 100644 --- a/client/package.json +++ b/client/package.json @@ -5,6 +5,7 @@ "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", + "react-router-dom": "^5.0.0", "react-scripts": "2.1.8" }, "scripts": { diff --git a/client/src/App.css b/client/src/App.css index b41d297..f3ee537 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -2,32 +2,10 @@ text-align: center; } -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 40vmin; - pointer-events: none; +.linkStyle{ + padding: 1%; } -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} +.formStyle{ + margin: 1%; +} \ No newline at end of file diff --git a/client/src/App.js b/client/src/App.js index 7e261ca..68047ed 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,26 +1,45 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; import './App.css'; +import {BrowserRouter as Router, Link, Route} from 'react-router-dom'; +import TwitterHome from "./TwitterHome"; +import TwitterRegistration from "./TwitterRegistration"; +import TwitterProfile from "./TwitterProfile"; +import TwitterLogout from "./TwitterLogout"; class App extends Component { + + constructor(props) { + super(props); + this.state = { + username:null, + isLoggedIn:false, + } + } + + userInfo = (username,isLoggedIn) =>{ + this.setState({username:username, isLoggedIn:isLoggedIn}) + }; + + userLogout = () => { + this.setState({username:null, isLoggedIn:false}); + console.log('user has been logged out') + }; + render() { return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
+ +
+

Mock Twitter

+ Home + Register + Profile + Logout +
+ } /> + } /> + } /> + } /> + ); } } diff --git a/client/src/TwitterHome.js b/client/src/TwitterHome.js new file mode 100644 index 0000000..8422749 --- /dev/null +++ b/client/src/TwitterHome.js @@ -0,0 +1,68 @@ +import React, {Component} from 'react'; + +class TwitterHome extends Component { + + + formSubmit = (e) => { + e.preventDefault(); + fetch('/users/login', { + method: 'POST', + headers: { + "Accept": "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify({ + username: e.target.username.value, + password: e.target.password.value, + }) + }) + .then((data) => data.text()) + .then((data) => { + if (data) { + this.props.userInfo(data, true) + } + else{ + this.props.userInfo(null,false) + } + }) + }; + + render() { + //logged in user display + if (this.props.isLoggedIn === true) { + console.log('Client Check: Logged in'); + return ( +
+

Mock Twitter

+

Five Latest Tweets

+
+ ); + } + //not logged in user display + else { + console.log('Client Check: Not logged in'); + return ( +
+

Mock Twitter Sign In

+
+
+ + +
+
+ + +
+
+ +
+
+
+ ); + } + + + } +} + +export default TwitterHome; \ No newline at end of file diff --git a/client/src/TwitterLogout.js b/client/src/TwitterLogout.js new file mode 100644 index 0000000..60d3095 --- /dev/null +++ b/client/src/TwitterLogout.js @@ -0,0 +1,13 @@ +import React, {Component} from 'react'; + +class TwitterLogout extends Component { + render() { + return ( +
+

Mock Twitter Log Out

+
+ ); + } +} + +export default TwitterLogout; \ No newline at end of file diff --git a/client/src/TwitterProfile.js b/client/src/TwitterProfile.js new file mode 100644 index 0000000..0a9201e --- /dev/null +++ b/client/src/TwitterProfile.js @@ -0,0 +1,61 @@ +import React, {Component} from 'react'; + +class TwitterProfile extends Component { + + //BROKEN/INCOMPLETE + formSubmit = (e) => { + e.preventDefault(); + fetch('/users/addTweet', { + method:'POST', + headers:{ + "Accept": "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify({ + username:this.props.username, + tweetMessage:e.target.tweetMessage.value, + tweetImage:e.target.tweetImage.value, + tweetPublic:e.target.tweetPublic.value + }) + }) + }; + + render() { + if(this.props.isLoggedIn === true){ + return ( +
+

Mock Twitter {this.props.username}'s Profile

+

Add Tweet

+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+

Your Tweets

+
+ ); + } + else{ + return ( +
+

Please Log In to View Your Profile

+
+ ) + } + + } +} + +export default TwitterProfile; \ No newline at end of file diff --git a/client/src/TwitterRegistration.js b/client/src/TwitterRegistration.js new file mode 100644 index 0000000..c164902 --- /dev/null +++ b/client/src/TwitterRegistration.js @@ -0,0 +1,60 @@ +import React, {Component} from 'react'; + +class TwitterRegistration extends Component { + + constructor(props) { + super(props); + this.state = { + message:'' + } + } + + formSubmit = (e) => { + e.preventDefault(); + fetch('/users/register', { + method:'POST', + headers:{ + "Accept": "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify({ + username:e.target.username.value, + password:e.target.password.value, + profileImage:e.target.profileImage.value, + backgroundImage:e.target.backgroundImage.value, + }) + }) + }; + + render() { + return ( +
+

Mock Twitter User Registration

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ {this.state.message} +
+ ); + } +} + +export default TwitterRegistration; \ No newline at end of file diff --git a/server/routes/users.js b/server/routes/users.js index 2abd151..e3653c7 100644 --- a/server/routes/users.js +++ b/server/routes/users.js @@ -74,7 +74,7 @@ router.post('/register', passport.authenticate('register', {failureRedirect: '/users/registerFail'} ), (req, res) => { - res.send("Successful Registration") + res.send(req.body.username) }); router.get('/registerFail', (req, res) => { res.send("Failed Registration");