Skip to content

Commit

Permalink
Made user registration page responsive (Innovateninjas#428)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Priyal208
Priyal208 authored Jun 3, 2024
1 parent 5d2f7dd commit 33c1a33
Showing 1 changed file with 185 additions and 14 deletions.
199 changes: 185 additions & 14 deletions src/pages/user/UserRegistration.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,64 @@ import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import InputField from "../../Components/shared/InputField";
import ReactiveButton from "reactive-button";

import custBackgroundImage from "../user/imgs/pngtree-blue-pastel-background-picture-image_1599663.jpg";
import { FaEye, FaEyeSlash } from 'react-icons/fa6';
import i1 from '../user/imgs/white-dog-pastel-blue-background-3d_89917-269.jpg';
import { login, registration } from "../../utils/Functions/userAuthService";
import LoginTextLink from "../../Components/shared/LoginTextLink";
=======
import custBackgroundImage from "../user/imgs/pngtree-blue-pastel-background-picture-image_1599663.jpg"; // Import your background image
import { FaEye, FaEyeSlash } from "react-icons/fa6";
import i1 from "../user/imgs/white-dog-pastel-blue-background-3d_89917-269.jpg";
import { login, registration } from "../../utils/Functions/userAuthService";
import LoginTextLink from "../../Components/shared/LoginTextLink";
import AlertDialog from "../../Components/shared/AlertDialog";

function CustomBackground({ image }) {
const backgroundStyle = {
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%",
zIndex: -1,
backgroundImage: `url(${image})`,
backgroundSize: "cover",
backgroundPosition: "center",
};

return <div style={backgroundStyle}></div>;
function CustomBackground({ image }) {
return (
<div
className="fixed top-0 left-0 w-full h-full bg-cover bg-center z-[-1]"
style={{ backgroundImage: `url(${image})` }}
></div>
);
}

function LoginRegisterForm() {
const location = useLocation();

const [isPassVisible, setIsPassVisible] = useState(false);
const [userTypingPassword, setUserTypingPassword] = useState(false);
let isLogin = location.pathname !== "/register";
=======
const [userTypingPassword, setUserTypingPassword] = useState(false);
const isLogin = location.pathname !== "/register";


const customButtonStyle = {
borderRadius: "20px",
background: "linear-gradient(to bottom, #b3d9ff, #3399ff)",

padding: "16px 32px",
marginTop: "1rem",
fontSize: "18px",

padding: "20px 40px",
marginTop: "0.675rem",
fontSize: "22px",

fontWeight: "800",
boxShadow: "rgb(38, 57, 77) 0px 15px 30px -10px",
letterSpacing: "0.2rem",
letterSpacing: "0.1rem",
width: "fit-content",
margin: "auto",
};


const [name, setname] = useState("");
const [phone_number, setPhone_number] = useState("");

const [name, setName] = useState("");
const [phone_number, setPhoneNumber] = useState("");
const [email, setEmail] = useState("");
Expand Down Expand Up @@ -71,6 +88,158 @@ function LoginRegisterForm() {
setHasSymbol(/[^A-Za-z0-9]/.test(value));
};



return (
<div className="flex flex-col items-center justify-center min-h-screen py-8 px-4 lg:px-8">
<CustomBackground image={custBackgroundImage} />
<div className="w-full max-w-6xl flex flex-row sm:flex-col items-center justify-center rounded-xl shadow-2xl p-6 lg:p-12">
<div className="w-full flex justify-center items-center mb-8 lg:mb-0">
<form className="flex flex-col gap-4 w-full max-w-md">
{!isLogin && (
<>
<h1 className="text-center text-indigo-900 font-semibold text-2xl lg:text-3xl">Create Account</h1>
<InputField
className="h-12 px-4 py-2 border-b-2 border-blue-800 text-lg bg-white shadow-md"
type="text"
placeholder="Full Name"
value={name}
onChange={(e) => {
setError("");
setname(e.target.value);
}}
required
/>
<InputField
className="h-12 px-4 py-2 border-b-2 border-blue-800 text-lg bg-white shadow-md"
type="tel"
placeholder="Phone Number"
value={phone_number}
onChange={(e) => {
setError("");
setPhone_number(e.target.value);
}}
required
/>
</>
)}
{isLogin && (
<h1 className="text-center text-indigo-900 font-bold text-2xl lg:text-3xl underline">Welcome Back</h1>
)}
<InputField
className="h-12 px-4 py-2 border-b-2 border-blue-800 text-lg bg-white shadow-md"
type="email"
placeholder="Email"
value={email}
onChange={(e) => {
setError("");
setEmail(e.target.value);
}}
required
/>
<div className="relative w-full">
<InputField
className="w-full h-12 px-4 py-2 border-b-2 border-blue-800 text-lg bg-white shadow-md"
type={isPassVisible ? "text" : "password"}
placeholder="Password"
value={password}
onChange={(e) => {
setError("");
setPassword(e.target.value);
validate(e.target.value);
setUserTypingPassword(e.target.value.length > 0);
}}
required
/>
{isPassVisible ? (
<FaEye
className="absolute right-4 top-3 text-blue-500 cursor-pointer"
onClick={() => setIsPassVisible(false)}
/>
) : (
<FaEyeSlash
className="absolute right-4 top-3 text-blue-500 cursor-pointer"
onClick={() => setIsPassVisible(true)}
/>
)}
</div>

{userTypingPassword && (
<div className="text-left w-full mt-2">
<p className={`text-sm ${isMinLength ? 'text-green-500' : 'text-red-500'}`}>• Minimum 8 characters</p>
<p className={`text-sm ${hasUpperCase ? 'text-green-500' : 'text-red-500'}`}>• At least one uppercase letter</p>
<p className={`text-sm ${hasLowerCase ? 'text-green-500' : 'text-red-500'}`}>• At least one lowercase letter</p>
<p className={`text-sm ${hasNumber ? 'text-green-500' : 'text-red-500'}`}>• At least one number</p>
<p className={`text-sm ${hasSymbol ? 'text-green-500' : 'text-red-500'}`}>• At least one symbol</p>
</div>
)}
{!isLogin && (
<>
<div className="w-full relative flex justify-center mt-4">
<ReactiveButton
style={customButtonStyle}
buttonState={state}
idleText="Register"
loadingText="Wait..."
successText="Logged In"
errorText="Error"
messageDuration={3000}
disabled={!(isMinLength && hasUpperCase && hasLowerCase && hasNumber && hasSymbol)}
onClick={async () =>
registration(
name,
phone_number,
email,
password,
setError,
setButtonState
)
}
/>
{error && (
<p className="absolute top-[-20px] w-full text-center text-red-500 font-semibold">
{error}
</p>
)}
</div>
<div className="w-full flex flex-col mt-8 gap-2 items-center">
<LoginTextLink />
<LoginTextLink
text={"Are you an NGO?"}
link={"/ngoregister"}
linkText={"Register Here!"}
className="text-indigo-800 underline"
/>
</div>
</>
)}
{isLogin && (
<div className="w-full relative flex justify-center mt-4">
<ReactiveButton
style={customButtonStyle}
buttonState={state}
idleText="Login"
loadingText="Wait..."
successText="Logged In"
errorText="Error"
onClick={async () =>
login(email, password, setError, setButtonState)
}
/>
{error && (
<p className="absolute top-[-20px] w-full text-center text-red-500 font-semibold">
{error}
</p>
)}
</div>
)}
</form>
</div>
<div className="sm:w-full flex justify-center items-center p-4 lg:mt-0 mt-8">
<img className="block sm:hidden rounded-xl w-2/3" src={i1} alt="Cute dog" />
</div>

=======
const handleRegistration = async () => {
const res = await registration(
name,
Expand Down Expand Up @@ -271,13 +440,15 @@ function LoginRegisterForm() {
</div>
</div>
</div>

</div>
<AlertDialog
open={isOpenConfirmBox}
handleClose={closeConfirmationDialog}
/>
</div>
);

}

export default LoginRegisterForm;

0 comments on commit 33c1a33

Please sign in to comment.