script.js

// js/script.js - complete password generation, strength meter, dark mode, copy/reset
(function() {
  'use strict';

  // ---------- DOM elements ----------
  const passwordOutput = document.getElementById('passwordOutput');
  const copyBtn = document.getElementById('copyBtn');
  const resetBtn = document.getElementById('resetBtn');
  const generateBtn = document.getElementById('generateBtn');
  const lengthSlider = document.getElementById('lengthSlider');
  const lengthValue = document.getElementById('lengthValue');
  const includeUppercase = document.getElementById('includeUppercase');
  const includeLowercase = document.getElementById('includeLowercase');
  const includeNumbers = document.getElementById('includeNumbers');
  const includeSymbols = document.getElementById('includeSymbols');
  const strengthFill = document.getElementById('strengthFill');
  const strengthText = document.getElementById('strengthText');

  // ---------- Dark mode, mobile menu, back to top ----------
  const darkToggle = document.getElementById('darkModeToggle');
  const mobileToggle = document.getElementById('mobileToggle');
  const navMenu = document.getElementById('nav-menu');
  const backBtn = document.getElementById('backToTop');
  const loginBtn = document.getElementById('loginBtn');

  // Dark mode
  function setDark(enable) {
    document.body.classList.toggle('dark', enable);
    localStorage.setItem('theme', enable ? 'dark' : 'light');
    if (darkToggle) darkToggle.textContent = enable ? '☀️' : '🌙';
  }
  const stored = localStorage.getItem('theme');
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  setDark(stored ? stored === 'dark' : prefersDark);
  if (darkToggle) darkToggle.addEventListener('click', () => setDark(!document.body.classList.contains('dark')));

  // Mobile menu
  if (mobileToggle && navMenu) {
    mobileToggle.addEventListener('click', (e) => {
      e.stopPropagation();
      navMenu.classList.toggle('active');
      mobileToggle.textContent = navMenu.classList.contains('active') ? '✕' : '☰';
    });
    document.querySelectorAll('.nav-menu a').forEach(link => {
      link.addEventListener('click', () => {
        navMenu.classList.remove('active');
        if (mobileToggle) mobileToggle.textContent = '☰';
      });
    });
  }

  // Back to top
  if (backBtn) {
    window.addEventListener('scroll', () => backBtn.classList.toggle('visible', window.scrollY > 400));
    backBtn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
  }

  // Login dummy
  loginBtn.addEventListener('click', () => {
    alert('🔐 Demo login: no backend required. You are now logged in (simulated).');
  });

  // ---------- Password generation logic ----------
  const UPPERCASE = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  const LOWERCASE = 'abcdefghijklmnopqrstuvwxyz';
  const NUMBERS = '0123456789';
  const SYMBOLS = '!@#$%^&*()_+~`|}{[]:;?><,./-=';

  function generatePassword() {
    let charset = '';
    if (includeUppercase.checked) charset += UPPERCASE;
    if (includeLowercase.checked) charset += LOWERCASE;
    if (includeNumbers.checked) charset += NUMBERS;
    if (includeSymbols.checked) charset += SYMBOLS;

    if (charset === '') {
      alert('Please select at least one character set.');
      return '';
    }

    const length = parseInt(lengthSlider.value, 10);
    let password = '';
    // Use crypto.getRandomValues for better randomness
    const randomValues = new Uint32Array(length);
    window.crypto.getRandomValues(randomValues);

    for (let i = 0; i < length; i++) {
      password += charset[randomValues[i] % charset.length];
    }
    return password;
  }

  // Update password field and strength
  function updatePassword() {
    const newPass = generatePassword();
    if (newPass) {
      passwordOutput.value = newPass;
      updateStrength(newPass);
    }
  }

  // Strength meter
  function updateStrength(pass) {
    let score = 0;
    if (pass.length >= 8) score++;
    if (pass.length >= 12) score++;
    if (/[A-Z]/.test(pass)) score++;
    if (/[a-z]/.test(pass)) score++;
    if (/[0-9]/.test(pass)) score++;
    if (/[^A-Za-z0-9]/.test(pass)) score++;

    // Normalize to 0-5, then map to percentage
    const percent = (score / 6) * 100;
    strengthFill.style.width = percent + '%';

    if (percent < 30) {
      strengthFill.style.background = '#ef4444'; // red
      strengthText.textContent = 'Weak';
    } else if (percent < 60) {
      strengthFill.style.background = '#f59e0b'; // orange
      strengthText.textContent = 'Medium';
    } else {
      strengthFill.style.background = '#10b981'; // green
      strengthText.textContent = 'Strong';
    }
  }

  // Event listeners
  lengthSlider.addEventListener('input', () => {
    lengthValue.textContent = lengthSlider.value;
  });

  generateBtn.addEventListener('click', updatePassword);

  // Copy to clipboard
  copyBtn.addEventListener('click', async () => {
    try {
      await navigator.clipboard.writeText(passwordOutput.value);
      alert('✅ Password copied to clipboard');
    } catch {
      alert('❌ Copy failed');
    }
  });

  // Reset to defaults
  resetBtn.addEventListener('click', () => {
    lengthSlider.value = 12;
    lengthValue.textContent = 12;
    includeUppercase.checked = true;
    includeLowercase.checked = true;
    includeNumbers.checked = true;
    includeSymbols.checked = true;
    updatePassword();
  });

  // Initial password generation and strength
  updatePassword();

  // Also update when checkboxes change (optional)
  includeUppercase.addEventListener('change', updatePassword);
  includeLowercase.addEventListener('change', updatePassword);
  includeNumbers.addEventListener('change', updatePassword);
  includeSymbols.addEventListener('change', updatePassword);
  lengthSlider.addEventListener('change', updatePassword);
})();