Skip to content

added login and signup button #121

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tarbuch wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added login and signup button #121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@
},
"homepage": "https://github.com/krishagandhi0711/BodyCraft-Gym#readme",
"dependencies": {
"dotenv": "^17.2.1"
"dotenv": "^17.2.2",
"express": "^5.1.0"
},
"devDependencies": {
"nodemon": "^3.1.10"
Expand Down
12 changes: 9 additions & 3 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,14 @@
<li class="link"><a href="#join">Contact Us</a></li>
</ul>

<!-- Profile Button -->
<div class="profile-container">
<!-- Auth Buttons (shown when logged out) -->
<div class="auth-buttons" id="authButtons" style="display:none; gap: 0.75rem; align-items:center;">
<a href="login.html" class="btn" style="padding: 0.6rem 1rem;">Login</a>
<a href="signup.html" class="btn" style="padding: 0.6rem 1rem;">Sign Up</a>
</div>

<!-- Profile Button (shown when logged in) -->
<div class="profile-container" id="profileContainer" style="display:none;">
<button class="profile-btn" id="profileBtn">
<i class="ri-user-line"></i>
<span>Profile</span>
Expand Down Expand Up @@ -101,7 +107,7 @@ <h4 id="userName">John Doe</h4>
<i class="ri-bar-chart-line"></i>
View Stats
</button>
<button class="profile-action-btn logout">
<button class="profile-action-btn logout" id="logoutBtn">
<i class="ri-logout-box-line"></i>
Logout
</button>
Expand Down
68 changes: 68 additions & 0 deletions public/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.4.0/fonts/remixicon.css" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
<title>Login - BodyCraft Gym</title>
</head>
<body>
<nav class="navbar">
<a href="index.html" class="link" style="margin-right:auto;">← Back</a>
<h3 style="margin: 0 auto;">Login</h3>
</nav>

<section class="section__container" style="max-width: 420px; margin: 3rem auto;">
<div class="price__card" style="padding: 1.5rem;">
<div class="price__card__content">
<h4>Welcome back</h4>
<p>Login to continue your fitness journey</p>
</div>

<form id="loginForm" class="diet__form" style="gap: 1rem;">
<div class="diet__form__row">
<label for="loginEmail">Email</label>
<input type="email" id="loginEmail" required placeholder="you@example.com" />
</div>
<div class="diet__form__row">
<label for="loginPassword">Password</label>
<input type="password" id="loginPassword" required placeholder="••••••••" />
</div>
<button class="btn" type="submit" style="width:100%;">Login</button>
<p style="text-align:center; margin-top:0.5rem;">Don't have an account? <a href="signup.html">Sign up</a></p>
</form>
</div>
</section>

<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('loginEmail').value.trim();
const password = document.getElementById('loginPassword').value;

const stored = JSON.parse(localStorage.getItem('users') || '[]');
const user = stored.find(u => u.email.toLowerCase() === email.toLowerCase() && u.password === password);
if (!user) {
alert('Invalid email or password');
return;
}
localStorage.setItem('authUser', JSON.stringify({
email: user.email,
firstName: user.firstName,
lastName: user.lastName
}));
// Optionally hydrate profile defaults used in index profile card
const existing = JSON.parse(localStorage.getItem('userData') || '{}');
localStorage.setItem('userData', JSON.stringify({
...existing,
firstName: user.firstName || existing.firstName,
lastName: user.lastName || existing.lastName
}));
window.location.href = 'index.html';
});
</script>
</body>
</html>


26 changes: 25 additions & 1 deletion public/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ document.addEventListener("DOMContentLoaded", function () {
initializeAnimations();
initializeTouchSupport();
initializePerformanceOptimizations();
initializeAuthVisibility();
});

// Back to Top functionality
Expand Down Expand Up @@ -106,8 +107,9 @@ function initializeProfileActions() {
setTimeout(() => {
this.style.transform = "scale(1)";
if (confirm("Are you sure you want to logout?")) {
alert("Logout functionality will be implemented here!");
localStorage.removeItem('authUser');
document.getElementById("profileDropdown").classList.remove("active");
initializeAuthVisibility();
}
}, 150);
});
Expand Down Expand Up @@ -195,6 +197,28 @@ function initializeMobileNavigation() {
}
}

// Toggle Login/Signup vs Profile based on auth state
function initializeAuthVisibility() {
const authButtons = document.getElementById('authButtons');
const profileContainer = document.getElementById('profileContainer');
const authUser = JSON.parse(localStorage.getItem('authUser') || 'null');

if (authButtons && profileContainer) {
if (authUser) {
authButtons.style.display = 'none';
profileContainer.style.display = 'block';
// Update profile name if available
const nameEl = document.getElementById('userName');
if (nameEl && authUser.firstName) {
nameEl.textContent = `${authUser.firstName} ${authUser.lastName || ''}`.trim();
}
} else {
authButtons.style.display = 'flex';
profileContainer.style.display = 'none';
}
}
}

// Open mobile navigation with enhanced animations
function openMobileNav() {
const navLinks = document.querySelector(".nav__links");
Expand Down
68 changes: 68 additions & 0 deletions public/signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.4.0/fonts/remixicon.css" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
<title>Sign Up - BodyCraft Gym</title>
</head>
<body>
<nav class="navbar">
<a href="index.html" class="link" style="margin-right:auto;">← Back</a>
<h3 style="margin: 0 auto;">Sign Up</h3>
</nav>

<section class="section__container" style="max-width: 520px; margin: 3rem auto;">
<div class="price__card" style="padding: 1.5rem;">
<div class="price__card__content">
<h4>Create your account</h4>
<p>Join BodyCraft Gym and start your transformation</p>
</div>

<form id="signupForm" class="diet__form" style="gap: 1rem;">
<div class="diet__form__row">
<label for="firstName">First Name</label>
<input type="text" id="firstName" required placeholder="John" />
</div>
<div class="diet__form__row">
<label for="lastName">Last Name</label>
<input type="text" id="lastName" required placeholder="Doe" />
</div>
<div class="diet__form__row">
<label for="email">Email</label>
<input type="email" id="email" required placeholder="you@example.com" />
</div>
<div class="diet__form__row">
<label for="password">Password</label>
<input type="password" id="password" minlength="6" required placeholder="At least 6 characters" />
</div>
<button class="btn" type="submit" style="width:100%;">Create account</button>
<p style="text-align:center; margin-top:0.5rem;">Already have an account? <a href="login.html">Login</a></p>
</form>
</div>
</section>

<script>
document.getElementById('signupForm').addEventListener('submit', function(e) {
e.preventDefault();
const firstName = document.getElementById('firstName').value.trim();
const lastName = document.getElementById('lastName').value.trim();
const email = document.getElementById('email').value.trim();
const password = document.getElementById('password').value;

const users = JSON.parse(localStorage.getItem('users') || '[]');
if (users.some(u => u.email.toLowerCase() === email.toLowerCase())) {
alert('Account already exists with this email');
return;
}
users.push({ firstName, lastName, email, password });
localStorage.setItem('users', JSON.stringify(users));
alert('Signup successful! Please login.');
window.location.href = 'login.html';
});
</script>
</body>
</html>