From 2c1fb161d1a5ffff119c6292b876cb08814f8e79 Mon Sep 17 00:00:00 2001
From: Ryjek <szymon.gawlik@gmail.com>
Date: Sun, 12 Jul 2026 22:08:11 +0200
Subject: [PATCH] add login view

---
 src/views/LoginView.jsx | 70 +++++++++++++++++++++++++++++++----------
 1 file changed, 53 insertions(+), 17 deletions(-)

diff --git a/src/views/LoginView.jsx b/src/views/LoginView.jsx
index 4d8e54e..9684004 100644
--- a/src/views/LoginView.jsx
+++ b/src/views/LoginView.jsx
@@ -1,4 +1,4 @@
-import {Button, TextField} from "@mui/material";
+import {Box, Button, CircularProgress, Paper, Stack, TextField, Typography} from "@mui/material";
 import {useNavigate} from "react-router-dom";
 import {useAuthStore} from "../stores/authStore.jsx";
 import {useState} from "react";
@@ -8,33 +8,69 @@ export default function LoginView() {
 	const loginAction = useAuthStore(s => s.login);
 	const [username, setUsername] = useState('');
 	const [password, setPassword] = useState('');
+	const [isLoading, setIsLoading] = useState(false);
 	const [error, setError] = useState(null)
 
 	async function handleLogin(e) {
 		e.preventDefault();
+		setIsLoading(true);
 		try{
 			await loginAction(username, password);
 			navigate("/");
 		} catch (e) {
 			setError(e);
+		} finally {
+			setIsLoading(false);
 		}
 	}
+
+	// <form onSubmit={handleLogin}>
+	// 	{error && <p>{error}</p>}
+	// </form>
 	return (
-			<form onSubmit={handleLogin}>
-				{error && <p>{error}</p>}
-				<div>
-					<TextField inputMode={"text"} id="login" variant="outlined" label="Login" name={"login"}
-							   onChange={e => setUsername(e.target.value)}
-							   value={username}
-					/>
-				</div>
-				<div>
-					<TextField inputMode={"text"} id="password" variant="outlined" label="Password" type={"password"} name={"password"}
-							   onChange={e => setPassword(e.target.value)}
-							   value={password}
-					/>
-				</div>
-				<Button variant="outlined" type={"submit"}>Zaloguj</Button>
-			</form>
+			<Box sx={{
+				minHeight: '100vh',
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+			}}>
+				<Paper component="form"
+					   onSubmit={handleLogin}
+					   elevation={4}
+					   sx={{
+						   width: '100%',
+						   maxWidth: 400,
+						   borderRadius: 2,
+						   p:2
+					   }}
+					   >
+					<Stack spacing={2}>
+						<Typography variant="h5" component="h1">Logowanie</Typography>
+						<TextField inputMode={"text"} id="login" variant="outlined" label="Login" name={"login"}
+						           onChange={e => setUsername(e.target.value)}
+						           value={username}
+								   fullWidth
+								   disabled={isLoading}
+						/>
+						<TextField inputMode={"text"} id="password" variant="outlined" label="Password" type={"password"} name={"password"}
+						           onChange={e => setPassword(e.target.value)}
+						           value={password}
+								   fullWidth
+								   disabled={isLoading}
+						/>
+						{isLoading ? (
+							<Box sx={{
+								width: '100%',
+								display: 'flex',
+							}}>
+								<CircularProgress aria-label="Loading…" sx={{margin:"auto"}}/>
+							</Box>
+						) : (
+							<Button variant="outlined" type={"submit"}>Zaloguj</Button>
+						)}
+					</Stack>
+
+				</Paper>
+			</Box>
 	);
 }
\ No newline at end of file