Merge pull request #22 from adityalaxkar123/main

added login signup pages

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^2.2.7",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -20,8 +21,9 @@
     "react-bootstrap": "^2.10.1",
     "react-dom": "^18.2.0",
     "react-native-linear-gradient": "^2.8.3",
+    "react-redux": "^9.1.2",
     "react-responsive-carousel": "^3.2.23",
-    "react-router-dom": "^6.21.1",
+    "react-router-dom": "^6.26.2",
     "react-scripts": "5.0.1",
     "react-scroll": "^1.9.0",
     "react-slick": "^0.29.0",

src/App.js

@@ -7,14 +7,36 @@ import Quiz from './Quiz.js';
 import Craft from './Craft.js';
 import Sef from './Sef.js';
 import Act from './Act.js';
+
+
+import Login from './Login.js';
+import Signup from './Signup.js';
+
 import Footer from './Footer.js';
 
 
 
+
 function App  () {
   return (
     <>
     <div>
+
+         <Nabar/>
+    <Routes>
+
+    <Route path ='/' element={<Hom/>}/>
+    <Route path ='educ' element={<Educ/>}/>
+    <Route path ='sef' element={<Sef/>}/>
+    <Route path ='craft' element={<Craft/>}/>
+    <Route path ='quiz' element={<Quiz/>}/>
+    <Route path ='act' element={<Act/>}/>
+    <Route path ='login' element={<Login/>}/>
+    <Route path ='signup' element={<Signup/>}/>
+    </Routes>
+
+
+
       <Nabar />
       <main>
         <Routes>
@@ -28,6 +50,7 @@ function App  () {
       </main>
       <Footer/>
 
+
     </div>
   </>
   );

src/Login.js

@@ -0,0 +1,83 @@
+// src/Login.js
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+function Login() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const navigate = useNavigate();
+
+  const handleLogin = (e) => {
+    e.preventDefault();
+    setError(''); // Reset error state
+
+    // Basic validation
+    if (!username || !password) {
+      setError('Both fields are required.');
+      return;
+    }
+
+    // Placeholder for actual login logic
+    console.log('Logging in with:', { username, password });
+    alert('Login successful!'); // This would be replaced with actual logic
+
+    // Clear fields after successful login
+    setUsername('');
+    setPassword('');
+  };
+
+  const handleSignupRedirect = () => {
+    navigate('/signup');
+  };
+
+  return (
+    <div className="container mt-5">
+      <div className="row justify-content-center">
+        <div className="col-md-6">
+          <div className="card shadow">
+            <div className="card-body">
+              <h2 className="text-center mb-4">Login</h2>
+              {error && <div className="alert alert-danger">{error}</div>}
+              <form onSubmit={handleLogin}>
+                <div className="mb-3">
+                  <label htmlFor="username" className="form-label">Username:</label>
+                  <input
+                    type="text"
+                    id="username"
+                    className="form-control"
+                    placeholder="Enter your username"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    required
+                  />
+                </div>
+                <div className="mb-3">
+                  <label htmlFor="password" className="form-label">Password:</label>
+                  <input
+                    type="password"
+                    id="password"
+                    className="form-control"
+                    placeholder="Enter your password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                  />
+                </div>
+                <button type="submit" className="btn btn-primary w-100">Login</button>
+              </form>
+              <p className="mt-3 text-center">
+                Don't have an account? <span className="text-primary" style={{ cursor: 'pointer' }} onClick={handleSignupRedirect}>Sign Up</span>
+              </p>
+              <p className="text-center mt-2">
+                <a href="#" className="text-muted">Forgot Password?</a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Login;

src/Nabar.js

@@ -11,7 +11,7 @@ function Nabar() {
   };
 
   const handleSignup = () => {
-    navigate('/refer');
+    navigate('/signup');
   };
 
   const toggleMobileMenu = () => {