index.html

anonymous@undisclosed.example.com (Anonymous) — Sun, 17 May 2026 08:28:41 +0000
index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Мастер установки Сервера</title>
    <!-- Подключаем чистый современный стиль -->
    <link rel="stylesheet" href="assets/bootstrap.min.css">
    <style>
        body { background: #f4f6f9; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
        .wizard-card { background: white; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.05); width: 650px; min-height: 450px; display: flex; flex-direction: column; justify-content: space-between; padding: 40px; }
        .step { display: none; }
        .step.active { display: block; }
        .step-header { border-bottom: 2px solid #efefef; padding-bottom: 15px; margin-bottom: 25px; }
    </style>
</head>
<body>
 
<div class="wizard-card">
    <div class="wizard-content">
 
        <!-- 1.2.1 Окно приветствия -->
        <div id="step-1" class="step active">
            <div class="step-header"><h4>Шаг 1: Приветствие</h4></div>
            <p class="lead">Добро пожаловать в веб-инсталлятор вашего нового сервера!</p>
            <p>Этот мастер поможет развернуть и настроить операционную систему без подключения монитора к серверу. Все действия выполняются удаленно через этот браузер.</p>
        </div>
 
        <!-- 1.2.2 Выбор языка -->
        <div id="step-2" class="step">
            <div class="step-header"><h4>Шаг 2: Язык системы</h4></div>
            <label class="form-label">Выберите основной язык для устанавливаемой ОС:</label>
            <select id="sys_lang" class="form-select form-select-lg">
                <option value="ru_RU.UTF-8">Русский (ru_RU)</option>
                <option value="en_US.UTF-8">English (en_US)</option>
            </select>
        </div>
 
        <!-- 1.2.3 Выбор раскладки клавиатуры -->
        <div id="step-3" class="step">
            <div class="step-header"><h4>Шаг 3: Раскладка клавиатуры</h4></div>
            <label class="form-label">Выберите раскладку клавиатуры по умолчанию:</label>
            <select id="sys_layout" class="form-select form-select-lg">
                <option value="ru">Русская (ru)</option>
                <option value="us">Английская (us)</option>
            </select>
        </div>
 
        <!-- 1.2.4 Выбор часового пояса -->
        <div id="step-4" class="step">
            <div class="step-header"><h4>Шаг 4: Часовой пояс</h4></div>
            <label class="form-label">Укажите ваш часовой пояс:</label>
            <select id="sys_timezone" class="form-select form-select-lg">
                <option value="Europe/Moscow">Москва (GMT+3)</option>
                <option value="Europe/Kaliningrad">Калининград (GMT+2)</option>
                <option value="Asia/Yekaterinburg">Екатеринбург (GMT+5)</option>
                <option value="UTC">UTC (Универсальное время)</option>
            </select>
        </div>
 
        <!-- 1.2.5 Имя компьютера -->
        <div id="step-5" class="step">
			<div class="step-header"><h4>Шаг 5: Сетевое имя (Hostname)</h4></div>
			<label class="form-label">Введите имя вашего будущего сервера:</label>
			<input type="text" id="sys_hostname" class="form-control form-control-lg" value="my-cool-server" oninput="validateHostname(this)">
			<div class="form-text text-danger">Разрешена только латиница (a-z), цифры и дефис.</div>
		</div>
 
 
                <!-- 1.2.6 Разбивка диска и RAID -->
        <div id="step-6" class="step">
            <div class="step-header"><h4>Шаг 6: Разметка накопителей</h4></div>
            <label class="form-label">Выберите конфигурацию дисковой подсистемы:</label>
            <div class="form-check mb-3">
                <input class="form-check-input" type="radio" name="disk_mode" id="disk_default" value="default" checked>
                <label class="form-check-label" for="disk_default">
                    <strong>Режим по умолчанию:</strong> Система + 25GB под установку, остальное в резерв под домашнюю папку пользователя
                </label>
            </div>
            <div class="form-check mb-4">
                <input class="form-check-input" type="radio" name="disk_mode" id="disk_raid" value="raid1">
                <label class="form-check-label" for="disk_raid">
                    <strong>Программный RAID-1 (Зеркало):</strong> Объединить два диска для отказоустойчивости
                </label>
            </div>
 
            <!-- ВОТ ЭТОТ БЛОК КРИТИЧЕСКИ НЕОБХОДИМ ДЛЯ ИСПРАВЛЕНИЯ ОШИБКИ 444 -->
            <div id="disks_selection_zone" class="p-3 bg-light border rounded mb-4" style="display: none;">
                <h6>Доступные физические диски для построения RAID-1 массивов:</h6>
                <div id="disks_list" class="mt-2">
                    <div class="text-muted small">Опрос накопителей контроллером...</div>
                </div>
                <div class="form-text text-muted mt-2">Для активации зеркалирования (RAID-1) выберите ровно два одинаковых накопителя.</div>
            </div>
 
            <div class="alert alert-danger mt-4 d-flex align-items-center">
                <div class="me-3" style="font-size: 24px;">⚠️</div>
                <div>
                    <strong>ВНИМАНИЕ:</strong> Все существующие данные (включая Windows или старые ОС) на выбранных накопителях будут <strong>полностью и безвозвратно удалены</strong>. Разделы будут переформатированы!
                </div>
            </div>
            <div class="form-check mb-3">
                <input class="form-check-input border-danger" type="checkbox" id="confirm_erase" onchange="toggleNextButton()">
                <label class="form-check-label text-danger fw-bold" for="confirm_erase">
                    Я понимаю риски. Подтверждаю полное уничтожение данных и форматирование дисков.
                </label>
            </div>
        </div>
 
 
		        <!-- 1.2.7 Создание пользователя -->
        <div id="step-7" class="step">
            <div class="step-header"><h4>Шаг 7: Учетная запись администратора</h4></div>
            <div class="mb-3">
                <label class="form-label">Имя пользователя (Логин):</label>
                <input type="text" id="username" class="form-control" value="eva" oninput="validateUsername(this)" placeholder="только маленькие латинские буквы">
                <div class="form-text text-muted">Используйте исключительно маленькие английские буквы (a-z).</div>
            </div>
            <div class="row mb-3">
                <div class="col">
                    <label class="form-label">Пароль:</label>
                    <input type="password" id="password" class="form-control" oninput="this.value = this.value.replace(/[а-яА-ЯёЁ]/g, ''); checkPasswordStrength(this.value)">
                    <div class="form-text text-danger fw-bold" style="font-size: 13px;">⚠️ Ввод строго на АНГЛИЙСКОЙ раскладке! Русский язык запрещен.</div>
                    <div class="progress mt-2" style="height: 6px;">
                        <div id="pass_progress" class="progress-bar bg-danger" style="width: 0%"></div>
                    </div>
                    <div id="pass_status" class="small text-muted mt-1">Сложность: слишком слабый</div>
                </div>
                <div class="col">
                    <label class="form-label">Подтверждение пароля:</label>
                    <input type="password" id="password_confirm" class="form-control" oninput="this.value = this.value.replace(/[а-яА-ЯёЁ]/g, ''); validatePasswordMatch()">
                    <div id="match_status" class="small text-danger mt-1"></div>
                </div>
            </div>
 
            <div class="p-3 bg-light border rounded mb-3">
                <h6 class="mb-2" style="font-size: 14px;">Критерии надежности пароля:</h6>
                <ul class="password-rules-list mb-0">
                    <li id="rule_len" class="text-danger">❌ Не менее 8 symbols</li>
                    <li id="rule_upper" class="text-danger">❌ Минимум одна заглавная буква (A-Z)</li>
                    <li id="rule_number" class="text-danger">❌ Минимум одна цифра (0-9)</li>
                    <li id="rule_symbol" class="text-danger">❌ Минимум один спецсимвол (@, #, $, !)</li>
                </ul>
            </div>
        </div>
 
        <!-- НОВЫЙ ШАГ 8: Окно Двухфакторной аутентификации (2FA) -->
        <div id="step-8" class="step">
            <div class="step-header"><h4>Шаг 8: Безопасность аккаунта (2FA)</h4></div>
            <div class="p-3 bg-light border rounded">
                <h5>Настройка Двухфакторной аутентификации</h5>
                <p class="small text-muted mb-2">Отсканируйте этот QR-код мобильным приложением перед началом развертывания системы:</p>
 
                <div class="mb-3 small text-secondary">
                    <strong>Поддерживаемые приложения на телефоне:</strong>
                    <ul class="mb-2 mt-1 ps-3">
                        <li>Google Authenticator (iOS / Android)</li>
                        <li>Yandex Key / Яндекс Ключ</li>
                        <li>Microsoft Authenticator</li>
                        <li>2FAS / Aegis / Икс-Ключ</li>
                    </ul>
                    <span class="text-warning fw-bold">⚠️ Внимание:</span> Сохраните этот аккаунт в приложении на телефоне. Код потребуется при каждом входе на сервер.
                </div>
 
                <div id="qrcode_container" class="text-center py-2">
                    <img id="qr-image" 
						 src="about:blank" 
						 onload="if(this.src=='about:blank') { this.src='api/2fa.php?username=' + encodeURIComponent(document.getElementById('username').value) + '&hostname=' + encodeURIComponent(document.getElementById('sys_hostname').value); }" 
						 alt="QR-код для 2FA" 
						 class="img-fluid">
				<!-- Временный вывод для тестирования шага 8 -->
				<div id="qr-debug-zone" class="mt-3 p-3 bg-light border rounded small text-muted text-start" style="font-family: monospace;">
					<strong>Отладка перед отправкой в API:</strong><br>
					Логин пользователя: <span id="debug-qr-user" class="fw-bold text-primary">ожидание...</span><br>
					Имя сервера (Host): <span id="debug-qr-host" class="fw-bold text-primary">ожидание...</span>
				</div>
				<!-- конец Временный вывод для тестирования шага 8 -->
 
				</div>
            </div>
        </div>
 
        <!-- Теперь это ШАГ 9: Процесс установки -->
        <div id="step-9" class="step">
            <div class="step-header"><h4>Шаг 9: Выполнение установки</h4></div>
            <p id="install_status" class="fw-bold text-primary">Инициализация скриптов разметки дисковых массивов...</p>
            <div class="progress mb-3" style="height: 25px;">
                <div id="install_progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;">0%</div>
            </div>
            <div class="text-muted small">Время выполнения операции: <span id="install_timer" class="fw-bold text-dark">0 сек.</span></div>
        </div>
 
        <!-- Теперь это ШАГ 10: Завершение и перезагрузка -->
        <div id="step-10" class="step">
            <div class="step-header"><h4 class="text-success">Установка успешно завершена!</h4></div>
            <p>Операционная система развернута. Сетевые сервисы, SSH-доступ и конфигурация RAID подготовлены.</p>
            <div class="alert alert-warning text-center p-4">
                <h5>Внимание! Сервер будет отправлен в перезагрузку через:</h5>
                <h1 id="reboot_timer" class="display-3 font-monospace my-3 text-danger fw-bold">5</h1>
                <p class="mb-0 small fw-bold">Извлеките загрузочную USB-флешку из разъема, чтобы сервер загрузился с основного диска.</p>
            </div>
        </div>
 
 
 
    </div>
 
    <!-- Кнопки управления шагами -->
    <div class="buttons d-flex justify-content-between mt-4 border-top pt-3">
        <button id="btn-prev" class="btn btn-outline-secondary px-4" onclick="changeStep(-1)" disabled>Назад</button>
        <button id="btn-next" class="btn btn-primary px-4" onclick="changeStep(1)">Далее</button>
    </div>
</div>
 
<script>
let currentStep = 1;
const totalSteps = 10;
 
// Флаги валидации для учетной записи
let isPasswordValid = false;
let isPasswordMatching = false;
 
// Контроль блокировки кнопки "Далее" на Шаге 6 (Диски)
function toggleNextButton() {
    if (currentStep === 6) {
        const confirmed = document.getElementById('confirm_erase').checked;
        const diskMode = document.querySelector('input[name="disk_mode"]:checked').value;
        let isDiskSelectionOk = true;
 
        if (diskMode === 'raid1') {
            const selectedDisksCount = document.querySelectorAll('.disk-checkbox:checked').length;
            isDiskSelectionOk = (selectedDisksCount === 2); // Строго 2 диска для RAID-1
        }
        document.getElementById('btn-next').disabled = !(confirmed && isDiskSelectionOk);
    }
}
 
function changeStep(direction) {
    // Скрываем блок ошибок перед проверкой
    const errorBlock = document.getElementById('error-message-zone');
    if (errorBlock) errorBlock.style.display = 'none';
 
    // Подгрузка доступных дисков при переходе с 5 на 6 шаг
    if (currentStep === 5 && direction === 1) {
        loadSystemDisks();
    }
 
    // ТРИГГЕР: Переход с 7 на 8 шаг (Безопасное обновление QR)
    if (direction === 1 && currentStep === 7) {
        if (!isPasswordValid || !isPasswordMatching) {
            showInlineError('Пароль не соответствует требованиям или не совпадает!');
            return;
        }
 
        // Забираем данные и обновляем QR-код
        try {
            const currentHost = document.getElementById('sys_hostname').value.trim();
            const currentUser = document.getElementById('username').value.trim();
 
            const dbgUser = document.getElementById('debug-qr-user');
            const dbgHost = document.getElementById('debug-qr-host');
            if (dbgUser) dbgUser.innerText = currentUser;
            if (dbgHost) dbgHost.innerText = currentHost;
 
            // ИСПРАВЛЕНО: Точный поиск картинки по ID
            const qrImg = document.getElementById('qr-image');
            if (qrImg) {
                qrImg.src = `api/2fa.php?username=${encodeURIComponent(currentUser)}&hostname=${encodeURIComponent(currentHost)}`;
            }
        } catch (e) {
            console.log("Ошибка обновления элементов Шага 8: ", e);
        }
    }
 
    // Действия при нажатии "Далее" на Шаге 8 (Старт установки)
    if (direction === 1 && currentStep === 8) {
        let selectedDisks = [];
        const diskMode = document.querySelector('input[name="disk_mode"]:checked').value;
 
        if (diskMode === 'raid1') {
            document.querySelectorAll('.disk-checkbox:checked').forEach(cb => {
                selectedDisks.push(cb.value);
            });
        } else {
            const firstDiskInput = document.querySelector('.disk-checkbox');
            selectedDisks.push(firstDiskInput ? firstDiskInput.value : 'sda');
        }
 
        // Сбор Payload напрямую из полей (СВЕЖИЕ ДАННЫЕ)
        const payload = {
            lang: document.getElementById('sys_lang').value,
            layout: document.getElementById('sys_layout').value,
            timezone: document.getElementById('sys_timezone').value,
            hostname: document.getElementById('sys_hostname').value.trim(),
            disk_mode: diskMode,
            disks: selectedDisks,
            username: document.getElementById('username').value.trim(),
            password: document.getElementById('password').value.trim()
        };
 
        // ПРИНУДИТЕЛЬНЫЙ ЗАПУСК ОТПРАВКИ НА СЕРВЕР
        fetch('api/start_install.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        })
        .then(res => res.json())
        .then(result => {
            if (result && result.success) {
                document.getElementById('step-8').classList.remove('active');
                currentStep = 9; // <--- Корректный переход
                document.getElementById('step-9').classList.add('active');
 
                document.getElementById('btn-prev').style.display = 'none';
                document.getElementById('btn-next').style.display = 'none';
 
                startInstallationSimulation();
            } else {
                showInlineError('Ошибка сервера: ' + (result && result.message ? result.message : 'Неизвестный ответ'));
            }
        })
        .catch(err => {
            showInlineError('Ошибка сети: сервер установки недоступен.');
        });
        return; // Ждем ответа fetch, блокируем линейный переход
    }
 
    // Линейный переход для остальных шагов
    document.getElementById(`step-${currentStep}`).classList.remove('active');
    currentStep += direction;
    document.getElementById(`step-${currentStep}`).classList.add('active');
 
    document.getElementById('btn-prev').disabled = (currentStep === 1 || currentStep >= 9);
    document.getElementById('btn-next').disabled = (currentStep >= 9);
 
    if (currentStep === 6) {
        toggleNextButton();
    }
}
 
 
 
 
 
// Валидаторы ввода с ограничением до 16 символов
function validateHostname(input) {
    input.value = input.value.toLowerCase().replace(/[^a-z0-9-]/g, '').substring(0, 16);
}
 
// Изменено: разрешаем латиницу и цифры для соответствия бэкенду
function validateUsername(input) {
    input.value = input.value.toLowerCase().replace(/[^a-z0-9]/g, '').substring(0, 16);
}
 
// Запрет пробелов и ограничение длины в самом поле пароля
const passwordInputField = document.getElementById('password');
if (passwordInputField) {
    passwordInputField.addEventListener('input', function() {
        this.value = this.value.replace(/\s+/g, '').substring(0, 16);
    });
    // Беззвучный запрет вставки
    ['paste', 'drop'].forEach(e => {
        passwordInputField.addEventListener(e, (ev) => ev.preventDefault());
    });
}
 
// Проверка силы пароля
function checkPasswordStrength(password) {
    const rules = {
        len: password.length >= 8,
        upper: /[A-Z]/.test(password),
        number: /[0-9]/.test(password),
        symbol: /[@$!%*?&#]/.test(password)
    };
 
    updateRuleVisual('rule_len', rules.len, "Не менее 8 символов");
    updateRuleVisual('rule_upper', rules.upper, "Минимум одна заглавная буква (A-Z)");
    updateRuleVisual('rule_number', rules.number, "Минимум одна цифра (0-9)");
    updateRuleVisual('rule_symbol', rules.symbol, "Минимум один спецсимвол (@, #, $, !)");
 
    let score = Object.values(rules).filter(Boolean).length;
    const progress = document.getElementById('pass_progress');
    const status = document.getElementById('pass_status');
 
    if (progress) {
        progress.className = "progress-bar ";
        if (score <= 1) {
            progress.style.width = "25%"; progress.classList.add("bg-danger");
            if (status) status.innerText = "Сложность: слишком слабый"; isPasswordValid = false;
        } else if (score === 2) {
            progress.style.width = "50%"; progress.classList.add("bg-warning");
            if (status) status.innerText = "Сложность: средний"; isPasswordValid = false;
        } else if (score === 3) {
            progress.style.width = "75%"; progress.classList.add("bg-info");
            if (status) status.innerText = "Сложность: хороший"; isPasswordValid = false;
        } else if (score === 4) {
            progress.style.width = "100%"; progress.classList.add("bg-success");
            if (status) status.innerText = "Сложность: отличный (безопасный)"; isPasswordValid = true;
        }
    }
    validatePasswordMatch();
}
 
function updateRuleVisual(elementId, isValid, text) {
    const el = document.getElementById(elementId);
    if (el) {
        el.innerText = (isValid ? "✅ " : "❌ ") + text;
        el.className = isValid ? "text-success fw-bold" : "text-danger";
    }
}
 
function validatePasswordMatch() {
    const passInput = document.getElementById('password');
    const confirmInput = document.getElementById('password_confirm');
    const matchStatus = document.getElementById('match_status');
 
    if (!passInput || !confirmInput || !matchStatus) return;
 
    const pass = passInput.value;
    const confirm = confirmInput.value;
 
    if (!confirm) { matchStatus.innerText = ""; isPasswordMatching = false; return; }
 
    if (pass === confirm) {
        matchStatus.innerText = "✅ Пароли совпадают";
        matchStatus.className = "small text-success fw-bold";
        isPasswordMatching = true;
    } else {
        matchStatus.innerText = "❌ Пароли не совпадают";
        matchStatus.className = "small text-danger";
        isPasswordMatching = false;
    }
}
 
// Мониторинг лога бэкенда
function startInstallationSimulation() {
    const progressBar = document.getElementById('install_progress');
    const statusText = document.getElementById('install_status');
    const timerText = document.getElementById('install_timer');
    let elapsedSeconds = 0;
 
    const durationTimer = setInterval(() => {
        elapsedSeconds++;
        if (timerText) timerText.innerText = elapsedSeconds + ' сек.';
    }, 1000);
 
    const logWatcher = setInterval(() => {
        fetch('api/get_log.php')
        .then(res => res.json())
        .then(data => {
            if (data && data.success) {
                if (progressBar) {
                    progressBar.style.width = data.progress + '%';
                    progressBar.innerText = data.progress + '%';
                }
                if (statusText) statusText.innerText = data.status;
 
                // Переход на финал при 90% или завершении скриптов
                if (data.progress >= 90) {
                    clearInterval(logWatcher);
                    clearInterval(durationTimer);
 
                    document.getElementById('step-9').classList.remove('active');
                    currentStep = 10;
                    document.getElementById('step-10').classList.add('active');
 
                    // Полностью скрываем кнопки управления на Шаге 10
                    document.getElementById('btn-prev').style.display = 'none';
                    document.getElementById('btn-next').style.display = 'none';
 
                    startRebootCountdown();
                }
            }
        })
        .catch(err => {
            if (statusText) statusText.innerText = "Потеря связи с демоном установки...";
        });
    }, 1500);
}
 
// Финальный экран и мягкий таймер без alert
function startRebootCountdown() {
    let timeLeft = 5;
    const countdownText = document.getElementById('reboot_timer');
    const statusText = document.getElementById('install_status_final');
 
    if (statusText) {
        statusText.innerHTML = '<div class="alert alert-success text-center fw-bold">Система установлена! После перезагрузки сервера обновите страницу браузера.</div>';
    }
 
    const countdown = setInterval(() => {
        timeLeft--;
        if (countdownText) countdownText.innerText = timeLeft;
 
        if (timeLeft <= 0) {
            clearInterval(countdown);
            fetch('api/reboot_server.php');
        }
    }, 1000);
}
 
// Вспомогательная функция вывода ошибок на экран (Привязка к контейнеру .buttons)
function showInlineError(message) {
    let errorZone = document.getElementById('error-message-zone');
    if (!errorZone) {
        errorZone = document.createElement('div');
        errorZone.id = 'error-message-zone';
        errorZone.className = 'alert alert-danger my-2 text-center';
 
        const buttonsContainer = document.querySelector('.buttons');
        const prevBtn = document.getElementById('btn-prev');
        if (buttonsContainer && prevBtn) {
            buttonsContainer.insertBefore(errorZone, prevBtn);
        } else {
            const card = document.querySelector('.wizard-card') || document.body;
            card.appendChild(errorZone);
        }
    }
    errorZone.innerText = message;
    errorZone.style.display = 'block';
}
 
function loadSystemDisks() {
    const disksList = document.getElementById('disks_list');
    if (!disksList) return;
    disksList.innerHTML = '<div class="spinner-border spinner-border-sm text-primary"></div> Опрашиваю дисковую подсистему...';
 
    fetch('api/get_disks.php')
    .then(response => response.json())
    .then(data => {
        if (data && data.success && data.disks.length > 0) {
            disksList.innerHTML = '';
            data.disks.forEach(disk => {
                const diskDiv = document.createElement('div');
                diskDiv.className = 'form-check mb-2';
                diskDiv.innerHTML = `
                    <input class="form-check-input disk-checkbox" type="checkbox" value="${disk.name}" id="disk_${disk.name}">
                    <label class="form-check-label" for="disk_${disk.name}">
                        💾 <strong>/dev/${disk.name}</strong> — Размер: <span class="badge bg-secondary">${disk.size}</span>
                    </label>
                `;
                disksList.appendChild(diskDiv);
            });
        } else {
            disksList.innerHTML = '<div class="text-danger">❌ Накопители не найдены!</div>';
        }
    })
    .catch(error => {
        disksList.innerHTML = '<div class="text-danger">❌ Ошибка бэкенда API!</div>';
    });
}
 
// Логика переключения режимов разметки дисков
document.addEventListener('change', function(e) {
    if (e.target && e.target.name === 'disk_mode') {
        const zone = document.getElementById('disks_selection_zone');
        if (zone) zone.style.display = (e.target.value === 'raid1') ? 'block' : 'none';
    }
});
 
document.addEventListener('click', function(e) {
    if (e.target && e.target.classList.contains('disk-checkbox')) {
        toggleNextButton();
    }
});
 
// Защита от возврата кнопкой Back браузера
history.pushState(null, null, location.href);
window.addEventListener('popstate', function () {
    history.pushState(null, null, location.href);
    showInlineError('Для навигации используйте кнопки мастера установки.');
});
</script>
 
 
</body>
</html>
worldwide open-source software - software:linux_server_iso:installer

index.html

index.html
