Merge branch 'main' of https://github.com/Avdhesh-Varshney/chanakya-niti

into chanakya-niti-shivamm-verma
Avdhesh-Varshney · Jul 28, 2024 · ee3e455 · ee3e455
2 parents a5dcb0e + 0a16086
commit ee3e455
Show file tree

Hide file tree

Showing 10 changed files with 766 additions and 97 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,14 +7,16 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "both": "concurrently \"npm run dev\" \"cd ../chanakya-niti-backend && npm run server\""
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/material": "^5.15.19",
     "axios": "^1.7.2",
     "bootstrap": "^5.3.3",
+    "concurrently": "^8.2.2",
     "dotenv": "^16.4.5",
     "groq-sdk": "^0.5.0",
     "react": "^18.2.0",

diff --git a/src/components/shared/Footer.jsx b/src/components/shared/Footer.jsx
@@ -3,6 +3,8 @@ import { NavLink } from "react-router-dom";
 import { Context } from "../../context/Context";
 import Visitors from "./Visitors";
 import { FaGithub, FaHome, FaInfoCircle, FaUser, FaSignInAlt, FaMusic, FaVideo, FaBook, FaNewspaper, FaQuestionCircle, FaRobot } from "react-icons/fa";
+import Tilt from 'react-parallax-tilt';
+import "../../css/Footer.css";
 
 const Footer = () => {
   const { isDarkMode } = useContext(Context);
@@ -13,10 +15,12 @@ const Footer = () => {
         <div className="row">
           <div className="col-md-6 d-flex">
             <figure className="figure">
-              <img src="logo.webp" height="200" alt="Chanakya Image" />
+              <Tilt>
+                <img src="logo.webp" height="200" alt="Chanakya Image" />
+              </Tilt>
               <figcaption className="figure-caption text-center">चाणक्य नीति</figcaption>
             </figure>
-            <div className="my-auto">
+            <div className="my-auto star-btn">
               <a href="https://github.com/Avdhesh-Varshney/chanakya-niti" target="_blank" rel="noopener noreferrer" className="text-white bg-dark p-2 rounded text-decoration-none d-inline-block">
                 <FaGithub className="me-2" /> Star Us ⭐
               </a>

diff --git a/src/components/shared/Navbar.jsx b/src/components/shared/Navbar.jsx
@@ -22,7 +22,7 @@ const Navbar = () => {
   return (
     <nav className={`navbar navbar-expand-lg ${isSticky ? 'mt-2 fixed-top' : ''} ${isDarkMode ? 'navbar-dark' : 'navbar-light'}`} style={{ backgroundColor: `${isDarkMode ? 'rgba(0, 0, 0, 0.4)' : 'rgba(223, 223, 176, 0.4)'}` }}>
       <div className="container-fluid">
-        <Link className="navbar-brand d-flex align-items-center" to="/">
+        <Link className="navbar-brand d-flex align-items-center px-4" to="/">
           <img src="logo.webp" alt="Chanakya Image" className="me-2" style={{ width: '30px', height: '30px' }} />
           <span style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>चाणक्य नीति</span>
         </Link>
@@ -59,7 +59,7 @@ const Navbar = () => {
             <li className="nav-item"><Link className="nav-link" to="/contributor">Contributors</Link></li>
             <li className="nav-item"><Link className="nav-link" to="/auth/login">Login</Link></li>
 
-            <li className='nav-item nav-link' onClick={toggleTheme} style={{ cursor: 'pointer' }}>
+            <li className='nav-item nav-link px-4' onClick={toggleTheme} style={{ cursor: 'pointer' }}>
               {isDarkMode ? (
                 <MdOutlineLightMode style={{ fontSize: '1.5rem', color: 'white' }} />
               ) : (

diff --git a/src/css/ChanakyaQuiz.css b/src/css/ChanakyaQuiz.css
@@ -0,0 +1,76 @@
+.start-button {
+  text-align: center;
+  padding: 10px 20px;
+  margin: 20px;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+  cursor: pointer;
+  background-color: #f0f0f0;
+}
+
+.quiz {
+  margin: 20px;
+  text-align: center;
+}
+
+.quizbuttons {
+  padding: 10px 20px;
+  margin: 10px;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+  cursor: pointer;
+  background-color: #f0f0f0;
+}
+
+.anstop {
+  text-align: left;
+  padding-left: 0;
+}
+
+.anslist {
+  list-style: none;
+  padding-left: 0;
+  margin-bottom: 10px;
+}
+
+.question {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+.question-number {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.answer-option {
+  list-style-type: none;
+  text-align: left;
+  cursor: pointer;
+  margin: 5px 0;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.answer-option:hover {
+  background-color: #f1f1f1;
+}
+
+.answer-option.selected {
+  background-color: #d1e7dd;
+  border-color: #0f5132;
+  color: #0f5132;
+}
+
+.answer-option.incorrect {
+  background-color: #f8d7da;
+  border-color: #f5c2c7;
+  color: #842029;
+}
+
+.result {
+  font-size: 24px;
+  color: green;
+}
diff --git a/src/css/Footer.css b/src/css/Footer.css
@@ -0,0 +1,21 @@
+  .star-btn a {
+    transition: transform 0.3s, background-color 0.3s, color 0.3s; 
+  }
+
+  .star-btn a:hover {
+    transform: scale(1.1); 
+  }
+
+  .list-unstyled li {
+    margin-bottom: 0.5rem; 
+  }
+
+  .list-unstyled li a {
+    transition: transform 0.3s ease-in-out; 
+    display: inline-block; 
+  }
+
+  .list-unstyled li a:hover {
+    transform: scale(1.1); 
+  }
+
diff --git a/src/pages/auth/Login.jsx b/src/pages/auth/Login.jsx
@@ -1,44 +1,68 @@
-import React from 'react';
-import { useState } from 'react';
+import React, { useState } from 'react';
+import axios from 'axios';
 import '../../css/Auth.css';
-import { FaGithub, FaGoogle, FaTwitter,FaEye, FaEyeSlash } from 'react-icons/fa6';
+import { FaGithub, FaGoogle, FaTwitter, FaEye, FaEyeSlash } from 'react-icons/fa6';
+
+const URL = `${import.meta.env.VITE_BACKEND_URL}/api/auth/login`;
 
 const Login = () => {
+	const [email, setEmail] = useState('');
+	const [password, setPassword] = useState('');
 	const [passwordVisible, setPasswordVisible] = useState(false);
+	const [error, setError] = useState('');
+	const [success, setSuccess] = useState('');
+
 	const togglePasswordVisibility = () => {
-    setPasswordVisible(!passwordVisible);
-  };
+		setPasswordVisible(!passwordVisible);
+	};
+
+	const handleSubmit = async (event) => {
+		event.preventDefault();
+		try {
+			const response = await axios.post(URL, { email, password });
+			if (response.data.success) {
+				setSuccess('Login successful!');
+				localStorage.setItem('authToken', response.data.authtoken);
+				window.location.href = '/';
+			}
+		} catch (error) {
+			setError(error.response?.data?.error || 'Something went wrong!');
+		}
+	};
+
 	return (
 		<div className="form-container mb-4">
 			<p className="title">Login</p>
 
-			<form className="form">
+			<form className="form" onSubmit={handleSubmit}>
+				{error && <p className="error">{error}</p>}
+				{success && <p className="success">{success}</p>}
 				<div className="input-group">
-					<label htmlFor="username">Email</label>
-					<input type="email" name="email" id="email" placeholder="" />
+					<label htmlFor="email">Email</label>
+					<input type="email" name="email" id="email" placeholder="Enter you email" autoComplete='off'
+						value={email} onChange={(e) => setEmail(e.target.value)} required />
 				</div>
+
 				<div className="input-group">
 					<label htmlFor="password">Password</label>
-					<div class="password-container">
-              <input
-                type={passwordVisible ? "text" : "password"}
-                name="password"
-                id="password"
-                placeholder=""
-              />
-              <button
-                type="button"
-                class="password-toggle"
-                onClick={togglePasswordVisibility}
-              >
-                {passwordVisible ? <FaEyeSlash /> : <FaEye />}
-              </button>
-            </div>
+					<div className="password-container">
+						<input type={passwordVisible ? "text" : "password"} name="password" id="password" placeholder="Enter you password"
+							value={password} onChange={(e) => setPassword(e.target.value)} required />
+						<button
+							type="button"
+							className="password-toggle"
+							onClick={togglePasswordVisibility}
+						>
+							{passwordVisible ? <FaEyeSlash /> : <FaEye />}
+						</button>
+					</div>
+
 					<div className="forgot">
-						<a rel="noopener noreferrer" href="#">Forgot Password ?</a>
+						<a rel="noopener noreferrer" href="#">Forgot Password?</a>
 					</div>
 				</div>
-				<button className="sign">Sign in</button>
+
+				<button type="submit" className="sign">Sign in</button>
 			</form>
 
 			<div className="social-message">
@@ -48,23 +72,16 @@ const Login = () => {
 			</div>
 
 			<div className="social-icons">
-				<button aria-label="Log in with Google" className="icon">
-					<FaGoogle />
-				</button>
-				<button aria-label="Log in with Twitter" className="icon">
-					<FaGithub />
-				</button>
-				<button aria-label="Log in with GitHub" className="icon">
-					<FaTwitter />
-				</button>
+				<button aria-label="Log in with Google" className="icon"><FaGoogle /></button>
+				<button aria-label="Log in with Twitter" className="icon"><FaTwitter /></button>
+				<button aria-label="Log in with GitHub" className="icon"><FaGithub /></button>
 			</div>
 
 			<p className="signup">Don't have an account?
 				<a rel="noopener noreferrer" href="/auth/signup"> Sign up</a>
 			</p>
-
 		</div>
-	)
-}
+	);
+};
 
 export default Login;