From d0f9df995e41ea0b351743bdb36205ad5d5dab0a Mon Sep 17 00:00:00 2001
From: Wan Wang <wanwangbtb@gmail.com>
Date: Tue, 16 May 2023 19:02:43 -0400
Subject: [PATCH] added login component and signup component

---
 client/src/components/userStart/Login.jsx     | 31 ++++++++++
 client/src/components/userStart/Signup.jsx    | 22 +++++++
 .../MainContainer/MainContainer.jsx           | 60 ++++++++++++++++---
 client/src/containers/Sidebar/Sidebar.jsx     |  2 +-
 client/src/scss/_global.scss                  | 55 +++++++++++++++++
 5 files changed, 162 insertions(+), 8 deletions(-)
 create mode 100644 client/src/components/userStart/Login.jsx
 create mode 100644 client/src/components/userStart/Signup.jsx

diff --git a/client/src/components/userStart/Login.jsx b/client/src/components/userStart/Login.jsx
new file mode 100644
index 0000000..9169c07
--- /dev/null
+++ b/client/src/components/userStart/Login.jsx
@@ -0,0 +1,31 @@
+import React, {useState} from 'react';
+
+
+
+// eslint-disable-next-line react/prop-types
+const Login = ({handleLogin, handleHaveAccount}) => {
+
+
+
+  return (
+    <div className='login'>
+      <div id='loginBox'>
+        <h1>USER LOGIN</h1>
+        <form action="/action_page.php" className='form'>
+          <div className="form-group">
+            <label htmlFor="username ">Username:</label>
+            <input id='username' className="form-group" type="text"placeholder='username...'/>
+          </div>
+          <div className="form-group">
+            <label htmlFor="password">Password:</label>
+            <input id='password' className="form-group" type="password" placeholder='password...'/>
+          </div>
+          <button onClick={handleLogin} type='submit' className='btn btn-default' id='go'>Go</button>
+        </form>
+      </div>
+      <button onClick={handleHaveAccount} type='submit' className='btn btn-default' > Don't have an account yet? Create yours here!</button>
+    </div>
+  );
+};
+
+export default Login;
diff --git a/client/src/components/userStart/Signup.jsx b/client/src/components/userStart/Signup.jsx
new file mode 100644
index 0000000..c3be27e
--- /dev/null
+++ b/client/src/components/userStart/Signup.jsx
@@ -0,0 +1,22 @@
+import React, {useState} from 'react';
+
+// eslint-disable-next-line react/prop-types
+const Signup = ({handleSigned}) => {
+  return (
+    <form action="/action_page.php" className='signup'>
+      <h2>Create Your Account Here</h2>
+      <div className="form-group">
+        <label htmlFor="user">Username: </label>
+        <input type="text" className="form-control" id="user" />
+      </div>
+      <div className="form-group">
+        <label htmlFor="pwd">Password:</label>
+        <input type="password" className="form-control" id="pwd" />
+      </div> 
+      <button id='submit' onClick={handleSigned} type="submit" className="btn btn-default">Submit</button>
+    </form>
+   
+  );
+};
+
+export default Signup;
diff --git a/client/src/containers/MainContainer/MainContainer.jsx b/client/src/containers/MainContainer/MainContainer.jsx
index 2954daf..8623a85 100644
--- a/client/src/containers/MainContainer/MainContainer.jsx
+++ b/client/src/containers/MainContainer/MainContainer.jsx
@@ -1,14 +1,60 @@
-import React from 'react';
+import React, {useState} from 'react';
 import Sidebar from '../Sidebar/Sidebar.jsx';
 import styles from './MainContainer.module.scss';
-
+import Login from '../../components/userStart/Login.jsx';
+import Signup from '../../components/userStart/Signup.jsx';
 
 const MainContainer = () =>{
-    return (
-    <div className={styles.container}>
-      <Sidebar />
-    </div>
+
+  const [login, setLogin] = useState(false);
+  const [haveAccount,setHaveAccount] = useState(true);
+
+  const handleLogin = (e) => {
+    e.preventDefault();
+    const usernameInputValue = document.getElementById('username').value;
+    document.getElementById('username').value = '';
+    const passwordInputValue = document.getElementById('password').value;
+    document.getElementById('password').value = '';
+
+    // fetch(URLtoGetUser, {
+    //   method: 'POST',
+    //   headers: {
+    //     'Content-Type': 'application/json',
+    //   },
+    //   body: JSON.stringify({
+    //     username: usernameInputValue,
+    //     password: passwordInputValue,
+    //   }),
+    // })
+    //   .then((result) => result.json())
+    //   .then((result) => {
+    //     console.log('result is: ', result);
+    //   })
+    //   .catch((err) => {
+    //     console.log(err);
+    //   });
+
+    setLogin(true);
+  };
+
+  const handleHaveAccount = () => setHaveAccount(false);
+  const handleSigned = () => setHaveAccount(true);
+  
+
+  return login ? 
+    (
+      <div className={styles.container}>
+        <Sidebar />
+      </div>
+    ) : haveAccount ?  (
+      <div className={styles.container}>
+        <Login handleLogin={handleLogin} handleHaveAccount={handleHaveAccount}/>
+      </div>
+    ) : (
+      <div className={styles.container}>
+        <Signup handleSigned={handleSigned} /> 
+      </div>
     );
-}
+};
 
 export default MainContainer;
\ No newline at end of file
diff --git a/client/src/containers/Sidebar/Sidebar.jsx b/client/src/containers/Sidebar/Sidebar.jsx
index 7177f59..f545c1d 100644
--- a/client/src/containers/Sidebar/Sidebar.jsx
+++ b/client/src/containers/Sidebar/Sidebar.jsx
@@ -7,7 +7,7 @@ import { Card, Spinner } from 'react-bootstrap';
 import arrow from '../../assets/arrow.png';
 import img from '../../assets/star nose mole.jpeg';
 
-const Sidebar = () => {
+const Sidebar = ({handleLogin}) => {
   const [snippets, setSnippets] = useState([]);
   const [selectedSnippet, setSelectedSnippet] = useState({});
   const [openModal, setOpenModal] = useState(false);
diff --git a/client/src/scss/_global.scss b/client/src/scss/_global.scss
index 0e76d3f..82290be 100644
--- a/client/src/scss/_global.scss
+++ b/client/src/scss/_global.scss
@@ -12,4 +12,59 @@ body {
 
 .entireSnippetDisplay {
   z-index: 50;
+}
+
+.login {
+  display: flex;
+  flex-direction: column;
+  min-height: 500px;
+  width: 60%;
+  margin: auto;
+  // margin-top: 300px;
+  justify-content: center;
+  align-items: center;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content:space-between;
+  align-items: flex-end;
+  margin-top: 20px;
+}
+
+#go {
+  margin-top: 20px;
+  width: 80px;
+  border: 1px solid green;
+  background-color: green;
+  border-radius: 10px;
+  color: white;
+}
+#submit {
+  margin-top: 20px;
+  width: 100px;
+  border: 1px solid green;
+  background-color: green;
+  border-radius: 10px;
+  color: white;
+}
+
+#loginBox {
+
+  height: 260px;
+  width: 500px;
+  border: 2px solid rgb(42, 41, 41);
+  display: flex;
+  justify-content: center;
+  align-items:center;
+  flex-direction: column;
+  border-radius: 12px;
+  border-style: double;
+}
+
+
+.signup {
+  width: 30%;
+  margin: auto;
 }
\ No newline at end of file