From 9b3ad8530f5e06ea7f94db559cbc5f92c6cb3bcc Mon Sep 17 00:00:00 2001 From: tejasathalye Date: Tue, 8 Oct 2024 00:56:44 +0530 Subject: [PATCH] Added Logo component separately and updated Footer, Navbar, Login, Register --- src/components/Footer.jsx | 11 ++-- src/components/Logo.jsx | 17 ++++++ src/components/Navbar.jsx | 22 +++---- src/pages/Login.jsx | 121 ++++++++++++++++++++------------------ src/pages/Register.jsx | 22 ++++--- 5 files changed, 102 insertions(+), 91 deletions(-) create mode 100644 src/components/Logo.jsx diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 4a0d669..ffb959a 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -6,10 +6,11 @@ import { LocalPhone, LocationOn, } from "@mui/icons-material"; +import XIcon from "@mui/icons-material/X"; +import { Link } from "react-router-dom"; import styled from "styled-components"; +import Logo from "../components/Logo"; import { mobile } from "../responsive"; -import { Link } from "react-router-dom"; -import XIcon from "@mui/icons-material/X"; const Container = styled.div` display: flex; @@ -23,8 +24,6 @@ const Left = styled.div` padding: 20px; `; -const Logo = styled.h1``; - const Desc = styled.p` margin: 20px 0px; `; @@ -89,9 +88,7 @@ const Footer = () => { return ( - - SCROLLME. - + { /* Using Logo component directly */} Welcome to{" "} ScrollMe Web diff --git a/src/components/Logo.jsx b/src/components/Logo.jsx new file mode 100644 index 0000000..1db90ae --- /dev/null +++ b/src/components/Logo.jsx @@ -0,0 +1,17 @@ +import { Link } from "react-router-dom"; +import styled from "styled-components"; + +// Styled component for the Logo (optional) +const LogoWrapper = styled.h1``; + +const Logo = () => { + return ( + + + SCROLLME + + + ); +}; + +export default Logo; diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 621683c..5d2fa7b 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,10 +1,11 @@ +import { ShoppingCartOutlined } from "@mui/icons-material"; +import SearchIcon from "@mui/icons-material/Search"; import React from "react"; +import { useSelector } from "react-redux"; +import { Link } from "react-router-dom"; import styled from "styled-components"; -import SearchIcon from "@mui/icons-material/Search"; -import { ShoppingCartOutlined } from "@mui/icons-material"; +import Logo from "../components/Logo"; import { mobile } from "../responsive"; -import { Link } from "react-router-dom"; -import { useSelector } from "react-redux"; const Container = styled.div` height: 60px; @@ -55,15 +56,12 @@ const Input = styled.input` border: none; margin: "auto" ${mobile({ width: "200px;", margin: "0 auto" })}; `; + const Center = styled.div` flex: 1; text-align: center; `; -const Logo = styled.h1` - font-weight: bold; - ${mobile({ fontSize: "24px;" })} -`; const Right = styled.div` flex: 1; display: flex; @@ -88,16 +86,12 @@ const Navbar = () => { EN - +
- - - SCROLLME - - +
{!isAuthenticated && ( diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index e8b3efd..4bc6764 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -1,10 +1,11 @@ +import { useToast } from "@chakra-ui/react"; +import { useDispatch } from "react-redux"; +import { useNavigate } from "react-router-dom"; import styled from "styled-components"; +import Logo from "../components/Logo"; +import { mobile, tablet } from "../responsive"; import { UserSignInAPI } from "../services/userAPI/signInAPI"; -import { useNavigate } from "react-router-dom"; -import { useDispatch } from "react-redux"; import { changeAuthenticated } from "../store/Slices/UserSlice"; -import { mobile, tablet } from "../responsive"; -import { useToast } from "@chakra-ui/react"; const Container = styled.div` width: 100vw; @@ -12,9 +13,9 @@ const Container = styled.div` background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) - ), - url("https://images.pexels.com/photos/6984650/pexels-photo-6984650.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940") - center; + ), + url("https://images.pexels.com/photos/6984650/pexels-photo-6984650.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940") + center; background-size: cover; display: flex; align-items: center; @@ -64,57 +65,61 @@ const Link = styled.a` `; const Login = () => { - const navigate = useNavigate(); - const dispatch = useDispatch(); - const toast = useToast(); - const handleSubmit = async (e) => { - e.preventDefault(); - const loginData = { - username: e.target.username.value, - password: e.target.password.value, - }; - try { - const response = await UserSignInAPI(loginData); - toast({ - title: "Login Successful", - description: - response.message || "You have successfully logged in. Welcome back!", - status: "success", - duration: 5000, - isClosable: true, - }); - dispatch(changeAuthenticated(true)); - navigate("/"); - } catch (error) { - toast({ - title: "Login Failed!", - description: "Invalid credentials, please try again.", - status: "error", - duration: 5000, - isClosable: true, - }); - console.log(error); - } - }; - return ( - - - SIGN IN -
handleSubmit(e)}> - - - - DO NOT YOU REMEMBER THE PASSWORD? - CREATE A NEW ACCOUNT -
- - - ); + const navigate = useNavigate(); + const dispatch = useDispatch(); + const toast = useToast(); + + const handleSubmit = async (e) => { + e.preventDefault(); + const loginData = { + username: e.target.username.value, + password: e.target.password.value, + }; + try { + const response = await UserSignInAPI(loginData); + toast({ + title: "Login Successful", + description: + response.message || "You have successfully logged in. Welcome back!", + status: "success", + duration: 5000, + isClosable: true, + }); + dispatch(changeAuthenticated(true)); + navigate("/"); + } catch (error) { + toast({ + title: "Login Failed!", + description: "Invalid credentials, please try again.", + status: "error", + duration: 5000, + isClosable: true, + }); + console.log(error); + } + }; + + return ( + + +
+
+ SIGN IN +
handleSubmit(e)}> + + + + DO NOT YOU REMEMBER THE PASSWORD? + CREATE A NEW ACCOUNT +
+ + + ); }; export default Login; diff --git a/src/pages/Register.jsx b/src/pages/Register.jsx index 0c1f25e..4d9ffdc 100644 --- a/src/pages/Register.jsx +++ b/src/pages/Register.jsx @@ -1,11 +1,11 @@ -import styled from "styled-components"; -import { UserRegistrationAPI } from "../services/userAPI/registerationAPI"; -import { useNavigate } from "react-router-dom"; import { useState } from "react"; import { Triangle } from "react-loader-spinner"; -import { mobile, tablet } from "../responsive"; import PasswordStrengthBar from "react-password-strength-bar"; -import { useToast } from "@chakra-ui/react"; +import { useNavigate } from "react-router-dom"; +import styled from "styled-components"; +import Logo from "../components/Logo"; +import { mobile, tablet } from "../responsive"; +import { UserRegistrationAPI } from "../services/userAPI/registerationAPI"; const LoaderOverlay = styled.div` position: absolute; @@ -77,7 +77,6 @@ const Agreement = styled.span` const Text = styled.p` font-size: 12px; - `; const Link = styled.a` @@ -106,11 +105,11 @@ const Register = () => { const [isLoading, setIsLoading] = useState(false); const [password, setPassword] = useState(''); const navigate = useNavigate(); + const validateForm = (formData) => { const { firstName, lastName, username, password } = formData; - - // Username, Firstname, Lastname Validation const namePattern = /^[a-zA-Z]+$/; + if (firstName.length < 2 || !namePattern.test(firstName)) { alert("First name must be at least 2 characters long and contain only letters."); return false; @@ -124,7 +123,6 @@ const Register = () => { return false; } - // Password Validation const passwordPattern = /^(?=.*\d)(?=.*[!@#$%^&*])(?=.*[a-zA-Z]).{8,}$/; if (!passwordPattern.test(password)) { alert("Password must be at least 8 characters long, contain at least one digit and one special character."); @@ -137,7 +135,6 @@ const Register = () => { const handleSubmit = async (e) => { e.preventDefault(); setIsLoading(true); - console.log("Inside the handleSubmit function"); const formData = { firstName: e.target.firstName.value, lastName: e.target.lastName.value, @@ -152,13 +149,12 @@ const Register = () => { setIsLoading(false); return; } - // Form validation + if (!validateForm(formData)) { setIsLoading(false); return; } - setIsLoading(true); try { const response = await UserRegistrationAPI(formData); console.log(response.data); @@ -190,6 +186,8 @@ const Register = () => { )} +
+
CREATE AN ACCOUNT
handleSubmit(e)}>