From 68389d8ab7ca23c2788a7810f3c83cdcd8afc5c8 Mon Sep 17 00:00:00 2001
From: Christopher Cross <cc28@alumni.princeton.edu>
Date: Thu, 5 Nov 2020 02:23:28 -0800
Subject: [PATCH 1/6] implement create account page

---
 backend/app.js                                |   3 +-
 .../src/components/common/button/button.js    |   4 +-
 client-mvp-04/src/components/home/home.js     |   2 +-
 .../src/components/register/register.js       | 103 ++++++++++++++++++
 .../src/components/register/register.scss     |  90 +++++++++++++++
 .../src/components/register/resgister.test.js |   0
 client-mvp-04/src/routes/index.js             |   6 +
 7 files changed, 204 insertions(+), 4 deletions(-)
 create mode 100644 client-mvp-04/src/components/register/register.js
 create mode 100644 client-mvp-04/src/components/register/register.scss
 create mode 100644 client-mvp-04/src/components/register/resgister.test.js

diff --git a/backend/app.js b/backend/app.js
index a20a980bf..6ffe3d245 100644
--- a/backend/app.js
+++ b/backend/app.js
@@ -8,6 +8,7 @@ const fetch = require("node-fetch");
 const morgan = require("morgan");
 const path = require("path");
 const cookieParser = require("cookie-parser");
+const cors = require('cors');
 
 // Import environment variables
 require("dotenv").config();
@@ -49,7 +50,7 @@ app.use(morgan("dev"));
 // app.use(helmet());
 
 // Cross-Origin-Resource-Sharing
-// app.use(cors());
+app.use(cors());
 
 // WORKERS
 const runOpenCheckinWorker = require("./workers/openCheckins")(cron, fetch);
diff --git a/client-mvp-04/src/components/common/button/button.js b/client-mvp-04/src/components/common/button/button.js
index 352c887c4..1f997a13b 100644
--- a/client-mvp-04/src/components/common/button/button.js
+++ b/client-mvp-04/src/components/common/button/button.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import './button.scss';
 
