import React,{useState,useEffect} from "react";
import "./[Link]";
import Myvideo from "../../assets/UiVideo.mp4";
import { ToastContainer, toast } from 'react-toastify';
import { Link,useNavigate } from 'react-router-dom'
import 'react-toastify/dist/[Link]';
import axios from 'axios'
function MobnoAuth() {
const navigateTo = useNavigate()
const [values,setValues] = useState({
phone_number:"",
})
const [message,setMessage] =useState('')
const [focused1,setFocused1] =useState(false)
const onBlur1=()=>{
setFocused1(true)
}
const onChange=(event)=>{
setValues({...values ,[[Link]]: [Link]})
}
// ... (existing code)
const handleSubmit = (event) => {
[Link]();
const data = new FormData([Link]);
[Link]([Link]([Link]()))
[Link]("[Link]
[Link]([Link]()))
.then((result) => {
[Link]([Link]);
setMessage([Link]);
if ([Link]){
[Link](`Your OTP is ${[Link]}`, {
position: "top-center",
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "dark",
height: "3cm"
});
setTimeout( navigateTo,5000,("/OtpAuth"))
}
else{
[Link](`Your Mobile Number is Not Registerd`, {
position: "top-center",
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "dark",
height: "3cm"
});
}
})
.catch((err) => {
[Link](err);
});
}
// useEffect(() => {
// if (message) {
// [Link](`${message}`, {
// position: "top-center",
// hideProgressBar: false,
// closeOnClick: true,
// pauseOnHover: true,
// draggable: true,
// progress: undefined,
// theme: "dark",
// height: "3cm"
// });
// }
// }, [message]);
// ... (existing code)
return (
<div className="login">
<ToastContainer />
<video
id="video1"
autoPlay
muted
loop
style={{ width: "100%", height: "100%" }}
>
<source src={Myvideo} type="video/mp4" />
</video>
<form className="form" onSubmit={handleSubmit} styles={{padingTop:"0cm"}}>
<h1 className="head">Login</h1>
<div className="content">
<div className="box">
<i className="ri-user-3-line login__icon"></i>
<div className="box-input">
<input
type="tel"
className="input"
name="phone_number"
placeholder=" "
onChange={onChange}
pattern="[0-9]{10}"
onBlur={onBlur1}
tracking={[Link]()}
required
/>
<label className="login__label">
Mobile Number
</label>
<p className="errorMsg" > Please Enter a Valid 10-digit Mobile Number
!</p>
</div>
</div>
{/* <p className="errorMsg" > Please Enter a Valid 10-digit Mobile
Number !</p> */}
{/* {isMnValid?'error-msg':"error-msg-visible"} */}
</div>
<button className="button">
Get OTP
</button>
<p className="register">
Don't have an account? <a href="uig">Register</a>
</p>
</form>
</div>
);
}
export default MobnoAuth;