ryjek/sprawozdania-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ryjek
2026-07-13 22:16:15 +02:00
parent 2c1fb161d1
commit 50186b6840
11 changed files with 186 additions and 3709 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -8,6 +8,7 @@ pnpm-debug.log*
lerna-debug.log*
node_modules
package-lock.json
dist
dist-ssr
*.local
package-lock.json
Generated
-3681
View File
File diff suppressed because it is too large Load Diff
package.json
+1
View File
@@ -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
+2 -2
View File
@@ -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
+10 -2
View File
@@ -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
+55
View File
@@ -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
+1 -1
View File
@@ -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
+89 -19
View File
@@ -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}>
{needData.text.map((type) => (
<TextField inputMode={"text"} id={type} variant="outlined" label={type} type={"text"} name={type}
onChange={handleChange}
value={data[type]}
/>
))}
{needData.number.map((type) => (
<TextField inputMode={"numeric"} id={type} variant="outlined" label={type} type={"text"} name={type}
onChange={handleChange}
value={data[type]}
/>
))}
<Box sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
<Paper component="form" onSubmit={save}
elevation={1}
sx={{
p:2
}}>
<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}>
{addClient.isPending ? 'Dodawanie...' : 'Dodaj'}
</Button>
</form>
<ClientInput type="name" label="Nazwa firmy" data={data["name"]} inputMode="text" inputType="text" handleChange={handleChange} error={errors["name"]}/>
<ClientInput type="address" label="Adres" data={data["address"]} inputMode="text" inputType="text" handleChange={handleChange} error={errors["address"]}/>
<ClientInput type="nip" label="NIP" data={data["nip"]} inputMode="numeric" inputType="number" handleChange={handleChange} error={errors["nip"]}/>
</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
+1 -1
View File
@@ -2,7 +2,7 @@ import {Grid} from "@mui/material";
function DashboardView(){
return (
<Grid item>
<Grid>
trest
</Grid>
);
src/views/LoginView.jsx
+1 -3
View File
@@ -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
+25
View File
@@ -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>
);
}