signup.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 form = document.querySelector('.ancient-access-form');
    const inputs = document.querySelectorAll('.mystical-input-group input');
    const passwordInputs = document.querySelectorAll('input[type="password"]');
    const passwordToggleButtons = document.querySelectorAll('.toggle-password');
  
    // Input focus effects
    inputs.forEach(input => {
      input.addEventListener('focus', () => {
        input.style.transform = 'scale(1.02)';
        input.style.boxShadow = '0 0 15px rgba(193, 162, 87, 0.3)';
      });
  
      input.addEventListener('blur', () => {
        input.style.transform = 'scale(1)';
        input.style.boxShadow = 'none';
      });
    });
  
    // Password visibility toggle
    passwordToggleButtons.forEach((button, index) => {
      button.addEventListener('click', () => {
        const input = passwordInputs[index];
        const eyeIcon = button.querySelector('.eye-icon');
        
        if (input.type === 'password') {
          input.type = 'text';
          eyeIcon.innerHTML = `
            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
            <line x1="1" y1="1" x2="23" y2="23"></line>
          `;
        } else {
          input.type = 'password';
          eyeIcon.innerHTML = `
            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
            <circle cx="12" cy="12" r="3"></circle>
          `;
        }
      });
    });
  
    // Form submission with API integration
    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      
      // Password validation
      const [password, confirmPassword] = passwordInputs;
      if (password.value !== confirmPassword.value) {
        alert('Sacred Ciphers must align');
        return;
      }
  
      const email = form.querySelector('input[type="email"]').value;
      const username = form.querySelector('input[type="text"]').value;
      
      try {
        const response = await fetch('/signup', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ 
            email, 
            password: password.value,
            username 
          }),
        });
  
        const data = await response.json();
        
        if (response.ok) {
          // Create a magical reveal effect
          const formWrapper = document.querySelector('.magical-form-wrapper');
          formWrapper.style.transition = 'transform 0.5s ease, opacity 0.5s ease';
          formWrapper.style.transform = 'scale(1.1)';
          formWrapper.style.opacity = '0';
  
          alert('Signup successful!');
          alert('A confirmation email has been sent!');
          
          setTimeout(() => {
            window.location.href = 'signin.html';
          }, 500);
        } else {
          const errorSpan = document.createElement('span');
          errorSpan.style.color = 'red';
          errorSpan.style.display = 'block';
          errorSpan.style.textAlign = 'center';
          errorSpan.style.marginTop = '10px';
          errorSpan.innerText = data.error;
          form.appendChild(errorSpan);
  
          setTimeout(() => {
            errorSpan.remove();
          }, 3000);
        }
      } catch (error) {
        console.error('Signup error:', error);
        alert('A mystical disturbance occurred. Please try again.');
      }
    });
  });