login code
import React, { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import './App.css';
const LoginPage = ({ setUserName }) => {
const [userName, setUserNameInput] = useState('');
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const navigate = useNavigate();
const validateInput = () => {
if (!userName || !password) {
alert('Please enter a valid username and password.');
setUserNameInput('');
setPassword('');
return false;
}
return true;
};
// ✅ Sign Up only stores username & password in the database
const handleSignup = async () => {
if (!validateInput()) return;
try {
const response = await axios.post('http://127.0.0.1:5000/signup', {
user_name: userName,
password: password,
},
{ withCredentials: true });
alert(response.data.message);
if (response.data.message === 'Signup successful ✅') {
setUserNameInput(''); // Clear input fields
setPassword('');
}
} catch (error) {
handleError(error);
}
};
// ✅ Sign In logs in the user and redirects to homepage
const handleLogin = async () => {
if (!validateInput()) return;
try {
const response = await axios.post('http://127.0.0.1:5000/login', {
user_name: userName,
password: password,
},
{ withCredentials: true });
alert(response.data.message);
if (response.data.message === 'Login successful ✅') {
localStorage.setItem("user_id", response.data.user_id); // ✅ Store user_id
localStorage.setItem("user_name", response.data.user_name); // ✅ Store user_name
setUserName(response.data.user_name);
setUserNameInput('');
setPassword('');
navigate('/'); // ✅ Redirect to homepage
}
} catch (error) {
handleError(error);
}
};
const handleError = (error) => {
if (error.response && error.response.data) {
alert(error.response.data.message);
} else {
alert('Network error: Could not connect to the server. Please check if the server is running.');
}
setUserNameInput('');
setPassword('');
};
return (
<div className="login-container">
<div className="login-card">
<h1 className="login-title">Welcome to Recipe Finder</h1>
<p className="login-subtitle">Please sign up or log in to continue</p>
<div className="form-group">
<label>Username</label>
<input
type="text"
placeholder="Username"
value={userName}
onChange={(e) => setUserNameInput(e.target.value)}
className="input-field"
/>
</div>
<div className="form-group">
<label>Password</label>
<input
type={showPassword ? 'text' : 'password'}
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="input-field"
/>
</div>
<div className="options">
<label>
<input
type="checkbox"
checked={showPassword}
onChange={() => setShowPassword(!showPassword)}
/>
Show Password
</label>
</div>
<div className="button-group">
<button onClick={handleSignup} className="button primary">Sign up</button>
<button onClick={handleLogin} className="button secondary">Sign in</button>
</div>
</div>
</div>
);
};
export default LoginPage;
App.js
import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import "./App.css";
import RecipeForm from "./RecipeForm";
import FeedbackForm from "./FeedbackForm";
import GalleryPage from "./GalleryPage";
import AboutPage from "./AboutPage";
import ContactPage from "./ContactPage";
import LoginPage from "./LoginPage";
import TicTacToe from "./Game"; // Import the Tic Tac Toe game component
function HomePage({ likedRecipes, setLikedRecipes, userName }) {
return (
<div>
{userName && <p className="welcome-message">Hi, {userName}!</p>}
<RecipeForm likedRecipes={likedRecipes} setLikedRecipes={setLikedRecipes} />
</div>
);
}
/*function FamousRecipesPage() {
return <h2>Famous Recipes</h2>;
}*/
function App() {
const [likedRecipes, setLikedRecipes] = useState([]);
const [userName, setUserName] = useState(localStorage.getItem("userName") || null);
useEffect(() => {
if (userName) {
localStorage.setItem("userName", userName);
}
}, [userName]);
const handleLogout = () => {
localStorage.removeItem("userName");
setUserName(null);
window.location.href = "/"; // Redirect to home page after logout
};
return (
<Router>
<div className="App">
<div className="dancing-icons-container">
{Array.from({ length: 20 }, (_, i) => (
<div key={i} className={`dancing-icon vegetable-${i % 5 + 1}`}></div>
))}
</div>
<nav className="nav-container">
<ul className="menu">
<ul className="menu_1">
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About Us</Link></li>
<li><Link to="/contact">Contact Us</Link></li>
{/* Show these menu items ONLY after login */}
{userName && (
<>
<li><Link to="/gallery">Gallery</Link></li>
<li><Link to="/FeedbackForm">FeedbackForm</Link></li>
<li><Link to="/game">Play Game</Link></li>
</>
)}
{/* Show Login / Sign Up only if the user is NOT logged in */}
{!userName ?
<li>
<Link to="/login">
<button className="sign-up-button">Sign Up/Sign in</button>
</Link>
</li>
: (
<li>
<button onClick={handleLogout} className="logout-button">Logout</button>
</li>
)}
</ul>
</ul>
</nav>
<header className="App-header">
<div className="logo-top-right">
<img src="assets/logo.png" alt="TasteBuddy Logo" className="logo" />
<h1 className="logo-name">TasteBuddy</h1>
</div>
</header>
<main>
<Routes>
<Route path="/" element={<HomePage likedRecipes={likedRecipes} setLikedRecipes={setLikedRecipes} userName={userName} />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/contact" element={<ContactPage />} />
<Route path="/login" element={<LoginPage setUserName={setUserName} />} />
{/* Protect Gallery & Game routes - Only show if logged in */}
{userName && <Route path="/gallery" element={<GalleryPage likedRecipes={likedRecipes} />} />}
{userName && <Route path="/FeedbackForm"element={<FeedbackForm />}/>}
{userName && <Route path="/game" element={<TicTacToe />} />}
</Routes>
</main>
<footer>
<div className="footer-content">
<div className="footer-links">
<Link to="/about">About</Link>
<Link to="/">Press</Link>
<Link to="/">Terms & Privacy</Link>
<Link to="/">DMCA</Link>
<Link to="/">Contact & Imprint</Link>
</div>
<div className="footer-store">
<a href="https://play.google.com" target="_blank" rel="noopener noreferrer">
<img src="assets/but-play.png" alt="Google Play" />
</a>
<a href="https://www.apple.com/app-store/" target="_blank" rel="noopener noreferrer">
<img src="assets/but-app.png" alt="App Store" />
</a>
</div>
<div className="footer-social">
<a href="https://www.facebook.com" target="_blank" rel="noopener noreferrer">Facebook</a>
<a href="https://www.twitter.com" target="_blank" rel="noopener noreferrer">Twitter</a>
<a href="https://www.pinterest.com" target="_blank" rel="noopener noreferrer">Pinterest</a>
</div>
<p>© 2024 Recipe Finder. All rights reserved.</p>
<button className="donate-button">Donate</button>
</div>
</footer>
</div>
</Router>
);
}
export default App;
Comments
Post a Comment