OnLoginClick Logic

Fetch data from the backend and save the session id to the local storage

anwendung/src/components/Login.jsx

@@ -5,17 +5,32 @@ export default function Login() {
 
         let url = "http://localhost:8080/users"
 
-        function on_login_click()
-        {
+        async function on_login_click() {
             url += "?mail=" + inputUserName + "&password=" + inputPassword;
 
-            fetch(url, {
+            let response = await fetch(url, {
                 method: "GET",
-            }).then(r => console.log())
+            });
+
+            let reader = response.body.getReader();
+            let value = String.fromCharCode.apply(null, ((await reader.read()).value))
+            if(value != "failed")
+            {
+                localStorage.setItem("sessionid", value)
+            }
+            else
+            {
+                setInputPassword("");
+                setInputUserName("");
+                setHint("wrong login credentials")
+                setBackgroundColor("rgb(171,89,89)")
+            }
         }
 
         const [inputUserName, setInputUserName] = useState("")
         const [inputPassword, setInputPassword] = useState("")
+        const [hint, setHint] = useState("type here")
+        const [backgroundColor, setBackgroundColor] = useState("rgb(255, 255, 255)")
 
         return (
             <div className="border">
@@ -24,10 +39,16 @@ export default function Login() {
                     <div className={"placement"}>
                         <br/>
                         <p className={"font-kinda-big"}>Username</p>
-                        <input type="text" value={inputUserName} onChange={e => setInputUserName(e.target.value)} placeholder="Type here" className="input input-bordered input-sm w-full max-w-xs"/>
+                        <input type="text" value={inputUserName} onChange={e => setInputUserName(e.target.value)} placeholder={hint} className="input input-bordered input-sm w-full max-w-xs"
+                            style={{
+                                backgroundColor: backgroundColor
+                            }}/>
                         <br/>
                         <p className={"font-kinda-big"}>Password</p>
-                        <input type="password" value={inputPassword} onChange={e => setInputPassword(e.target.value)} placeholder="Type here" className="input input-bordered input-sm w-full max-w-xs"/>
+                        <input type="password" value={inputPassword} onChange={e => setInputPassword(e.target.value)} placeholder={hint} className="input input-bordered input-sm w-full max-w-xs"
+                               style={{
+                                   backgroundColor: backgroundColor
+                               }}/>
                     </div>
                     <Button text={"Login"} color={"#e2001a"} width={"25px"} onClick={() => on_login_click()}/>
                 </login>