TKK_E32222685/WEB-playground/assets/js/tambah_admin.js

// Tambah Admin JavaScript
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('addAdminForm');
    const usernameInput = document.getElementById('username');
    const passwordInput = document.getElementById('password');
    const confirmPasswordInput = document.getElementById('confirmPassword');
    const togglePassword = document.getElementById('togglePassword');
    const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
    const errorMessage = document.getElementById('errorMessage');
    const successMessage = document.getElementById('successMessage');
    const submitBtn = document.getElementById('submitBtn');
    const loadingSpinner = document.getElementById('loadingSpinner');
    const btnText = document.getElementById('btnText');

    // Toggle password visibility
    function setupPasswordToggle(toggleBtn, inputField) {
        toggleBtn.addEventListener('click', function() {
            const type = inputField.getAttribute('type') === 'password' ? 'text' : 'password';
            inputField.setAttribute('type', type);
            
            const icon = toggleBtn.querySelector('i');
            if (type === 'password') {
                icon.className = 'fas fa-eye-slash';
            } else {
                icon.className = 'fas fa-eye';
            }
        });
    }

    setupPasswordToggle(togglePassword, passwordInput);
    setupPasswordToggle(toggleConfirmPassword, confirmPasswordInput);

    // Confirm password validation
    function validatePasswordMatch() {
        const password = passwordInput.value;
        const confirmPassword = confirmPasswordInput.value;
        
        if (confirmPassword && password !== confirmPassword) {
            confirmPasswordInput.classList.add('error');
            confirmPasswordInput.classList.remove('success');
            return false;
        } else if (confirmPassword && password === confirmPassword) {
            confirmPasswordInput.classList.remove('error');
            confirmPasswordInput.classList.add('success');
            return true;
        }
        
        confirmPasswordInput.classList.remove('error', 'success');
        return confirmPassword === '';
    }

    confirmPasswordInput.addEventListener('input', validatePasswordMatch);
    passwordInput.addEventListener('input', function() {
        if (confirmPasswordInput.value) {
            validatePasswordMatch();
        }
    });

    // Username validation
    usernameInput.addEventListener('input', function() {
        const username = this.value.trim();
        
        if (username.length >= 3) {
            this.classList.remove('error');
            this.classList.add('success');
        } else if (username.length > 0) {
            this.classList.add('error');
            this.classList.remove('success');
        } else {
            this.classList.remove('error', 'success');
        }
    });

    // Form validation
    function validateForm() {
        const username = usernameInput.value.trim();
        const password = passwordInput.value;
        const confirmPassword = confirmPasswordInput.value;
        
        let isValid = true;
        let errorMsg = '';

        // Username validation
        if (username.length < 3) {
            isValid = false;
            errorMsg = 'Username harus minimal 3 karakter';
            usernameInput.classList.add('error');
        }

        // Password validation
        if (password.length < 4) {
            isValid = false;
            errorMsg = 'Password harus minimal 4 karakter';
            passwordInput.classList.add('error');
        }

        // Password match validation
        if (password !== confirmPassword) {
            isValid = false;
            errorMsg = 'Konfirmasi password tidak cocok';
            confirmPasswordInput.classList.add('error');
        }

        if (!isValid) {
            showError(errorMsg);
        }

        return isValid;
    }

    // Show error message
    function showError(message) {
        errorMessage.textContent = message;
        errorMessage.style.display = 'block';
        successMessage.style.display = 'none';
        
        setTimeout(() => {
            errorMessage.style.display = 'none';
        }, 5000);
    }

    // Show success message
    function showSuccess(message) {
        successMessage.textContent = message;
        successMessage.style.display = 'block';
        errorMessage.style.display = 'none';
        
        setTimeout(() => {
            successMessage.style.display = 'none';
        }, 5000);
    }

    // Set loading state
    function setLoading(loading) {
        if (loading) {
            submitBtn.disabled = true;
            loadingSpinner.style.display = 'inline-block';
            btnText.textContent = 'Menambahkan...';
        } else {
            submitBtn.disabled = false;
            loadingSpinner.style.display = 'none';
            btnText.textContent = 'Tambah Admin';
        }
    }

    // Form submission
    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        if (!validateForm()) {
            return;
        }

        setLoading(true);
        
        // Prepare form data
        const formData = new FormData();
        formData.append('username', usernameInput.value.trim());
        formData.append('password', passwordInput.value);
        formData.append('confirmPassword', confirmPasswordInput.value);

        try {
            const response = await fetch('../api/tambah_admin.php', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();

            if (result.status === 'success') {
                showSuccess(result.message);
                form.reset();
                
                // Reset all visual states
                document.querySelectorAll('.form-input').forEach(input => {
                    input.classList.remove('error', 'success');
                });

                // Redirect after 3 seconds
                setTimeout(() => {
                    window.location.href = 'dashboard.html';
                }, 3000);
            } else {
                showError(result.message || 'Terjadi kesalahan saat menambahkan admin');
                
                // Handle specific errors
                if (result.field === 'username') {
                    usernameInput.classList.add('error');
                    usernameInput.focus();
                }
            }
        } catch (error) {
            console.error('Error:', error);
            showError('Terjadi kesalahan koneksi. Silakan coba lagi.');
        } finally {
            setLoading(false);
        }
    });

    // Check authentication status
    async function checkAuth() {
        try {
            const response = await fetch('../api/dashboard.php');
            const result = await response.json();
            
            if (result.status === 'error' && result.redirect) {
                window.location.href = result.redirect;
            }
        } catch (error) {
            console.error('Auth check failed:', error);
        }
    }

    // Check auth on page load
    checkAuth();
});