<?php
	// Zalogowani użytkownicy nie powinni widzieć strony logowania
    require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/session_bootstrap.php';
	
	if (isset($_SESSION['logged_in']) && $_SESSION['logged_in'] === true) {
		// Użytkownik jest już zalogowany - przekieruj go
		if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin') {
            header('Location: /administration/');
		} else {
            header('Location: /home/');
		}
		exit();
	}

    $activeAuthForm = (isset($_GET['form']) && $_GET['form'] === 'register') ? 'register' : 'login';
?>
<!--
Author: Wspólnie
Author URL: https://togethere.cloud
-->
<!DOCTYPE html>
<html>
<head>
    <title>Login | kontakt: wspolpraca@togethere.cloud</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">
	<meta name="keywords" content="projekty przyszłości"/>
	<link rel="stylesheet" href="/css/header.css" type="text/css" media="all"/>
	<link rel="stylesheet" href="/css/footer.css" type="text/css" media="all"/>
	<link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
	<link href="/css/style.css" rel="stylesheet" type="text/css" media="all"/>
	<link href="//fonts.googleapis.com/css?family=Lato:400,500,600,700,800,900" rel="stylesheet">
	<style>
		main.auth-container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            max-width: 1200px;
            width: 100%;
            display: flex;
            position: relative;
			margin: 40px auto;
			box-sizing: border-box;
        }

		main.auth-container * {
			box-sizing: border-box;
		}

		main.auth-container input[type="email"],
		main.auth-container input[type="password"],
		main.auth-container input[type="text"] {
			width: 100%;
			max-width: 100%;
		}

		main.auth-container .submit-btn {
			width: 100%;
			max-width: 100%;
		}

		main.auth-container .form-section {
			padding: 60px 50px;
		}

		main.auth-container form {
			width: 100% !important;
		}

		main.auth-container .form-group {
			width: 100% !important;
		}

        .side-panel {
            flex: 0.7;
            background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
            color: white;
            padding: 60px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

		.side-panel .side-panel-content * {
			color: white;
		}

        .side-panel::before {
            content: '';
            position: absolute;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
            background-size: 30px 30px;
            animation: movePattern 20s linear infinite;
        }

        @keyframes movePattern {
            0% { transform: translate(0, 0); }
            100% { transform: translate(30px, 30px); }
        }

        .side-panel-content {
            position: relative;
            z-index: 1;
        }

        .side-panel h2 {
            font-size: 2.5em;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }

        .side-panel p {
            font-size: 1.1em;
            line-height: 1.8;
            margin-bottom: 30px;
            opacity: 0.95;
        }

        .side-panel .logo {
            font-size: 3em;
            margin-bottom: 20px;
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .form-panel {
            flex: 1.5;
            padding: 60px 60px;
            position: relative;
        }

        .toggle-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 40px;
            background: #f0f0f0;
            padding: 5px;
            border-radius: 50px;
        }

        .toggle-btn {
            flex: 1;
            padding: 12px 30px;
            border: none;
            background: transparent;
            color: #7f8c8d;
            font-size: 1em;
            font-weight: 600;
            cursor: pointer;
            border-radius: 50px;
            transition: all 0.3s ease;
        }

        .toggle-btn.active {
            background: linear-gradient(135deg, #1976d2, #42a5f5);
            color: white;
            box-shadow: 0 4px 15px rgba(25, 118, 210, 0.4);
        }

        .form-content {
            display: none;
            animation: fadeIn 0.4s ease;
        }

        .form-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        h3 {
            color: #2c3e50;
            font-size: 2em;
            margin-bottom: 30px;
            text-align: center;
        }

        .form-group {
            margin-bottom: 25px;
        }

        label {
            display: block;
            color: #2c3e50;
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 0.95em;
        }

        input[type="text"],
        input[type="email"],
        input[type="password"] {
            width: 100%;
            min-width: 300px;
            padding: 18px 25px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 1em;
            transition: all 0.3s ease;
            font-family: 'Lato', sans-serif;
			box-sizing: border-box;
			display: block;
        }

        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="password"]:focus {
            outline: none;
            border-color: #42a5f5;
            box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.1);
        }

        input.error {
            border-color: #e74c3c;
        }

        .error-message {
            color: #e74c3c;
            font-size: 0.85em;
            margin-top: 5px;
            display: none;
        }

        .error-message.show {
            display: block;
        }

        .checkbox-group {
            margin: 20px 0;
        }

        .checkbox-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 15px;
        }

        .checkbox-item input[type="checkbox"] {
            width: 20px;
            height: 20px;
            margin-right: 12px;
            margin-top: 2px;
            cursor: pointer;
            accent-color: #1976d2;
        }

        .checkbox-item label {
            margin: 0;
            font-weight: 400;
            font-size: 0.9em;
            line-height: 1.5;
            cursor: pointer;
            color: #555;
        }

        .checkbox-item label a {
            color: #1976d2;
            text-decoration: none;
            font-weight: 600;
        }

        .checkbox-item label a:hover {
            text-decoration: underline;
        }

        .submit-btn {
            width: 100%;
            min-width: 300px;
            padding: 18px;
            background: linear-gradient(135deg, #1976d2, #42a5f5);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1.1em;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(25, 118, 210, 0.4);
        }

        .submit-btn:active {
            transform: translateY(0);
        }

        .forgot-password {
            text-align: center;
            margin-top: 20px;
        }

        .forgot-password a {
            color: #1976d2;
            text-decoration: none;
            font-size: 0.95em;
        }

        .forgot-password a:hover {
            text-decoration: underline;
        }

        .divider {
            display: flex;
            align-items: center;
            margin: 25px 0;
            color: #7f8c8d;
            font-size: 0.9em;
        }

        .divider::before,
        .divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #e0e0e0;
        }

        .divider span {
            padding: 0 15px;
        }

        .social-login {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
        }

        .social-btn {
            flex: 1;
            padding: 12px;
            border: 2px solid #e0e0e0;
            background: white;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-weight: 600;
            color: #555;
        }

        .social-btn:hover {
            border-color: #1976d2;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .password-strength {
            margin-top: 10px;
            height: 4px;
            background: #e0e0e0;
            border-radius: 2px;
            overflow: hidden;
            display: none;
        }

        .password-strength.show {
            display: block;
        }

        .password-strength-bar {
            height: 100%;
            width: 0;
            transition: all 0.3s ease;
            border-radius: 2px;
        }

        .password-strength-bar.weak {
            width: 33%;
            background: #e74c3c;
        }

        .password-strength-bar.medium {
            width: 66%;
            background: #f39c12;
        }

        .password-strength-bar.strong {
            width: 100%;
            background: #27ae60;
        }

        .strength-text {
            font-size: 0.85em;
            margin-top: 5px;
            color: #7f8c8d;
            display: none;
        }

        .strength-text.show {
            display: block;
        }

        @media (max-width: 768px) {
            .auth-container {
                flex-direction: column;
            }

            .side-panel {
                padding: 40px 30px;
            }

            .side-panel h2 {
                font-size: 2em;
            }

            .form-panel {
                padding: 40px 30px;
            }

            h3 {
                font-size: 1.6em;
            }
        }

        @media (max-width: 480px) {
            .toggle-btn {
                padding: 10px 20px;
                font-size: 0.9em;
            }

            .social-login {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
	<!-- Tutaj PHP sprawdza sesje czy zalogowany i wczytuje odpowiednią nawigację -->
    <?php
        if (!empty($_SESSION['logged_in'])) {
            if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin') {
                include __DIR__ . '/../global/navLoginedAdmin.php';
            } else {
                include __DIR__ . '/../global/navLogined.php';
            }
        } else {
            include __DIR__ . '/../global/navNoLogined.php';
        }
    ?>

	<main class="auth-container">
        <div class="side-panel">
            <div class="side-panel-content">
                <div class="logo">🎮</div>
                <h2>Wspólnie</h2>
                <p>Dołącz do społeczności graczy i rywalizuj w turniejach online. Twórz drużyny, zdobywaj punkty i osiągaj cele razem!</p>
            </div>
        </div>

        <div class="form-panel">
            <div class="toggle-buttons">
                <button class="toggle-btn <?= $activeAuthForm === 'login' ? 'active' : '' ?>" data-form="login">Logowanie</button>
                <button class="toggle-btn <?= $activeAuthForm === 'register' ? 'active' : '' ?>" data-form="register">Rejestracja</button>
            </div>

            <!-- Formularz logowania -->
            <div class="form-content <?= $activeAuthForm === 'login' ? 'active' : '' ?>" id="login-form">
                <h3>Witaj ponownie!</h3>
                
                <?php if (isset($_GET['error'])): ?>
                    <div style="background: #ffebee; color: #c62828; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; border-left: 4px solid #c62828;">
                        <?= htmlspecialchars($_GET['error']) ?>
                    </div>
                <?php endif; ?>

                <?php if (isset($_GET['success'])): ?>
                    <div style="background: #d4edda; color: #155724; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; border-left: 4px solid #28a745;">
                        <?= htmlspecialchars($_GET['success']) ?>
                    </div>
                <?php endif; ?>

                <div class="social-login">
                    <button class="social-btn" type="button">
                        <span>🔵</span> Facebook
                    </button>
                    <button class="social-btn" type="button">
                        <span>🔴</span> Google
                    </button>
                </div>

                <div class="divider"><span>lub użyj email</span></div>

                <form action="login.php" method="POST" id="loginForm">
                    <div class="form-group">
                        <label for="login-email">Email</label>
                        <input type="email" id="login-email" name="email" required>
                        <span class="error-message" id="login-email-error"></span>
                    </div>

                    <div class="form-group">
                        <label for="login-password">Hasło</label>
                        <input type="password" id="login-password" name="password" required>
                        <span class="error-message" id="login-password-error"></span>
                    </div>

                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="remember-me" name="remember">
                            <label for="remember-me">Zapamiętaj mnie</label>
                        </div>
                    </div>

                    <button type="submit" class="submit-btn">Zaloguj się</button>
                </form>

                <div class="forgot-password">
                    <a href="/login/forgot_password.php">Zapomniałeś hasła?</a>
                </div>
            </div>

            <!-- Formularz rejestracji -->
            <div class="form-content <?= $activeAuthForm === 'register' ? 'active' : '' ?>" id="register-form">
                <h3>Utwórz konto</h3>

                <?php if (isset($_GET['form']) && $_GET['form'] === 'register' && isset($_GET['error'])): ?>
                    <div id="registerServerError" style="background: #ffebee; color: #c62828; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; border-left: 4px solid #c62828;">
                        <?= htmlspecialchars($_GET['error']) ?>
                    </div>
                <?php else: ?>
                    <div id="registerServerError" style="display:none; background: #ffebee; color: #c62828; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; border-left: 4px solid #c62828;"></div>
                <?php endif; ?>

                <div class="social-login">
                    <button class="social-btn" type="button">
                        <span>🔵</span> Facebook
                    </button>
                    <button class="social-btn" type="button">
                        <span>🔴</span> Google
                    </button>
                </div>

                <div class="divider"><span>lub wypełnij formularz</span></div>

                <form action="register.php" method="POST" id="registerForm">
                    <div class="form-group">
                        <label for="register-username">Nazwa użytkownika</label>
                        <input type="text" id="register-username" name="username" required maxlength="20" pattern="[A-Za-z0-9_&!]{1,20}" title="Dozwolone: litery angielskie, cyfry, _, &, ! (max 20 znaków)">
                        <span class="error-message" id="register-username-error"></span>
                    </div>

                    <div class="form-group">
                        <label for="register-email">Email</label>
                        <input type="email" id="register-email" name="email" required>
                        <span class="error-message" id="register-email-error"></span>
                    </div>

                    <div class="form-group">
                        <label for="register-password">Hasło</label>
                        <input type="password" id="register-password" name="password" required>
                        <div class="password-strength" id="password-strength">
                            <div class="password-strength-bar" id="password-strength-bar"></div>
                        </div>
                        <span class="strength-text" id="strength-text"></span>
                        <span class="error-message" id="register-password-error"></span>
                    </div>

                    <div class="form-group">
                        <label for="register-password-confirm">Powtórz hasło</label>
                        <input type="password" id="register-password-confirm" name="password-confirm" required>
                        <span class="error-message" id="register-password-confirm-error"></span>
                    </div>

                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="terms" name="terms" required>
                            <label for="terms">
                                Akceptuję <a href="https://togethere.cloud/polices/statute/" target="_blank">Regulamin</a> 
                                oraz <a href="https://togethere.cloud/polices/privacy-policy/" target="_blank">Politykę Prywatności</a>
                            </label>
                        </div>
                        <span class="error-message" id="terms-error"></span>

                        <div class="checkbox-item">
                            <input type="checkbox" id="newsletter" name="newsletter">
                            <label for="newsletter">
                                Chcę otrzymywać newsletter z informacjami o turniejach i nowościach
                            </label>
                        </div>

                        <div class="checkbox-item">
                            <input type="checkbox" id="marketing" name="marketing">
                            <label for="marketing">
                                Wyrażam zgodę na przetwarzanie danych osobowych w celach marketingowych
                            </label>
                        </div>
                    </div>

                    <button type="submit" class="submit-btn">Zarejestruj się</button>
                </form>
            </div>
        </div>
    </main>	  
	
	<?php
        if (!empty($_SESSION['logged_in'])) {
            include __DIR__ . '/../global/footerLogined.php';
        } else {
            include __DIR__ . '/../global/footerNoLogined.php';
        }
    ?>

	<script>
        // Przełączanie między formularzami
        const toggleBtns = document.querySelectorAll('.toggle-btn');
        const formContents = document.querySelectorAll('.form-content');

        toggleBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const targetForm = btn.getAttribute('data-form');
                
                toggleBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                
                formContents.forEach(form => {
                    form.classList.remove('active');
                    if (form.id === targetForm + '-form') {
                        form.classList.add('active');
                    }
                });
            });
        });

        // Walidacja formularza logowania
        const loginForm = document.getElementById('loginForm');
        loginForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            const email = document.getElementById('login-email');
            const password = document.getElementById('login-password');
            
            let isValid = true;
            
            // Walidacja email
            if (!email.value) {
                showError('login-email', 'Email jest wymagany');
                isValid = false;
            } else if (!isValidEmail(email.value)) {
                showError('login-email', 'Podaj prawidłowy adres email');
                isValid = false;
            } else {
                clearError('login-email');
            }
            
            // Walidacja hasła
            if (!password.value) {
                showError('login-password', 'Hasło jest wymagane');
                isValid = false;
            } else if (password.value.length < 6) {
                showError('login-password', 'Hasło musi mieć minimum 6 znaków');
                isValid = false;
            } else {
                clearError('login-password');
            }
            
            if (isValid) {
                // Walidacja przeszła, wysyłamy formularz do login.php
                loginForm.submit();
            }
        });

        // Walidacja formularza rejestracji
        const registerForm = document.getElementById('registerForm');
        registerForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const username = document.getElementById('register-username');
            const email = document.getElementById('register-email');
            const password = document.getElementById('register-password');
            const passwordConfirm = document.getElementById('register-password-confirm');
            const terms = document.getElementById('terms');
            
            let isValid = true;
            
            // Walidacja nazwy użytkownika
            if (!username.value) {
                showError('register-username', 'Nazwa użytkownika jest wymagana');
                isValid = false;
            } else if (username.value.length > 20) {
                showError('register-username', 'Nazwa użytkownika może mieć maksymalnie 20 znaków');
                isValid = false;
            } else if (!/^[A-Za-z0-9_&!]{1,20}$/.test(username.value)) {
                showError('register-username', 'Nazwa może zawierać tylko litery angielskie, cyfry oraz znaki _ & !');
                isValid = false;
            } else {
                clearError('register-username');
            }
            
            // Walidacja email
            if (!email.value) {
                showError('register-email', 'Email jest wymagany');
                isValid = false;
            } else if (!isValidEmail(email.value)) {
                showError('register-email', 'Podaj prawidłowy adres email');
                isValid = false;
            } else {
                clearError('register-email');
            }
            
            // Walidacja hasła
            if (!password.value) {
                showError('register-password', 'Hasło jest wymagane');
                isValid = false;
            } else if (password.value.length < 8) {
                showError('register-password', 'Hasło musi mieć minimum 8 znaków');
                isValid = false;
            } else if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password.value)) {
                showError('register-password', 'Hasło musi zawierać małą i wielką literę oraz cyfrę');
                isValid = false;
            } else {
                clearError('register-password');
            }
            
            // Walidacja powtórzenia hasła
            if (!passwordConfirm.value) {
                showError('register-password-confirm', 'Powtórz hasło');
                isValid = false;
            } else if (password.value !== passwordConfirm.value) {
                showError('register-password-confirm', 'Hasła muszą być identyczne');
                isValid = false;
            } else {
                clearError('register-password-confirm');
            }
            
            // Walidacja zgody na regulamin
            if (!terms.checked) {
                showError('terms', 'Musisz zaakceptować regulamin i politykę prywatności');
                isValid = false;
            } else {
                clearError('terms');
            }
            
            if (isValid) {
                clearRegisterServerError();
                const submitBtn = registerForm.querySelector('button[type="submit"]');
                const originalBtnText = submitBtn ? submitBtn.textContent : '';

                if (submitBtn) {
                    submitBtn.disabled = true;
                    submitBtn.textContent = 'Przetwarzanie...';
                }

                try {
                    const response = await fetch(registerForm.getAttribute('action') || 'register.php', {
                        method: 'POST',
                        body: new FormData(registerForm),
                        credentials: 'same-origin',
                        redirect: 'follow',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });

                    const finalUrl = new URL(response.url, window.location.origin);
                    const serverError = finalUrl.searchParams.get('error');

                    if (serverError) {
                        showRegisterServerError(serverError);

                        if (serverError.toLowerCase().includes('nazwa użytkownika')) {
                            showError('register-username', serverError);
                        }

                        return;
                    }

                    if (response.redirected) {
                        window.location.href = response.url;
                        return;
                    }

                    const responseText = await response.text();
                    throw new Error(responseText ? 'Nie udało się zakończyć rejestracji. Sprawdź dane i spróbuj ponownie.' : 'Nie udało się połączyć z serwerem. Spróbuj ponownie.');
                } catch (error) {
                    showRegisterServerError(error && error.message ? error.message : 'Wystąpił błąd podczas rejestracji. Spróbuj ponownie.');
                } finally {
                    if (submitBtn) {
                        submitBtn.disabled = false;
                        submitBtn.textContent = originalBtnText || 'Zarejestruj się';
                    }
                }
            }
        });

        // Miernik siły hasła
        const registerPassword = document.getElementById('register-password');
        const strengthBar = document.getElementById('password-strength-bar');
        const strengthText = document.getElementById('strength-text');
        const strengthContainer = document.getElementById('password-strength');
        const registerUsername = document.getElementById('register-username');

        registerUsername.addEventListener('invalid', () => {
            if (registerUsername.validity.patternMismatch) {
                registerUsername.setCustomValidity('Nazwa użytkownika może zawierać tylko litery angielskie, cyfry oraz znaki _ & ! (max 20 znaków).');
            } else {
                registerUsername.setCustomValidity('');
            }
        });

        registerUsername.addEventListener('input', () => {
            registerUsername.setCustomValidity('');
        });

        registerPassword.addEventListener('input', () => {
            const password = registerPassword.value;
            
            if (password.length === 0) {
                strengthContainer.classList.remove('show');
                strengthText.classList.remove('show');
                return;
            }
            
            strengthContainer.classList.add('show');
            strengthText.classList.add('show');
            
            let strength = 0;
            
            // Długość
            if (password.length >= 8) strength++;
            if (password.length >= 12) strength++;
            
            // Małe i wielkie litery
            if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
            
            // Cyfry
            if (/\d/.test(password)) strength++;
            
            // Znaki specjalne
            if (/[^a-zA-Z0-9]/.test(password)) strength++;
            
            strengthBar.className = 'password-strength-bar';
            
            if (strength <= 2) {
                strengthBar.classList.add('weak');
                strengthText.textContent = 'Słabe hasło';
                strengthText.style.color = '#e74c3c';
            } else if (strength <= 3) {
                strengthBar.classList.add('medium');
                strengthText.textContent = 'Średnie hasło';
                strengthText.style.color = '#f39c12';
            } else {
                strengthBar.classList.add('strong');
                strengthText.textContent = 'Silne hasło';
                strengthText.style.color = '#27ae60';
            }
        });

        // Funkcje pomocnicze
        function isValidEmail(email) {
            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
        }

        function showError(fieldId, message) {
            const field = document.getElementById(fieldId);
            const errorSpan = document.getElementById(fieldId + '-error');
            
            if (field) field.classList.add('error');
            if (errorSpan) {
                errorSpan.textContent = message;
                errorSpan.classList.add('show');
            }
        }

        function clearError(fieldId) {
            const field = document.getElementById(fieldId);
            const errorSpan = document.getElementById(fieldId + '-error');
            
            if (field) field.classList.remove('error');
            if (errorSpan) {
                errorSpan.textContent = '';
                errorSpan.classList.remove('show');
            }
        }

        function showRegisterServerError(message) {
            const box = document.getElementById('registerServerError');
            if (!box) {
                return;
            }
            box.textContent = message;
            box.style.display = 'block';
        }

        function clearRegisterServerError() {
            const box = document.getElementById('registerServerError');
            if (!box) {
                return;
            }
            box.textContent = '';
            box.style.display = 'none';
        }

        // Czyszczenie błędów przy pisaniu
        document.querySelectorAll('input').forEach(input => {
            input.addEventListener('input', () => {
                if (input.id) {
                    clearError(input.id);
                }
            });
        });
    </script>
</body>
</html>