159 lines
4.4 KiB
TypeScript
159 lines
4.4 KiB
TypeScript
"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>
|
||
);
|
||
}
|