Merge pull request #52 from chingu-voyage4/feature-signupPage-#20

Feature signup page #20

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",

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(
-  <ProfilePage username="Jethro" numFollowers={0} numFollowing={0} likedArticles={likedArticles} />,
-  document.getElementById('app')
-);
+ReactDOM.render(<UserAuthentication />, document.getElementById('app'));

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 (
+      <div>
+        <form onSubmit={this.onSubmit}>
+          {this.state.errors.map((error, index) => (
+            <p key={index}>{error.charAt(0).toUpperCase() + error.slice(1)}</p>
+          ))}
+          <label htmlFor="username">
+            Username:
+            <input
+              type="text"
+              name="username"
+              value={this.state.username}
+              onChange={this.onUsernameChange}
+            />
+          </label>
+          <br />
+          <label htmlFor="email">
+            Email:
+            <input
+              type="email"
+              name="email"
+              value={this.state.email}
+              onChange={this.onEmailChange}
+            />
+          </label>
+          <br />
+          <label htmlFor="password">
+            Password:
+            <input
+              type="password"
+              name="password"
+              value={this.state.password}
+              onChange={this.onPasswordChange}
+            />
+          </label>
+          <br />
+          <label htmlFor="confirmPassword">
+            Confirm Password:
+            <input
+              type="password"
+              name="confirmPassword"
+              value={this.state.confirmPassword}
+              onChange={this.onConfirmPasswordChange}
+            />
+          </label>
+          <br />
+          <button type="submit">Submit</button>
+        </form>
+        <Modal
+          isOpen={this.state.modalIsOpen}
+          contentLabel="Registration successful"
+          onRequestClose={() => this.setState(() => ({ modalIsOpen: false }))}
+        >
+          <a onClick={this.closeModal}>&times;</a>
+          <p>You have successfully registered!</p>
+        </Modal>
+      </div>
+    );
+  }
+}

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 (
+      <div>
+        <button onClick={this.triggerModal} name="Sign Up">
+          Sign Up
+        </button>
+        <button onClick={this.triggerModal} name="Log In">
+          Log In
+        </button>
+        <Modal
+          isOpen={this.state.modalIsOpen}
+          contentLabel={this.state.modalContent}
+          onRequestClose={() => this.setState(() => ({ modalIsOpen: false }))}
+        >
+          <a onClick={this.closeModal}>&times;</a>
+          {this.state.modalContent === 'Sign Up' ? <SignUpForm /> : <p>Log In</p>}
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default UserAuthentication;

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 @@ [email protected]:
     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"