From c3294be9ded434cf156d8aa6b6f98baad7a7ad55 Mon Sep 17 00:00:00 2001
From: Mehtarishita <rishitamehta298@gmail.com>
Date: Tue, 8 Oct 2024 00:56:36 +0530
Subject: [PATCH 1/2] redirect page on login n registration

---
 frontend/src/Pages/LoginPage.jsx     | 41 ++++++++++++--------
 frontend/src/Pages/Register.jsx      | 58 +++++++++++++++++-----------
 frontend/src/assets/svg/backicon.svg |  3 ++
 3 files changed, 64 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/assets/svg/backicon.svg

diff --git a/frontend/src/Pages/LoginPage.jsx b/frontend/src/Pages/LoginPage.jsx
index ee075c4..eead9e9 100644
--- a/frontend/src/Pages/LoginPage.jsx
+++ b/frontend/src/Pages/LoginPage.jsx
@@ -1,10 +1,17 @@
 import React, { useState } from 'react'; 
 import logo from '../assets/stationsaarthi.svg'; // Import your logo 
-
+import { useNavigate } from 'react-router-dom';
+import backicon from '../assets/svg/backicon.svg'; // Assuming you have a back icon
 const Login = () => {
     const [username, setUsername] = useState(''); 
     const [password, setPassword] = useState(''); 
- 
+    const navigate = useNavigate();
+    const RegisterClick = () => {
+        navigate('/Register'); // Navigates to the login page
+    }
+    const HomeClick = () => {   
+        navigate('/'); // Navigates to the home page
+    }
     const handleLogin = (e) => { 
         e.preventDefault(); 
         // Handle login logic here 
@@ -14,44 +21,45 @@ const Login = () => {
     return ( 
         <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-100 to-blue-5000">
             {/* Logo and Title */} 
-            <div className="text-center mb-10 ">
-                <img src={logo} alt="Station Saarthi Logo" className="mx-auto w-20 h-22 " />
-                <h1 className="text-4xl font-bold text-gray-800 mt-4 ">Station Saarthi</h1>
-                <p className="text-gray-600 mt-2 text-lg ">Your Trusted Platform Guide</p>
+            <div ><button onClick={HomeClick}><img src={backicon} alt="" srcset="" className='fixed left-[1vh] h-[9vh] w-auto' /></button></div>
+            <div className="mb-10 text-center ">
+                <img src={logo} alt="Station Saarthi Logo" className="w-20 mx-auto h-22 " />
+                <h1 className="mt-4 text-4xl font-bold text-gray-800 ">Station Saarthi</h1>
+                <p className="mt-2 text-lg text-gray-600 ">Your Trusted Platform Guide</p>
             </div>
 
 
             {/* Login Form */}
-            <form onSubmit={handleLogin} className="w-full max-w-sm bg-white p-8 rounded-lg shadow-md">
+            <form onSubmit={handleLogin} className="w-full max-w-sm p-8 bg-white rounded-lg shadow-md">
                 {/* Login Heading */}
-                <h2 className="text-xl font-bold text-center mb-4 py-1 bg-blue-100 border border-blue-300 rounded-3xl shadow-sm">
+                <h2 className="py-1 mb-4 text-xl font-bold text-center bg-blue-100 border border-blue-300 shadow-sm rounded-3xl">
                     Login
                 </h2>
 
                 {/* Username Input */}
                 <div className="mb-5">
-                    <label className=" block text-gray-700 font-semibold mb-2" htmlFor="username">Username</label>
+                    <label className="block mb-2 font-semibold text-gray-700 " htmlFor="username">Username</label>
                     <input
                         type="text" 
                         id="username" 
                         value={username} 
                         onChange={(e) => setUsername(e.target.value)}
                         placeholder="Enter your username"
-                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
+                        className="w-full px-4 py-2 transition duration-300 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                         required
                     /> 
                 </div> 
 
                 {/* Password Input */} 
                 <div className="mb-6"> 
-                    <label className="block  text-gray-700 font-semibold mb-2" htmlFor="password">Password</label>
+                    <label className="block mb-2 font-semibold text-gray-700" htmlFor="password">Password</label>
                     <input 
                         type="password"    
                         id="password"  
                         value={password}  
                         onChange={(e) => setPassword(e.target.value)}
                         placeholder="Enter your password"
-                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
+                        className="w-full px-4 py-2 transition duration-300 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                         required
                     />
                 </div>
@@ -59,7 +67,7 @@ const Login = () => {
                 {/* Login Button */} 
                 <button
                     type="submit"
-                    className="w-full py-3 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105"
+                    className="w-full py-3 font-semibold text-white transition duration-300 ease-in-out transform bg-blue-500 rounded-lg hover:bg-blue-600 hover:scale-105"
                 >
                     Login
                 </button>
@@ -68,10 +76,11 @@ const Login = () => {
             {/* Don't have an account link */}
             <p className="mt-6 text-gray-600">
                 Don't have an account?{' '}
-                <a href="/Register" className="text-blue-500 font-semibold hover:underline transition duration-300 transform hover:scale-105">
-                    Register
-                </a> 
+              
+                <button onClick={RegisterClick} className="text-blue-500 underline focus:outline-none">
+                    Register</button>
             </p> 
+            
         </div>  
     ); 
 }; 
diff --git a/frontend/src/Pages/Register.jsx b/frontend/src/Pages/Register.jsx
index eceb0b1..d1f19c6 100644
--- a/frontend/src/Pages/Register.jsx
+++ b/frontend/src/Pages/Register.jsx
@@ -1,7 +1,17 @@
 import React, { useState } from 'react';
 import logo from '../assets/stationsaarthi.svg'; // Ensure the path is correct
-
+import { useNavigate } from 'react-router-dom';
+import backicon from '../assets/svg/backicon.svg';
 const Register = () => {
+
+    const navigate = useNavigate();
+    const LoginClick = () => {
+        navigate('/Login'); // Navigates to the login page
+    };
+    const HomeClick = () => {
+        navigate('/'); // Navigates to the home page
+    };
+    
     const [name, setName] = useState('');
     const [phoneNumber, setPhoneNumber] = useState('');
     const [email, setEmail] = useState('');
@@ -13,31 +23,34 @@ const Register = () => {
     };
 
     return (
-        <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-100 to-blue-5000 px-4">
+        <>
+       
+        <div className="flex flex-col items-center justify-center min-h-screen px-4 bg-gradient-to-b from-blue-100 to-blue-5000">
             {/* Logo and Title */}
-            <div className="text-center mb-6">
-                <img src={logo} alt="Station Saarthi Logo" className="mx-auto w-20 h-22 mb-2" />
+             <div ><button onClick={HomeClick}><img src={backicon} alt="" srcset="" className='fixed left-[1vh] h-[9vh] w-auto' /></button></div>
+            <div className="mb-6 text-center">
+                <img src={logo} alt="Station Saarthi Logo" className="w-20 mx-auto mb-2 h-22" />
                 <h1 className="text-2xl font-bold text-gray-800">Station Saarthi</h1>
-                <p className="text-gray-700 mt-1 text-sm">Your Trusted Platform Guide</p>
+                <p className="mt-1 text-sm text-gray-700">Your Trusted Platform Guide</p>
             </div>
 
             {/* Registration Form */}
-            <form onSubmit={handleRegister} className="w-full max-w-sm bg-white p-6 rounded-lg shadow-md">
+            <form onSubmit={handleRegister} className="w-full max-w-sm p-6 bg-white rounded-lg shadow-md">
                 {/* Register Heading */}
-                <h2 className="text-xl font-bold text-center mb-4 py-1 bg-blue-100 border border-blue-300 rounded-3xl shadow-sm">
+                <h2 className="py-1 mb-4 text-xl font-bold text-center bg-blue-100 border border-blue-300 shadow-sm rounded-3xl">
                     Register
                 </h2>
 
                 {/* Name Input */}
                 <div className="mb-4">
-                    <label className="block text-gray-700 font-semibold mb-1" htmlFor="name">Name</label>
+                    <label className="block mb-1 font-semibold text-gray-700" htmlFor="name">Name</label>
                     <input
                         type="text"
                         id="name"
                         value={name}
                         onChange={(e) => setName(e.target.value)}
                         placeholder="Enter your name"
-                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                         required
                     />
                 </div>
@@ -45,7 +58,7 @@ const Register = () => {
                 {/* Phone Number Input */}
                  <div className="mb-4">
           <label
-            className="block text-gray-700 font-medium mb-1"
+            className="block mb-1 font-medium text-gray-700"
             htmlFor="phoneNumber"
           >
             Phone Number
@@ -58,11 +71,11 @@ const Register = () => {
             placeholder="Enter your phone number"
             pattern="\d{10}"
             maxLength="10"
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+            className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
             required
           />
           {phoneNumber && phoneNumber.length !== 10 && (
-            <p className="text-red-500 text-sm">
+            <p className="text-sm text-red-500">
               Please enter a valid 10-digit phone number.
             </p>
           )}
@@ -70,28 +83,28 @@ const Register = () => {
 
                 {/* Email Input */}
                 <div className="mb-4">
-                    <label className="block text-gray-700 font-medium mb-1" htmlFor="email">Email</label>
+                    <label className="block mb-1 font-medium text-gray-700" htmlFor="email">Email</label>
                     <input
                         type="email"
                         id="email"
                         value={email}
                         onChange={(e) => setEmail(e.target.value)}
                         placeholder="Enter your email"
-                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                         required
                     />
                 </div>
 
                 {/* Password Input */}
                 <div className="mb-5">
-                    <label className="block text-gray-700 font-medium mb-1" htmlFor="password">Password</label>
+                    <label className="block mb-1 font-medium text-gray-700" htmlFor="password">Password</label>
                     <input
                         type="password"
                         id="password"
                         value={password}
                         onChange={(e) => setPassword(e.target.value)}
                         placeholder="Create a password"
-                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                         required
                     />
                 </div>
@@ -99,21 +112,22 @@ const Register = () => {
                 {/* Register Button */}
                 <button
                     type="submit"
-                    className="w-full py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105 text-sm"
+                    className="w-full py-2 text-sm font-semibold text-white transition duration-300 ease-in-out transform bg-blue-500 rounded-md hover:bg-blue-600 hover:scale-105"
                 >
                     Register
                 </button>
             </form>
 
             {/* Already have an account link */}
-            <p className="mt-4 text-gray-700 text-sm">
+            <p className="mt-4 text-sm text-gray-700">
                 Already have an account?{' '}
-                <a href="/Login" className="text-blue-500 font-medium hover:underline transition duration-300 transform hover:scale-105">
-                    Log in
-                </a>
+                <button
+                    onClick={LoginClick}
+                    className="text-blue-500 underline cursor-pointer"> Login</button>
             </p>
         </div>
+        </>
     );
 };
 
-export default Register;
+export default Register;
\ No newline at end of file
diff --git a/frontend/src/assets/svg/backicon.svg b/frontend/src/assets/svg/backicon.svg
new file mode 100644
index 0000000..6b7667e
--- /dev/null
+++ b/frontend/src/assets/svg/backicon.svg
@@ -0,0 +1,3 @@
+<svg width="35" height="30" viewBox="0 0 35 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1688 23.75C19.9509 23.7506 19.7356 23.7094 19.5388 23.6294C19.3419 23.5493 19.1685 23.4325 19.0313 23.2875L11.9875 15.7875C11.773 15.5638 11.6558 15.2833 11.6558 14.9937C11.6558 14.7042 11.773 14.4236 11.9875 14.2L19.2792 6.69998C19.5267 6.44471 19.8824 6.28418 20.268 6.2537C20.6537 6.22323 21.0376 6.32531 21.3354 6.53748C21.6332 6.74965 21.8205 7.05454 21.8561 7.38507C21.8916 7.71561 21.7725 8.04471 21.525 8.29998L15.0063 15L21.3063 21.7C21.4846 21.8835 21.5979 22.1069 21.6327 22.3438C21.6675 22.5808 21.6224 22.8213 21.5028 23.0369C21.3831 23.2526 21.1939 23.4344 20.9575 23.5607C20.721 23.6871 20.4474 23.7528 20.1688 23.75Z" fill="#0076CB"/>
+</svg>
\ No newline at end of file

From 43fdd49e2d9e3b6959f511556679a4c0cfb6882d Mon Sep 17 00:00:00 2001
From: Mehtarishita <rishitamehta298@gmail.com>
Date: Tue, 8 Oct 2024 01:16:52 +0530
Subject: [PATCH 2/2] redirect login done

---
 frontend/src/Pages/LoginPage.jsx | 10 ----------
 frontend/src/Pages/Register.jsx  | 12 ------------
 2 files changed, 22 deletions(-)

diff --git a/frontend/src/Pages/LoginPage.jsx b/frontend/src/Pages/LoginPage.jsx
index dce60e3..eead9e9 100644
--- a/frontend/src/Pages/LoginPage.jsx
+++ b/frontend/src/Pages/LoginPage.jsx
@@ -1,11 +1,7 @@
 import React, { useState } from 'react'; 
 import logo from '../assets/stationsaarthi.svg'; // Import your logo 
 import { useNavigate } from 'react-router-dom';
-<<<<<<< HEAD
 import backicon from '../assets/svg/backicon.svg'; // Assuming you have a back icon
-=======
-
->>>>>>> f79a0616cca434699eaa1820cb1a5370eac5632f
 const Login = () => {
     const [username, setUsername] = useState(''); 
     const [password, setPassword] = useState(''); 
@@ -13,12 +9,9 @@ const Login = () => {
     const RegisterClick = () => {
         navigate('/Register'); // Navigates to the login page
     }
-<<<<<<< HEAD
     const HomeClick = () => {   
         navigate('/'); // Navigates to the home page
     }
-=======
->>>>>>> f79a0616cca434699eaa1820cb1a5370eac5632f
     const handleLogin = (e) => { 
         e.preventDefault(); 
         // Handle login logic here 
@@ -28,10 +21,7 @@ const Login = () => {
     return ( 
         <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-100 to-blue-5000">
             {/* Logo and Title */} 
-<<<<<<< HEAD
             <div ><button onClick={HomeClick}><img src={backicon} alt="" srcset="" className='fixed left-[1vh] h-[9vh] w-auto' /></button></div>
-=======
->>>>>>> f79a0616cca434699eaa1820cb1a5370eac5632f
             <div className="mb-10 text-center ">
                 <img src={logo} alt="Station Saarthi Logo" className="w-20 mx-auto h-22 " />
                 <h1 className="mt-4 text-4xl font-bold text-gray-800 ">Station Saarthi</h1>
diff --git a/frontend/src/Pages/Register.jsx b/frontend/src/Pages/Register.jsx
index 661b70f..d1f19c6 100644
--- a/frontend/src/Pages/Register.jsx
+++ b/frontend/src/Pages/Register.jsx
@@ -1,23 +1,16 @@
 import React, { useState } from 'react';
 import logo from '../assets/stationsaarthi.svg'; // Ensure the path is correct
 import { useNavigate } from 'react-router-dom';
-<<<<<<< HEAD
 import backicon from '../assets/svg/backicon.svg';
-=======
-
->>>>>>> f79a0616cca434699eaa1820cb1a5370eac5632f
 const Register = () => {
 
     const navigate = useNavigate();
     const LoginClick = () => {
         navigate('/Login'); // Navigates to the login page
     };
-<<<<<<< HEAD
     const HomeClick = () => {
         navigate('/'); // Navigates to the home page
     };
-=======
->>>>>>> f79a0616cca434699eaa1820cb1a5370eac5632f
     
     const [name, setName] = useState('');
     const [phoneNumber, setPhoneNumber] = useState('');
@@ -30,16 +23,11 @@ const Register = () => {
     };
 
     return (
-<<<<<<< HEAD
         <>
        
         <div className="flex flex-col items-center justify-center min-h-screen px-4 bg-gradient-to-b from-blue-100 to-blue-5000">
             {/* Logo and Title */}
              <div ><button onClick={HomeClick}><img src={backicon} alt="" srcset="" className='fixed left-[1vh] h-[9vh] w-auto' /></button></div>
-=======
-        <div className="flex flex-col items-center justify-center min-h-screen px-4 bg-gradient-to-b from-blue-100 to-blue-5000">
-            {/* Logo and Title */}
->>>>>>> f79a0616cca434699eaa1820cb1a5370eac5632f
             <div className="mb-6 text-center">
                 <img src={logo} alt="Station Saarthi Logo" className="w-20 mx-auto mb-2 h-22" />
                 <h1 className="text-2xl font-bold text-gray-800">Station Saarthi</h1>