installazione di reac-router-dom e creazione Dachboard, Login, AuthContext, GuestRoute e ProtectdRoute e api/clinet.ts
This commit is contained in:
AV77web
parent
ad00749aa5
commit
841f999110
11 changed files with 675 additions and 288 deletions
60
package-lock.json
generated
60
package-lock.json
generated
|
|
@ -9,7 +9,8 @@
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react": "^19.2.6",
|
"react": "^19.2.6",
|
||||||
"react-dom": "^19.2.6"
|
"react-dom": "^19.2.6",
|
||||||
|
"react-router-dom": "^7.18.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^10.0.1",
|
"@eslint/js": "^10.0.1",
|
||||||
|
|
@ -1306,6 +1307,19 @@
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/cookie": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/express"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/cross-spawn": {
|
"node_modules/cross-spawn": {
|
||||||
"version": "7.0.6",
|
"version": "7.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||||
|
|
@ -2370,6 +2384,44 @@
|
||||||
"react": "^19.2.7"
|
"react": "^19.2.7"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-router": {
|
||||||
|
"version": "7.18.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.0.tgz",
|
||||||
|
"integrity": "sha512-pTTGt8J+ji1NOmYnjzT+bAJy/1zD+Jp4ziO6cL7T3ZLvXKtusO7BpFqlRXitqpcPVqllsIXFHRMt+2/k3Xn6HQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"cookie": "^1.0.1",
|
||||||
|
"set-cookie-parser": "^2.6.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=20.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=18",
|
||||||
|
"react-dom": ">=18"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/react-router-dom": {
|
||||||
|
"version": "7.18.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.0.tgz",
|
||||||
|
"integrity": "sha512-Fi0yY6kgtKae/Th2xibdWK0KSdYZ4B53Gyf6wRtomOKWgpNm7H7+DyfDhncdz9FKbpS+1jmDhg3F4WoGJ+yFOA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"react-router": "7.18.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=20.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=18",
|
||||||
|
"react-dom": ">=18"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/rolldown": {
|
"node_modules/rolldown": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.3.tgz",
|
||||||
|
|
@ -2420,6 +2472,12 @@
|
||||||
"semver": "bin/semver.js"
|
"semver": "bin/semver.js"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/set-cookie-parser": {
|
||||||
|
"version": "2.7.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
|
||||||
|
"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/shebang-command": {
|
"node_modules/shebang-command": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,8 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react": "^19.2.6",
|
"react": "^19.2.6",
|
||||||
"react-dom": "^19.2.6"
|
"react-dom": "^19.2.6",
|
||||||
|
"react-router-dom": "^7.18.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^10.0.1",
|
"@eslint/js": "^10.0.1",
|
||||||
|
|
|
||||||
305
src/App.css
305
src/App.css
|
|
@ -1,184 +1,135 @@
|
||||||
.counter {
|
.auth-page {
|
||||||
font-size: 16px;
|
min-height: 100vh;
|
||||||
padding: 5px 10px;
|
display: flex;
|
||||||
border-radius: 5px;
|
align-items: center;
|
||||||
color: var(--accent);
|
justify-content: center;
|
||||||
background: var(--accent-bg);
|
padding: 2rem;
|
||||||
border: 2px solid transparent;
|
background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
|
||||||
transition: border-color 0.3s;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--accent-border);
|
|
||||||
}
|
|
||||||
&:focus-visible {
|
|
||||||
outline: 2px solid var(--accent);
|
|
||||||
outline-offset: 2px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero {
|
.auth-card {
|
||||||
position: relative;
|
background: #fff;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
||||||
|
width: 100%;
|
||||||
|
max-width: 420px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.base,
|
.auth-card h1 {
|
||||||
.framework,
|
margin: 0;
|
||||||
.vite {
|
color: #1e3a5f;
|
||||||
inset-inline: 0;
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-subtitle {
|
||||||
|
margin: 0;
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-card label {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.35rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #334155;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-card input {
|
||||||
|
padding: 0.65rem 0.75rem;
|
||||||
|
border: 1px solid #cbd5e1;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-card input:focus {
|
||||||
|
outline: 2px solid #3b82f6;
|
||||||
|
outline-offset: 1px;
|
||||||
|
border-color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 0.7rem 1rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #1e3a5f;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background: #2d4a6f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: #e2e8f0;
|
||||||
|
color: #1e293b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #cbd5e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.65rem 0.75rem;
|
||||||
|
background: #fef2f2;
|
||||||
|
color: #b91c1c;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1.5rem 2rem;
|
||||||
|
background: #1e3a5f;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-header h1 {
|
||||||
|
margin: 0 0 0.25rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-header p {
|
||||||
|
margin: 0;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-main {
|
||||||
|
padding: 2rem;
|
||||||
|
max-width: 960px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.base {
|
.dashboard-main p {
|
||||||
width: 170px;
|
margin: 0 0 1.5rem;
|
||||||
position: relative;
|
color: #475569;
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.framework,
|
|
||||||
.vite {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.framework {
|
|
||||||
z-index: 1;
|
|
||||||
top: 34px;
|
|
||||||
height: 28px;
|
|
||||||
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
|
||||||
scale(1.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.vite {
|
|
||||||
z-index: 0;
|
|
||||||
top: 107px;
|
|
||||||
height: 26px;
|
|
||||||
width: auto;
|
|
||||||
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
|
||||||
scale(0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#center {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 25px;
|
|
||||||
place-content: center;
|
|
||||||
place-items: center;
|
|
||||||
flex-grow: 1;
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
padding: 32px 20px 24px;
|
|
||||||
gap: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#next-steps {
|
|
||||||
display: flex;
|
|
||||||
border-top: 1px solid var(--border);
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
flex: 1 1 0;
|
|
||||||
padding: 32px;
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
padding: 24px 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#docs {
|
|
||||||
border-right: 1px solid var(--border);
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
border-right: none;
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#next-steps ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
margin: 32px 0 0;
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--text-h);
|
|
||||||
font-size: 16px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: var(--social-bg);
|
|
||||||
display: flex;
|
|
||||||
padding: 6px 12px;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: box-shadow 0.3s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
}
|
|
||||||
.button-icon {
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
margin-top: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
li {
|
|
||||||
flex: 1 1 calc(50% - 8px);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#spacer {
|
|
||||||
height: 88px;
|
|
||||||
border-top: 1px solid var(--border);
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticks {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -4.5px;
|
|
||||||
border: 5px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
left: 0;
|
|
||||||
border-left-color: var(--border);
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
right: 0;
|
|
||||||
border-right-color: var(--border);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
145
src/App.tsx
145
src/App.tsx
|
|
@ -1,122 +1,29 @@
|
||||||
import { useState } from 'react'
|
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
|
||||||
import reactLogo from './assets/react.svg'
|
import GuestRoute from "./components/GuestRoute";
|
||||||
import viteLogo from './assets/vite.svg'
|
import ProtectedRoute from "./components/ProtectedRoute";
|
||||||
import heroImg from './assets/hero.png'
|
import { AuthProvider } from "./context/AuthContext";
|
||||||
import './App.css'
|
import Dashboard from "./pages/Dashboard";
|
||||||
|
import Login from "./pages/Login";
|
||||||
function App() {
|
import "./App.css";
|
||||||
const [count, setCount] = useState(0)
|
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
<>
|
<AuthProvider>
|
||||||
<section id="center">
|
<BrowserRouter>
|
||||||
<div className="hero">
|
<Routes>
|
||||||
<img src={heroImg} className="base" width="170" height="179" alt="" />
|
<Route path="/login" element={<GuestRoute><Login /></GuestRoute>} />
|
||||||
<img src={reactLogo} className="framework" alt="React logo" />
|
<Route
|
||||||
<img src={viteLogo} className="vite" alt="Vite logo" />
|
path="/dashboard"
|
||||||
</div>
|
element={
|
||||||
<div>
|
<ProtectedRoute>
|
||||||
<h1>Get started</h1>
|
<Dashboard />
|
||||||
<p>
|
</ProtectedRoute>
|
||||||
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
|
}
|
||||||
</p>
|
/>
|
||||||
</div>
|
<Route path="/" element={<Navigate to="/login" replace />} />
|
||||||
<button
|
<Route path="*" element={<Navigate to="/login" replace />} />
|
||||||
type="button"
|
</Routes>
|
||||||
className="counter"
|
</BrowserRouter>
|
||||||
onClick={() => setCount((count) => count + 1)}
|
</AuthProvider>
|
||||||
>
|
);
|
||||||
Count is {count}
|
|
||||||
</button>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div className="ticks"></div>
|
|
||||||
|
|
||||||
<section id="next-steps">
|
|
||||||
<div id="docs">
|
|
||||||
<svg className="icon" role="presentation" aria-hidden="true">
|
|
||||||
<use href="/icons.svg#documentation-icon"></use>
|
|
||||||
</svg>
|
|
||||||
<h2>Documentation</h2>
|
|
||||||
<p>Your questions, answered</p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://vite.dev/" target="_blank">
|
|
||||||
<img className="logo" src={viteLogo} alt="" />
|
|
||||||
Explore Vite
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://react.dev/" target="_blank">
|
|
||||||
<img className="button-icon" src={reactLogo} alt="" />
|
|
||||||
Learn more
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="social">
|
|
||||||
<svg className="icon" role="presentation" aria-hidden="true">
|
|
||||||
<use href="/icons.svg#social-icon"></use>
|
|
||||||
</svg>
|
|
||||||
<h2>Connect with us</h2>
|
|
||||||
<p>Join the Vite community</p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#github-icon"></use>
|
|
||||||
</svg>
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://chat.vite.dev/" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#discord-icon"></use>
|
|
||||||
</svg>
|
|
||||||
Discord
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://x.com/vite_js" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#x-icon"></use>
|
|
||||||
</svg>
|
|
||||||
X.com
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#bluesky-icon"></use>
|
|
||||||
</svg>
|
|
||||||
Bluesky
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div className="ticks"></div>
|
|
||||||
<section id="spacer"></section>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App
|
|
||||||
|
|
|
||||||
215
src/api/client.ts
Normal file
215
src/api/client.ts
Normal file
|
|
@ -0,0 +1,215 @@
|
||||||
|
import type {
|
||||||
|
Cliente,
|
||||||
|
ClienteFormInput,
|
||||||
|
Consegna,
|
||||||
|
ConsegnaFormInput,
|
||||||
|
Ruolo,
|
||||||
|
Utente,
|
||||||
|
UtenteAdmin,
|
||||||
|
UtenteAdminFormInput,
|
||||||
|
VerificaConsegna,
|
||||||
|
} from "../types";
|
||||||
|
|
||||||
|
const API_URL = import.meta.env.VITE_API_URL ?? "";
|
||||||
|
|
||||||
|
export class ApiError extends Error {
|
||||||
|
status: number;
|
||||||
|
fields?: Record<string, string>;
|
||||||
|
|
||||||
|
constructor(message: string, status: number, fields?: Record<string, string>) {
|
||||||
|
super(message);
|
||||||
|
this.name = "ApiError";
|
||||||
|
this.status = status;
|
||||||
|
this.fields = fields;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ApiErrorBody {
|
||||||
|
error?: string;
|
||||||
|
fields?: Record<string, string>;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function request<T>(
|
||||||
|
path: string,
|
||||||
|
options: RequestInit = {}
|
||||||
|
): Promise<T> {
|
||||||
|
const response = await fetch(`${API_URL}${path}`, {
|
||||||
|
credentials: "include",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
...(options.headers ?? {}),
|
||||||
|
},
|
||||||
|
...options,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.status === 204) {
|
||||||
|
return undefined as T;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = (await response.json().catch(() => ({}))) as ApiErrorBody;
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new ApiError(
|
||||||
|
data.error ?? `Errore ${response.status}`,
|
||||||
|
response.status,
|
||||||
|
data.fields
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return data as T;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getCsrfToken(): Promise<string> {
|
||||||
|
const data = await request<{ csrfToken: string }>("/api/auth/csrf");
|
||||||
|
return data.csrfToken;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function login(email: string, password: string): Promise<void> {
|
||||||
|
const csrfToken = await getCsrfToken();
|
||||||
|
const body = new URLSearchParams({
|
||||||
|
csrfToken,
|
||||||
|
email,
|
||||||
|
password,
|
||||||
|
redirect: "false",
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = await fetch(`${API_URL}/api/auth/callback/credentials`, {
|
||||||
|
method: "POST",
|
||||||
|
credentials: "include",
|
||||||
|
redirect: "manual",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/x-www-form-urlencoded",
|
||||||
|
"X-Auth-Return-Redirect": "1",
|
||||||
|
},
|
||||||
|
body,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.type === "opaqueredirect" || response.status === 302) {
|
||||||
|
throw new Error("Login non riuscito: configurazione Auth errata");
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = (await response.json().catch(() => ({}))) as { url?: string };
|
||||||
|
if (!response.ok || data.url?.includes("error=")) {
|
||||||
|
throw new Error("Credenziali non valide");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function logout(): Promise<void> {
|
||||||
|
const csrfToken = await getCsrfToken();
|
||||||
|
const body = new URLSearchParams({ csrfToken });
|
||||||
|
await fetch(`${API_URL}/api/auth/signout`, {
|
||||||
|
method: "POST",
|
||||||
|
credentials: "include",
|
||||||
|
redirect: "manual",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/x-www-form-urlencoded",
|
||||||
|
"X-Auth-Return-Redirect": "1",
|
||||||
|
},
|
||||||
|
body,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getMe(): Promise<Utente> {
|
||||||
|
const data = await request<{
|
||||||
|
id: number;
|
||||||
|
email: string;
|
||||||
|
name: string;
|
||||||
|
ruolo: Ruolo;
|
||||||
|
}>("/api/me");
|
||||||
|
|
||||||
|
const [nome, ...cognomeParts] = (data.name ?? "").split(" ");
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: data.id,
|
||||||
|
nome,
|
||||||
|
cognome: cognomeParts.join(" "),
|
||||||
|
email: data.email,
|
||||||
|
ruolo: data.ruolo,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function verificaConsegna(
|
||||||
|
chiave: string
|
||||||
|
): Promise<VerificaConsegna> {
|
||||||
|
const params = new URLSearchParams({ chiave: chiave.trim().toUpperCase() });
|
||||||
|
return request(`/api/verifica-consegna?${params.toString()}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getClienti(): Promise<Cliente[]> {
|
||||||
|
return request("/api/clienti");
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function createCliente(data: ClienteFormInput): Promise<Cliente> {
|
||||||
|
return request("/api/clienti", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function updateCliente(
|
||||||
|
id: number,
|
||||||
|
data: Partial<ClienteFormInput>
|
||||||
|
): Promise<Cliente> {
|
||||||
|
return request(`/api/clienti/${id}`, {
|
||||||
|
method: "PUT",
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function deleteCliente(id: number): Promise<void> {
|
||||||
|
await request(`/api/clienti/${id}`, { method: "DELETE" });
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getConsegne(): Promise<Consegna[]> {
|
||||||
|
return request("/api/consegne");
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function createConsegna(
|
||||||
|
data: ConsegnaFormInput
|
||||||
|
): Promise<Consegna> {
|
||||||
|
return request("/api/consegne", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function updateConsegna(
|
||||||
|
id: number,
|
||||||
|
data: Partial<ConsegnaFormInput>
|
||||||
|
): Promise<Consegna> {
|
||||||
|
return request(`/api/consegne/${id}`, {
|
||||||
|
method: "PUT",
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function deleteConsegna(id: number): Promise<void> {
|
||||||
|
await request(`/api/consegne/${id}`, { method: "DELETE" });
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getUtenti(): Promise<UtenteAdmin[]> {
|
||||||
|
return request("/api/utenti");
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function createUtente(
|
||||||
|
data: UtenteAdminFormInput
|
||||||
|
): Promise<UtenteAdmin> {
|
||||||
|
return request("/api/utenti", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function updateUtente(
|
||||||
|
id: number,
|
||||||
|
data: Partial<UtenteAdminFormInput>
|
||||||
|
): Promise<UtenteAdmin> {
|
||||||
|
return request(`/api/utenti/${id}`, {
|
||||||
|
method: "PUT",
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function deleteUtente(id: number): Promise<void> {
|
||||||
|
await request(`/api/utenti/${id}`, { method: "DELETE" });
|
||||||
|
}
|
||||||
11
src/components/GuestRoute.tsx
Normal file
11
src/components/GuestRoute.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { Navigate } from "react-router-dom";
|
||||||
|
import { useAuth } from "../context/AuthContext";
|
||||||
|
|
||||||
|
export default function GuestRoute({ children }: { children: React.ReactNode }) {
|
||||||
|
const { user, loading } = useAuth();
|
||||||
|
|
||||||
|
if (loading) return <p className="loading">Caricamento...</p>;
|
||||||
|
if (user) return <Navigate to="/dashboard" replace />;
|
||||||
|
|
||||||
|
return <>{children}</>;
|
||||||
|
}
|
||||||
26
src/components/ProtectedRoute.tsx
Normal file
26
src/components/ProtectedRoute.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
import { Navigate } from "react-router-dom";
|
||||||
|
import { useAuth } from "../context/AuthContext";
|
||||||
|
|
||||||
|
export default function ProtectedRoute({
|
||||||
|
children,
|
||||||
|
adminOnly = false,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
adminOnly?: boolean;
|
||||||
|
}) {
|
||||||
|
const { user, loading } = useAuth();
|
||||||
|
|
||||||
|
if (loading) return <p className="loading">Caricamento...</p>;
|
||||||
|
if (!user) return <Navigate to="/login" replace />;
|
||||||
|
if (adminOnly && user.ruolo !== "Amministratore") {
|
||||||
|
return (
|
||||||
|
<Navigate
|
||||||
|
to="/dashboard"
|
||||||
|
replace
|
||||||
|
state={{ denied: "Operazione riservata agli amministratori." }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <>{children}</>;
|
||||||
|
}
|
||||||
53
src/context/AuthContext.tsx
Normal file
53
src/context/AuthContext.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from "react";
|
||||||
|
import { getMe, login as apiLogin, logout as apiLogout } from "../api/client";
|
||||||
|
import type { Utente } from "../types";
|
||||||
|
|
||||||
|
interface AuthContextValue {
|
||||||
|
user: Utente | null;
|
||||||
|
loading: boolean;
|
||||||
|
login: (email: string, password: string) => Promise<void>;
|
||||||
|
logout: () => Promise<void>;
|
||||||
|
refresh: () => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const AuthContext = createContext<AuthContextValue | null>(null);
|
||||||
|
|
||||||
|
export function AuthProvider({ children }: { children: ReactNode }) {
|
||||||
|
const [user, setUser] = useState<Utente | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
const refresh = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const me = await getMe();
|
||||||
|
setUser(me);
|
||||||
|
} catch {
|
||||||
|
setUser(null);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
refresh().finally(() => setLoading(false));
|
||||||
|
}, [refresh]);
|
||||||
|
|
||||||
|
const login = async (email: string, password: string) => {
|
||||||
|
await apiLogin(email, password);
|
||||||
|
await refresh();
|
||||||
|
};
|
||||||
|
|
||||||
|
const logout = async () => {
|
||||||
|
await apiLogout();
|
||||||
|
setUser(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AuthContext.Provider value={{ user, loading, login, logout, refresh }}>
|
||||||
|
{children}
|
||||||
|
</AuthContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useAuth() {
|
||||||
|
const ctx = useContext(AuthContext);
|
||||||
|
if (!ctx) throw new Error("useAuth deve essere usato dentro AuthProvider");
|
||||||
|
return ctx;
|
||||||
|
}
|
||||||
25
src/pages/Dashboard.tsx
Normal file
25
src/pages/Dashboard.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { useAuth } from "../context/AuthContext";
|
||||||
|
|
||||||
|
export default function Dashboard() {
|
||||||
|
const { user, logout } = useAuth();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="dashboard-page">
|
||||||
|
<header className="dashboard-header">
|
||||||
|
<div>
|
||||||
|
<h1>Dashboard</h1>
|
||||||
|
<p>
|
||||||
|
Benvenuto, {user?.nome} {user?.cognome}
|
||||||
|
{user?.ruolo === "Amministratore" ? " (Amministratore)" : ""}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button type="button" className="btn btn-secondary" onClick={() => logout()}>
|
||||||
|
Esci
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
<main className="dashboard-main">
|
||||||
|
<p>Area riservata agli operatori corrieri.</p>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
70
src/pages/Login.tsx
Normal file
70
src/pages/Login.tsx
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
import { useState, type FormEvent } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { useAuth } from "../context/AuthContext";
|
||||||
|
import { UTENTE_CONSTRAINTS } from "../validation/constraints";
|
||||||
|
import { validateLoginInput } from "../validation/utente";
|
||||||
|
|
||||||
|
export default function Login() {
|
||||||
|
const { login } = useAuth();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [email, setEmail] = useState("");
|
||||||
|
const [password, setPassword] = useState("");
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = async (e: FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
const validation = validateLoginInput({ email, password });
|
||||||
|
if (!validation.success) {
|
||||||
|
setError(Object.values(validation.errors)[0] ?? "Dati di accesso non validi");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await login(validation.data.email, validation.data.password);
|
||||||
|
navigate("/dashboard");
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : "Errore di accesso");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="auth-page">
|
||||||
|
<form className="auth-card" onSubmit={handleSubmit} noValidate>
|
||||||
|
<h1>Gestione Corrieri</h1>
|
||||||
|
<p className="auth-subtitle">Accedi con le tue credenziali</p>
|
||||||
|
{error && <p className="error">{error}</p>}
|
||||||
|
<label>
|
||||||
|
Email
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
autoComplete="email"
|
||||||
|
maxLength={UTENTE_CONSTRAINTS.email.maxLength}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Password
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
autoComplete="current-password"
|
||||||
|
maxLength={UTENTE_CONSTRAINTS.password.maxLength}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<button type="submit" className="btn btn-primary" disabled={loading}>
|
||||||
|
{loading ? "Accesso..." : "Accedi"}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
70
src/types/index.ts
Normal file
70
src/types/index.ts
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
export type Ruolo = "Operatore" | "Amministratore";
|
||||||
|
|
||||||
|
export interface Utente {
|
||||||
|
id: number;
|
||||||
|
nome: string;
|
||||||
|
cognome: string;
|
||||||
|
email: string;
|
||||||
|
ruolo: Ruolo;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Cliente {
|
||||||
|
id: number;
|
||||||
|
nome: string;
|
||||||
|
cognome: string;
|
||||||
|
via: string;
|
||||||
|
comune: string;
|
||||||
|
provincia: string;
|
||||||
|
telefono: string;
|
||||||
|
email: string;
|
||||||
|
note: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ClienteFormInput = Omit<Cliente, "id">;
|
||||||
|
|
||||||
|
export type StatoConsegna =
|
||||||
|
| "da ritirare"
|
||||||
|
| "in consegna"
|
||||||
|
| "in giacenza"
|
||||||
|
| "in deposito";
|
||||||
|
|
||||||
|
export interface Consegna {
|
||||||
|
id: number;
|
||||||
|
dataRitiro: string;
|
||||||
|
dataConsegna: string;
|
||||||
|
stato: StatoConsegna;
|
||||||
|
chiaveConsegna: string;
|
||||||
|
clienteId: number;
|
||||||
|
clienteNome: string;
|
||||||
|
clienteCognome: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ConsegnaFormInput = Omit<
|
||||||
|
Consegna,
|
||||||
|
"id" | "clienteNome" | "clienteCognome"
|
||||||
|
>;
|
||||||
|
|
||||||
|
export interface UtenteAdmin {
|
||||||
|
id: number;
|
||||||
|
nome: string;
|
||||||
|
cognome: string;
|
||||||
|
email: string;
|
||||||
|
ruolo: Ruolo;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UtenteAdminFormInput {
|
||||||
|
nome: string;
|
||||||
|
cognome: string;
|
||||||
|
email: string;
|
||||||
|
password: string;
|
||||||
|
ruolo: Ruolo;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface VerificaConsegna {
|
||||||
|
dataRitiro: string;
|
||||||
|
dataConsegna: string;
|
||||||
|
stato: StatoConsegna;
|
||||||
|
clienteNome: string;
|
||||||
|
clienteCognome: string;
|
||||||
|
comune: string;
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue