Code-Snippet-s · kyleslugg · May 18, 2023 · May 18, 2023 · May 18, 2023 · May 18, 2023
diff --git a/client/src/components/SnippetDisplay/SnippetDisplay.jsx b/client/src/components/SnippetDisplay/SnippetDisplay.jsx
@@ -12,14 +12,15 @@ import { langs } from '@uiw/codemirror-extensions-langs';
 
 //  importing utils
 import { Card, Button } from 'react-bootstrap';
+import { set } from 'mongoose';
 
 const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
   const defaultDisplayValues = {
     title: '',
     language: '',
     comments: '',
     storedCode: '',
-    tags: []
+    tags: [],
   };
 
   const [copied, setCopied] = useState(false);
@@ -30,9 +31,16 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
     setCurrentDisplay(selectedSnippet);
   }, [selectedSnippet, getSnippet]);
 
+  const handleCopy = () => {
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
+
   const deleteSnippet = (snippetId) => {
     fetch('/snippets?' + new URLSearchParams({ snippetId }), {
-      method: 'DELETE'
+      method: 'DELETE',
     })
       .then((response) => {
         if (response.ok) {
@@ -44,7 +52,7 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
         return {
           log: `SnippetDisiplay.deleteSnippet: Error: ${err}`,
           status: err.status,
-          message: 'There was an error deleting snippet.'
+          message: 'There was an error deleting snippet.',
         };
       });
   };
@@ -53,7 +61,7 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
     fetch(`/snippets?${new URLSearchParams({ snippetId })}`, {
       method: 'PUT',
       headers: { 'Content-type': 'application/json' },
-      body: JSON.stringify(currentDisplay)
+      body: JSON.stringify(currentDisplay),
     })
       .then((response) => {
         //Are we using this response anywhere? IF not, delete this.
@@ -68,66 +76,63 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
         return {
           log: `SnippetDisplay.editSnippet: Error: ${err}`,
           status: err.status,
-          message: 'There was an error editing code snippet.'
+          message: 'There was an error editing code snippet.',
         };
       });
   };
 
   const displayContent = (
     <div className={styles.entireSnippetDisplay}>
-      <div className="displayContainer">
+      <div className='displayContainer'>
         <div className={styles.displayRow}>
-          <div className="aspect-entry">
-            <span className="title"> Title: </span>
+          <div className='aspect-entry'>
+            <span className='title'> Title: </span>
             <input
               defaultValue={currentDisplay.title}
-              className="titleEdit"
+              className='titleEdit'
               onChange={(e) => {
                 if (editButtonState) {
                   setCurrentDisplay({
                     ...currentDisplay,
-                    title: e.target.value
+                    title: e.target.value,
                   });
                 }
-              }}
-            ></input>
+              }}></input>
           </div>
-          <div className="aspect-entry">
-            <span className="language"> Language: </span>
+          <div className='aspect-entry'>
+            <span className='language'> Language: </span>
             <input
               defaultValue={currentDisplay.language}
-              className="languageEdit"
+              className='languageEdit'
               onChange={(e) => {
                 if (editButtonState) {
                   setCurrentDisplay({
                     ...currentDisplay,
-                    language: e.target.value
+                    language: e.target.value,
                   });
                 }
-              }}
-            ></input>
+              }}></input>
           </div>
         </div>
         <div className={styles.displayRow}>
-          <div className="aspect-entry">
-            <span className="comments"> Comments: </span>
+          <div className='aspect-entry'>
+            <span className='comments'> Comments: </span>
             <input
               defaultValue={currentDisplay.comments}
-              className="commentsEdit"
+              className='commentsEdit'
               onChange={(e) => {
                 if (editButtonState) {
                   setCurrentDisplay({
                     ...currentDisplay,
-                    comments: e.target.value
+                    comments: e.target.value,
                   });
                 }
-              }}
-            ></input>
+              }}></input>
           </div>
         </div>
 
         <TagInput
-          className="tags display-row"
+          className='tags display-row'
           onChange={(e) => {
             if (editButtonState) {
               setCurrentDisplay({ ...currentDisplay, tags: e });
@@ -141,59 +146,56 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
 
       <CodeMirror
         className={styles.editor}
-        height="500px"
-        id="storedCode"
+        height='500px'
+        id='storedCode'
         value={currentDisplay.storedCode}
         extensions={[langs.tsx()]}
         //   placeholder={'const sayHi = () => {\n  console.log(\'Hello World!)\n}'}
         onChange={(e) => {
           setCurrentDisplay({ ...currentDisplay, storedCode: e });
-        }}
-      >
-        <CopyToClipboard
-          text={currentDisplay.storedCode}
-          onCopy={() => setCopied(true)}
-        >
-          <Button className={styles.addButton}> Copy Code Snippet </Button>
+        }}>
+        <CopyToClipboard text={currentDisplay.storedCode}>
+          <Button className={styles.addButton} onClick={handleCopy}>
+            {' '}
+            Copy Code Snippet{' '}
+          </Button>
         </CopyToClipboard>
+        {copied && <span>copied to clipboard!</span>}
       </CodeMirror>
     </div>
   );
 
   return (
     <React.Fragment>
-      <Card className={styles.card} id="right">
+      <Card className={styles.card} id='right'>
         {displayContent}
 
         <div className={styles.buttonDiv}>
           <Button
-            className="deleteButton"
+            className='deleteButton'
             onClick={() => {
               deleteSnippet(selectedSnippet._id);
-            }}
-          >
+            }}>
             Delete Snippet
           </Button>
           <Button
