Login/Logout function implemented

backend/src/main/java/com/example/backend/config/SecurityConfig.java

@@ -30,7 +30,7 @@ public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Excepti
                 .exceptionHandling(e -> e
                         .authenticationEntryPoint(new HttpStatusEntryPoint(HttpStatus.UNAUTHORIZED)))
                 .oauth2Login(o -> o.defaultSuccessUrl(appUrl))
-                .logout(l -> l.logoutUrl("/api/auth/logout"));
+                .logout(l -> l.logoutUrl("/api/auth/logout").logoutSuccessUrl(appUrl));
         return http.build();
     }
 }

frontend/src/Component/App.tsx

@@ -4,17 +4,15 @@ import Details from "./App/Details.tsx";
 import Header from "./App/Header.tsx";
 import Footer from "./App/Footer.tsx";
 
-
 function App() {
-
     return (
         <>
-            <Header />
+            <Header/>
             <Routes>
-                <Route path="/" element={<Main />}/>
-                <Route path="/movie/:id" element={<Details />}/>
+                <Route path="/" element={<Main/>}/>
+                <Route path="/movie/:id" element={<Details/>}/>
             </Routes>
-            <Footer />
+            <Footer/>
         </>
     )
 }

frontend/src/Component/App/Details/MovieDetails.tsx

@@ -49,7 +49,7 @@ export default function MovieDetails() {
                 <input type="text" name="is-watched" value={String(movieData?.isWatched)} disabled/>
                 <label htmlFor="rating">Rating</label>
                 <input type="text" name="rating" value={movieData?.rating} disabled/>
-                {directorsData && <PersonList people={directorsData} legend={"Directed by"}/>}
+                {directorsData && <PersoncdList people={directorsData} legend={"Directed by"}/>}
                 {actorsData && <PersonList people={actorsData} legend={"Starring"}/>}
             </form>
         </div>

frontend/src/Component/App/Details/MovieDetails/PersonList.tsx

@@ -1,11 +1,15 @@
 import PersonType from "../../../../Type/PersonType.tsx";
 import Person from "./PersonList/Person.tsx";
 
-export default function PersonList({legend, people}: { legend: string, people: PersonType[] }) {
-    return <fieldset className="person-list">
-        <legend>{legend}</legend>
-        {people?.map(
-            (person) => <Person key={person.id} person={person}/>
-        )}
-    </fieldset>
-}
+export default function PersonList({ legend, people }: { legend: string, people: PersonType[] }) {
+    return (
+        <fieldset className="person-list">
+            <legend>{legend}</legend>
+            {Array.isArray(people) && people.length > 0 ? (
+                people.map((person) => <Person key={person.id} person={person} />)
+            ) : (
+                <div>No people available</div>
+            )}
+        </fieldset>
+    );
+}

frontend/src/Component/App/Header.tsx

@@ -2,32 +2,48 @@ import axios from "axios";
 import {useEffect, useState} from "react";
 
 export default function Header() {
-    function login() {
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
+    const [userName, setUserName] = useState('');
 
+    function login() {
         const host = window.location.host === 'localhost:5173' ? 'http://localhost:8080' : window.location.origin
-
         window.open(host + '/oauth2/authorization/github', '_self')
     }
+
     const loadUser = () => {
         axios.get('/api/auth/me')
             .then(response => {
-                console.log(response.data)
-                setUserName(response.data)
+                setUserName(response.data);
+                setIsLoggedIn(true);
+            })
+            .catch(() => {
+                setUserName("");
+                setIsLoggedIn(false);
             })
     }
+    const logout = () => {
+        const host = window.location.host === 'localhost:5173' ? 'http://localhost:8080' : window.location.origin
+        window.open(host + "/api/auth/logout", '_self');
+    };
+    const handleButtonClick = () => {
+        if (isLoggedIn) {
+            logout();
+        } else {
+            login();
+        }
+    };
 
     useEffect(() => {
         loadUser()
     }, []);
 
-    const [userName, setUserName] = useState('')
     return (
         <nav>
             <div>
                 Hello {userName}
             </div>
-            <button onClick={login}>
-                Login
+            <button onClick={handleButtonClick}>
+                {isLoggedIn ? 'Logout' : 'Login'}
             </button>
         </nav>
     );

frontend/src/Component/App/Main.tsx

@@ -5,8 +5,8 @@ export default function Main() {
     return (
         <div>
             Main
-            <WatchedTab />
-            <WishlistTab />
+            <WatchedTab/>
+            <WishlistTab/>
         </div>
     );
 }

frontend/src/Component/ProtectedRoutes.tsx

@@ -0,0 +1,5 @@
+
+export default function ProtectedRoutes() {
+//Protected Routes logic
+return <></>
+}

frontend/src/Style/Details.css

@@ -27,7 +27,15 @@ fieldset.person-list {
     border: 1px solid #ccc;
     border-radius: 4px;
 }
-
+nav {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 30px;
+    padding: 10px;
+}
 legend {
     font-weight: bold;
     margin-bottom: 0.5rem;
@@ -39,3 +47,8 @@ input[disabled] {
     border: none;
     padding: 0.5rem;
 }
+#root {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+}

frontend/src/index.css

@@ -24,8 +24,6 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }