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" />

gui/rpk-gui/src/pages/auth/Login.tsx

@@ -0,0 +1,14 @@
+
+export const Login = () => {
+  async function handleLogin(e: any) {
+    e.preventDefault()
+  }
+
+  return (
+    <form onSubmit={ handleLogin }>
+      <input type={ "text" } name={ "email" } />
+      <input type={ "password" } name={ "password" } />
+      <input type={ "submit" } />
+    </form>
+  )
+}

gui/rpk-gui/src/pages/auth/ProtectedRoute.tsx

@@ -0,0 +1,16 @@
+import {Navigate, Outlet} from "react-router";
+
+type AuthUser = { id: string; name: string };
+
+type ProtectedRouteProps = {
+  user: AuthUser | null;
+  redirectPath?: string;
+};
+
+export const ProtectedRoute = ({ user, redirectPath = "/" }: ProtectedRouteProps) => {
+  if (!user) {
+    return <Navigate to={redirectPath} replace />;
+  }
+
+  return <Outlet />;
+};

gui/rpk-gui/src/pages/auth/Register.tsx

@@ -0,0 +1,15 @@
+
+export const Register = () => {
+  async function handleRegister(e: any) {
+    e.preventDefault()
+  }
+
+  return (
+    <form onSubmit={ handleRegister }>
+      <input type={ "text" } name={ "email" } />
+      <input type={ "password" } name={ "password" }/>
+      <input type={ "password" } name={ "confirm_password" }/>
+      <input type={ "submit" } />
+    </form>
+  )
+}

gui/rpk-gui/src/pages/entities/List.tsx

@@ -1,6 +1,6 @@
 
 
-export const EntityList = (props: any) => {
+export const EntityList = () => {
   return (
     <h1>List des entity: Yoyoyo</h1>
   )