wearwell/static/js/register.js

function togglePassword(inputId) {
  const input = document.getElementById(inputId);
  const button = event.target;

  if (input.type === 'password') {
    input.type = 'text';
    button.textContent = '🙈';
  } else {
    input.type = 'password';
    button.textContent = '👁️';
  }
}

function checkPasswordStrength(password) {
  const strengthBar = document.getElementById('strengthBar');
  const hints = {
    lengthHint: document.getElementById('lengthHint'),
    uppercaseHint: document.getElementById('uppercaseHint'),
    lowercaseHint: document.getElementById('lowercaseHint'),
    numberHint: document.getElementById('numberHint'),
    specialHint: document.getElementById('specialHint')
  };

  let strength = 0;
  let messages = [];

  if (password.length >= 8) {
    strength += 20;
    hints.lengthHint.style.color = '#28a745';
    hints.lengthHint.style.textDecoration = 'line-through';
  } else {
    hints.lengthHint.style.color = '#666';
    hints.lengthHint.style.textDecoration = 'none';
  }

  if (/[A-Z]/.test(password)) {
    strength += 20;
    hints.uppercaseHint.style.color = '#28a745';
    hints.uppercaseHint.style.textDecoration = 'line-through';
  } else {
    hints.uppercaseHint.style.color = '#666';
    hints.uppercaseHint.style.textDecoration = 'none';
  }

  if (/[a-z]/.test(password)) {
    strength += 20;
    hints.lowercaseHint.style.color = '#28a745';
    hints.lowercaseHint.style.textDecoration = 'line-through';
  } else {
    hints.lowercaseHint.style.color = '#666';
    hints.lowercaseHint.style.textDecoration = 'none';
  }

  if (/[0-9]/.test(password)) {
    strength += 20;
    hints.numberHint.style.color = '#28a745';
    hints.numberHint.style.textDecoration = 'line-through';
  } else {
    hints.numberHint.style.color = '#666';
    hints.numberHint.style.textDecoration = 'none';
  }

  if (/[^A-Za-z0-9]/.test(password)) {
    strength += 20;
    hints.specialHint.style.color = '#28a745';
    hints.specialHint.style.textDecoration = 'line-through';
  } else {
    hints.specialHint.style.color = '#666';
    hints.specialHint.style.textDecoration = 'none';
  }

  strengthBar.className = 'strength-bar';
  if (strength <= 25) {
    strengthBar.classList.add('strength-weak');
  } else if (strength <= 50) {
    strengthBar.classList.add('strength-medium');
  } else if (strength <= 75) {
    strengthBar.classList.add('strength-strong');
  } else {
    strengthBar.classList.add('strength-very-strong');
  }
  strengthBar.style.width = strength + '%';
}

function checkPasswordMatch() {
  const password = document.getElementById('password').value;
  const confirmPassword = document.getElementById('confirm_password').value;
  const matchElement = document.getElementById('passwordMatch');

  if (!confirmPassword) {
    matchElement.textContent = '';
    matchElement.style.color = '';
    return;
  }

  if (password === confirmPassword) {
    matchElement.textContent = '✓ Passwords match';
    matchElement.style.color = '#28a745';
  } else {
    matchElement.textContent = '✗ Passwords do not match';
    matchElement.style.color = '#dc3545';
  }
}

document.addEventListener('DOMContentLoaded', function () {
  const form = document.querySelector('.auth-form');
  const emailInput = document.getElementById('email');
  const passwordInput = document.getElementById('password');
  const confirmInput = document.getElementById('confirm_password');
  const termsCheckbox = document.getElementById('terms');

  [emailInput, passwordInput, confirmInput].forEach(input => {
    input.addEventListener('focus', function () {
      this.parentElement.classList.add('focused');
    });

    input.addEventListener('blur', function () {
      this.parentElement.classList.remove('focused');
    });
  });

  form.addEventListener('submit', function (e) {
    const email = emailInput.value.trim();
    const password = passwordInput.value.trim();
    const confirmPassword = confirmInput.value.trim();

    if (!email || !password || !confirmPassword) {
      e.preventDefault();
      alert('Please fill in all fields');
      return false;
    }

    if (!email.includes('@')) {
      e.preventDefault();
      alert('Please enter a valid email address');
      return false;
    }

    if (password.length < 8) {
      e.preventDefault();
      alert('Password must be at least 8 characters long');
      return false;
    }

    if (password !== confirmPassword) {
      e.preventDefault();
      alert('Passwords do not match');
      return false;
    }

    if (!termsCheckbox.checked) {
      e.preventDefault();
      alert('You must agree to the Terms of Service');
      return false;
    }

    return true;
  });
});