init: Init React Application

src/pages/LoginPage/index.tsx

@@ -0,0 +1,119 @@
+import {
+  TextField,
+  Box,
+  Button,
+  Typography,
+  Alert,
+  CircularProgress,
+} from "@mui/material";
+import { authStore } from "@shared";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+
+export const LoginPage = () => {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const { login } = authStore;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsLoading(true);
+
+    try {
+      await login(email, password);
+      navigate("/sights");
+      toast.success("Вход в систему выполнен успешно");
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Ошибка при входе в систему"
+      );
+      toast.error(
+        err instanceof Error ? err.message : "Ошибка при входе в систему"
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: "100vh",
+        gap: 3,
+        p: 3,
+      }}
+    >
+      <Typography variant="h4" component="h1" gutterBottom>
+        Вход в систему
+      </Typography>
+      <Box
+        component="form"
+        onSubmit={handleSubmit}
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          width: "100%",
+          maxWidth: "400px",
+        }}
+      >
+        {error && (
+          <Alert severity="error" sx={{ mb: 2 }}>
+            {error}
+          </Alert>
+        )}
+        <TextField
+          label="Email"
+          type="email"
+          variant="outlined"
+          fullWidth
+          required
+          autoComplete="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          disabled={isLoading}
+          error={!!error}
+        />
+        <TextField
+          label="Пароль"
+          type="password"
+          variant="outlined"
+          fullWidth
+          required
+          autoComplete="current-password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          disabled={isLoading}
+          error={!!error}
+        />
+        <Button
+          variant="contained"
+          color="primary"
+          size="large"
+          type="submit"
+          disabled={isLoading}
+          sx={{
+            width: "100%",
+            height: "50px",
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: "10px",
+          }}
+        >
+          {isLoading ? <CircularProgress size={24} sx={{}} /> : "Войти"}
+        </Button>
+      </Box>
+    </Box>
+  );
+};