Skip to content

Commit

Permalink
refactored and solved some minor bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@xyz-harshal
xyz-harshal committed Feb 2, 2024
1 parent 5a140c4 commit 2b5436f
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 294 deletions.
128 changes: 20 additions & 108 deletions app/(routes)/register/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,29 @@
"use client";
import { useState, useRef } from "react";
import { useRegister } from "@/hooks/useRegister";
import { credDataType } from "@/types/types";
import { useRouter } from "next/navigation";
import { BarLoader } from "react-spinners";
import Navbar from "@/app/components/navbar";
import { Ubuntu } from "next/font/google";
import axios from 'axios'
import { useRouter } from "next/navigation"
import { BarLoader } from "react-spinners"
import Navbar from "@/app/components/navbar"
import { Ubuntu } from "next/font/google"
import { useOtp } from "@/hooks/useOpt"
const ubuntu = Ubuntu({
weight: "400",
subsets: ["latin"],
display: "swap",
});
})

export default function Register() {
let [sendMail, setSendMail] = useState<boolean>(false);
let [recivedOTP, setRecivedOtp] = useState<number>(0);
let [registeredData, setRegisteredData] = useState<credDataType>({
email: "",
password: "",
otp: ['', '', '', '', '', '']
});
const otpInputsRef = useRef<Array<HTMLInputElement | null>>([]);

let { handleRegisterData, error, isLoading } = useRegister();
let response

let handleRegister = () => {
if (sendMail) {
setSendMail(!sendMail);
let numOTP: number = 0;
registeredData.otp.forEach((n, index) => {
numOTP += (10 ** (5 - index)) * Number(n)
})
if (recivedOTP === numOTP) {
handleRegisterData(registeredData);
} else {
setRecivedOtp(-1);
}
} else {
axios.post(`${process.env.NEXT_PUBLIC_SERVER_URL}/otpGenerate`, registeredData).then((res) => {
response = res.data;
if (response.status === 200) {
setRecivedOtp(response.otp)
}
})
setSendMail(!sendMail);

}
};
let router = useRouter();
const handleOnChange = (
e: React.ChangeEvent<HTMLInputElement>,
index: number
): void => {
const value = e.target.value;
const newOTP: string[] = [...registeredData.otp];
newOTP[index] = value.substring(value.length - 1);
setRegisteredData({ email: registeredData.email, password: registeredData.password, otp: newOTP });
if (index < otpInputsRef.current.length - 1 && value.length === 1) {
otpInputsRef.current[index + 1]?.focus();
}
};

let router = useRouter()
let { sendMail, recivedOTP, isLoading, error, registeredData, otpInputsRef, setRegisteredData, handleOnChange, handleRegister } = useOtp();
return (
<>
<Navbar />
<div className="flex flex-col gap-2 items-center justify-center mt-56">
<div className="flex flex-col items-center my-borderCol rounded-lg shadow-lg overflow-hidden p-8 gap-6">
<div className="flex flex-col items-center my-borderCol rounded-lg shadow-lg overflow-hidden p-6 gap-6">
<h2 className="auth-header text-5xl text-violet-600">Register</h2>
<div className="flex flex-col items-start gap-2 ">
<p className={ubuntu.className + " text-xl"}>Email</p>
{recivedOTP == -1 ? <p className={ubuntu.className}>OTP incorrect Please try again</p> : null}
{error.error ? <p className={ubuntu.className} >email already exist</p> : null}
{error.vjti ? <p className={ubuntu.className} >vjti email only</p> : null}
<input
type="email"
className="bg-black outline-none my-borderCol rounded-md p-1"
Expand All @@ -89,77 +40,38 @@ export default function Register() {
className="bg-black outline-none my-borderCol rounded-md p-1"
autoComplete="current-password"
onChange={(e) => {
setRegisteredData({
...registeredData,
password: e.target.value,
});
setRegisteredData({ ...registeredData, password: e.target.value })
}}
/>
</div>
{sendMail ? (
<div className="otp-form">
<div className="otp-container text-black flex justify-center mt-5">
<div className="otp-container background-black text-white flex justify-center mt-5">
{registeredData.otp.map((_, index) => {
return (
<div key={index}>
<input
type="number"
className="otp-input rem-inp-arr transition spin-button-none outline-none w-10 h-10 text-center text-lg rounded m-1"
className="bg-black my-borderCol spin-button-none outline-none w-10 h-10 text-center text-lg rounded m-1"
maxLength={1}
onChange={(e) => handleOnChange(e, index)}
ref={(el) => (otpInputsRef.current[index] = el)}
/>
</div>
);
)
})}
</div>
</div>
) : (
<div></div>
)}
<div className="flex flex-row justify-end w-full">
<button
className="px-5 py-2 my-borderCol rounded-lg"
onClick={handleRegister}
>
<PlayIcon sendMail={sendMail} color="#9C50B6" />
) : null}
<div className="flex flex-row justify-center w-full">
<button className="px-5 py-2 my-borderCol rounded-lg flex flex-row justify-center w-full" onClick={handleRegister}>
{!sendMail ?<p>send otp</p>:<p>submit</p>}
</button>
</div>

