fix auth lib; add client view; add client validation; minor fixes

.gitignore

@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+package-lock.json
 dist
 dist-ssr
 *.local

package.json

@@ -16,6 +16,7 @@
     "@mui/material": "^9.0.0",
     "@tanstack/react-query": "^5.100.5",
     "axios": "^1.15.2",
+    "jwt-decode": "^4.0.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-router-dom": "^7.14.2",

src/App.jsx

@@ -16,9 +16,9 @@ const darkTheme = createTheme({
     },
 });
 
+const currentTime = Math.ceil(Date.now() / 1000);
 
 export default function App() {
-
     return (
         <ThemeProvider theme={darkTheme}>
             <CssBaseline/>
@@ -30,7 +30,7 @@ export default function App() {
 
                 {/* PRIVATE */}
                 <Route element={
-                    <ProtectedRoute>
+                    <ProtectedRoute currentTime={currentTime}>
                         <DashboardLayout/>
                     </ProtectedRoute>
                 }>

src/controllers/ProtectedRoute.jsx

@@ -1,11 +1,19 @@
 import {Navigate} from "react-router-dom";
 import {useAuthStore} from "../stores/authStore.jsx";
+import { jwtDecode } from "jwt-decode";
 
-export default function ProtectedRoute({children}) {
+export default function ProtectedRoute({children, currentTime}) {
 	const token = useAuthStore(s => s.token);
 	let isAuth = false;
 	if (token) {
-		isAuth = true;
+		try {
+			const decoded = jwtDecode(token);
+			if (typeof decoded.exp !== "undefined" && currentTime <= decoded.exp) {
+				isAuth = true;
+			}
+		} catch (error) {
+			console.error(error);
+		}
 	}
 
 	if (!isAuth) {

src/lib/addClientValidation.ts

@@ -0,0 +1,55 @@
+type Need = {
+    regexp?: {
+        value: RegExp,
+        message: string
+    };
+    maxLength?: {
+        value: number;
+        message: string
+    };
+};
+const validate  = (type: string, value: any) => {
+    const needs: Record<string, Need> = {
+        "email": {
+            regexp:{
+                value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+                message: "Wpisz poprawny adres email!"
+            }
+        },
+        "nip": {
+            maxLength: {
+                value: 10,
+                message: "NIP powinien mieć 10 cyfr"
+            },
+            regexp:{
+                value:  /^\d+$/,
+                message: "Wprowadź poprawny numer nip!"
+            }
+        },
+        "phone": {
+            maxLength: {
+                value: 9,
+                message: "Bledny numer telefonu!"
+            }
+        }
+    };
+
+    if (typeof needs[type] === 'undefined') {
+        return "";
+    }
+    const obj = needs[type];
+    if (typeof obj.maxLength !== "undefined") {
+        if (value.length > obj.maxLength.value || value.length < obj.maxLength.value) {
+            return obj.maxLength.message;
+        }
+    }
+    if (typeof obj.regexp !== "undefined") {
+        if (!obj.regexp.value.test(value)) {
+            return obj.regexp.message;
+        }
+    }
+
+
+    return "";
+}
+export default validate

src/lib/apiClient.ts

@@ -19,7 +19,7 @@ api.interceptors.response.use(
             localStorage.removeItem('token');
             window.location.href = '/login';
         }
-        // @ts-ignore
+
         return Promise.reject(err);
     }
 );

src/views/ClientAddView.jsx

@@ -1,46 +1,116 @@
-import {Button, TextField} from "@mui/material";
+import {Box, Button, FormControl, Grid, Paper, Stack, TextField, Typography} from "@mui/material";
 import {useState} from "react";
 import {useCreateClient} from "../hooks/useClients.jsx";
 import {useNavigate} from "react-router-dom";
+import validate from "../lib/addClientValidation.ts";
+import ClientInput from "./form/ClientInput.jsx";
+import Divider from "@mui/material/Divider";
+
 const needData = {
 	text:["name","address","email"],
 	number:["nip","phone"]
 };
 function ClientAddView() {
 	const navigate = useNavigate();
-	const [data, addData] = useState({});
+	const [formErrors, setFormError] = useState(false);
+	const [data, addData] = useState({
+		name:"",
+		address:"",
+		email:"",
+		nip: "",
+		phone:"",
+		legitimacy:"",
+		proclamation:""
+	});
+	const [errors, setErrors] = useState({
+		email: "",
+		nip: "",
+		phone: "",
+	});
 	const  addClient = useCreateClient();
+	const checkForm = () => {
+		for (let errorsKey in errors) {
+			const error = errors[errorsKey];
+			if (error.length > 0) {
+				return false;
+			}
+		}
+
+		return true;
+	}
 	const save = async function(e) {
 		e.preventDefault();
+		if (!checkForm()) {
+			setFormError(true);
+			return;
+		}
+		if (formErrors) {
+			setFormError(false);
+		}
 		await addClient.mutateAsync(data);
 		navigate('/clients');
 	}
 	const handleChange = (e) => {
 		const { name, value } = e.target;
+		const mess = validate(name, value);
+		setErrors(prevState => ({
+			...prevState,
+			[name]: mess
+		}));
+		if (formErrors && checkForm()) {
+			setFormError(false);
+		}
 		addData(prevState => ({
 			...prevState,
 			[name]: value
 		}))
 	}
 	return (
-		<form onSubmit={save}>
+		<Box sx={{
-			{needData.text.map((type) => (
+			display: 'flex',
-				<TextField inputMode={"text"} id={type} variant="outlined" label={type} type={"text"} name={type}
+			alignItems: 'center',
-						   onChange={handleChange}
+			justifyContent: 'center',
-						   value={data[type]}
+		}}>
-				/>
+			<Paper component="form" onSubmit={save}
-			))}
+				elevation={1}
-			{needData.number.map((type) => (
+				sx={{
-				<TextField inputMode={"numeric"} id={type} variant="outlined" label={type} type={"text"} name={type}
+					p:2
-						   onChange={handleChange}
+				}}>
-						   value={data[type]}
+				<Typography variant="h4" component="h1" sx={{p:2}} >Dodaj nowego klienta</Typography>
-				/>
+				<Divider component="p" />
-			))}
+				{formErrors &&
+					<Typography variant="subtitle1" component="p" color={"error"}>Masz bledy w formularzu!</Typography>
+				}
+				<Grid container spacing={2} sx={{p:2}}>
+					<Grid size={6}>
+						<Typography variant="h5" component="p">Dane podmiotu</Typography>
 
-			<Button variant="outlined" type={"submit"} disabled={addClient.isPending}>
+						<ClientInput type="name" label="Nazwa firmy" data={data["name"]} inputMode="text" inputType="text" handleChange={handleChange} error={errors["name"]}/>
-				{addClient.isPending ? 'Dodawanie...' : 'Dodaj'}
+						<ClientInput type="address" label="Adres" data={data["address"]} inputMode="text" inputType="text" handleChange={handleChange} error={errors["address"]}/>
-			</Button>
+						<ClientInput type="nip" label="NIP" data={data["nip"]} inputMode="numeric" inputType="number" handleChange={handleChange} error={errors["nip"]}/>
-		</form>
+					</Grid>
+					<Grid size={6}>
+						<Typography variant="h5" component="p">Dane kontaktowe</Typography>
+						<ClientInput type="email" label="Adres email" data={data["email"]} inputMode="text" inputType="email" handleChange={handleChange} error={errors["email"]}/>
+						<ClientInput type="phone" label="Numer telefonu" data={data["phone"]} inputMode="numeric" inputType="number" handleChange={handleChange} error={errors["phone"]}/>
+
+					</Grid>
+
+					<Grid size={6}>
+						<ClientInput type="legitimacy" label="Data prawomocności" data={data["legitimacy"]} inputMode="text" inputType="date" handleChange={handleChange} error={errors["legitimacy"]}/>
+					</Grid>
+					<Grid size={6}>
+						<ClientInput type="proclamation" label="Data obwieszczenia" data={data["proclamation"]} inputMode="text" inputType="date" handleChange={handleChange} error={errors["proclamation"]}/>
+					</Grid>
+
+					<Grid size={12}>
+						<Button variant="outlined" type={"submit"} disabled={addClient.isPending}>
+							{addClient.isPending ? 'Dodawanie...' : 'Dodaj'}
+						</Button>
+					</Grid>
+				</Grid>
+			</Paper>
+		</Box>
 	);
 }
 

src/views/DashboardView.jsx

@@ -2,7 +2,7 @@ import {Grid} from "@mui/material";
 
 function DashboardView(){
 	return (
-		<Grid item>
+		<Grid>
 			trest
 		</Grid>
 	);

src/views/LoginView.jsx

@@ -24,9 +24,6 @@ export default function LoginView() {
 		}
 	}
 
-	// <form onSubmit={handleLogin}>
-	// 	{error && <p>{error}</p>}
-	// </form>
 	return (
 			<Box sx={{
 				minHeight: '100vh',
@@ -46,6 +43,7 @@ export default function LoginView() {
 					   >
 					<Stack spacing={2}>
 						<Typography variant="h5" component="h1">Logowanie</Typography>
+						{error && <p>{error}</p>}
 						<TextField inputMode={"text"} id="login" variant="outlined" label="Login" name={"login"}
 						           onChange={e => setUsername(e.target.value)}
 						           value={username}

src/views/form/ClientInput.jsx

@@ -0,0 +1,25 @@
+import {FormControl, TextField, Typography} from "@mui/material";
+
+export default function ClientInput(prop){
+	const { type, label, error, handleChange, data, inputMode, inputType } = prop;
+	return (
+		<FormControl fullWidth>
+			<Typography
+				component="label"
+				htmlFor={type}
+				variant="caption"
+				color="text.secondary"
+			>
+				{label}
+			</Typography>
+			<TextField inputMode={inputMode}
+					   id={type} variant="outlined" type={inputType} name={type} key={type}
+			           onChange={handleChange}
+			           value={data}
+			           error={error}
+			           helperText={error}
+			           // label={label}
+			/>
+		</FormControl>
+	);
+}