add login view

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}>
+			<Box sx={{
-				{error && <p>{error}</p>}
+				minHeight: '100vh',
-				<div>
+				display: 'flex',
-					<TextField inputMode={"text"} id="login" variant="outlined" label="Login" name={"login"}
+				alignItems: 'center',
-							   onChange={e => setUsername(e.target.value)}
+				justifyContent: 'center',
-							   value={username}
+			}}>
-					/>
+				<Paper component="form"
-				</div>
+					   onSubmit={handleLogin}
-				<div>
+					   elevation={4}
-					<TextField inputMode={"text"} id="password" variant="outlined" label="Password" type={"password"} name={"password"}
+					   sx={{
-							   onChange={e => setPassword(e.target.value)}
+						   width: '100%',
-							   value={password}
+						   maxWidth: 400,
-					/>
+						   borderRadius: 2,
-				</div>
+						   p:2
-				<Button variant="outlined" type={"submit"}>Zaloguj</Button>
+					   }}
-			</form>
+					   >
+					<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>
 	);
 }