signin.js

document.addEventListener('DOMContentLoaded', () => {
    // Check if user is already signed in
    const token = localStorage.getItem('authToken');
    if (token) {
      window.location.href = '/dashboard.html'; // Redirect to dashboard if already signed in
      return;
    }
  
    const zenForm = document.querySelector('.zen-form');
    const signinPanel = document.querySelector('.signin-panel');
    const inputs = zenForm.querySelectorAll('input');
  
    // Add input validation and interaction
    inputs.forEach(input => {
      input.addEventListener('focus', () => {
        input.parentElement.classList.add('input-focus');
      });
  
      input.addEventListener('blur', () => {
        input.parentElement.classList.remove('input-focus');
      });
    });
  
    // Handle form submission
    zenForm.addEventListener('submit', async (e) => {
      e.preventDefault();
      
      const email = inputs[0].value;
      const password = inputs[1].value;
      const submitButton = zenForm.querySelector('.enter-gate');
  
      try {
        // Show loading state
        submitButton.textContent = 'Entering...';
        submitButton.disabled = true;
  
        const response = await fetch('/signin', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email, password }),
        });
  
        const data = await response.json();
  
        if (response.ok) {
          // Store authentication token
          localStorage.setItem('authToken', data.token);
          
          // Success animation
          signinPanel.style.transform = 'rotateY(180deg)';
          signinPanel.style.background = 'linear-gradient(135deg, #6b8e23, #87ceeb)';
          
          setTimeout(() => {
            window.location.href = '/dashboard.html'; // Redirect to dashboard
          }, 1000);
        } else {
          // Show error message
          const errorDisplay = document.createElement('div');
          errorDisplay.className = 'error-message';
          errorDisplay.textContent = data.error || 'Invalid credentials';
          zenForm.appendChild(errorDisplay);
          
          // Shake animation for error
          signinPanel.style.animation = 'shake 0.5s ease-in-out';
          
          // Remove error message after 3 seconds
          setTimeout(() => {
            errorDisplay.remove();
          }, 3000);
        }
      } catch (error) {
        console.error('Signin error:', error);
        // Handle network errors or server being down
        const errorDisplay = document.createElement('div');
        errorDisplay.className = 'error-message';
        errorDisplay.textContent = 'Unable to connect to server. Please try again later.';
        zenForm.appendChild(errorDisplay);
        
        setTimeout(() => {
          errorDisplay.remove();
        }, 3000);
      } finally {
        // Reset button state
        submitButton.textContent = 'Enter Sanctuary';
        submitButton.disabled = false;
      }
    });
  });
  
  // Helper function for authenticated requests
  window.authenticatedFetch = async (url, options = {}) => {
    const token = localStorage.getItem('authToken');
    if (token) {
      options.headers = {
        ...options.headers,
        'Authorization': `Bearer ${token}`,
      };
    }
    const response = await fetch(url, options);
    return response;
  };