From 13b8e11d6fde7e57053a290f9917fd4da7b8ab6d Mon Sep 17 00:00:00 2001
From: morahgeist <114309093+morahgeist@users.noreply.github.com>
Date: Thu, 6 Jul 2023 07:40:11 -0700
Subject: [PATCH] overlay working

---
 Client/components/login.jsx      | 98 +++++++++++++++++---------------
 Client/components/signup.jsx     | 88 +++++++++++++++-------------
 Client/stylesheets/_flexios.scss | 13 +++++
 3 files changed, 112 insertions(+), 87 deletions(-)

diff --git a/Client/components/login.jsx b/Client/components/login.jsx
index 73faa83..028b740 100644
--- a/Client/components/login.jsx
+++ b/Client/components/login.jsx
@@ -1,53 +1,57 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import * as actions from '../actionCreator/actionCreator.js'
+import * as actions from '../actionCreator/actionCreator.js';
 
 const login = () => {
-    const dispatch = useDispatch();
-    
-    const loginFunc = (event) => {
-        event.preventDefault()
-        const un = document.getElementById('usernameLogin').value;
-        const pw = document.getElementById('passwordLogin').value;
-        
-        const loginObj = {
-            username : un,
-            password : pw
+  const dispatch = useDispatch();
+
+  const loginFunc = (event) => {
+    event.preventDefault();
+    const un = document.getElementById('usernameLogin').value;
+    const pw = document.getElementById('passwordLogin').value;
+
+    const loginObj = {
+      username: un,
+      password: pw,
+    };
+
+    console.log(loginObj);
+
+    fetch('http://localhost:3000/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(loginObj),
+    })
+      .then((data) => data.json())
+      .then((data) => {
+        if (!data.err) {
+          console.log(data);
+          // Do something
+          // change logged in user state with the returned userState
+          dispatch(actions.updateUSER_LOG_ON(data));
+
+          // disable opacity
+          document.getElementById('overlay').style.display = 'none';
+        } else {
+          alert(data.err);
         }
+      })
+      .catch((error) => alert(error));
+  };
+
+  return (
+    <div>
+      <form>
+        <input type="text" id="usernameLogin" placeholder="Username"></input>
+        <input
+          type="password"
+          id="passwordLogin"
+          placeholder="Password"
+        ></input>
+        <button onClick={(event) => loginFunc(event)}>Login</button>
+      </form>
+    </div>
+  );
+};
 
-        console.log(loginObj)
-
-        fetch('http://localhost:3000/login', {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify(loginObj)
-        })
-            .then( data => data.json())
-            .then( data => {
-                if (!data.err) {
-                    console.log(data)
-                    // Do something
-                    // change logged in user state with the returned userState
-                    dispatch(actions.updateUSER_LOG_ON(data))
-
-                    // disable opacity
-                    document.getElementById("overlay").style.display = 'none'
-                } else {
-                    alert(data.err)
-                }
-            })
-            .catch(error => alert(error))
-    }
-
-    return(
-        <div>
-            <form>
-                <input type='text' id='usernameLogin' placeholder='Username'></input>
-                <input type='password' id='passwordLogin' placeholder='Password'></input>
-                <button onClick={event => loginFunc(event)}>Login</button>
-            </form>
-        </div>
-    )
-}
-
-export default login;
\ No newline at end of file
+export default login;
diff --git a/Client/components/signup.jsx b/Client/components/signup.jsx
index 9d53898..1a3e207 100644
--- a/Client/components/signup.jsx
+++ b/Client/components/signup.jsx
@@ -1,48 +1,56 @@
 import React from 'react';
-import { useDispatch } from 'react-redux'
-import * as actions from '../actionCreator/actionCreator.js'
+import { useDispatch } from 'react-redux';
+import * as actions from '../actionCreator/actionCreator.js';
 
 const signup = () => {
-    const dispatch = useDispatch();
+  const dispatch = useDispatch();
 
-    const signupFunc = (event) => {
-        event.preventDefault();
-        const username = document.getElementById('usernameSignup').value;
-        const password1 = document.getElementById('passwordSignup').value;
-        const password2 = document.getElementById('passwordSignupConfirm').value;
+  const signupFunc = (event) => {
+    event.preventDefault();
+    const username = document.getElementById('usernameSignup').value;
+    const password1 = document.getElementById('passwordSignup').value;
+    const password2 = document.getElementById('passwordSignupConfirm').value;
 
-        // check if passwords match
-        if (password1 !== password2) {
-            return alert("Sign up passwords do not match");
-        }
-
-        fetch('http://localhost:3000/user', {
-            method: "POST",
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({username, password: password1})
-        })
-            .then( data => data.json())
-            .then( data => {
-                // if there is an error object
-                if (data.err) alert(data.err);
-                // update logged in user
-                dispatch(actions.updateUSER_LOG_ON(data));
-                // disable opacity
-                document.getElementById("overlay").style.display = 'none'
-            })
-            .catch(error => alert(error));
+    // check if passwords match
+    if (password1 !== password2) {
+      return alert('Sign up passwords do not match');
     }
 
-    return (
-        <div>
-            <form>
-                <input type='text' id='usernameSignup' placeholder='Username'></input>
-                <input type='password' id='passwordSignup' placeholder='Password'></input>
-                <input type='password' id='passwordSignupConfirm' placeholder='Confirm Password'></input>
-                <button onClick={event => signupFunc(event)}>Login</button>
-            </form>
-        </div>
-    )
-}
+    fetch('http://localhost:3000/user', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username, password: password1 }),
+    })
+      .then((data) => data.json())
+      .then((data) => {
+        // if there is an error object
+        if (data.err) alert(data.err);
+        // update logged in user
+        dispatch(actions.updateUSER_LOG_ON(data));
+        // disable opacity
+        document.getElementById('overlay').style.display = 'none';
+      })
+      .catch((error) => alert(error));
+  };
+
+  return (
+    <div>
+      <form>
+        <input type="text" id="usernameSignup" placeholder="Username"></input>
+        <input
+          type="password"
+          id="passwordSignup"
+          placeholder="Password"
+        ></input>
+        <input
+          type="password"
+          id="passwordSignupConfirm"
+          placeholder="Confirm Password"
+        ></input>
+        <button onClick={(event) => signupFunc(event)}>Sign Up</button>
+      </form>
+    </div>
+  );
+};
 
-export default signup
\ No newline at end of file
+export default signup;
diff --git a/Client/stylesheets/_flexios.scss b/Client/stylesheets/_flexios.scss
index e89efde..6cb5239 100644
--- a/Client/stylesheets/_flexios.scss
+++ b/Client/stylesheets/_flexios.scss
@@ -101,3 +101,16 @@ li:last-child {
   margin-right: 5px;
   margin-bottom: 10px;
 }
+#overlay {
+  position: fixed;
+  display: block;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: black;
+  z-index: 2;
+  cursor: pointer;
+}