From 0365f0918151d3bca6b41061512e18444bec1212 Mon Sep 17 00:00:00 2001
From: Muba006 <mubamuzeen0876@gmail.com>
Date: Sat, 15 Mar 2025 17:35:47 +0530
Subject: [PATCH] otp part finsh balance registation form balance
---
src/App.jsx | 4 +
src/pages/Create_account.jsx | 144 ++++++++++++++--------
src/pages/Seller_reg.jsx | 11 ++
src/pages/Send_otp.jsx | 228 +++++++++++++++++++++++++++++++++++
4 files changed, 337 insertions(+), 50 deletions(-)
create mode 100644 src/pages/Seller_reg.jsx
create mode 100644 src/pages/Send_otp.jsx
diff --git a/src/App.jsx b/src/App.jsx
index c07f85d..c1a5a99 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,6 +2,8 @@ import React from "react";
import Landing from "./pages/Landing";
import Seller_login from "./pages/seller_login";
import Create_account from "./pages/Create_account";
+import Send_otp from "./pages/Send_otp";
+import Seller_reg from "./pages/seller_reg";
import { Route, Routes } from "react-router-dom";
function App() {
@@ -11,6 +13,8 @@ function App() {
<Route path="/seller-login" element={<Seller_login />} />
<Route path="/create-account" element={<Create_account />} />
<Route path="/" element={<Landing />} />
+ <Route path="/recive-otp" element={<Send_otp />} />
+ <Route path="/registration" element={<Seller_reg />} />
</Routes>
</>
diff --git a/src/pages/Create_account.jsx b/src/pages/Create_account.jsx
index 741c526..43e79c8 100644
--- a/src/pages/Create_account.jsx
+++ b/src/pages/Create_account.jsx
@@ -4,75 +4,119 @@ import { useNavigate } from "react-router-dom";
function Create_account() {
const navigate = useNavigate();
- const goto = () => {
- navigate("/create-account");
- };
const Infoicon = () =>(
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 inline-block ml-1">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M12 20a8 8 0 100-16 8 8 0 000 16z" />
</svg>
- );
+);
const [phoneNumber, setPhoneNumber] = useState("");
- const [phoneNumberError, setPhoneNumberError]= useState("");
+ const [phoneNumberError, setPhoneNumberError] = useState("");
+
+ const handlePhoneNumberChange = (e) => {
+ const value = e.target.value;
+ const phoneRegex = /^[0-9]{0,10}$/; // Allows only numbers and max 10 digits
+
+ if (!phoneRegex.test(value)) {
+ setPhoneNumberError("*Phone number must contain only numbers and be 10 digits.");
+ } else {
+ setPhoneNumberError("");
+ }
+
+ setPhoneNumber(value);
+ };
const handleSendOtp = (e) => {
e.preventDefault();
-
if (phoneNumber.length !== 10) {
- setPhoneNumberError("*Enter a vaild PhoneNumer, please Enter PhoneNumber");
- return false;
+ setPhoneNumberError("Phone number must be exactly 10 digits.");
+ } else {
+ setPhoneNumberError("");
+ alert("OTP Sent Successfully!");
+ navigate("/recive-otp", { state: { phone: phoneNumber } });
}
- setPhoneNumberError("");
- return true;
-
- // Navigate to OTP page and pass phoneNumber as state
- //navigate("/otp-verification", { state: { phoneNumber } });
};
return (
<>
- <div className="flex flex-col items-center min-h-screen bg-[#E9FAFF] p-4 font-montserrat">
- {/* Header */}
- <div className="w-full text-left max-w-6xl px-2 md:px-0 mb-6 mt-6 ml-30 flex">
- <h1 className="text-[20px] md:text-[48.31px] font-[700px] text-[#030A1E] relative ">
- OMPOI - Seller
- </h1>
+ <div className="flex flex-col items-center min-h-screen bg-[#E9FAFF] p-4 font-montserrat">
+ {/* Header */}
+ <div className="w-full text-left max-w-6xl px-2 md:px-0 mb-6 mt-6 ml-30 flex">
+ <h1 className="text-[20px] md:text-[48.31px] font-bold text-[#030A1E] relative">
+ OMPOI - Seller
+ </h1>
+ </div>
+
+ <div className="flex flex-col md:flex-row items-center justify-center w-full max-w-2xl md:max-w-5xl bg-[#FFFFFF] p-2 rounded-[32.6px] shadow-lg relative">
+ {/* Left Section - Image */}
+ <div className="w-fit md:w-1/2 flex justify-center md:pr-8 relative gap-1 md:gap-0">
+ <img src={reg} alt="Login Illustration" className="max-w-xs md:max-w-lg p-3" />
+ <div className="hidden md:block absolute right-0 top-[7px] bottom-0 w-[1px] h-[400px] bg-[#E2E7EE]" />
</div>
- <div className="flex flex-col md:flex-row items-center justify-center w-full max-w-5xl bg-[#FFFFFF] p-2 rounded-[32.6px] shadow-lg">
- {/* Left Section - Image */}
- <div className="w-fit md:w-1/2 flex justify-center md:pr-8 relative">
- <img
- src={reg}
- alt="Login Illustration"
- className="max-w-xs md:max-w-lg p-3 "
- />
- <div className="hidden md:block absolute right-0 top-[-17px] bottom-0 w-[1px] h-[460px] bg-[#E2E7EE] "></div>
- </div>
+ {/* Right Section - OTP Registration */}
+ <div className="w-full md:w-1/2 flex flex-col items-center md:pl-0 mt-[40px] md:mt-7 p-2 md:p-15">
+ <h2 className="text-[18px] md:text-[24.91px] font-semibold mb-2 self-center">
+ Merchant Registration
+ </h2>
+ <p className="text-[16px] md:text-[12.91px] font-semibold mt-[5px] justify-center items-center self-center mb-[50px]">
+ OTP-Verification
+ </p>
+
+ <form className="w-full max-w-sm" onSubmit={handleSendOtp}>
+ <div className="relative mb-8">
+ <label
+ className={`text-[10px] md:text-[18px] text-[#8B9BB1] p-[0.5px] px-1 relative top-1 left-6 bg-white ${
+ phoneNumberError ? "text-red-500" : "text-green-500"
+ }`}
+ >
+ Phone Number
+ </label>
+ <input
+ type="text"
+ id="phoneNumber"
+ value={phoneNumber}
+ onChange={handlePhoneNumberChange}
+ maxLength="10"
+ required
+ className={`w-full p-2 md:p-3 border border-[#C4CFDE] rounded-[12px] mt-[-10px] text-[10px] md:text-[18px] focus:outline-none ${phoneNumberError ? "border-red-500" : "border-green-500 "} `}
+ placeholder="+91"
+ />
+ {phoneNumberError && (
+ <p className="text-red-500 text-[10px] mt-1">{phoneNumberError} <Infoicon /> </p>
+ )}
+ </div>
- {/* Right Section - otp registration */}
- <div className="w-full md:w-1/2 flex flex-col items-center md:pl-8 mt-[40px] md:mt-7 p-2 md:p-15">
- <h2 className="text-[18px] md:text-[24.91px] font-semibold mb-2 self-center">Merchant Registration</h2> <br />
- <h2 className="text-[18px] md:text-[24.91px] font-semibold mt-[-20px] justify-center items-center self-center mb-[50px]">OTP-Verification</h2>
- <form className="w-full max-w-sm">
- <div className="relative mb-8">
- <label className={`text-[10px] md:text-[18px] text-[#8B9BB1] p-[0.5px] px-1 relative top-1 left-6 bg-white ${phoneNumberError ? "border-red-500" : "border-green-500 "}`}>
- Phone Number
- </label>
- <input type="text" id="phoneNumber" onChange={(e) => {
- setPhoneNumber(e.target.value);
- handleSendOtp(e.target.value);
- }}
- value={phoneNumber} className="w-full p-2 md:p-3 border border-[#C4CFDE] rounded-[12px] mt-[-10px] text-[10px] md:text-[18px] focus:outline-none "placeholder="+91" />
- {phoneNumberError && <p className="text-red-500 text-[10px]">{phoneNumberError} <Infoicon /> </p>}
+ <div className="flex justify-center items-center">
+ <button
+ type="submit"
+ className="w-30 md:w-52 px-2 md:px-10 bg-[#fdba74] text-[#020617] py-1.5 md:py-3.5 rounded-[20.8px] md:rounded-[32.6px] mb-14 font-semibold focus:outline-none"
+ >
+ Send OTP
+ </button>
+ </div>
+ </form>
+ </div>
+
+ {/* Absolute right-side design, hidden on small screens */}
+ <div className="hidden md:flex mr-[-170px] mt-[-250px]">
+ <div className="border-[2px] border-[#171451] right-5 w-10 h-10 bg-[#E2E7EE] rounded-full" />
+ <div className="rounded-full bg-[#171451] p-1 w-5 h-5 mx-[-30px] my-[10px] ">
+ <div className="w-[1px] h-[120px] mt-[25px] ml-[5px] bg-[#D1D5DB] border-dotted border-[1px]" >
+ <div className="border-[2px] border-[#D1D5DB] right-5 w-10 h-10 mt-[120px] ml-[-20px] bg-[#E2E7EE] rounded-full ">
+ <div className="rounded-full bg-[#D1D5DB] p-1 w-5 h-5 mx-[8px] my-[8px] ">
+ <div className="w-[1px] h-[120px] mt-[25px] ml-[5px] bg-[#D1D5DB] border-dotted border-[1px] ">
+ <div className=" border-[2px] border-[#D1D5DB] right-5 w-10 h-10 mt-[120px] ml-[-20px] bg-[#E2E7EE] rounded-full ">
+ <div className="rounded-full bg-[#D1D5DB] p-1 w-5 h-5 mx-[8px] my-[8px] ">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
- <div className="flex justify-center items-center">
- <button className="w-30 md:w-52 px-5 md:px-10 bg-[#fdba74] text-[#020617] py-1.5 md:py-3.5 rounded-[20.8px] md:rounded-[32.6px] mb-14 font-semibold">Send Otp</button>
</div>
- </form>
- </div>
+ </div>
</div>
- </div>
- </>
+ </div>
+</>
);
}
diff --git a/src/pages/Seller_reg.jsx b/src/pages/Seller_reg.jsx
new file mode 100644
index 0000000..b6bff51
--- /dev/null
+++ b/src/pages/Seller_reg.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+function Seller_reg() {
+ return (
+ <>
+ <p className="text-9xl">heloo</p>
+ </>
+ );
+}
+
+export default Seller_reg;
diff --git a/src/pages/Send_otp.jsx b/src/pages/Send_otp.jsx
new file mode 100644
index 0000000..99d7776
--- /dev/null
+++ b/src/pages/Send_otp.jsx
@@ -0,0 +1,228 @@
+import React from "react";
+import { useState, useEffect } from "react";
+import reg from "../assets/seller-reg/sellerreg.svg";
+import { useLocation, useNavigate } from "react-router-dom";
+
+function Send_otp() {
+ const navigate = useNavigate();
+ const Infoicon = () =>(
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 inline-block ml-1">
+ <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M12 20a8 8 0 100-16 8 8 0 000 16z" />
+ </svg>
+ );
+ const [countdown, setCountdown] = useState(30);
+ const [isCounting, setIsCounting] = useState(true);
+ const [generatedOtp, setGeneratedOtp] = useState("");
+ const [userOtp, setUserOtp] = useState(["", "", "", "", "", ""]);
+ const [message, setMessage] = useState({ text: "", color: "" });
+
+ useEffect(() => {
+ let timer;
+ if (isCounting && countdown > 0) {
+ timer = setInterval(() => {
+ setCountdown((prev) => prev - 1);
+ }, 1000);
+ } else if (countdown === 0) {
+ setIsCounting(true);
+ const otp = Math.floor(100000 + Math.random() * 900000).toString(); // Generate 6-digit OTP
+ setGeneratedOtp(otp);
+ alert(`Your OTP is: ${otp}`);
+ }
+
+ return () => clearInterval(timer);
+ }, [isCounting, countdown]);
+
+ const handleResendOtp = () => {
+ setCountdown(30);
+ setIsCounting(true);
+ setMessage({ text: "", color: "" });
+ setUserOtp(["", "", "", "", "", ""]);
+ };
+ const handleOtpChange = (index, value) => {
+ if (!isNaN(value) && value.length <= 1) {
+ const newOtp = [...userOtp];
+ newOtp[index] = value;
+ setUserOtp(newOtp);
+ }
+ };
+ const verifyOtp = () => {
+ const enteredOtp = userOtp.join("");
+ if (enteredOtp === generatedOtp) {
+ setMessage({ text: "*OTP Successfully Entered!", color: "text-green-500" });
+ setTimeout(() => {
+ navigate("/registration");
+ }, 1000);
+ } else {
+ setMessage({ text: "*Invalid OTP, Please Try Again!", color: "text-red-500" });
+ }
+ };
+ const donot = () => {
+ alert("Please wait a second, server work for you! ");
+ };
+ const location = useLocation();
+ const phone = location.state?.phone || "No Phone Number Provided";
+ return (
+ <>
+ <div className="flex flex-col items-center min-h-screen bg-[#E9FAFF] p-4 font-montserrat">
+ {/* Header */}
+ <div className="w-full text-left max-w-6xl px-2 md:px-0 mb-6 mt-6 ml-30 flex">
+ <h1 className="text-[20px] md:text-[48.31px] font-bold text-[#030A1E] relative">
+ OMPOI - Seller
+ </h1>
+ </div>
+
+ <div className="flex flex-col md:flex-row items-center justify-center w-full max-w-2xl md:max-w-5xl bg-[#FFFFFF] p-2 rounded-[32.6px] shadow-lg relative">
+ {/* Left Section - Image */}
+ <div className="w-fit md:w-1/2 flex justify-center md:pr-8 relative gap-1 md:gap-0">
+ <img
+ src={reg}
+ alt="Login Illustration"
+ className="max-w-xs md:max-w-lg p-3"
+ />
+ <div className="hidden md:block absolute right-0 top-[7px] bottom-0 w-[1px] h-[400px] bg-[#E2E7EE]" />
+ </div>
+
+ {/* Right Section - OTP Registration */}
+ <div className="w-full md:w-1/2 flex flex-col items-center md:pl-0 mt-[40px] md:mt-[70px] p-2 md:p-6">
+ <h2 className="text-[18px] md:text-[24.91px] font-semibold mb-[2px] self-center">
+ Merchant Registration
+ </h2>
+ <p className="text-[16px] md:text-[12.91px] font-semibold mt-[5px] justify-center items-center self-center mb-[18px]">
+ OTP-Verification
+ </p>
+ <div className="text-[10px] md:text-[12.91px] font-[10px] mt-[5px] justify-center items-center self-center mb-[5px]">
+ <span className="text-black">
+ We Will send you a one time password on
+ </span>
+ <br />
+ <span className="text-black">
+ <p className="text-center">
+ this <span className="font-extrabold">Mobile Number</span>{" "}
+ </p>
+ </span>
+ <br />
+ <div className="mb-[20px]">
+ <p className="text-center">
+ <strong>+91 {phone}</strong>
+ </p>
+ </div>
+ </div>
+ <div className="flex justify-between items-center">
+ <div className="mb-[10px]">
+ {userOtp.map((digit, index) => (
+ <input
+ type="text"
+ key={index}
+ value={digit}
+ onChange={(e) => handleOtpChange(index, e.target.value)}
+ maxLength="1"
+ className="w-5 md:w-10 h-5 md:h-10 rounded-full bg-[#D1D5DB] border-[2px] ml-[5px] md:ml-[10px] border-[#fdba74] hover:border-orange-500 focus:outline-none text-center "
+ />))}
+ {message.text && <p className={`mt-4 ml-4 text-[10px] font-semibold ${message.color}`}>{message.text} <Infoicon /> </p>}
+ </div>
+ </div>
+ <div className="mb-[10px]">
+ <p className="text-[16px] md:text-[20px] font-semibold text-[#675B5B]">
+ {`00:${countdown < 10 ? `0${countdown}` : countdown}`}
+ </p>
+ </div>
+ <div className="flex flex-col md:flex-row justify-center gap-5 w-full text-[12px] mb-8 font-semibold">
+ <p
+ className="text-center md:text-[#030A1E] hover:underline cursor-pointer"
+ onClick={donot}
+ >
+ Do not send OTP?
+ </p>
+ <p
+ className="text-center text-[#FFBD69] md:text-[#FFBD69] hover:underline cursor-pointer"
+ onClick={handleResendOtp}
+ >
+ Send Otp
+ </p>
+ </div>
+ <div>
+ <button
+ onClick={verifyOtp}
+ type="submit"
+ className="w-30 md:w-52 px-2 md:px-10 text-[15px] md:text-[20px] bg-[#FFBD69] text-[#030A1E] py-1.5 md:py-3.5 rounded-[20.8px] md:rounded-[32.6px] mb-8 font-semibold focus:outline-none"
+ >
+ Verify Otp
+ </button>
+ </div>
+ </div>
+
+ {/* Absolute right-side design, hidden on small screens */}
+ <div className="hidden md:flex mr-[-170px] mt-[-320px] ">
+ <div className="border-[2px] border-[#171451] right-5 w-10 h-10 bg-[#E2E7EE] rounded-full">
+ <div className="rounded-full bg-[#171451] p-1 w-5 h-5 mx-[8px] my-[8px] ">
+ <div className="w-[1px] h-[120px] mt-[25px] ml-[5px] bg-[#D1D5DB] border-dotted border-[1px] ">
+ <div className="border-[2px] border-[#D1D5DB] right-5 w-10 h-10 mt-[120px] ml-[-20px] bg-[#E2E7EE] rounded-full ">
+ <div className="rounded-full bg-[#D1D5DB] p-1 w-5 h-5 mx-[8px] my-[8px] ">
+ <div className="w-[1px] h-[120px] mt-[25px] ml-[5px] bg-[#D1D5DB] border-dotted border-[1px] ">
+ <div className="border-[2px] border-[#D1D5DB] right-5 w-10 h-10 mt-[120px] ml-[-20px] bg-[#E2E7EE] rounded-full ">
+ <div className="rounded-full bg-[#D1D5DB] p-1 w-5 h-5 mx-[8px] my-[8px] "></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default Send_otp;
+
+
+
+
+{/*{userOtp.map((digit, index) => (
+ <input
+ type="text"
+ onChange={(e) => handleOtpChange(index, e.target.value)}
+ maxLength="1"
+ key={index}
+ value={digit}
+ className="w-5 md:w-10 h-5 md:h-10 rounded-full bg-[#D1D5DB] border-[2px] ml-[5px] md:ml-[10px] border-[#fdba74] hover:border-orange-500 focus:outline-none text-center "
+ />))}
+ {userOtp.map((digit, index) => (
+ <input
+ type="text"
+ onChange={(e) => handleOtpChange(index, e.target.value)}
+ key={index}
+ value={digit}
+ maxLength="1"
+ className="w-5 md:w-10 h-5 md:h-10 rounded-full bg-[#D1D5DB] border-[2px] ml-[5px] md:ml-[10px] border-[#fdba74] hover:border-orange-500 focus:outline-none text-center "
+ />))}
+ {userOtp.map((digit, index) => (
+ <input
+ type="text"
+ onChange={(e) => handleOtpChange(index, e.target.value)}
+ key={index}
+ value={digit}
+ maxLength="1"
+ className="w-5 md:w-10 h-5 md:h-10 rounded-full bg-[#D1D5DB] border-[2px] ml-[5px] md:ml-[10px] border-[#fdba74] hover:border-orange-500 focus:outline-none text-center "
+ />))}
+ {userOtp.map((digit, index) => (
+ <input
+ key={index}
+ type="text"
+ value={digit}
+ onChange={(e) => handleOtpChange(index, e.target.value)}
+ maxLength="1"
+ className="w-5 md:w-10 h-5 md:h-10 rounded-full bg-[#D1D5DB] border-[2px] ml-[5px] md:ml-[10px] border-[#fdba74] hover:border-orange-500 focus:outline-none text-center "
+ />))}
+ {userOtp.map((digit, index) => (
+ <input
+ key={index}
+ value={digit}
+ onChange={(e) => handleOtpChange(index, e.target.value)}
+ type="text"
+ maxLength="1"
+ className="w-5 md:w-10 h-5 md:h-10 rounded-full bg-[#D1D5DB] border-[2px] ml-[5px] md:ml-[10px] border-[#fdba74] hover:border-orange-500 focus:outline-none text-center "
+ />
+ ))} */}
\ No newline at end of file
--
GitLab