Sarting auth implementation in front

gui/rpk-gui/src/App.tsx

@@ -1,12 +1,16 @@
+//https://www.robinwieruch.de/react-router-private-routes/
+
 import { useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
 
-import {createBrowserRouter, Link, RouterProvider} from "react-router";
-import { EntityList } from "./page/entities/list.tsx";
+import {createBrowserRouter, Link, Route, RouterProvider, Routes} from "react-router";
+import { EntityList } from "./pages/entities/List.tsx";
+import {ProtectedRoute} from "./pages/auth/ProtectedRoute.tsx";
 
 function App() {
+  const [user, setUser] = useState<AuthUser | null>(null)
   const [count, setCount] = useState(0)
 
   const router = createBrowserRouter([
@@ -23,8 +27,13 @@ function App() {
   return (
     <>
       <RouterProvider router={router}>
-
       </RouterProvider>
+      <Routes>
+        <Route index element={ <h1>INDEX</h1> } />
+        <Route element={ <ProtectedRoute user={user} /> }>
+          <Route path="toto" element={ <h1>PROTECTED ROUTE</h1>} />
+        </Route>
+      </Routes>
       <div>
         <a href="https://vite.dev" target="_blank">
           <img src={viteLogo} className="logo" alt="Vite logo" />