113 lines
3.6 KiB
TypeScript
113 lines
3.6 KiB
TypeScript
import React, { useState } from "react";
|
||
import { Box, TextField, Typography, Button, Container } from "@mui/material";
|
||
import { useApplicantLogin } from "@/hooks/auth.hook";
|
||
import { toast } from "sonner";
|
||
import { handleAxiosError, handleLoginRedirect } from "@/core/utils";
|
||
import { useRouter } from "next/navigation";
|
||
|
||
export default function LoginLayout() {
|
||
const [nationalId, setNationalId] = useState("");
|
||
|
||
const router = useRouter();
|
||
const { mutateAsync, isPending } = useApplicantLogin();
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
try {
|
||
const response = await mutateAsync(nationalId);
|
||
console.log("response => ",response)
|
||
if (isPending) {
|
||
toast.loading("در حال انتقال به فرم استخدامي");
|
||
}
|
||
handleLoginRedirect(router, response);
|
||
} catch (error) {
|
||
console.log(error);
|
||
toast.error(handleAxiosError(error));
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Box sx={{ display: "flex", height: "100vh", width: "100%" }}>
|
||
{/* بخش فرم (سمت چپ) */}
|
||
<Box
|
||
sx={{
|
||
flex: 1,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
backgroundColor: "#fff",
|
||
}}
|
||
>
|
||
<Container maxWidth="xs">
|
||
<Typography variant="h4" sx={{ fontWeight: 800, mb: 1 }}>
|
||
خوش آمدید
|
||
</Typography>
|
||
<Typography variant="body1" sx={{ color: "text.secondary", mb: 4 }}>
|
||
براي شروع و يا ادامه فرآيند ، كدملي خود را وارد كنيد
|
||
</Typography>
|
||
|
||
<form onSubmit={handleSubmit}>
|
||
<TextField
|
||
fullWidth
|
||
label="کد ملی"
|
||
value={nationalId}
|
||
onChange={(e) =>
|
||
setNationalId(e.target.value.replace(/[^0-9]/g, ""))
|
||
}
|
||
sx={{ mb: 3, textAlign: "center", fontSize: "1.5rem" }}
|
||
/>
|
||
<Button
|
||
type="submit"
|
||
fullWidth
|
||
variant="contained"
|
||
size="large"
|
||
loading={isPending}
|
||
sx={{ py: 1.5, borderRadius: 2, fontSize: "1rem" }}
|
||
>
|
||
ورود به سامانه
|
||
</Button>
|
||
</form>
|
||
</Container>
|
||
</Box>
|
||
|
||
{/* بخش تصویری/رنگی (سمت راست) */}
|
||
<Box
|
||
sx={{
|
||
flex: 1,
|
||
display: { xs: "none", md: "flex" }, // در موبایل مخفی میشود
|
||
flexDirection: "column",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
background: "linear-gradient(135deg, #1e293b 0%, #334155 100%)",
|
||
color: "white",
|
||
p: 6,
|
||
textAlign: "center",
|
||
}}
|
||
>
|
||
{/* لوگو جایگزین */}
|
||
<Box
|
||
sx={{
|
||
width: 80,
|
||
height: 80,
|
||
bgcolor: "rgba(255,255,255,0.1)",
|
||
borderRadius: 4,
|
||
mb: 4,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
}}
|
||
>
|
||
<Typography variant="h3">لوگو</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h4" sx={{ fontWeight: "bold", mb: 2 }}>
|
||
سامانه جامع استخدامي
|
||
</Typography>
|
||
<Typography variant="body1" sx={{ opacity: 0.8, maxWidth: 400 }}>
|
||
با استفاده از این سامانه، اطلاعات شغلی و رزومه خود را به صورت یکپارچه
|
||
براي گروه ارسال کنید.
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|