</div>
{isLoading ? <BarLoader color="#36d7b7" width={310} /> : null}
<p className={ubuntu.className}>
already registered?
<span
className="cursor-pointer auth-header text-xl text-violet-600"
onClick={() => router.push("/login")}
>
{" "}
Login
</span>{" "}
here!
</p>
<p className={ubuntu.className}>already registered?<span className="cursor-pointer auth-header text-xl text-violet-600" onClick={() => router.push("/login")} >{" "}Login</span>{" "}here!</p>
</div>
</>
);
}
function PlayIcon(props: any) {
return (
<div className="flex justify-center items-centre">
{!props.sendMail ? <small className="m-1">send otp</small> : null}
<svg
color="#9C50B6"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<polygon points="5 3 19 12 5 21 5 3" />
</svg></div>
);
}
}
28 changes: 2 additions & 26 deletions app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,9 @@
@tailwind components;
@tailwind utilities;


.rem-inp-arr::-webkit-outer-spin-button,
.rem-inp-arr::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}


:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
}

body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(to bottom,
transparent,
rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
background-color: black;
color: white
}

.my-borderCol {
Expand Down
47 changes: 47 additions & 0 deletions hooks/useOpt.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import axios from 'axios'
import { useRegister } from './useRegister'
import { useState, useRef } from 'react'
import { credDataType } from "@/types/types"
export function useOtp() {
let { handleRegisterData, error, isLoading } = useRegister()
let [sendMail, setSendMail] = useState<boolean>(false)
let [recivedOTP, setRecivedOtp] = useState<number>(0)
let [registeredData, setRegisteredData] = useState<credDataType>({
email: "",
password: "",
otp: ['', '', '', '', '', '']
})
const otpInputsRef = useRef<Array<HTMLInputElement | null>>([])
const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>, index: number): void => {
const value = e.target.value
const newOTP: string[] = [...registeredData.otp]
newOTP[index] = value.substring(value.length - 1)
setRegisteredData({ email: registeredData.email, password: registeredData.password, otp: newOTP })
if (index < otpInputsRef.current.length - 1 && value.length === 1) {
otpInputsRef.current[index + 1]?.focus()
}
}
let handleRegister = () => {
if (sendMail) {
setSendMail(!sendMail);
let numOTP: number = 0;
registeredData.otp.forEach((n, index) => {
numOTP += (10 ** (5 - index)) * Number(n)
})
if (recivedOTP === numOTP) {
handleRegisterData(registeredData);
} else {
setRecivedOtp(-1);
}
} else {
axios.post(`${process.env.NEXT_PUBLIC_SERVER_URL}/otpGenerate`, registeredData).then((res) => {
let response = res.data;
if (response.status === 200) {
setRecivedOtp(response.otp)
}
})
setSendMail(!sendMail)
}
}
return { handleOnChange, handleRegister, sendMail, error, isLoading, otpInputsRef,registeredData,setRegisteredData,recivedOTP }
}
Loading

0 comments on commit 2b5436f

Please sign in to comment.