diff --git a/src/components/Login/Form/index.jsx b/src/components/Login/Form/index.jsx index 99ae58d..4cb925a 100644 --- a/src/components/Login/Form/index.jsx +++ b/src/components/Login/Form/index.jsx @@ -5,21 +5,39 @@ import { GET_USER_LOGIN_ROUTE } from "@/core/utils/routes"; import { useAuth } from "@/lib/contexts/auth"; import useRequest from "@/lib/hooks/useRequest"; import { yupResolver } from "@hookform/resolvers/yup"; -import { Button, Container, Stack, Typography } from "@mui/material"; +import { + Lock, + Person, + PhoneCallback, + Visibility, + VisibilityOff, +} from "@mui/icons-material"; +import { + Button, + Container, + IconButton, + InputAdornment, + Stack, + Typography, +} from "@mui/material"; +import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { object, string } from "yup"; const LoginForm = () => { + const [showPassword, setShowPassword] = useState(false); const requestServer = useRequest(); const { getUser } = useAuth(); const defaultValues = { username: "", password: "", + telephone_id: "", }; const validationSchema = object({ username: string().required("لطفا نام کاربری را وارد کنید!"), password: string().required("لطفا رمز عبور را وارد کنید!"), + telephone_id: string().required("لطفا شماره تماس داخلی را وارد کنید!"), }); const { @@ -32,18 +50,19 @@ const LoginForm = () => { mode: "all", }); + const handleClickShowPassword = () => setShowPassword((show) => !show); + const onSubmit = async (data) => { try { const formData = new FormData(); formData.append("username", data.username); formData.append("password", data.password); + formData.append("telephone_id", data.telephone_id); await requestServer(GET_USER_LOGIN_ROUTE, "post", { data: formData, }); getUser(); - } catch (error) { - console.error("Login error:", error); - } + } catch (error) {} }; return ( @@ -82,6 +101,15 @@ const LoginForm = () => { {...field} label="نام کاربری" variant="outlined" + slotProps={{ + input: { + endAdornment: ( + + + + ), + }, + }} fullWidth error={!!error} helperText={!!error && error.message} @@ -98,7 +126,27 @@ const LoginForm = () => { {...field} label="رمزعبور" variant="outlined" - type="password" + type={showPassword ? "text" : "password"} + slotProps={{ + input: { + startAdornment: ( + + + {showPassword ? ( + + ) : ( + + )} + + + ), + endAdornment: ( + + + + ), + }, + }} fullWidth error={!!error} helperText={!!error && error.message} @@ -107,6 +155,32 @@ const LoginForm = () => { }} name={"password"} /> + { + return ( + + + + ), + }, + }} + fullWidth + error={!!error} + helperText={!!error && error.message} + /> + ); + }} + name={"telephone_id"} + />