Merge pull request #2 from myoungerman/dev

Dev

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "nanoid": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.css

@@ -1,5 +1,38 @@
 .app {
     width: 375px;
-    justify-content: center;
     display: flex;
   }
+
+body {
+  font-family: 'Inter', sans-serif;
+  font-size: 1rem;
+}
+
+p {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+label {
+  font-weight: 600;
+  font-size: .875rem;
+  margin-left: 10px;
+  line-height: 36px;
+}
+
+::placeholder {
+  padding-left: 12px;
+  font-family: 'Inter', sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: .75rem;
+  line-height: 36px;
+  color: #9CA3AF;
+}
+
+input {
+    width: 327px;
+    height: 48px;
+    border: 1px solid #BEC5D1;
+    border-radius: 12px;
+}

src/App.js

@@ -2,22 +2,19 @@ import './App.css';
 import Onboarding from './components/Onboarding';
 import React from 'react';
 import Registration from './components/Registration';
+import Password from './components/Password';
 
 function App() {
 
+  // Tracks the 3 introductory pages.
   const [currPage, setCurrPage] = React.useState(0);
-  const [clickedLoginOrRegister, setClickedLoginOrRegister] = React.useState("");
-  const [accountInfo, setAccountInfo] = React.useState({
-    name: "",
-    email: "",
-    password: ""
-  });
+  const [areCredentialsValid, setAreCredentialsValid] = React.useState(false);
 
   const pageContent = [
     {
       image: "https://i.postimg.cc/v8nFMkrK/tracking-and-maps.png",
       header: "Nearby restaurants",
-      body: "You don't have to go far to find a good restaurant. We have provided all the restaurants that are near you."
+      body: "You don't have to go far to find a good restaurant. We list all the restaurants that are near you."
     },
     {
       image: "https://i.postimg.cc/rpQS2ppk/order-illustration.png",
@@ -46,12 +43,8 @@ function App() {
       header={pageContent[currPage].header}
       body={pageContent[currPage].body}
       /> */}
-      <Registration
-      setClickedLoginOrRegister={setClickedLoginOrRegister}
-      clickedLoginOrRegister={clickedLoginOrRegister}
-      accountInfo={accountInfo}
-      setAccountInfo={setAccountInfo}
-      />
+      {/* {!areCredentialsValid && <Registration setAreCredentialsValid={setAreCredentialsValid} />} */}
+      <Password />
     </div>
   );
 }

src/components/Button.css

@@ -24,8 +24,6 @@
     height: 49px;
     border-radius: 12px;
     border: none;
-    font-family: 'Inter', sans-serif;
-    font-style: normal;
     font-weight: 700;
     font-size: .875rem;
     padding: 0px;

src/components/CreateAccount.css

@@ -55,4 +55,14 @@ input:not(:last-child) {
     width: 148px;
     height: .5px;
     border: none;
-}  
+}
+
+#createaccount--container input[type=text] {
+    padding-top: 6px;
+    padding-bottom: 6px;
+    padding-left: 12px;
+    font-family: 'Inter', sans-serif;
+    font-style: normal;
+    font-weight: 500;
+    font-size: .875rem;
+}

src/components/CreateAccount.js

