124 lines
4.7 KiB
HTML
124 lines
4.7 KiB
HTML
<!-- Login Modal -->
|
|
<div id="loginModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="login-box">
|
|
<div class="login-header">
|
|
<svg class="logo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
|
</svg>
|
|
<h2>Welcome Back</h2>
|
|
<p>Sign in to your Project Mycelium account</p>
|
|
</div>
|
|
<form id="login-form" onsubmit="return validateLoginForm(event)">
|
|
<div class="form-group">
|
|
<label for="login-email">Email</label>
|
|
<input
|
|
type="email"
|
|
id="login-email"
|
|
name="email"
|
|
required
|
|
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
|
|
placeholder="Enter your email"
|
|
autocomplete="email"
|
|
>
|
|
<span class="error-message" id="login-emailError"></span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="login-password">Password</label>
|
|
<input
|
|
type="password"
|
|
id="login-password"
|
|
name="password"
|
|
required
|
|
minlength="8"
|
|
placeholder="Enter your password"
|
|
autocomplete="current-password"
|
|
>
|
|
<span class="error-message" id="login-passwordError"></span>
|
|
</div>
|
|
<div class="form-footer">
|
|
<label class="remember-me">
|
|
<input type="checkbox" name="remember"> Remember me
|
|
</label>
|
|
<a href="#" class="forgot-password">Forgot Password?</a>
|
|
</div>
|
|
<button type="submit" class="submit-button">Sign In</button>
|
|
</form>
|
|
<div class="signup-link">
|
|
Don't have an account? <a href="#" onclick="openSignupModal(); closeLoginModal();">Sign up</a>
|
|
</div>
|
|
<button class="close-button" onclick="closeLoginModal()">×</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openLoginModal() {
|
|
const modal = document.getElementById('loginModal');
|
|
modal.style.display = 'flex';
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeLoginModal() {
|
|
const modal = document.getElementById('loginModal');
|
|
modal.style.display = 'none';
|
|
document.body.style.overflow = 'auto';
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
window.onclick = function(event) {
|
|
const modal = document.getElementById('loginModal');
|
|
if (event.target === modal) {
|
|
closeLoginModal();
|
|
}
|
|
}
|
|
|
|
function validateLoginForm(event) {
|
|
event.preventDefault();
|
|
|
|
const email = document.getElementById('login-email');
|
|
const emailError = document.getElementById('login-emailError');
|
|
const password = document.getElementById('login-password');
|
|
const passwordError = document.getElementById('login-passwordError');
|
|
|
|
// Reset error messages
|
|
emailError.textContent = '';
|
|
passwordError.textContent = '';
|
|
|
|
let isValid = true;
|
|
|
|
// Email validation
|
|
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
|
if (!emailRegex.test(email.value)) {
|
|
emailError.textContent = 'Please enter a valid email address';
|
|
isValid = false;
|
|
}
|
|
|
|
// Password validation
|
|
if (password.value.length < 8) {
|
|
passwordError.textContent = 'Password must be at least 8 characters long';
|
|
isValid = false;
|
|
}
|
|
|
|
if (isValid) {
|
|
// Here you would typically send the form data to your server
|
|
console.log('Form is valid, ready to submit');
|
|
closeLoginModal();
|
|
}
|
|
|
|
return false; // Prevent form submission
|
|
}
|
|
|
|
// Real-time email validation
|
|
document.getElementById('login-email')?.addEventListener('input', function(e) {
|
|
const emailError = document.getElementById('login-emailError');
|
|
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
|
|
|
if (this.value && !emailRegex.test(this.value)) {
|
|
emailError.textContent = 'Please enter a valid email address';
|
|
} else {
|
|
emailError.textContent = '';
|
|
}
|
|
});
|
|
</script>
|