fixed otp box, register form, and login/register links

the-osiris · Mar 2, 2024 · 54039f9 · 54039f9
1 parent b23a286
commit 54039f9
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 61 deletions.
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import Layout from './layout/Layout'
 
 function App() {

diff --git a/client/src/main.jsx b/client/src/main.jsx
@@ -17,7 +17,6 @@ ReactDOM.createRoot(document.getElementById("root")).render(
  closeOnClick
  pauseOnHover={false}
  />
-
  <App />
  </AuthContextProvider>
  </BrowserRouter>

diff --git a/client/src/pages/Login.jsx b/client/src/pages/Login.jsx
@@ -46,7 +46,7 @@ function Login() {
  <Link to="/signup" className="text-blue-500 hover:text-blue-700">
  Register here!
  </Link>
- <div className="right-0 top-0 absolute w-[400px] h-[250px] bg-[#4461F2] blur-3xl opacity-30"></div>
+ <div className="right-0 top-0 z-[-10] absolute w-[400px] h-[250px] bg-[#4461F2] blur-3xl opacity-30"></div>
  </div>
  <div className=""></div>
  <img

diff --git a/client/src/pages/Register.jsx b/client/src/pages/Register.jsx
@@ -1,69 +1,128 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import OtpInput from "react-otp-input";
 import { Link } from "react-router-dom";
+import { toast } from "react-toastify";
 
 import LoginImg from "../assets/image/register.png";
 
-function Register() {
- const [otp, setOtp] = useState("");
- const [renderOTPform, setRenderOTPForm] = useState(null);
- const [registerData, setRegisterData] = useState({
- email: "",
- password: "",
- cpassword: "",
- });
+ function Register() {
+ const [otp, setOtp] = useState("");
+ const [disableButton, setDisableButton] = useState(true);
+ const [showOtpForm, setShowOtpForm] = useState(false);
+ const [registerData, setRegisterData] = useState({
+ email: "",
+ password: "",
+ cpassword: "",
+ });
 
- const handleOTPChange = (e) => {
- setOtp(otp + e);
- };
- // console.log(otp)
- const onInputChange = (e) => {
- setRegisterData({ ...registerData, [e.target.name]: e.target.value });
- };
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+
+ const handleOTPChange = (otpValue) => {
+ console.log("value is: ", otp)
+ setOtp(otpValue);
+ };
+ // console.log(otp)
+ const onInputChange = (e) => {
+ const { name, value } = e.target;
+ setRegisterData(prevState => ({
+ ...prevState,
+ [name]: value
+ }));
+ };
+
+ useEffect(() => {
+ const isEmailValid = emailRegex.test(registerData.email);
+
+
+ const doPasswordsMatch = registerData.password === registerData.cpassword && registerData.password !== "";
+
+ setDisableButton(!(isEmailValid && doPasswordsMatch));
+ }, [registerData]);
 
- const handleSendOTPClick = (e) => {
- // console.log("clicked");
- setRenderOTPForm(
- <div className="w-full flex items-center justify-center">
- <div className="flex flex-col gap-2 items-center">
- <p className="text-sm text-gray-400">
- OTP Sent to submitted email address.{ otp}
- </p>
- <OtpInput
- value={otp}
- onChange={(e) => handleOTPChange(e)}
- isInputNum={true}
- shouldAutoFocus={true}
- // containerStyle={"flex gap-2"}
- inputStyle={{
- border: "1px solid black",
- borderRadius: "8px",
- width: "54px",
- height: "54px",
- fontSize: "12px",
- color: "#000",
- fontWeight: "400",
- caretColor: "blue",
- }}
- focusStyle={{
- border: "1px solid #CFD3DB",
- outline: "none",
- }}
- inputType="text"
- numInputs={6}
- renderSeparator={<span> - </span>}
- renderInput={(props) => <input {...props} />}
- />
+ function renderOtpForm(){
+
+ return (
+ <div className="w-full flex flex-col items-center gap-3 justify-center">
+ <div className="flex flex-col gap-2 items-center">
+ <p className="text-sm text-gray-400">
+ OTP Sent to submitted email address
+ </p>
+ <OtpInput
+ value={otp}
+ onChange={(e) => handleOTPChange(e)}
+ isInputNum={true}
+ shouldAutoFocus={true}
+ // containerStyle={"flex gap-2"}
+ inputStyle={{
+ border: "1px solid black",
+ borderRadius: "8px",
+ width: "30px",
+ height: "30px",
+ fontSize: "12px",
+ color: "#000",
+ fontWeight: "400",
+ caretColor: "blue",
+ }}
+ focusStyle={{
+ border: "1px solid #CFD3DB",
+ outline: "none",
+ }}
+ inputType="text"
+ numInputs={6}
+ renderSeparator={<span>&nbsp;</span>}
+ renderInput={(props) => <input {...props} />}
+ />
+ </div>
  </div>
- </div>
- );
- };
+ );
+ }
+
+ // const handleSendOTPClick = (e) => {
+ // // console.log("clicked");
+ // setRenderOTPForm(
+ // <div className="w-full flex items-center justify-center">
+ // <div className="flex flex-col gap-2 items-center">
+ // <p className="text-sm text-gray-400">
+ // OTP Sent to submitted email address
+ // </p>
+ // <OtpInput
+ // value={otp}
+ // onChange={(e) => handleOTPChange(e.target)}
+ // isInputNum={true}
+ // shouldAutoFocus={true}
+ // // containerStyle={"flex gap-2"}
+ // inputStyle={{
+ // border: "1px solid black",
+ // borderRadius: "8px",
+ // width: "30px",
+ // height: "30px",
+ // fontSize: "12px",
+ // color: "#000",
+ // fontWeight: "400",
+ // caretColor: "blue",
+ // }}
+ // focusStyle={{
+ // border: "1px solid #CFD3DB",
+ // outline: "none",
+ // }}
+ // inputType="text"
+ // numInputs={6}
+ // renderSeparator={<span>&nbsp;</span>}
+ // renderInput={(props) => <input {...props} />}
+ // />
+ // </div>
+ // </div>
+ // );
+ // };
 
  const handleLoginSubmit = (e) => {
  e.preventDefault();
- console.log(registerData);
+
  };
 
+
+
  return (
  <div className="flex flex-col p-10">
  <div className="flex justify-between">
@@ -93,7 +152,7 @@ function Register() {
  <Link to="/login" className="text-blue-500 hover:text-blue-700 z-10">
  Login here!
  </Link>
- <div className="right-0 top-0 absolute w-[400px] h-[250px] bg-[#4461F2] blur-3xl opacity-30 z-1"></div>
+ <div className="right-0 top-0 z-[-10] absolute w-[400px] h-[250px] bg-[#4461F2] blur-3xl opacity-30 z-1"></div>
  </div>
  <div className=""></div>
  <img
@@ -108,7 +167,7 @@ function Register() {
  <form
  onSubmit={handleLoginSubmit}
  action=""
- className="flex flex-col gap-5 w-[300px]"
+ className="flex flex-col gap-3 w-[300px]"
  >
  <input
  required
@@ -119,6 +178,9 @@ function Register() {
  placeholder="Enter Email"
  className="w-[300px] px-3 py-2 bg-[#EAF0F7] rounded focus:outline-none"
  />
+ {registerData.email !== "" && !emailRegex.test(registerData.email) && (
+ <p className="text-red-500 text-sm">Invalid Email</p>
+ )}
  <input
  required
  name="password"
@@ -131,23 +193,38 @@ function Register() {
  <input
  required
  name="cpassword"
- type="cpassword"
+ type="password"
  value={registerData.cpassword}
  onChange={onInputChange}
  placeholder="Confirm Password"
  className="w-[300px] px-3 py-2 bg-[#EAF0F7] rounded focus:outline-none"
  />
- {renderOTPform != null ? (
- renderOTPform
+ {registerData.password !== registerData.cpassword && (
+ <p className="text-red-500 text-sm">Passwords do not match</p>
+
+ )}
+ {showOtpForm === true ? (
+ renderOtpForm()
  ) : (
  <button
- onClick={handleSendOTPClick}
+ disabled={disableButton}
+ onClick={() => setShowOtpForm(true)}
  type="button"
  className="w-full py-3 bg-[#4461F2] hover:bg-[#1C3FEF] rounded-lg text-white"
  >
  Send OTP
  </button>
  )}
+
+ {showOtpForm === true ? (
+ <button
+ disabled={otp.length !== 6}
+ type="submit"
+ className="w-full py-3 bg-[#4461F2] hover:bg-[#1C3FEF] rounded-lg text-white"
+ >
+ Register
+ </button>
+ ) : null}
  </form>
  </div>
  </div>