Scribd
Upload
27 views3 pages

Delish-Rover MobAuth

Uploaded by

sathishshakthi006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
27 views3 pages

Delish-Rover MobAuth

Uploaded by

sathishshakthi006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

import React,{useState,useEffect} from "react";

import "./form.css";
import Myvideo from "../../assets/UiVideo.mp4";
import { ToastContainer, toast } from 'react-toastify';
import { Link,useNavigate } from 'react-router-dom'

import 'react-toastify/dist/ReactToastify.css';
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 ,[event.target.name]: event.target.value})
}

// ... (existing code)

const handleSubmit = (event) => {


event.preventDefault();

const data = new FormData(event.target);


console.table(Object.fromEntries(data.entries()))
axios.post("http://localhost:1234/userauthenticate",
Object.fromEntries(data.entries()))
.then((result) => {
console.log(result.data);
setMessage(result.data.message);
if (result.data.success){
toast.success(`Your OTP is ${result.data.otp}`, {
position: "top-center",
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "dark",
height: "3cm"
});
setTimeout( navigateTo,5000,("/OtpAuth"))
}
else{

toast.error(`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) => {
console.log(err);
});
}

// useEffect(() => {
// if (message) {
// toast.success(`${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={focused1.toString()}
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;

You might also like