...

poc_project_mycelium/components/login.html

@@ -0,0 +1,123 @@
+<!-- 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()">&times;</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>