feat(auth): Added authentication

frontend/src/Components/Navbar/Navbar.tsx

@@ -1,12 +1,19 @@
-import { Navbar as BsNavbar, Container } from "react-bootstrap";
+import { Navbar as BsNavbar, Button, Container } from "react-bootstrap";
 // import styles from "./Navbar.module.scss";
 import Searchbar from "../Searchbar/Searchbar";
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
+import Cookies from "js-cookie";
 
 const Navbar = () => {
   const [searchText, setSearchText] = useState<string>("");
   const navigate = useNavigate();
+  const session = Cookies.get("session");
+
+  function onLogout() {
+    Cookies.remove("session");
+    navigate("/login");
+  }
 
   function onSearch() {
     navigate(`/search?search=${searchText}`);
@@ -22,9 +29,10 @@ const Navbar = () => {
         <BsNavbar.Toggle />
         <BsNavbar.Collapse>
           <Container className="justify-content-center d-flex">
-            <Searchbar text={searchText} setText={setSearchText} onSearch={onSearch} />
+            <Searchbar text={searchText} setText={setSearchText} onSearch={onSearch} enabled={session !== undefined} />
           </Container>
         </BsNavbar.Collapse>
+        {session && <Button onClick={onLogout}>Logout</Button>}
       </Container>
     </BsNavbar>
   )

frontend/src/Components/Searchbar/Searchbar.module.scss

@@ -2,4 +2,10 @@
   border-radius: 10px;
   padding: 5px;
   width: 100%;
+}
+
+.searchbarDisabled {
+  @extend .searchbar;
+  background-color: lightgray;
+  cursor: not-allowed;
 }

frontend/src/Components/Searchbar/Searchbar.tsx

@@ -5,9 +5,10 @@ interface SearchbarProps {
   text: string,
   setText: (text: string) => void;
   onSearch?: () => void;
+  enabled?: boolean;
 }
 
-const Searchbar = ({ text, setText, onSearch }: SearchbarProps) => {
+const Searchbar = ({ text, setText, onSearch, enabled = true }: SearchbarProps) => {
 
   function onKeyPressed(event: React.KeyboardEvent<HTMLInputElement>) {
     if (onSearch === undefined) {
@@ -20,7 +21,7 @@ const Searchbar = ({ text, setText, onSearch }: SearchbarProps) => {
   }
 
   return (
-    <input className={styles.searchbar} type="text" placeholder="Search" value={text} onChange={e => setText(e.target.value)} onKeyUp={onKeyPressed} />
+    <input className={enabled ? styles.searchbar : styles.searchbarDisabled} type="text" placeholder="Search" value={text} onChange={e => setText(e.target.value)} onKeyUp={onKeyPressed} disabled={!enabled} />
   )
 }
 

frontend/src/Components/ServerList/ServerList.tsx

@@ -11,6 +11,9 @@ const ServerList = () => {
       setServers(serverList);
     }).catch(err => {
       setServers([]);
+      if (err.response && err.response.status === 401) {
+        return;
+      }
       alert(err);
     })
   }, []);