Sarting auth implementation in front

gui/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:lts-alpine
+
+WORKDIR /app
+RUN npm install -g @angular/cli http-server
+COPY rpk-gui/package*.json ./
+RUN npm install
+COPY rpk-gui/ .
+
+RUN npm run build
+
+EXPOSE 4200
+
+CMD [ "npm", "run", "ng", "serve", "--", "--host", "0.0.0.0", "--disable-host-check" ]

gui/rpk-gui/package-lock.json

@@ -17,8 +17,8 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.21.0",
-        "@types/react": "^19.0.10",
-        "@types/react-dom": "^19.0.4",
+        "@types/react": "^19.1.0",
+        "@types/react-dom": "^19.1.1",
         "@vitejs/plugin-react": "^4.3.4",
         "eslint": "^9.21.0",
         "eslint-plugin-react-hooks": "^5.1.0",
@@ -2066,20 +2066,18 @@
       "peer": true
     },
     "node_modules/@types/react": {
-      "version": "19.0.12",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.12.tgz",
-      "integrity": "sha512-V6Ar115dBDrjbtXSrS+/Oruobc+qVbbUxDFC1RSbRqLt5SYvxxyIDrSC85RWml54g+jfNeEMZhEj7wW07ONQhA==",
-      "license": "MIT",
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.0.tgz",
+      "integrity": "sha512-UaicktuQI+9UKyA4njtDOGBD/67t8YEBt2xdfqu8+gP9hqPUPsiXlNPcpS2gVdjmis5GKPG3fCxbQLVgxsQZ8w==",
       "dependencies": {
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "19.0.4",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.4.tgz",
-      "integrity": "sha512-4fSQ8vWFkg+TGhePfUzVmat3eC14TXYSsiiDSLI0dVLsrm9gZFABjPy/Qu6TKgl1tq1Bu1yDsuQgY3A3DOjCcg==",
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.1.tgz",
+      "integrity": "sha512-jFf/woGTVTjUJsl2O7hcopJ1r0upqoq/vIOoCj0yLh3RIXxWcljlpuZ+vEBRXsymD1jhfeJrlyTy/S1UW+4y1w==",
       "dev": true,
-      "license": "MIT",
       "peerDependencies": {
         "@types/react": "^19.0.0"
       }

gui/rpk-gui/package.json

@@ -15,13 +15,12 @@
     "better-auth": "^1.2.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router": "^7.4.1",
-    "react-router-auth"
+    "react-router": "^7.4.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",

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>
   )