-            className="editButton"
+            className='editButton'
             onClick={() => {
               //editSnippet(selectedSnippet.id);
               editButtonState
                 ? setEditButtonState(false)
                 : setEditButtonState(true);
-            }}
-          >
+            }}>
             {editButtonState ? 'Close Editor' : 'Edit Snippet'}
           </Button>
           <Button
             style={{ display: editButtonState ? 'flex' : 'none' }}
-            className="saveEditButton"
+            className='saveEditButton'
             onClick={() => {
               console.dir(selectedSnippet);
               editSnippet(selectedSnippet._id);
               setEditButtonState(false);
-            }}
-          >
+            }}>
             Save Edit
           </Button>
         </div>
@@ -204,6 +206,6 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
 
 SnippetDisplay.propTypes = {
   selectedSnippet: PropTypes.object,
-  getSnippet: PropTypes.func
+  getSnippet: PropTypes.func,
 };
 export default SnippetDisplay;
diff --git a/client/src/components/userStart/Login.jsx b/client/src/components/userStart/Login.jsx
@@ -1,29 +1,48 @@
-import React, {useState} from 'react';
-
-
+import React, { useState } from 'react';
+import styles from './Login.module.scss';
 
 // eslint-disable-next-line react/prop-types
-const Login = ({handleLogin, handleHaveAccount}) => {
-
-
-
+const Login = ({ handleLogin, handleHaveAccount, style, error }) => {
   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>&nbsp; &nbsp;
-            <input id='username' className="form-group" type="text"placeholder='username...'/>
+        <form action='/action_page.php' className='form'>
+          <div className='form-group'>
+            <label htmlFor='username '>USERNAME:</label>&nbsp; &nbsp;
+            <input
+              id='username'
+              className={`form-group ${styles[style]}`}
+              type='text'
+              placeholder='username...'
+            />
           </div>
-          <div className="form-group" id='secondDiv'>
-            <label htmlFor="password">PASSWORD:</label>&nbsp; &nbsp;
-            <input id='password' className="form-group" type="password" placeholder='password...'/>
+          <div className='form-group' id='secondDiv'>
+            <label htmlFor='password'>PASSWORD:</label>&nbsp; &nbsp;
+            <input
+              id='password'
+              className={`form-group ${styles[style]}`}
+              type='password'
+              placeholder='password...'
+            />
           </div>
-          <button onClick={handleLogin} type='submit' className='btn btn-default' id='go'>GO</button>
+          <button
+            onClick={handleLogin}
+            type='submit'
+            className='btn btn-default'
+            id='go'>
+            GO
+          </button>
         </form>
+        {error && <p className={styles.p}>wrong username or password!</p>}
       </div>
-      <button id="bottomMessage" onClick={handleHaveAccount} type='submit' className='btn btn-default' >Click Me to Create Your Account!</button>
+      <button
+        id='bottomMessage'
+        onClick={handleHaveAccount}
+        type='submit'
+        className='btn btn-default'>
+        Click Me to Create Your Account!
+      </button>
     </div>
   );
 };

diff --git a/client/src/components/userStart/Login.module.scss b/client/src/components/userStart/Login.module.scss
@@ -0,0 +1,8 @@
+.red {
+  border: 1.5px solid red;
+}
+
+.p {
+  margin-top: 8px;
+  color: red;
+}
diff --git a/client/src/containers/MainContainer/MainContainer.jsx b/client/src/containers/MainContainer/MainContainer.jsx
@@ -7,6 +7,7 @@ import Signup from '../../components/userStart/Signup.jsx';
 const MainContainer = () => {
   const [login, setLogin] = useState(false);
   const [haveAccount, setHaveAccount] = useState(true);
+  const [error, setError] = useState(false);
 
   const handleLogin = (e) => {
     e.preventDefault();
@@ -18,21 +19,22 @@ const MainContainer = () => {
     fetch('http://localhost:3000/authentication/login', {
       method: 'POST',
       headers: {
-        'Content-Type': 'application/json'
+        'Content-Type': 'application/json',
       },
       // include cookies from cross origin request
       credentials: 'include',
       body: JSON.stringify({
         username: usernameInputValue,
-        password: passwordInputValue
-      })
+        password: passwordInputValue,
+      }),
     })
       .then((result) => result.json())
       .then((result) => {
         console.log('result from login request: ', result);
-        setLogin(true);
+        setLogin(result.username);
       })
       .catch((err) => {
+        setError(true);
         console.log(err);
       });
 
@@ -53,17 +55,18 @@ const MainContainer = () => {
     fetch('http://localhost:3000/authentication/signup', {
       method: 'POST',
       headers: {
-        'Content-Type': 'application/json'
+        'Content-Type': 'application/json',
       },
       body: JSON.stringify({
         username: nameValue,
-        password: passwordValue
-      })
+        password: passwordValue,
+      }),
     })
       .then((result) => result.json())
       .then((result) => {
         console.log('result from signup request: ', result);
         setHaveAccount(true);
+        setLogin(result.username);
       })
       .catch((err) => {
         console.log(err);
@@ -72,11 +75,28 @@ const MainContainer = () => {
 
   return login ? (
     <div className={styles.container}>
+      <div className={styles.div}>
+        <button
+          className={styles.button}
+          onClick={() => {
+            setLogin(false);
+          }}>
+          Logout
+        </button>
+        <h2 className={styles.h2}>
+          welcome, <span className={styles.span}>{login}</span>
+        </h2>
+      </div>
       <Sidebar />
     </div>
   ) : haveAccount ? (
     <div className={styles.container}>
-      <Login handleLogin={handleLogin} handleHaveAccount={handleHaveAccount} />
+      <Login
+        handleLogin={handleLogin}
+        handleHaveAccount={handleHaveAccount}
+        style={`${error ? 'red' : ''}`}
+        error={error}
+      />
     </div>
   ) : (
     <div className={styles.container}>