@@ -4,37 +4,59 @@ import Button from "./Button";
 
 export default function CreateAccount(props) {
 
-    let inputsAreFilled = props.accountInfo.name && props.accountInfo.email && props.accountInfo.password;
+    const [accountInfo, setAccountInfo] = React.useState({
+        name: "",
+        email: "",
+        password: ""
+      }); 
+
+    let inputsAreFilled = accountInfo.name && accountInfo.email && accountInfo.password;
 
     function submitRegistrationForm(event) {
        event.preventDefault();
-       validateInputs(props.accountInfo);
-    }
-
-    function validateInputs(accountInfo) {
-        if (!accountInfo.email.includes("@")) {
-            return
-         }
+       let isValidInput = validateInputs(accountInfo);
+       if (isValidInput) {addUserToDB()};
     }
 
-    function handleChange(event) {
+    function handleInputChange(event) {
         const {name, value} = event.target;
 
-        // if all inputs are truthy, set button class to green active
-
-        props.setAccountInfo((prevInfo) => {
+        setAccountInfo((prevInfo) => {
             return {...prevInfo, [name]: value};
         });
     }
 
+    function addUserToDB() {
+        // This uses a mock DB, so it doesn't include authorization. If I add a real DB later on, I'll add authorization logic.
+        fetch("http://localhost:4000/users",{
+            method: 'POST',
+            headers:{
+            'Content-Type':'application/json'
+            },
+            body: JSON.stringify(accountInfo)
+        }).then(() => {
+            props.setWasAccountCreated(true);
+        }, (err) => {
+            console.log(err);
+        });
+    }
+
+    function validateInputs(accountInfo) {
+        if (accountInfo.email.includes("@")) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
     return (
         <form id="createaccount--container" onSubmit={submitRegistrationForm}>
             <label>Full Name</label>
-            <input type="text" id="create-acct--full-name" name="name" placeholder="Enter your full name" defaultValue={props.accountInfo.name} onChange={handleChange}></input>
+            <input type="text" id="create-acct--full-name" name="name" placeholder="Enter your full name" defaultValue={accountInfo.name} onChange={handleInputChange}></input>
             <label >Email Address</label>
-            <input type="text" id="create-acct--email" name="email" placeholder="Enter your email" defaultValue={props.accountInfo.email} onChange={handleChange}></input>
+            <input type="text" id="create-acct--email" name="email" placeholder="Enter your email" defaultValue={accountInfo.email} onChange={handleInputChange}></input>
             <label>Password</label>
-            <input type="password" id="create-acct--password" name="password" placeholder="**** **** ****" defaultValue={props.accountInfo.password} onChange={handleChange}></input>
+            <input type="password" id="create-acct--password" name="password" placeholder="**** **** ****" defaultValue={accountInfo.password} onChange={handleInputChange}></input>
             <Button className={`btn--rounded ${inputsAreFilled ? "btn--dark-green" : "disabled"}`} type="submit">Register</Button>
             <hr className="line-between-buttons"></hr>
             <Button className="btn--rounded" ><img src="https://i.postimg.cc/RZ3crqSf/icon-google.png"></img>Sign up with Google</Button>

src/components/Login.css

@@ -16,17 +16,10 @@
     vertical-align: middle;
 }
 
-input:not(:last-child) {
+#login--container input:not(:last-child) {
     margin-bottom: 8px;
 }
 
-#login--container input {
-    width: 327px;
-    height: 48px;
-    border: 1px solid #BEC5D1;
-    border-radius: 12px;
-}
-
 #login--container Button {
     margin-left: 30px;
 }
@@ -43,7 +36,6 @@ input:not(:last-child) {
     font-size: .75rem;
     line-height: 36px;
     color: #9CA3AF;
-
   }
 
 .line-between-buttons {

src/components/Login.js

@@ -2,15 +2,43 @@ import React from "react";
 import Button from "./Button";
 import './Login.css'
 
-export default function Login() {
+export default function Login(props) {
+
+    const [loginInfo, setLoginInfo] = React.useState({
+        email: "",
+        password: ""
+    });
+
+    let inputsAreFilled = loginInfo.email && loginInfo.password;
+
+    function handleInputChange(event) {
+        const {name, value} = event.target;
+
+        setLoginInfo((prevInfo) => {
+            return {...prevInfo, [name]: value};
+        });
+    };
+
+    async function checkDBForLoginInfo(event) {
+        event.preventDefault();
+        const response = await fetch("http://localhost:4000/users");
+        const data = await response.json();
+
+        data.forEach(userObj => {
+            if (userObj.email === loginInfo.email && userObj.password === loginInfo.password) {
+                props.setAreCredentialsValid(true);
+            }
+        });
+    }
+
     return (
-    <form id="login--container">
+    <form id="login--container" onSubmit={checkDBForLoginInfo}>
         <label >Email Address</label>
-        <input type="text" id="login--email" name="email" placeholder="Enter your email"></input>
+        <input type="text" id="login--email" name="email" placeholder="Enter your email" defaultValue={loginInfo.email} onChange={handleInputChange}></input>
         <label>Password</label>
-        <input type="password" id="login--password" name="password" placeholder="**** **** ****"></input>
+        <input type="password" id="login--password" name="password" placeholder="**** **** ****" defaultValue={loginInfo.password} onChange={handleInputChange}></input>
         <p className="password-text">Forget password?</p>
-        <Button className="btn--rounded disabled">Login</Button>
+        <Button className={`btn--rounded ${inputsAreFilled ? "btn--dark-green" : "disabled"}`} type="submit">Login</Button>
         <hr className="line-between-buttons"></hr>
         <Button className="btn--rounded" ><img src="https://i.postimg.cc/RZ3crqSf/icon-google.png"></img>Login with Google</Button>
     </form>