[WiP] My Account Page

client/src/App.jsx

@@ -1,20 +1,20 @@
 import React, { Component } from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import MyAccount from './components/MyAccount';
 
 import './Normalize.css';
 import './App.css';
 
 /* eslint-disable  */
 class App extends Component {
   render() {
-    return(
+    return (
       <Router>
         <Switch>
-          <Route exact path="/my-account" >
-          </Route>
+          <Route exact path="/my-account" component={MyAccount} />
         </Switch>
       </Router>
-    )
+    );
   }
 }
 

client/src/components/Login/Login.css

@@ -5,6 +5,7 @@
   flex-direction: column;
   background-color: #f7f7f7;
   padding-bottom: 10px;
+  margin: 30px 0 0 0;
 }
 
 .login-form__button-container {
@@ -73,9 +74,20 @@
 @media only screen and (min-width: 1000px) {
   .login-form {
     display: flex;
-    width: 35%;
+    width: 50%;
     height: 31%;
     flex-direction: column;
     background-color: #f7f7f7;
+    margin: 30px 0 0 40px;
+  }
+}
+
+@media only screen and (max-width: 420px) {
+  .login-form {
+    display: flex;
+    width: 100%;
+    height: 360px;
+    flex-direction: column;
+    background-color: #f7f7f7;
   }
 }

client/src/components/Login/index.jsx

@@ -1,78 +1,57 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
 import InputField from '../common/InputField';
 import './Login.css';
 
-export default class Login extends Component {
-  state = {
-    email: '',
-    password: '',
-    rememberMe: false,
-  };
-
-  handleClick = () => {
-    this.setState(prevState => ({
-      rememberMe: !prevState.rememberMe,
-    }));
-  };
-
-  handleChange = e => {
-    this.setState({ [e.target.name]: e.target.value });
-  };
-
-  handleSubmit = e => {
-    fetch('/login', {
-      credentials: 'same-origin',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      method: 'POST',
-      body: JSON.stringify(this.state),
-    });
-    e.preventDefault();
-  };
-
-  render() {
-    return (
-      <form className="login-form" onSubmit={this.handleSubmit}>
-        <h4 className="login-form__header">Registered Customer</h4>
+export default function Login(props) {
+  const { handleChange, handleSubmit, handleClick } = props;
+  return (
+    <form className="login-form" onSubmit={handleSubmit}>
+      <h4 className="login-form__header">Registered Customer</h4>
+      <InputField
+        id="email"
+        labelText="Username or email address"
+        className="login-form__text"
+        labelClass="login-form__label"
+        name="loginEmail"
+        type="text"
+        onChange={handleChange}
+      />
+      <InputField
+        id="password"
+        labelText="Password"
+        labelClass="login-form__label"
+        className="login-form__text"
+        name="loginPassword"
+        type="text"
+        onChange={handleChange}
+      />
+      <div className="login-form__button-container">
         <InputField
-          id="email"
-          labelText="Username or email address"
-          className="login-form__text"
-          labelClass="login-form__label"
-          name="email"
-          type="text"
-          onChange={this.handleChange}
+          className="login-form__submit"
+          type="submit"
+          value="Login"
         />
         <InputField
-          id="password"
-          labelText="Password"
-          labelClass="login-form__label"
-          className="login-form__text"
-          name="password"
-          type="text"
-          onChange={this.handleChange}
+          className="login-form__checkbox"
+          type="checkbox"
+          onClick={handleClick}
         />
-        <div className="login-form__button-container">
-          <InputField
-            className="login-form__submit"
-            type="submit"
-            value="Login"
-          />
-          <InputField
-            className="login-form__checkbox"
-            type="checkbox"
-            onClick={this.handleClick}
-          />
-          <span className="remember-me__span">Remember Me</span>
-        </div>
-        <p>
-          <Link to="/my-account/lost-password" className="login-form__anchor">
-            Lost your password?
-          </Link>
-        </p>
-      </form>
-    );
-  }
+        <span className="remember-me__span">Remember Me</span>
+      </div>
+      <p>
+        <Link to="/my-account/lost-password" className="login-form__anchor">
+          Lost your password?
+        </Link>
+      </p>
+    </form>
+  );
 }
+
+Login.propTypes = {
+  handleChange: PropTypes.func.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  handleClick: PropTypes.func.isRequired,
+};

client/src/components/MyAccount/MyAccount.css

@@ -0,0 +1,118 @@
+.my-account {
+  display: flex;
+  width: 100%;
+  height: 120px;
+  background-color: #f9f9f9;
+}
+
+.my-account__container {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 120px;
+  align-content: center;
+  justify-content: space-between;
+  margin: 0 5%;
+}
+
+.my-account__header {
+  margin-top: 35px;
+  font-size: 35px;
+  font-weight: lighter;
+  color: grey;
+}
+
+.my-account__link-wrapper {
+  display: flex;
+  flex-direction: row;
+  width: 200px;
+}
+
+.my-account__home-ref {
+  margin: 50px 10px 0px 25px;
+  color: grey;
+}
+
+.my-account__wrapper-text {
+  margin-top: 51px;
+  color: lightgray;
+}
+
+.my-account__forms-container {
+  display: flex;
+  flex-direction: column;
+  width: 90%;
+  margin: 20px 0 0 5%;
+}
+
+.my-account__error-icon {
+  margin-right: 3px;
+}
+
+.my-account__forms-container:nth-child(0) {
+  margin-right: 50px;
+}
+
+.my-account__error-message {
+  outline: darkred solid 3px;
+  width: 95.7%;
+  margin: 60px 0 0 42px;
+  padding: 15px 15px;
+}
+
+.my-account__forms-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+@media only screen and (max-width: 1000px) {
+  .my-account__forms-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin: 0 15%;
+  }
+
+  .my-account__forms-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@media only screen and (max-width: 420px) {
+  .my-account__header {
+    margin-top: 46px;
+    font-size: 20px;
+    font-weight: lighter;
+    color: grey;
+  }
+
+  .my-account__home-ref {
+    margin: 48px 10px 0px 25px;
+    color: grey;
+  }
+
+  .my-account__wrapper-text {
+    margin-top: 48px;
+    color: lightgray;
+  }
+
+  .my-account__forms-container {
+    display: flex;
+    flex-direction: column;
+    width: 96%;
+    margin: 2%;
+  }
+
+  .my-account__error-message {
+    outline: darkred solid 3px;
+    margin: 60px 0 0 0;
+    padding: 15px 15px;
+  }
+
+  .my-account__forms-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+}
+