Ivy/new

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;

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;

client/src/containers/MainContainer/MainContainer.jsx

@@ -1,17 +1,62 @@
-import React from 'react';
 
-//  importing  child components
+import React, {useState} from 'react';
 import Sidebar from '../Sidebar/Sidebar.jsx';
-
-//  importing styles
 import styles from './MainContainer.module.scss';
+import Login from '../../components/userStart/Login.jsx';
+import Signup from '../../components/userStart/Signup.jsx';
+
+const MainContainer = () =>{
+
+  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>
+    );
 
-const MainContainer = () => {
-  return (
-    <div className={styles.container}>
-      <Sidebar />
-    </div>
-  );
 };
 
 export default MainContainer;

client/src/containers/Sidebar/Sidebar.jsx

@@ -15,7 +15,7 @@ import styles from './Sidebar.module.scss';
 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);

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;
 }