secure user input

react_frontend/src/IdeaContent.js

@@ -7,25 +7,28 @@ function IdeaContent(){
     let [title, setTitle] = useState("");
     let [content, setContent] = useState("")
     let [saved , setSaved] = useState(false);
-    let [seconds, setSeconds] = useState(0);
+    let [intervalTime, setintervalTime] = useState(0);
+    let [contentError, setContentError] = useState("");
+    let [titleError, setTitleError] = useState("");
 
-    let secondsSaveInterval = 3;
+
+    //let secondsSaveInterval = 0;
 
     // TIMER
     useEffect(() => {
         const interval = setInterval(() => {
-            setSeconds(seconds => seconds + 1);
+            setintervalTime(intervalTime => intervalTime + 1);
 
-            if(seconds > secondsSaveInterval){ // save every > secondsSaveInterval seconds
+            if(intervalTime > 0){
                 saveData();
-                setSeconds(0);
+                setintervalTime(0);
             }
 
-            }, 1000);
+            }, 500);
 
         return () => clearInterval(interval);
     });
-    
+
     const saveData = async () => {
         let ideaData = {
             title: title,
@@ -44,7 +47,18 @@ function IdeaContent(){
 
         if(res.title === "Success"){
             setSaved(true);
-        } else {
+            setContentError("");
+            setTitleError("");
+        } else if(res.title === "Error"){
+            if(res.type === "content"){
+                setContentError(res.message);
+                setTitleError("");
+            } else if(res.type === "title"){
+                setTitleError(res.message);
+                setContentError("");
+            }
+            setSaved(false);
+        }else{
             setSaved(false);
         }
     }
@@ -69,14 +83,20 @@ function IdeaContent(){
     return(
         <div className="ideaContent">
             <div className="head">
-                <input type="text" name="title"
-                 value={title}
-                 onChange={(e) => { setTitle(e.target.value); setSaved(false) }}
-                 placeholder="Insert a title"/>
+                <label htmlFor="title">
+                    <input type="text" name="title"
+                    className={titleError ? "input-error" : ""}
+                    value={title}
+                    onChange={(e) => { setTitle(e.target.value); setSaved(false) }}
+                    placeholder="Insert a title"/>
+                    <small className="error-text">{titleError}</small>
+                </label>
+                
                  <small>{saved ? "Saved!": "Saving..."}</small>
             </div>
             <div className="textAreaContainer">
-                <textarea value={content} onChange={(e) => { setContent(e.target.value); setSaved(false)}}></textarea>
+            <small className="error-text">{contentError}</small>
+                <textarea className={contentError ? "input-error" : ""} value={content} onChange={(e) => { setContent(e.target.value); setSaved(false)}}></textarea>
             </div>
         </div>
     )

react_frontend/src/css/IdeaContent.scss

@@ -6,38 +6,46 @@
 
     .head{
         padding-top: 20px;
-        padding-bottom: 20px;
+        padding-bottom: 50px;
         margin-bottom: 20px;
         border-bottom: 2px solid rgba(87, 87, 87, 0.3);
         width: 100%;
         display: block;
 
-        input{
-            background-color: transparent;
-            border: 0px;
-            border-bottom:  2px solid rgba(87, 87, 87, 0.5);
-            font-size: 24pt;
-            color: white;
-            outline:none;
+        label{
             margin-left: 50px;
-            font-weight: bold;
+            margin-bottom: 20px;
             width: 60%;
-            transition: 100ms;
-            transition-timing-function: linear;
+            display: block;
+            float: left;
 
-            &::placeholder{
-                color: rgba(255, 255, 255, 0.44);
+            input{
+                background-color: transparent;
+                border: 0px;
+                border-bottom:  2px solid rgba(87, 87, 87, 0.5);
+                font-size: 24pt;
+                color: white;
+                outline:none;
                 font-weight: bold;
-            }
-
-            &:hover{
-                border-color: rgb(80, 209, 160);
-            }
-
-            &:focus{
-                border-color: rgb(80, 209, 160);
+                width: 100%;
+                transition: 100ms;
+                transition-timing-function: linear;
+    
+                &::placeholder{
+                    color: rgba(255, 255, 255, 0.44);
+                    font-weight: bold;
+                }
+    
+                &:hover{
+                    border-color: rgb(80, 209, 160);
+                }
+    
+                &:focus{
+                    border-color: rgb(80, 209, 160);
+                }
             }
         }
+       
     }
 
     .textAreaContainer{
@@ -48,7 +56,7 @@
         textarea{
             outline: 0;
             display: block;
-            width: calc(100% - 40px);
+            width: calc(100% - 43px);
             height: 100%;
             background-color: rgba(71, 71, 71, 0.171);
             border: 0px solid transparent;
@@ -60,6 +68,31 @@
             padding-top: 10px;
             padding-bottom: 10px;
             font-family: 'Roboto', sans-serif;
+            border-left: 3px solid transparent;
+            transition: 100ms;
+            transition-timing-function: linear;
+
+            &:hover{
+                border-color: rgb(80, 209, 160);
+            }
+
+            &:focus{
+                border-color: rgb(80, 209, 160);
+            }
+        }
+
+        .error-text{
+            padding-left: 23px;
         }
     }
+
+    .input-error{
+        border-color: rgb(255, 45, 45) !important;
+    }
+
+    .error-text{
+        color:rgb(255, 45, 45);
+        font-weight: bold;
+        cursor: text;
+    }
 }