-const Button = ({ content, className }) => {
+const Button = ({ content, className, onClick, disabled }) => {
   return (
-    <button data-testid="button" className={className}>
+    <button data-testid="button" className={className} onClick={onClick} disabled={disabled}>
       {content}
     </button>
   );
diff --git a/client-mvp-04/src/components/home/home.js b/client-mvp-04/src/components/home/home.js
index e2a82c24a..be8b6b462 100644
--- a/client-mvp-04/src/components/home/home.js
+++ b/client-mvp-04/src/components/home/home.js
@@ -18,7 +18,7 @@ const Home = () => {
       <span className="home-text">or</span>
 
       <RedirectLink
-        path={'/page'}
+        path={'/register'}
         content={'Create account'}
         className={'accent-link'}
         linkKey={'create-account-link'}
diff --git a/client-mvp-04/src/components/register/register.js b/client-mvp-04/src/components/register/register.js
new file mode 100644
index 000000000..687370050
--- /dev/null
+++ b/client-mvp-04/src/components/register/register.js
@@ -0,0 +1,103 @@
+import React, { useState, useEffect } from "react";
+import Button from '../common/button/button';
+import Link from '../../components/common/link/link'
+import './register.scss';
+
+
+const Register = (props) => {
+
+    const [inputtedEmail, setInputtedEmail] = useState('');
+    const [errorMessage, setErrorMessage] = useState(null);
+
+    const validateEmail = () => {
+
+        const email_regex = /^\S+@\S+$/;
+        const emailIsValid = email_regex.test(inputtedEmail);
+
+        if (emailIsValid) {
+            checkUserByEmail();
+        } else {
+            setErrorMessage(
+                <p className="error-msg">
+                    *Please enter a valid email address
+                </p>
+            );
+        }
+
+    }
+
+    const checkUserByEmail = async () => {
+
+        console.log('checking user by email');
+
+        try {
+
+            const res = await fetch(`${process.env.REACT_APP_PROXY}/api/checkuser`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({ email: inputtedEmail }),
+            });
+
+            const user = await res.json();
+            console.log(user);
+
+
+            if (user === false) {
+                props.history.push('/page');
+            } else {
+                setErrorMessage(
+                    <p className="error-msg">
+                        *You already have an account for that email
+                        address. Want to <Link
+                            path='/page'
+                            content='log in'
+                            className='error-link'
+                            linkKey='dummy'
+                        >
+                        </Link>
+                        ?
+                    </p>
+                );
+            }
+
+        } catch (error) {
+            alert(error);
+        }
+
+    }
+
+    const handleInputtedEmailChange = async (event) => {
+        const inputtedEmail = event.target.value.replace(' ', '');
+        setInputtedEmail(inputtedEmail);
+    }
+
+    useEffect(() => {
+        setErrorMessage(null);
+    }, [inputtedEmail])
+
+    return (
+        <section data-testid="register" className="register-container">
+            <h1 className="register-name">VRMS</h1>
+            <h2 className="register-title">Volunteer Relationship Management System</h2>
+            <input
+                className="email-input-box"
+                name="email"
+                placeholder="Enter your email"
+                value={inputtedEmail}
+                onChange={event => handleInputtedEmailChange(event)}
+            />
+            <Button
+                content={`Create Account`}
+                className={`register-button`}
+                disabled={inputtedEmail.length > 0 ? false : true}
+                onClick={validateEmail}
+            />
+
+            {errorMessage}
+        </ section>
+    );
+};
+
+export default Register;
diff --git a/client-mvp-04/src/components/register/register.scss b/client-mvp-04/src/components/register/register.scss
new file mode 100644
index 000000000..ddb715a7a
--- /dev/null
+++ b/client-mvp-04/src/components/register/register.scss
@@ -0,0 +1,90 @@
+@import "../../sass/variables";
+
+.email-input-box {
+    width: 246px;
+    height: 43px;
+    padding-left: 20px;
+}
+
+.error-msg {
+    color: #EB5757;
+    text-align: left;
+    font-style: italic;
+    width: 246px;
+    height: 42px;
+    font-size: 14;
+    line-height: 20px;
+
+    .error-link {
+    color: #EB5757; 
+    text-decoration: underline;
+    }
+}
+
+.register-container {
+  padding: 40px 90px;
+
+  .register-name {
+    font-size: 72px;
+  }
+
+  .register-title {
+    margin: 26px 0 83px;
+    line-height: 27px;
+    font-weight: $font-regular;
+    text-align: left;
+    text-transform: uppercase;
+  }
+
+  .register-button {
+    width: 156px;
+    height: 30px;
+    margin: 45px auto;
+    margin-left: 38px;
+    padding: 8px;
+    color: blue; 
+    font-weight: 200;
+  }
+
+  .register-button:disabled {
+      background-color: gray;
+      color: black;
+      cursor: auto;
+  }
+
+  .register-button.placeholder {
+    text-align: center;
+  }
+
+  .register-text {
+    display: flex;
+    justify-content: center;
+    font-size: 15px;
+    font-weight: $font-bold;
+  }
+}
+
+@media (max-width: 400px) {
+  .register-container {
+    padding: 40px 70px;
+  }
+
+  .register-container .register-title {
+    margin: 18px 0 40px;
+  }
+
+  .register-container .register-name {
+    font-size: 68px;
+    text-align: left;
+  }
+}
+
+@media (max-width: 350px) {
+  .register-container {
+    padding: 15px 52px;
+  }
+
+  .register-container .register-title {
+    margin: 15px 0 35px;
+  }
+}
diff --git a/client-mvp-04/src/components/register/resgister.test.js b/client-mvp-04/src/components/register/resgister.test.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/client-mvp-04/src/routes/index.js b/client-mvp-04/src/routes/index.js
index 4dc37371a..193bef79f 100644
--- a/client-mvp-04/src/routes/index.js
+++ b/client-mvp-04/src/routes/index.js
@@ -1,6 +1,7 @@
 import Home from '../components/home/home';
 import Dummy from '../components/dummy/dummy';
 import Error from '../components/error/error';
+import Register from '../components/register/register'; 
 
 import DevUiKit from '../utils/uiKit/uiKit';
 
@@ -21,6 +22,11 @@ export const Routes = [
     key: 'dev-ui-kit',
     component: DevUiKit,
   },
+  {
+    path: '/register',
+    key: 'create-account-link',
+    component: Register,
+  },
   {
     key: 'error',
     component: Error,

From cc6ec7e73235f01cf13a5545c2c1d89891acafb4 Mon Sep 17 00:00:00 2001
From: Christopher Cross <cc28@alumni.princeton.edu>
Date: Thu, 5 Nov 2020 14:10:35 -0800
Subject: [PATCH 2/6] implement create account page

---
 .../src/components/home/home.test.js          |  6 +--
 .../src/components/register/register.js       | 11 +----
 .../src/components/register/resgister.test.js | 42 +++++++++++++++++++
 3 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/client-mvp-04/src/components/home/home.test.js b/client-mvp-04/src/components/home/home.test.js
index e986a1933..801a048ad 100644
--- a/client-mvp-04/src/components/home/home.test.js
+++ b/client-mvp-04/src/components/home/home.test.js
@@ -36,7 +36,7 @@ describe('Home', () => {
     expect(history.location.pathname).toBe('/page');
   });
 
-  test('Should navigate to dummy page after click on `Create account` button', () => {
+  test('Should navigate to create account page after click on `Create account` button', () => {
     const history = createMemoryHistory();
     render(
       <Router history={history}>
@@ -44,8 +44,8 @@ describe('Home', () => {
       </Router>
     );
     expect(screen.getByText('Create account')).toBeInTheDocument();
-    expect(screen.getAllByTestId('link')[1]).toHaveAttribute('href', '/page');
+    expect(screen.getAllByTestId('link')[1]).toHaveAttribute('href', '/register');
     fireEvent.click(screen.getAllByTestId('link')[1]);
-    expect(history.location.pathname).toBe('/page');
+    expect(history.location.pathname).toBe('/register');
   });
 });
diff --git a/client-mvp-04/src/components/register/register.js b/client-mvp-04/src/components/register/register.js
index 687370050..cc19dfd89 100644
--- a/client-mvp-04/src/components/register/register.js
+++ b/client-mvp-04/src/components/register/register.js
@@ -18,7 +18,7 @@ const Register = (props) => {
             checkUserByEmail();
         } else {
             setErrorMessage(
-                <p className="error-msg">
+                <p className="error-msg" data-testid="error-msg">
                     *Please enter a valid email address
                 </p>
             );
@@ -28,10 +28,7 @@ const Register = (props) => {
 
     const checkUserByEmail = async () => {
 
-        console.log('checking user by email');
-
         try {
-
             const res = await fetch(`${process.env.REACT_APP_PROXY}/api/checkuser`, {
                 method: "POST",
                 headers: {
@@ -41,14 +38,11 @@ const Register = (props) => {
             });
 
             const user = await res.json();
-            console.log(user);
-
-
             if (user === false) {
                 props.history.push('/page');
             } else {
                 setErrorMessage(
-                    <p className="error-msg">
+                    <p className="error-msg" data-testid="error-msg">
                         *You already have an account for that email
                         address. Want to <Link
                             path='/page'
@@ -61,7 +55,6 @@ const Register = (props) => {
                     </p>
                 );
             }
-
         } catch (error) {
             alert(error);
         }
diff --git a/client-mvp-04/src/components/register/resgister.test.js b/client-mvp-04/src/components/register/resgister.test.js
index e69de29bb..bbcebcf4d 100644
--- a/client-mvp-04/src/components/register/resgister.test.js
+++ b/client-mvp-04/src/components/register/resgister.test.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import Register from './register';
+import { BrowserRouter } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+import userEvent from '@testing-library/user-event'
+
+afterEach(cleanup);
+
+describe('register', () => {
+    test('Should render component with name of project', () => {
+        render(<Register />, { wrapper: BrowserRouter });
+        expect(screen.getByTestId('register')).toBeInTheDocument();
+        const h1 = screen.getByText(/VRMS/i);
+        const h2 = screen.getByText(/Volunteer Relationship Management System/i);
+        expect(h1).toBeInTheDocument();
+        expect(h2).toBeInTheDocument();
+    });
+
+    test('Should have input field and create acount button', () => {
+        render(<Register />, { wrapper: BrowserRouter });
+        expect(screen.getByPlaceholderText('Enter your email')).toBeInTheDocument();
+        expect(screen.getByText('Create Account')).toBeInTheDocument();
+    });
+
+    test('Should display error message when invalid email address is entered', () => {
+        render(<Register />, { wrapper: BrowserRouter });
+        userEvent.type(screen.getByPlaceholderText('Enter your email'), 'j4pioej;dsfasd');
+        expect(screen.getByRole('textbox')).toHaveValue('j4pioej;dsfasd');
+        fireEvent.click(screen.getByText('Create Account'));
+        expect(screen.getByTestId('error-msg')).toHaveTextContent('*Please enter a valid email address');
+    }); 
+
+
+
+
+
+
+
+
+});
\ No newline at end of file

From 1fedd639633e001d561032f20789932fde84f1b6 Mon Sep 17 00:00:00 2001
From: Christopher Cross <cc28@alumni.princeton.edu>
Date: Sat, 14 Nov 2020 10:57:06 -0800
Subject: [PATCH 3/6] implement createAccount page

---
 backend/app.js                                |  2 +-
 .../createAccount/createAccount.scss          | 69 +++++++++++++
 .../createAccount/createAccountContainer.js   | 56 +++++++++++
 .../createAccount/createAccountView.js        | 58 +++++++++++
 .../createAccount/createAccountView.test.js   | 67 +++++++++++++
 client-mvp-04/src/components/home/home.js     |  4 +-
 .../src/components/home/home.test.js          |  4 +-
 .../src/components/login/loginView.js         |  4 +-
 .../src/components/register/register.js       | 96 -------------------
 .../src/components/register/register.scss     | 90 -----------------
 .../src/components/register/resgister.test.js | 42 --------
 client-mvp-04/src/routes/index.js             |  8 +-
 12 files changed, 261 insertions(+), 239 deletions(-)
 create mode 100644 client-mvp-04/src/components/createAccount/createAccount.scss
 create mode 100644 client-mvp-04/src/components/createAccount/createAccountContainer.js
 create mode 100644 client-mvp-04/src/components/createAccount/createAccountView.js
 create mode 100644 client-mvp-04/src/components/createAccount/createAccountView.test.js
 delete mode 100644 client-mvp-04/src/components/register/register.js
 delete mode 100644 client-mvp-04/src/components/register/register.scss
 delete mode 100644 client-mvp-04/src/components/register/resgister.test.js

diff --git a/backend/app.js b/backend/app.js
index cd7f501e6..fdc0cdc62 100644
--- a/backend/app.js
+++ b/backend/app.js
@@ -51,7 +51,7 @@ app.use(morgan("dev"));
 // app.use(helmet());
 
 // Cross-Origin-Resource-Sharing
-app.use(cors());
+// app.use(cors());
 
 // WORKERS
 const runOpenCheckinWorker = require('./workers/openCheckins')(cron, fetch);
diff --git a/client-mvp-04/src/components/createAccount/createAccount.scss b/client-mvp-04/src/components/createAccount/createAccount.scss
new file mode 100644
index 000000000..5fc354b07
--- /dev/null
+++ b/client-mvp-04/src/components/createAccount/createAccount.scss
@@ -0,0 +1,69 @@
+@import "../../sass/variables";
+
+.createAccount-container {
+  padding: 40px 60px;
+
+  .text-field-container {
+    margin-top: 76px;
+  }
+
+  .createAccount-button {
+    margin: 50px auto 20px auto;
+    color: blue;
+    
+  }
+
+  .error-message {
+    margin: 25px 10px 10px;
+
+    .redirect-link {
+      color: $link-accent-color;
+    }
+  }
+}
+
+@media (max-height: 896px) {
+  .createAccount-container {
+    height: calc(100vh - 160px);
+  }
+}
+
+@media (max-width: 400px) {
+  .createAccount-container {
+    padding: 25px 52px;
+
+    .createAccount-button {
+      margin: 40px 0 20px auto;
+    }
+
+    .error-message {
+      margin: 25px 0 10px;
+    }
+
+    .text-field-container {
+      margin-top: 55px;
+    }
+  }
+}
+
+@media (max-width: 374px) {
+  .createAccount-container {
+    height: calc(100vh - 180px);
+  }
+}
+
+@media (max-width: 350px) {
+  .createAccount-container {
+    padding: 15px 25px;
+
+    .text-field-container {
+      margin-top: 25px;
+    }
+    .createAccount-button {
+      margin: 15px 0 10px auto;
+    }
+    .error-message {
+      margin: 20px 0 5px;
+    }
+  }
+}
diff --git a/client-mvp-04/src/components/createAccount/createAccountContainer.js b/client-mvp-04/src/components/createAccount/createAccountContainer.js
new file mode 100644
index 000000000..f6e18b2ce
--- /dev/null
+++ b/client-mvp-04/src/components/createAccount/createAccountContainer.js
@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import CreateAccountView from './createAccountView';
+import { connect } from 'react-redux';
+import { Email } from '../../utils/validation';
+import UserService from '../../services/user.service';
+import { setUser } from '../../store/actions/userActions';
+
+const CreateAccountContainer = (props) => {
+  // Local UI State
+  const [isDisabled, setIsDisabled] = useState(true);
+  const [userEmail, setUserEmail] = useState('');
+  const [isEmailValid, setIsEmailValid] = useState(false);
+  const [errorMsgInvalidEmail, setErrorMsgInvalidEmail] = useState(false);
+  const [errorMsgRegisteredEmail, setErrorMsgRegisteredEmail] = useState(false);
+
+  function handleInputChange(e) {
+    setErrorMsgInvalidEmail(false);
+    setErrorMsgRegisteredEmail(false);
+    const inputValue = e.currentTarget.value.toString();
+    inputValue ? setIsDisabled(false) : setIsDisabled(true);
+    setUserEmail(inputValue);
+  }
+
+  const handleSubmitForm = async (e) => {
+    e.preventDefault();
+    if (Email.isValid(userEmail)) {
+      setIsEmailValid(true);
+      setErrorMsgInvalidEmail(false);
+      const userData = await UserService.getData(userEmail);
+      if ( ! userData ) {
+        // user is not registered in app, redirect to dummny page 
+        props.history.push('/page');
+      } else {
+        // user is already registered in app, update global state in store
+        setErrorMsgRegisteredEmail(true);
+        props.dispatch(setUser(userData));
+      }
+    } else {
+      setIsEmailValid(false);
+      setErrorMsgInvalidEmail(true);
+    }
+  };
+
+  return (
+    <CreateAccountView
+      handleSubmitForm={handleSubmitForm}
+      handleInputChange={handleInputChange}
+      isDisabled={isDisabled}
+      isEmailValid={isEmailValid}
+      errorMsgInvalidEmail={errorMsgInvalidEmail}
+      errorMsgRegisteredEmail={errorMsgRegisteredEmail}
+    />
+  );  
+};
+
+export default CreateAccountContainer; 
\ No newline at end of file
diff --git a/client-mvp-04/src/components/createAccount/createAccountView.js b/client-mvp-04/src/components/createAccount/createAccountView.js
new file mode 100644
index 000000000..ed64f2922
--- /dev/null
+++ b/client-mvp-04/src/components/createAccount/createAccountView.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import './createAccount.scss';
+import Button from '../common/button/button';
+import Title from '../common/title/title';
+import Input from '../common/input/input';
+import ErrorMessage from '../common/errorMessage/errorMessage';
+import RedirectLink from '../common/link/link';
+
+
+const CreateAccountView = ({
+    handleSubmitForm,
+    handleInputChange,
+    isDisabled,
+    isEmailValid,
+    errorMsgInvalidEmail,
+    errorMsgRegisteredEmail,
+}) => {
+    return (
+        <section data-testid="createAccount" className="createAccount-container">
+        <Title />
+  
+        <form data-testid="createAccount-form" onSubmit={(e) => handleSubmitForm(e)}>
+          <Input
+            dataTestid="createAccount-input"
+            placeholder={'Enter your email'}
+            type={'email'}
+            onChange={(e) => handleInputChange(e)}
+            autoComplete={'email'}
+          />
+  
+          <Button
+            type={'submit'}
+            content={`Create Account`}
+            className={'createAccount-button'}
+            disabled={isDisabled}
+          />
+        </form>
+  
+        {!isEmailValid && errorMsgInvalidEmail ? (
+          <ErrorMessage content={'*Please enter a valid email address'} />
+        ) : null}
+  
+        {errorMsgRegisteredEmail ? (
+          <p className={'error-message'}>
+            *You already have an account for that email address. Want to
+            <RedirectLink
+              path={'/login'}
+              linkKey={'login'}
+              content={' log in'}
+            />
+            ?
+          </p>
+        ) : null}
+      </section>
+    );
+};
+
+export default CreateAccountView;
diff --git a/client-mvp-04/src/components/createAccount/createAccountView.test.js b/client-mvp-04/src/components/createAccount/createAccountView.test.js
new file mode 100644
index 000000000..388622593
--- /dev/null
+++ b/client-mvp-04/src/components/createAccount/createAccountView.test.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import CreateAccountView from './createAccountView';
+import { BrowserRouter } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+import userEvent from '@testing-library/user-event'
+
+afterEach(cleanup);
+
+describe('createAccount', () => {
+
+    test('Should render component with props', () => {
+        const props = {
+          handleSubmitForm: () => {},
+          handleInputChange: () => {},
+          isDisabled: true,
+          isEmailValid: false,
+          errorMsgInvalidEmail: false,
+          errorMsgRegisteredEmail: false,
+        };
+    
+        render(
+          <CreateAccountView
+            handleSubmitForm={props.handleSubmitForm}
+            handleInputChange={props.handleInputChange}
+            isDisabled={props.isDisabled}
+            isEmailValid={props.isEmailValid}
+            errorMsgInvalidEmail={props.errorMsgInvalidEmail}
+            errorMsgFailedEmail={props.errorMsgRegisteredEmail}
+          />,
+          { wrapper: BrowserRouter }
+        );
+    
+        expect(screen.getByTestId('createAccount')).toBeInTheDocument();
+        expect(screen.getByTestId('createAccount-form')).toBeInTheDocument();
+        expect(screen.getByTestId('createAccount-input')).toBeInTheDocument();
+        expect(screen.getByText('Create Account')).toBeInTheDocument();
+      });
+
+
+    test('Should display error message when invalid email address is entered', () => {
+        const props = {
+            handleSubmitForm: () => {},
+            handleInputChange: () => {},
+            isDisabled: true,
+            isEmailValid: false,
+            errorMsgInvalidEmail: true,
+            errorMsgRegisteredEmail: false,
+          };
+      
+          render(
+            <CreateAccountView
+              handleSubmitForm={props.handleSubmitForm}
+              handleInputChange={props.handleInputChange}
+              isDisabled={props.isDisabled}
+              isEmailValid={props.isEmailValid}
+              errorMsgInvalidEmail={props.errorMsgInvalidEmail}
+              errorMsgFailedEmail={props.errorMsgRegisteredEmail}
+            />,
+            { wrapper: BrowserRouter }
+          );
+
+        expect(screen.getByText('*Please enter a valid email address')).toBeInTheDocument();
+    }); 
+
+});
\ No newline at end of file
diff --git a/client-mvp-04/src/components/home/home.js b/client-mvp-04/src/components/home/home.js
index 64d596068..c1c691deb 100644
--- a/client-mvp-04/src/components/home/home.js
+++ b/client-mvp-04/src/components/home/home.js
@@ -18,10 +18,10 @@ const Home = () => {
       <span className="home-text">or</span>
 
       <RedirectLink
-        path={'/register'}
+        path={'/create-account'}
         content={'Create account'}
         className={'accent-link'}
-        linkKey={'create-account-link'}
+        linkKey={'create-account'}
       />
     </section>
   );
diff --git a/client-mvp-04/src/components/home/home.test.js b/client-mvp-04/src/components/home/home.test.js
index 0071a7de3..74dac5191 100644
--- a/client-mvp-04/src/components/home/home.test.js
+++ b/client-mvp-04/src/components/home/home.test.js
@@ -44,8 +44,8 @@ describe('Home', () => {
       </Router>
     );
     expect(screen.getByText('Create account')).toBeInTheDocument();
-    expect(screen.getAllByTestId('link')[1]).toHaveAttribute('href', '/register');
+    expect(screen.getAllByTestId('link')[1]).toHaveAttribute('href', '/create-account');
     fireEvent.click(screen.getAllByTestId('link')[1]);
-    expect(history.location.pathname).toBe('/register');
+    expect(history.location.pathname).toBe('/create-account');
   });
 });
diff --git a/client-mvp-04/src/components/login/loginView.js b/client-mvp-04/src/components/login/loginView.js
index 294cc1977..4f125111e 100644
--- a/client-mvp-04/src/components/login/loginView.js
+++ b/client-mvp-04/src/components/login/loginView.js
@@ -43,8 +43,8 @@ const LoginView = ({
         <p className={'error-message'}>
           *We don’t recognize your email address. Need to
           <RedirectLink
-            path={'/page'}
-            linkKey={'create-acc-link'}
+            path={'/create-account'}
+            linkKey={'create-account'}
             content={' create an account'}
           />
           ?
diff --git a/client-mvp-04/src/components/register/register.js b/client-mvp-04/src/components/register/register.js
deleted file mode 100644
index cc19dfd89..000000000
--- a/client-mvp-04/src/components/register/register.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { useState, useEffect } from "react";
-import Button from '../common/button/button';
-import Link from '../../components/common/link/link'
-import './register.scss';
-
-
-const Register = (props) => {
-
-    const [inputtedEmail, setInputtedEmail] = useState('');
-    const [errorMessage, setErrorMessage] = useState(null);
-
-    const validateEmail = () => {
-
-        const email_regex = /^\S+@\S+$/;
-        const emailIsValid = email_regex.test(inputtedEmail);
-
-        if (emailIsValid) {
-            checkUserByEmail();
-        } else {
-            setErrorMessage(
-                <p className="error-msg" data-testid="error-msg">
-                    *Please enter a valid email address
-                </p>
-            );
-        }
-
-    }
-
-    const checkUserByEmail = async () => {
-
-        try {
-            const res = await fetch(`${process.env.REACT_APP_PROXY}/api/checkuser`, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify({ email: inputtedEmail }),
-            });
-
-            const user = await res.json();
-            if (user === false) {
-                props.history.push('/page');
-            } else {
-                setErrorMessage(
-                    <p className="error-msg" data-testid="error-msg">
-                        *You already have an account for that email
-                        address. Want to <Link
-                            path='/page'
-                            content='log in'
-                            className='error-link'
-                            linkKey='dummy'
-                        >
-                        </Link>
-                        ?
-                    </p>
-                );
-            }
-        } catch (error) {
-            alert(error);
-        }
-
-    }
-
-    const handleInputtedEmailChange = async (event) => {
-        const inputtedEmail = event.target.value.replace(' ', '');
-        setInputtedEmail(inputtedEmail);
-    }
-
-    useEffect(() => {
-        setErrorMessage(null);
-    }, [inputtedEmail])
-
-    return (
-        <section data-testid="register" className="register-container">
-            <h1 className="register-name">VRMS</h1>
-            <h2 className="register-title">Volunteer Relationship Management System</h2>
-            <input
-                className="email-input-box"
-                name="email"
-                placeholder="Enter your email"
-                value={inputtedEmail}
-                onChange={event => handleInputtedEmailChange(event)}
-            />
-            <Button
-                content={`Create Account`}
-                className={`register-button`}
-                disabled={inputtedEmail.length > 0 ? false : true}
-                onClick={validateEmail}
-            />
-
-            {errorMessage}
-        </ section>
-    );
-};
-
-export default Register;
diff --git a/client-mvp-04/src/components/register/register.scss b/client-mvp-04/src/components/register/register.scss
deleted file mode 100644
index ddb715a7a..000000000
--- a/client-mvp-04/src/components/register/register.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-@import "../../sass/variables";
-
-.email-input-box {
-    width: 246px;
-    height: 43px;
-    padding-left: 20px;
-}
-
-.error-msg {
-    color: #EB5757;
-    text-align: left;
-    font-style: italic;
-    width: 246px;
-    height: 42px;
-    font-size: 14;
-    line-height: 20px;
-
-    .error-link {
-    color: #EB5757; 
-    text-decoration: underline;
-    }
-}
-
-.register-container {
-  padding: 40px 90px;
-
-  .register-name {
-    font-size: 72px;
-  }
-
-  .register-title {
-    margin: 26px 0 83px;
-    line-height: 27px;
-    font-weight: $font-regular;
-    text-align: left;
-    text-transform: uppercase;
-  }
-
-  .register-button {
-    width: 156px;
-    height: 30px;
-    margin: 45px auto;
-    margin-left: 38px;
-    padding: 8px;
-    color: blue; 
-    font-weight: 200;
-  }
-
-  .register-button:disabled {
-      background-color: gray;
-      color: black;
-      cursor: auto;
-  }
-
-  .register-button.placeholder {
-    text-align: center;
-  }
-
-  .register-text {
-    display: flex;
-    justify-content: center;
-    font-size: 15px;
-    font-weight: $font-bold;
-  }
-}
-
-@media (max-width: 400px) {
-  .register-container {
-    padding: 40px 70px;
-  }
-
-  .register-container .register-title {
-    margin: 18px 0 40px;
-  }
-
-  .register-container .register-name {
-    font-size: 68px;
-    text-align: left;
-  }
-}
-
-@media (max-width: 350px) {
-  .register-container {
-    padding: 15px 52px;
-  }
-
-  .register-container .register-title {
-    margin: 15px 0 35px;
-  }
-}
diff --git a/client-mvp-04/src/components/register/resgister.test.js b/client-mvp-04/src/components/register/resgister.test.js
deleted file mode 100644
index bbcebcf4d..000000000
--- a/client-mvp-04/src/components/register/resgister.test.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
-import Register from './register';
-import { BrowserRouter } from 'react-router-dom';
-import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
-import userEvent from '@testing-library/user-event'
-
-afterEach(cleanup);
-
-describe('register', () => {
-    test('Should render component with name of project', () => {
-        render(<Register />, { wrapper: BrowserRouter });
-        expect(screen.getByTestId('register')).toBeInTheDocument();
-        const h1 = screen.getByText(/VRMS/i);
-        const h2 = screen.getByText(/Volunteer Relationship Management System/i);
-        expect(h1).toBeInTheDocument();
-        expect(h2).toBeInTheDocument();
-    });
-
-    test('Should have input field and create acount button', () => {
-        render(<Register />, { wrapper: BrowserRouter });
-        expect(screen.getByPlaceholderText('Enter your email')).toBeInTheDocument();
-        expect(screen.getByText('Create Account')).toBeInTheDocument();
-    });
-
-    test('Should display error message when invalid email address is entered', () => {
-        render(<Register />, { wrapper: BrowserRouter });
-        userEvent.type(screen.getByPlaceholderText('Enter your email'), 'j4pioej;dsfasd');
-        expect(screen.getByRole('textbox')).toHaveValue('j4pioej;dsfasd');
-        fireEvent.click(screen.getByText('Create Account'));
-        expect(screen.getByTestId('error-msg')).toHaveTextContent('*Please enter a valid email address');
-    }); 
-
-
-
-
-
-
-
-
-});
\ No newline at end of file
diff --git a/client-mvp-04/src/routes/index.js b/client-mvp-04/src/routes/index.js
index aafb5a2b3..6bc957740 100644
--- a/client-mvp-04/src/routes/index.js
+++ b/client-mvp-04/src/routes/index.js
@@ -1,7 +1,7 @@
 import Home from '../components/home/home';
 import Dummy from '../components/dummy/dummy';
 import Error from '../components/error/error';
-import Register from '../components/register/register'; 
+import CreateAccountContainer from '../components/createAccount/createAccountContainer'; 
 import LoginContainer from '../components/login/loginContainer';
 
 import DevUiKit from '../utils/uiKit/uiKit';
@@ -29,9 +29,9 @@ export const Routes = [
     component: DevUiKit,
   },
   {
-    path: '/register',
-    key: 'create-account-link',
-    component: Register,
+    path: '/create-account',
+    key: 'create-account',
+    component: CreateAccountContainer,
   },
   {
     key: 'error',

From e0342bb52c3fbca482cfa45cdcd3c9f334a9544e Mon Sep 17 00:00:00 2001
From: Christopher Cross <cc28@alumni.princeton.edu>
Date: Mon, 16 Nov 2020 17:29:39 -0800
Subject: [PATCH 4/6] implement createAccount page

---
 backend/app.js                                |  1 -
 .../createAccount/createAccount.scss          | 25 +++---
 .../createAccount/createAccountContainer.js   | 10 +--
 .../createAccount/createAccountView.js        | 84 +++++++++----------
 .../createAccount/createAccountView.test.js   |  3 +-
 5 files changed, 61 insertions(+), 62 deletions(-)

diff --git a/backend/app.js b/backend/app.js
index fdc0cdc62..3feec3222 100644
--- a/backend/app.js
+++ b/backend/app.js
@@ -7,7 +7,6 @@ const cron = require("node-cron");
 const fetch = require("node-fetch");
 const morgan = require('morgan');
 const cookieParser = require("cookie-parser");
-const cors = require('cors');
 
 const customRequestHeaderName = 'x-customrequired-header';
 const dontCheckCustomRequestHeaderApis = ["GET::/api/recurringevents"];
diff --git a/client-mvp-04/src/components/createAccount/createAccount.scss b/client-mvp-04/src/components/createAccount/createAccount.scss
index 5fc354b07..d90954c48 100644
--- a/client-mvp-04/src/components/createAccount/createAccount.scss
+++ b/client-mvp-04/src/components/createAccount/createAccount.scss
@@ -1,16 +1,21 @@
 @import "../../sass/variables";
 
-.createAccount-container {
+.create-account-container {
   padding: 40px 60px;
 
   .text-field-container {
     margin-top: 76px;
   }
 
-  .createAccount-button {
+  .create-account-button {
     margin: 50px auto 20px auto;
-    color: blue;
-    
+    color: $accent-royal-blue-color;  
+    line-height: 18px;
+    font-weight: $font-bold;
+  }
+
+  .create-account-button:disabled {
+    background-color: white;
   }
 
   .error-message {
@@ -23,16 +28,16 @@
 }
 
 @media (max-height: 896px) {
-  .createAccount-container {
+  .create-account-container {
     height: calc(100vh - 160px);
   }
 }
 
 @media (max-width: 400px) {
-  .createAccount-container {
+  .create-account-container {
     padding: 25px 52px;
 
-    .createAccount-button {
+    .create-account-button {
       margin: 40px 0 20px auto;
     }
 
@@ -47,19 +52,19 @@
 }
 
 @media (max-width: 374px) {
-  .createAccount-container {
+  .create-account-container {
     height: calc(100vh - 180px);
   }
 }
 
 @media (max-width: 350px) {
-  .createAccount-container {
+  .create-account-container {
     padding: 15px 25px;
 
     .text-field-container {
       margin-top: 25px;
     }
-    .createAccount-button {
+    .create-account-button {
       margin: 15px 0 10px auto;
     }
     .error-message {
diff --git a/client-mvp-04/src/components/createAccount/createAccountContainer.js b/client-mvp-04/src/components/createAccount/createAccountContainer.js
index f6e18b2ce..286862cfe 100644
--- a/client-mvp-04/src/components/createAccount/createAccountContainer.js
+++ b/client-mvp-04/src/components/createAccount/createAccountContainer.js
@@ -1,9 +1,7 @@
 import React, { useState } from 'react';
 import CreateAccountView from './createAccountView';
-import { connect } from 'react-redux';
 import { Email } from '../../utils/validation';
 import UserService from '../../services/user.service';
-import { setUser } from '../../store/actions/userActions';
 
 const CreateAccountContainer = (props) => {
   // Local UI State
@@ -27,13 +25,11 @@ const CreateAccountContainer = (props) => {
       setIsEmailValid(true);
       setErrorMsgInvalidEmail(false);
       const userData = await UserService.getData(userEmail);
-      if ( ! userData ) {
-        // user is not registered in app, redirect to dummny page 
+      if ( !userData ) {
+        // user is not registered in app, redirect to dummy page 
         props.history.push('/page');
       } else {
-        // user is already registered in app, update global state in store
         setErrorMsgRegisteredEmail(true);
-        props.dispatch(setUser(userData));
       }
     } else {
       setIsEmailValid(false);
@@ -53,4 +49,4 @@ const CreateAccountContainer = (props) => {
   );  
 };
 
-export default CreateAccountContainer; 
\ No newline at end of file
+export default CreateAccountContainer; 
diff --git a/client-mvp-04/src/components/createAccount/createAccountView.js b/client-mvp-04/src/components/createAccount/createAccountView.js
index ed64f2922..748b87f11 100644
--- a/client-mvp-04/src/components/createAccount/createAccountView.js
+++ b/client-mvp-04/src/components/createAccount/createAccountView.js
@@ -8,51 +8,51 @@ import RedirectLink from '../common/link/link';
 
 
 const CreateAccountView = ({
-    handleSubmitForm,
-    handleInputChange,
-    isDisabled,
-    isEmailValid,
-    errorMsgInvalidEmail,
-    errorMsgRegisteredEmail,
+  handleSubmitForm,
+  handleInputChange,
+  isDisabled,
+  isEmailValid,
+  errorMsgInvalidEmail,
+  errorMsgRegisteredEmail,
 }) => {
-    return (
-        <section data-testid="createAccount" className="createAccount-container">
-        <Title />
-  
-        <form data-testid="createAccount-form" onSubmit={(e) => handleSubmitForm(e)}>
-          <Input
-            dataTestid="createAccount-input"
-            placeholder={'Enter your email'}
-            type={'email'}
-            onChange={(e) => handleInputChange(e)}
-            autoComplete={'email'}
-          />
-  
-          <Button
-            type={'submit'}
-            content={`Create Account`}
-            className={'createAccount-button'}
-            disabled={isDisabled}
+  return (
+    <section data-testid="createAccount" className="create-account-container">
+      <Title />
+
+      <form data-testid="create-account-form" onSubmit={(e) => handleSubmitForm(e)}>
+        <Input
+          dataTestid="create-account-input"
+          placeholder={'Enter your email'}
+          type={'email'}
+          onChange={(e) => handleInputChange(e)}
+          autoComplete={'email'}
+        />
+
+        <Button
+          type={'submit'}
+          content={`Create Account`}
+          className={'create-account-button'}
+          disabled={isDisabled}
+        />
+      </form>
+
+      {!isEmailValid && errorMsgInvalidEmail ? (
+        <ErrorMessage content={'*Please enter a valid email address'} />
+      ) : null}
+
+      {errorMsgRegisteredEmail ? (
+        <p className={'error-message'}>
+          *You already have an account for that email address. Want to
+          <RedirectLink
+            path={'/login'}
+            linkKey={'login'}
+            content={' log in'}
           />
-        </form>
-  
-        {!isEmailValid && errorMsgInvalidEmail ? (
-          <ErrorMessage content={'*Please enter a valid email address'} />
-        ) : null}
-  
-        {errorMsgRegisteredEmail ? (
-          <p className={'error-message'}>
-            *You already have an account for that email address. Want to
-            <RedirectLink
-              path={'/login'}
-              linkKey={'login'}
-              content={' log in'}
-            />
             ?
-          </p>
-        ) : null}
-      </section>
-    );
+        </p>
+      ) : null}
+    </section>
+  );
 };
 
 export default CreateAccountView;
diff --git a/client-mvp-04/src/components/createAccount/createAccountView.test.js b/client-mvp-04/src/components/createAccount/createAccountView.test.js
index 388622593..e0ab2280a 100644
--- a/client-mvp-04/src/components/createAccount/createAccountView.test.js
+++ b/client-mvp-04/src/components/createAccount/createAccountView.test.js
@@ -63,5 +63,4 @@ describe('createAccount', () => {
 
         expect(screen.getByText('*Please enter a valid email address')).toBeInTheDocument();
     }); 
-
-});
\ No newline at end of file
+});

From 601af59c21f5f7aca0b66a3b95996d129e382a27 Mon Sep 17 00:00:00 2001
From: OlgaBelogurova <obelogurova2@gmail.com>
Date: Mon, 16 Nov 2020 18:05:38 -0800
Subject: [PATCH 5/6] Change styles for disable button

---
 client-mvp-04/src/components/createAccount/createAccount.scss | 4 ----
 client-mvp-04/src/sass/elements/_buttons.scss                 | 4 +++-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/client-mvp-04/src/components/createAccount/createAccount.scss b/client-mvp-04/src/components/createAccount/createAccount.scss
index d90954c48..f39b79416 100644
--- a/client-mvp-04/src/components/createAccount/createAccount.scss
+++ b/client-mvp-04/src/components/createAccount/createAccount.scss
@@ -14,10 +14,6 @@
     font-weight: $font-bold;
   }
 
-  .create-account-button:disabled {
-    background-color: white;
-  }
-
   .error-message {
     margin: 25px 10px 10px;
 
diff --git a/client-mvp-04/src/sass/elements/_buttons.scss b/client-mvp-04/src/sass/elements/_buttons.scss
index 52f881ef2..e05c677af 100644
--- a/client-mvp-04/src/sass/elements/_buttons.scss
+++ b/client-mvp-04/src/sass/elements/_buttons.scss
@@ -19,7 +19,9 @@ button {
     background-color: $concrete-color;
   }
   &:disabled {
-    background-color: $silver-color;
+    border-color: $silver-color !important;
+    background-color: $button-primary-bg-color !important;
+    color: $gray-color !important;
     cursor: default;
   }
 }

From c0bf16f323fed5b1f6c25964e3dcbda58f68919c Mon Sep 17 00:00:00 2001
From: OlgaBelogurova <obelogurova2@gmail.com>
Date: Mon, 16 Nov 2020 18:35:06 -0800
Subject: [PATCH 6/6] Make tests working, code formatting

---
 .../createAccount/createAccountView.js        | 19 +++--
 .../createAccount/createAccountView.test.js   | 85 ++++++-------------
 2 files changed, 37 insertions(+), 67 deletions(-)

diff --git a/client-mvp-04/src/components/createAccount/createAccountView.js b/client-mvp-04/src/components/createAccount/createAccountView.js
index 748b87f11..6ccf8e8e9 100644
--- a/client-mvp-04/src/components/createAccount/createAccountView.js
+++ b/client-mvp-04/src/components/createAccount/createAccountView.js
@@ -6,7 +6,6 @@ import Input from '../common/input/input';
 import ErrorMessage from '../common/errorMessage/errorMessage';
 import RedirectLink from '../common/link/link';
 
-
 const CreateAccountView = ({
   handleSubmitForm,
   handleInputChange,
@@ -16,10 +15,16 @@ const CreateAccountView = ({
   errorMsgRegisteredEmail,
 }) => {
   return (
-    <section data-testid="createAccount" className="create-account-container">
+    <section
+      data-testid="create-account-container"
+      className="create-account-container"
+    >
       <Title />
 
-      <form data-testid="create-account-form" onSubmit={(e) => handleSubmitForm(e)}>
+      <form
+        data-testid="create-account-form"
+        onSubmit={(e) => handleSubmitForm(e)}
+      >
         <Input
           dataTestid="create-account-input"
           placeholder={'Enter your email'}
@@ -43,12 +48,8 @@ const CreateAccountView = ({
       {errorMsgRegisteredEmail ? (
         <p className={'error-message'}>
           *You already have an account for that email address. Want to
-          <RedirectLink
-            path={'/login'}
-            linkKey={'login'}
-            content={' log in'}
-          />
-            ?
+          <RedirectLink path={'/login'} linkKey={'login'} content={' log in'} />
+          ?
         </p>
       ) : null}
     </section>
diff --git a/client-mvp-04/src/components/createAccount/createAccountView.test.js b/client-mvp-04/src/components/createAccount/createAccountView.test.js
index e0ab2280a..cd4f5d783 100644
--- a/client-mvp-04/src/components/createAccount/createAccountView.test.js
+++ b/client-mvp-04/src/components/createAccount/createAccountView.test.js
@@ -1,66 +1,35 @@
 import React from 'react';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import { cleanup, render, screen } from '@testing-library/react';
 import CreateAccountView from './createAccountView';
 import { BrowserRouter } from 'react-router-dom';
-import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
-import userEvent from '@testing-library/user-event'
 
 afterEach(cleanup);
 
-describe('createAccount', () => {
+describe('Create Account', () => {
+  test('Should render component with props', () => {
+    const props = {
+      handleSubmitForm: () => {},
+      handleInputChange: () => {},
+      isDisabled: true,
+      isEmailValid: false,
+      errorMsgInvalidEmail: false,
+      errorMsgRegisteredEmail: false,
+    };
 
-    test('Should render component with props', () => {
-        const props = {
-          handleSubmitForm: () => {},
-          handleInputChange: () => {},
-          isDisabled: true,
-          isEmailValid: false,
-          errorMsgInvalidEmail: false,
-          errorMsgRegisteredEmail: false,
-        };
-    
-        render(
-          <CreateAccountView
-            handleSubmitForm={props.handleSubmitForm}
-            handleInputChange={props.handleInputChange}
-            isDisabled={props.isDisabled}
-            isEmailValid={props.isEmailValid}
-            errorMsgInvalidEmail={props.errorMsgInvalidEmail}
-            errorMsgFailedEmail={props.errorMsgRegisteredEmail}
-          />,
-          { wrapper: BrowserRouter }
-        );
-    
-        expect(screen.getByTestId('createAccount')).toBeInTheDocument();
-        expect(screen.getByTestId('createAccount-form')).toBeInTheDocument();
-        expect(screen.getByTestId('createAccount-input')).toBeInTheDocument();
-        expect(screen.getByText('Create Account')).toBeInTheDocument();
-      });
-
-
-    test('Should display error message when invalid email address is entered', () => {
-        const props = {
-            handleSubmitForm: () => {},
-            handleInputChange: () => {},
-            isDisabled: true,
-            isEmailValid: false,
-            errorMsgInvalidEmail: true,
-            errorMsgRegisteredEmail: false,
-          };
-      
-          render(
-            <CreateAccountView
-              handleSubmitForm={props.handleSubmitForm}
-              handleInputChange={props.handleInputChange}
-              isDisabled={props.isDisabled}
-              isEmailValid={props.isEmailValid}
-              errorMsgInvalidEmail={props.errorMsgInvalidEmail}
-              errorMsgFailedEmail={props.errorMsgRegisteredEmail}
-            />,
-            { wrapper: BrowserRouter }
-          );
-
-        expect(screen.getByText('*Please enter a valid email address')).toBeInTheDocument();
-    }); 
+    render(
+      <CreateAccountView
+        handleSubmitForm={props.handleSubmitForm}
+        handleInputChange={props.handleInputChange}
+        isDisabled={props.isDisabled}
+        isEmailValid={props.isEmailValid}
+        errorMsgInvalidEmail={props.errorMsgInvalidEmail}
+        errorMsgFailedEmail={props.errorMsgRegisteredEmail}
+      />,
+      { wrapper: BrowserRouter }
+    );
+    expect(screen.getByTestId('create-account-container')).toBeInTheDocument();
+    expect(screen.getByTestId('create-account-form')).toBeInTheDocument();
+    expect(screen.getByTestId('create-account-input')).toBeInTheDocument();
+    expect(screen.getByText('Create Account')).toBeInTheDocument();
+  });
 });