signup compenents added

src/App.jsx

@@ -1,32 +1,24 @@
-import {
-	BrowserRouter,
-	Route,
-	Routes,
-} from 'react-router-dom';
-import './App.css';
-import Navbar from './components/NavBar/Navbar';
-import FindABook from './Pages/FindABook';
-import Home from './Pages/home';
-import booksData from '/src/data/booksData.js';
-const URL = 'http://localhost:8000/api/v1/';
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import "./App.css";
+import Navbar from "./components/NavBar/Navbar";
+import FindABook from "./Pages/FindABook";
+import Home from "./Pages/home";
+import booksData from "/src/data/booksData.js";
+import Signup from "./components/userSignup/Signup";
+const URL = "http://localhost:8000/api/v1/";
 
 function App() {
-	if (typeof global === 'undefined') {
+	if (typeof global === "undefined") {
 		window.global = window;
 	}
 	return (
 		<>
 			<BrowserRouter>
 				<Navbar />
 				<Routes>
-					<Route
-						path="/find-book"
-						element={<FindABook />}
-					/>
-					<Route
-						path="/"
-						element={<Home booksData={booksData} />}
-					/>
+					<Route path="/find-book" element={<FindABook />} />
+					<Route path="/" element={<Home booksData={booksData} />} />
+					<Route path="/signup" element={<Signup />} />
 				</Routes>
 			</BrowserRouter>
 		</>

src/components/BookCard/BookCard.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import './BookCard.css';
+import React from "react";
+import "./BookCard.css";
 
 export default function BookCard({
 	imageLinks = {},
@@ -9,14 +9,11 @@ export default function BookCard({
 }) {
 	return (
 		<div className="card">
-			<img
-				src={`../images/${imageLinks.thumbnail}`}
-				alt="Book cover"
-			/>
+			<img src={`../images/${imageLinks.thumbnail}`} alt="Book cover" />
 			<div className="card-content">
 				<p className="card-title">{title}</p>
 				<p className="card-author">
-					By {authors.join(', ')} ({publishedDate})
+					By {authors.join(", ")} ({publishedDate})
 				</p>
 			</div>
 		</div>

src/components/userSignup/Signup.css

@@ -0,0 +1,78 @@
+.signup-wrapper {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100vh;
+}
+
+.signup-container {
+	width: 300px;
+	padding: 20px;
+	border: 1px solid #ccc;
+	border-radius: 5px;
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.error {
+	color: red;
+	font-size: 14px;
+}
+
+input {
+	width: 100%;
+	padding: 8px;
+	margin: 10px 0;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+}
+
+button {
+	width: 100%;
+	background-color: #007bff;
+	color: white;
+	padding: 10px;
+	border: none;
+	border-radius: 4px;
+	cursor: pointer;
+}
+
+button:hover {
+	background-color: #0056b3;
+}
+
+.password-container {
+	margin-bottom: 10px;
+}
+
+.password-input-wrapper {
+	position: relative;
+	width: 100%;
+}
+
+.password-input-wrapper input {
+	width: 100%;
+	padding-right: 30px;
+}
+
+.password-toggle {
+	position: absolute;
+	top: 50%;
+	right: 8px;
+	transform: translateY(-50%);
+	border: none;
+	background: none;
+	cursor: pointer;
+	font-size: 14px;
+	color: #666;
+	padding: 2px;
+	height: 24px;
+	width: 24px;
+	line-height: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.password-toggle:hover {
+	color: #333;
+}

src/components/userSignup/Signup.jsx

@@ -0,0 +1,126 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import "./Signup.css";
+
+const Signup = () => {
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [name, setName] = useState("");
+	const [error, setError] = useState("");
+	const [emailError, setEmailError] = useState("");
+	const [showPassword, setShowPassword] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const navigate = useNavigate();
+
+	const validateEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
+	const validatePassword = (password) => {
+		const passwordRegex =
+			/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/;
+		return passwordRegex.test(password);
+	};
+
+	const handleSubmit = async (e) => {
+		e.preventDefault();
+		setError("");
+		setEmailError("");
+
+		if (!name || !email || !password) {
+			setError("All fields are required.");
+			return;
+		}
+		if (!validateEmail(email)) {
+			setEmailError("Invalid email format.");
+			return;
+		}
+		if (!validatePassword(password)) {
+			setError(
+				"Password must include at least one letter, one number, and one special character, and be at least 6 characters long.",
+			);
+			return;
+		}
+
+		setLoading(true);
+
+		try {
+			const response = await fetch(
+				"http://localhost:8000/api/v1/auth/register",
+				{
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({ name, email, password }),
+				},
+			);
+
+			if (response.ok) {
+				const data = await response.json();
+				localStorage.setItem("token", data.token);
+				navigate("/home");
+			} else {
+				const errorData = await response.json();
+				setError(errorData.message || "An unexpected error occurred.");
+			}
+		} catch (err) {
+			setError("Something went wrong. Please try again.");
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<div className="signup-wrapper">
+			<div className="signup-container">
+				<form onSubmit={handleSubmit}>
+					<h2>Signup</h2>
+					{error && <p className="error">{error}</p>}
+
+					<div>
+						<label>Name:</label>
+						<input
+							type="text"
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+							required
+						/>
+					</div>
+
+					<div>
+						<label>Email:</label>
+						<input
+							type="email"
+							value={email}
+							onChange={(e) => setEmail(e.target.value)}
+							required
+						/>
+						{emailError && <p className="error">{emailError}</p>}
+					</div>
+
+					<div className="password-container">
+						<label>Password:</label>
+						<div className="password-input-wrapper">
+							<input
+								type={showPassword ? "text" : "password"}
+								value={password}
+								onChange={(e) => setPassword(e.target.value)}
+								required
+							/>
+							<button
+								type="button"
+								className="password-toggle"
+								onClick={() => setShowPassword(!showPassword)}
+							>
+								{showPassword ? "👁️" : "👁️‍🗨️"}
+							</button>
+						</div>
+					</div>
+
+					<button type="submit" disabled={loading}>
+						{loading ? "Signing up..." : "Signup"}
+					</button>
+				</form>
+			</div>
+		</div>
+	);
+};
+
+export default Signup;