From db58df30ce88b09f4e8cff95225e8208ce5bb769 Mon Sep 17 00:00:00 2001 From: Nashonlyy-dev Date: Fri, 20 Mar 2026 11:18:47 +0630 Subject: [PATCH] improved login and register --- client/src/pages/About.jsx | 2 +- client/src/pages/Login.jsx | 22 +-- client/src/pages/Register.jsx | 292 +++++++++++++++++++++------------- 3 files changed, 196 insertions(+), 120 deletions(-) diff --git a/client/src/pages/About.jsx b/client/src/pages/About.jsx index 449d2b6..d0bb769 100644 --- a/client/src/pages/About.jsx +++ b/client/src/pages/About.jsx @@ -1,4 +1,4 @@ -import React from 'react' + import { MetaData } from '../components/MetaData' export const About = () => { diff --git a/client/src/pages/Login.jsx b/client/src/pages/Login.jsx index 1172ed6..abde5ef 100644 --- a/client/src/pages/Login.jsx +++ b/client/src/pages/Login.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import { useEffect, useState } from 'react' import { MetaData } from '../components/MetaData' import { AiOutlineMail, AiOutlineUnlock, AiOutlineEyeInvisible, AiOutlineEye } from 'react-icons/ai' import { Link, useNavigate } from 'react-router-dom' @@ -47,26 +47,26 @@ export const Login = () => {
-
+
-

Login

+

Login

-
-
+
+
- setEmail(e.target.value)} value={email} required placeholder='Email' type="text" className='outline-none bold-placeholder w-full text-black px-1 pr-3 py-2' /> + setEmail(e.target.value)} value={email} required placeholder='Email' type="text" className='outline-none bold-placeholder w-full text-white px-1 pr-3 py-2 bg-[#030712]' />
-
-
+
+
- setPassword(e.target.value)} value={password} required placeholder='Password' type={eyeTog ? "text" : "password"} className='outline-none bold-placeholder w-full text-black px-1 pr-3 py-2' /> + setPassword(e.target.value)} value={password} required placeholder='Password' type={eyeTog ? "text" : "password"} className='outline-none bold-placeholder w-full text-white px-1 pr-3 py-2 bg-[#030712]' />
{eyeTog ? setEyeTog(!eyeTog)} /> : setEyeTog(!eyeTog)} /> @@ -74,10 +74,10 @@ export const Login = () => {
- +
-

Don't have an account, Register here.

+

Don't have an account, Register here.

diff --git a/client/src/pages/Register.jsx b/client/src/pages/Register.jsx index f7d0b88..13a8239 100644 --- a/client/src/pages/Register.jsx +++ b/client/src/pages/Register.jsx @@ -1,36 +1,37 @@ -import React, { useState, useEffect } from 'react' -import { MetaData } from '../components/MetaData' -import { AiOutlineMail, AiOutlineUnlock, AiOutlineEyeInvisible, AiOutlineEye } from 'react-icons/ai' -import { MdPermIdentity, MdOutlineFeaturedPlayList } from 'react-icons/md' -import { BsFileEarmarkText } from 'react-icons/bs' -import { CgProfile } from 'react-icons/cg' -import { Link, useNavigate } from 'react-router-dom' -import { TbLoader2 } from 'react-icons/tb' -import { registerUser } from '../actions/UserActions' -import { useDispatch, useSelector } from 'react-redux' - - +import React, { useState, useEffect, useRef } from "react"; +import { MetaData } from "../components/MetaData"; +import { + AiOutlineMail, + AiOutlineUnlock, + AiOutlineEyeInvisible, + AiOutlineEye, +} from "react-icons/ai"; +import { MdPermIdentity, MdOutlineFeaturedPlayList } from "react-icons/md"; +import { BsFileEarmarkText } from "react-icons/bs"; +import { CgProfile } from "react-icons/cg"; +import { Link, useNavigate } from "react-router-dom"; +import { TbLoader2 } from "react-icons/tb"; +import { registerUser } from "../actions/UserActions"; +import { useDispatch, useSelector } from "react-redux"; export const Register = () => { + const { loading, isLogin } = useSelector((state) => state.user); + const dispatch = useDispatch(); + const navigate = useNavigate(); - const { loading, isLogin } = useSelector(state => state.user) - const dispatch = useDispatch() - const navigate = useNavigate() - - const [eyeTog, setEyeTog] = useState(false) + const [eyeTog, setEyeTog] = useState(false); const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [skills, setSkills] = useState(""); + const skillsRef = useRef(null); - const [avatar, setAvatar] = useState("") - const [avatarName, setAvatarName] = useState("") - - const [resume, setResume] = useState("") - const [resumeName, setResumeName] = useState("") - + const [avatar, setAvatar] = useState(""); + const [avatarName, setAvatarName] = useState(""); + const [resume, setResume] = useState(""); + const [resumeName, setResumeName] = useState(""); const avatarChange = (e) => { if (e.target.name === "avatar") { @@ -38,15 +39,13 @@ export const Register = () => { reader.onload = () => { if (reader.readyState === 2) { setAvatar(reader.result); - setAvatarName(e.target.files[0].name) + setAvatarName(e.target.files[0].name); } }; reader.readAsDataURL(e.target.files[0]); } - } - - + }; const resumeChange = (e) => { if (e.target.name === "resume") { @@ -54,157 +53,234 @@ export const Register = () => { reader.onload = () => { if (reader.readyState === 2) { setResume(reader.result); - setResumeName(e.target.files[0].name) + setResumeName(e.target.files[0].name); } }; reader.readAsDataURL(e.target.files[0]); } - } - + }; const registerHandler = (e) => { - e.preventDefault() + e.preventDefault(); - const skillsArr = skills.split(",") + const skillsArr = skills.split(","); const data = { name, email, password, avatar, resume, - skills: skillsArr - } - - dispatch(registerUser(data)) - - setName("") - setEmail("") - setPassword("") - setAvatar("") - setAvatarName("") - setResume("") - setResumeName("") - setSkills("") - - } + skills: skillsArr, + }; + dispatch(registerUser(data)); + setName(""); + setEmail(""); + setPassword(""); + setAvatar(""); + setAvatarName(""); + setResume(""); + setResumeName(""); + setSkills(""); + }; useEffect(() => { if (isLogin) { - navigate("/") + navigate("/"); } - }, [isLogin]) + }, [isLogin]); return ( <> -
-
- - -
-
-

Register

+
+
+ +
+
+

Register

{/* Name */} -
-
+
+
- setName(e.target.value)} required placeholder='Full name' type="text" className='outline-none bold-placeholder w-full text-black px-1 pr-3 py-2' /> + setName(e.target.value)} + required + placeholder="Full name" + type="text" + className="outline-none bold-placeholder w-full text-white px-1 pr-3 py-2 bg-[#030712]" + />
- {/* Mail */} -
-
+
+
- setEmail(e.target.value)} required placeholder='Email' type="email" className='outline-none bold-placeholder w-full text-black px-1 pr-3 py-2' /> + setEmail(e.target.value)} + required + placeholder="Email" + type="email" + className="outline-none bold-placeholder w-full text-white px-1 pr-3 py-2 bg-[#030712]" + />
{/* Password */} -
-
+
+
- setPassword(e.target.value)} required placeholder='Password' type={eyeTog ? "text" : "password"} className='outline-none bold-placeholder w-full text-black px-1 pr-3 py-2' /> -
- {eyeTog ? - setEyeTog(!eyeTog)} /> : setEyeTog(!eyeTog)} /> - } + setPassword(e.target.value)} + required + placeholder="Password" + type={eyeTog ? "text" : "password"} + className="outline-none bold-placeholder w-full text-white px-1 pr-3 py-2 bg-[#030712]" + /> +
+ {eyeTog ? ( + setEyeTog(!eyeTog)} + /> + ) : ( + setEyeTog(!eyeTog)} + /> + )}
{/* Profile */}
-
-
- {avatar.length === 0 ? - : - } +
+
+ {avatar.length === 0 ? ( + + ) : ( + + )}
-
-

Please select Image file

+

+ Please select Image file +

- {/* Resume */}
-
-
+
+
-
-

Please select Image file

+

+ Please select Image file +

{/* Skills */} -
-
+
skillsRef.current?.focus()} + > +
-