first commit

ui/form/LoginForm.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { useState } from "react";
+import { Box, Button, TextField, Paper } from "@mui/material";
+import { handleAxiosError } from "@/core/utils";
+import { toast } from "react-toastify";
+import { useRouter } from "next/navigation";
+import { loginUser } from "@/services/api/auth.api";
+
+export default function LoginForm() {
+  const [showPassword, setShowPassword] = useState(false);
+  const router = useRouter();
+  const [form, setForm] = useState({
+    username: "",
+    password: "",
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setForm({
+      ...form,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const { message } = await loginUser(form);
+      toast.success(message);
+      router.push("/");
+    } catch (error) {
+      toast.error(handleAxiosError(error));
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+    
+      }}
+    >
+      <Paper
+        elevation={0}
+        sx={{
+          width: 420,
+          p: 5,
+          borderRadius: 4,
+          backdropFilter: "blur(10px)",
+          background: "rgba(255,255,255,0.9)",
+          boxShadow: "0 20px 60px rgba(0,0,0,0.15)",
+        }}
+      >
+        <h5 className="font-medium text-center mb-5 text-xl">
+          ورود به سيستم ثبت تيكت ها
+        </h5>
+
+        <form onSubmit={handleSubmit}>
+          <TextField
+            fullWidth
+            label="نام کاربری"
+            name="username"
+            value={form.username}
+            onChange={handleChange}
+            margin="normal"
+            // InputProps={{
+            //   startAdornment: (
+            //     <InputAdornment position="start">
+            //       <Person sx={{ color: "#1976d2" }} />
+            //     </InputAdornment>
+            //   ),
+            // }}
+            sx={{
+              mb: 2,
+              "& .MuiOutlinedInput-root": {
+                borderRadius: 3,
+                background: "#f9fbff",
+                "& fieldset": {
+                  borderColor: "#dbeafe",
+                },
+                "&:hover fieldset": {
+                  borderColor: "#90caf9",
+                },
+                "&.Mui-focused fieldset": {
+                  borderColor: "#1976d2",
+                  borderWidth: "2px",
+                },
+              },
+            }}
+          />
+
+          <TextField
+            fullWidth
+            label="رمز عبور"
+            name="password"
+            type={showPassword ? "text" : "password"}
+            value={form.password}
+            onChange={handleChange}
+            margin="normal"
+            // InputProps={{
+            //   startAdornment: (
+            //     <InputAdornment position="start">
+            //       <Lock sx={{ color: "#1976d2" }} />
+            //     </InputAdornment>
+            //   ),
+            //   endAdornment: (
+            //     <InputAdornment position="end">
+            //       <IconButton onClick={() => setShowPassword(!showPassword)}>
+            //         {showPassword ? <VisibilityOff /> : <Visibility />}
+            //       </IconButton>
+            //     </InputAdornment>
+            //   ),
+            // }}
+            sx={{
+              mb: 3,
+              "& .MuiOutlinedInput-root": {
+                borderRadius: 3,
+                background: "#f9fbff",
+                "& fieldset": {
+                  borderColor: "#dbeafe",
+                },
+                "&:hover fieldset": {
+                  borderColor: "#90caf9",
+                },
+                "&.Mui-focused fieldset": {
+                  borderColor: "#1976d2",
+                  borderWidth: "2px",
+                },
+              },
+            }}
+          />
+
+          <Button
+            fullWidth
+            type="submit"
+            variant="contained"
+            sx={{
+              py: 1.5,
+              borderRadius: 3,
+              fontSize: 16,
+              fontWeight: 600,
+              background: "linear-gradient(90deg,#1976d2,#42a5f5,#64b5f6)",
+              boxShadow: "0 10px 25px rgba(25,118,210,0.4)",
+              "&:hover": {
+                background: "linear-gradient(90deg,#1565c0,#1e88e5,#42a5f5)",
+              },
+            }}
+          >
+            ورود
+          </Button>
+        </form>
+      </Paper>
+    </Box>
+  );
+}