OPT section in web site

 import { useState } from "react";

import { useLocation, useNavigate } from "react-router-dom";

import axios from "axios";

const VerifyOtp = () => {

  const [otp, setOtp] = useState("");

  const location = useLocation();

  const navigate = useNavigate();

  const email = location.state?.email; // Get email from state

  const handleVerifyOtp = async (e) => {

    e.preventDefault();

    try {

      await axios.post("http://localhost:5000/api/auth/verify-otp", { email, otp });

      alert("Account verified successfully!");

      navigate("/signin"); // Redirect to Sign-in page

      setTimeout(() => {

        alert("Thank you! Now you can sign in and use your blog.");

      }, 1000);

    // eslint-disable-next-line no-unused-vars

    } catch (error) {

      alert("Invalid OTP");

    }

  };

  return (

    <div className="max-w-md mx-auto mt-10">

      <h2 className="text-2xl font-bold">Verify OTP</h2>

      <form onSubmit={handleVerifyOtp} className="flex flex-col gap-4">

        <input type="text" name="otp" placeholder="Enter OTP" className="border p-2" onChange={(e) => setOtp(e.target.value)} required />

        <button type="submit" className="bg-green-500 text-white p-2">Verify OTP</button>

      </form>

    </div>

  );

};

export default VerifyOtp;

// Generate OTP

const generateOTP = () => Math.floor(100000 + Math.random() * 900000).toString();

// Register User

router.post("/signup", async (req, res) => {

  try {

    const { name, email, password, contact } = req.body;

    const userExists = await User.findOne({ email });

    if (userExists) return res.status(400).json({ message: "User already exists" });

    const hashedPassword = await bcrypt.hash(password, 10);

    const otp = generateOTP();

    const user = new User({ name, email, password: hashedPassword, contact, otp });

    await user.save();

    // Send OTP Email

    await transporter.sendMail({

      from: process.env.EMAIL_USER,

      to: email,

      subject: "Your OTP Code",

      text: `Your OTP is: ${otp}`

    });

    res.status(201).json({ message: "User registered! Verify OTP." });

  } catch (error) {

    res.status(500).json({ message: error.message });

  }

});

// Verify OTP

router.post("/verify-otp", async (req, res) => {

  try {

    const { email, otp } = req.body;

    const user = await User.findOne({ email });

    if (!user) return res.status(400).json({ message: "User not found" });

    if (user.otp !== otp) return res.status(400).json({ message: "Invalid OTP" });

    user.verified = true;

    user.otp = "";

    await user.save();

    res.status(200).json({ message: "Account verified! You can now log in." });

  } catch (error) {

    res.status(500).json({ message: error.message });

  }

});

How to take image form the file and save in local storage and get form there ...

<h1> Input and Save Image </h1>

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

function Auth() {

  const [file, setFile] = useState(null);

  useEffect(() => {

    // Load the image from localStorage on page load

    const storedFile = localStorage.getItem('file');

    if (storedFile) {

      setFile(storedFile);

    }

  }, []);

  function handleChange(e) {

    const selectedFile = e.target.files[0];

    if (selectedFile) {

      const reader = new FileReader();

      reader.onloadend = () => {

        // Convert image to base64 and store in localStorage

        localStorage.setItem('file', reader.result);

        setFile(reader.result);

      };

      reader.readAsDataURL(selectedFile);

    }

  }

  return (

    <div className="App">

      <h2>Add Image:</h2>

      <input type="file" onChange={handleChange} />

      {file && <img src={file} alt="Preview" style={{ width: '200px', marginTop: '10px' }} />}

    </div>

  );

}

export default Auth;

Email From by Node and express

2️⃣ Advanced: Node.js + Express Backend

If you want to store form data in MongoDB or send emails using Nodemailer,create a backend. 

 

🔹 Backend (server.js) javascript Copy Edit const

 express = require("express"); 

const cors = require("cors"); 

const nodemailer = require("nodemailer"); 

 const app = express(); 

app.use(express.json()); 

app.use(cors()); 

 const transporter = nodemailer.createTransport({ service: "gmail", auth: { user: "your-email@gmail.com", pass: "your-password", }, });

 app.post("/send-email", (req, res) => { const { firstName, lastName, email, subject, message } = req.body; 

 const mailOptions = { from: email, to: "your-email@gmail.com", subject: `New Contact Form Submission: ${subject}`, text: `Name: ${firstName} ${lastName}\nEmail: ${email}\nMessage: ${message}`, }; 

 transporter.sendMail(mailOptions, (error, info) => { if (error) { res.status(500).send("Email not sent"); } else { res.send("Email sent successfully"); } }); }); 

 app.listen(5000, () => console.log("Server running on port 5000")); 

🔹 React (Frontend) jsx Copy Edit 

const handleSubmit = async (event) => { event.preventDefault();

 const formData = { firstName: event.target.firstName.value, lastName: event.target.lastName.value, email: event.target.email.value, subject: event.target.subject.value, message: event.target.message.value, };

 const response = await fetch("http://localhost:5000/send-email", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData), }); 

 if (response.ok) { setStatus("Message sent successfully!");

 event.target.reset();

 } else { setStatus("Failed to send message."); } }; 

✅ How This Works: Backend uses Nodemailer to send emails Frontend sends data using fetch() Emails are delivered to your inbox

Hover Navbar

LOGO

• Home
• About
• Contact
• Blog

1️⃣ Simple Method: Formspree (No Backend)

import React, { useState } from "react"; function Contact() { const [status, setStatus] = useState(""); const handleSubmit = async (event) => { event.preventDefault(); const formData = new FormData(event.target); const response = await fetch("https://formspree.io/f/YOUR_FORM_ID", { method: "POST", body: formData, headers: { Accept: "application/json" }, }); if (response.ok) { setStatus("Thanks for your message!"); event.target.reset(); // Clear form after successful submission } else { setStatus("Oops! Something went wrong."); } }; return (

{/* Contact Info */}

Contact

Looking forward to hearing from you

• Phone
• 98575545525

• Email
• info@gmail.com

{/* Contact Form */}

{/* First & Last Name */}

First Name* Last Name*

{/* Email & Subject */}

Email* Subject

{/* Message */} Message {/* Submit Button */} {/* Status Message */} {status &&

{status}

}

); } export default Contact;