webui: Add logout functionality

webui/src/App.tsx

@@ -6,7 +6,7 @@ import RegisterView from "./components/auth/RegisterView";
 import RequireAuth from "./features/auth/RequireAuth";
 import {useAppDispatch} from "./app/hooks";
 import broadcastChannel from "./app/broadcastChannel";
-import {receiveAuthUpdate} from "./features/auth/authSlice";
+import {logOut, receiveAuthUpdate} from "./features/auth/authSlice";
 
 function App() {
     const dispatch = useAppDispatch()
@@ -23,7 +23,10 @@ function App() {
                 <Route path={"login"} element={<LoginView/>} />
                 <Route path={"register"} element={<RegisterView/>} />
             </Route>
-            <Route path={"/"} element={<RequireAuth><h1>hi</h1></RequireAuth>}/>
+            <Route path={"/"} element={<RequireAuth><h1>hi</h1> <button onClick={() => {
+                dispatch(logOut())
+            }
+            }>Log out</button></RequireAuth>}/>
         </Routes>
     );
 }

webui/src/layouts/AuthLayout.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect} from "react";
 
 import styles from "./AuthLayout.module.scss";
 import {Link, useLocation, useNavigate, useOutlet} from "react-router-dom";
@@ -23,12 +23,14 @@ const AuthLayout = () => {
     const navigate = useNavigate()
 
 
+    useEffect(() => {
         if(authState.status == "logged_in") {
             if(locationState && locationState.location) {
                 navigate(locationState.location, {replace: true})
             }
             navigate("/", {replace: true})
         }
+    }, [authState])
 
     return <div className={styles.auth}>
         <div className={styles.background}/>