hesabixSite/templates/installation/index.html.twig

{% extends 'base.html.twig' %}

{% block title %}نصب حسابیکس{% endblock %}

{% block body %}
<div class="installation-container" data-controller="installation">
    <h1 class="text-center mb-4">نصب خودکار حسابیکس</h1>
    
    <div class="install-method-toggle" style="text-align:center; margin-bottom:20px;">
        <button class="btn" id="apiInstallBtn" onclick="showApiInstall()" style="margin-left:10px;">نصب خودکار (API)</button>
        <button class="btn" id="ftpInstallBtn" onclick="showFtpInstall()">نصب با FTP</button>
    </div>

    <div id="apiInstallSection">
        <div class="progress-bar">
            <div class="progress-fill" data-installation-target="progressFill"></div>
        </div>
        <!-- مرحله 1: اطلاعات هاست -->
        <div class="step-card" data-installation-target="step">
            <div class="step-header">
                <div>
                    <h3>مرحله 1: اطلاعات هاست</h3>
                    <p>اطلاعات اتصال به پنل هاست خود را وارد کنید</p>
                </div>
                <div class="step-number">1</div>
            </div>
            <div class="step-content">
                <div class="form-group">
                    <label class="form-label">نوع پنل</label>
                    <select class="form-control" data-installation-target="panelType">
                        <option value="cpanel">cPanel</option>
                        <option value="directadmin" selected>DirectAdmin</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">آدرس هاست</label>
                    <input type="text" class="form-control" data-installation-target="host" placeholder="example.com" value="cdn.hesabix.ir">
                </div>
                <div class="form-group">
                    <label class="form-label">نام کاربری</label>
                    <input type="text" class="form-control" data-installation-target="username" placeholder="نام کاربری پنل" value="cdnhes">
                </div>
                <div class="form-group">
                    <label class="form-label">رمز عبور</label>
                    <input type="password" class="form-control" data-installation-target="password" placeholder="رمز عبور پنل" value="RuYFFBkamH7MtN">
                </div>
                <div class="status-message" data-installation-target="status"></div>
                <button class="btn" data-action="click->installation#testConnection">
                    <span data-installation-target="buttonText">تست اتصال</span>
                    <span class="loading" data-installation-target="loading" style="display: none;"></span>
                </button>
            </div>
        </div>
        <!-- ادامه مراحل نصب API ... -->
    </div>

    <div id="ftpOption" class="step-hidden">
        <div id="ftpStep1">
            <div class="step-card" style="margin-top:15px;">
                <div class="step-header">
                    <div>
                        <h3>نصب با اطلاعات FTP</h3>
                        <p>در صورت عدم دسترسی به API، اطلاعات FTP هاست خود را وارد کنید</p>
                    </div>
                    <div class="step-number">FTP</div>
                </div>
                <div class="step-content">
                    <div class="form-group">
                        <label class="form-label">آدرس FTP</label>
                        <input type="text" class="form-control" id="ftpHost" placeholder="ftp.example.com">
                    </div>
                    <div class="form-group">
                        <label class="form-label">نام کاربری FTP</label>
                        <input type="text" class="form-control" id="ftpUsername" placeholder="نام کاربری FTP">
                    </div>
                    <div class="form-group">
                        <label class="form-label">رمز عبور FTP</label>
                        <input type="password" class="form-control" id="ftpPassword" placeholder="رمز عبور FTP">
                    </div>
                    <div class="form-group">
                        <label class="form-label">پورت FTP</label>
                        <input type="text" class="form-control" id="ftpPort" placeholder="21" value="21">
                    </div>
                    <div class="status-message status-info" style="margin-top:10px;display:block;">
                        <b>اطمینان امنیتی:</b> اطلاعات ورود شما فقط برای نصب استفاده می‌شود و به هیچ عنوان ذخیره نخواهد شد.
                    </div>
                    <button class="btn" id="ftpNextBtn" onclick="showFtpDbStep()">بعدی</button>
                </div>
            </div>
        </div>
        <div id="ftpStep2" class="step-hidden">
            <div class="step-card" style="margin-top:15px;">
                <div class="step-header">
                    <div>
                        <h3>اطلاعات دیتابیس</h3>
                        <p>لطفاً اطلاعات دیتابیس جدید را وارد کنید</p>
                    </div>
                    <div class="step-number">DB</div>
                </div>
                <div class="step-content">
                    <div class="form-group">
                        <label class="form-label">نام دیتابیس</label>
                        <input type="text" class="form-control" id="ftpDatabaseName" placeholder="hesabix_db">
                    </div>
                    <div class="form-group">
                        <label class="form-label">نام کاربری دیتابیس</label>
                        <input type="text" class="form-control" id="ftpDatabaseUser" placeholder="hesabix_user">
                    </div>
                    <div class="form-group">
                        <label class="form-label">رمز عبور دیتابیس</label>
                        <input type="password" class="form-control" id="ftpDatabasePassword" placeholder="رمز عبور قوی">
                    </div>
                    <div class="status-message status-info" style="margin-top:10px;display:block;">
                        <b>اطمینان امنیتی:</b> اطلاعات ورود شما فقط برای نصب استفاده می‌شود و به هیچ عنوان ذخیره نخواهد شد.
                    </div>
                    <button class="btn" onclick="startFtpInstall()">شروع نصب با FTP</button>
                </div>
            </div>
        </div>
        <div id="ftpStep3" class="step-hidden">
            <div class="step-card" style="margin-top:15px;">
                <div class="step-header">
                    <div>
                        <h3>نتیجه نصب</h3>
                    </div>
                    <div class="step-number">✓</div>
                </div>
                <div class="step-content">
                    <div id="ftpResultMsg" class="status-message status-info" style="margin-top:10px;display:block;"></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- مرحله 2: انتخاب دامنه -->
    <div class="step-card step-hidden" data-installation-target="step">
        <div class="step-header">
            <div>
                <h3>مرحله 2: انتخاب دامنه</h3>
                <p>دامنه‌ای که می‌خواهید حسابیکس روی آن نصب شود را انتخاب کنید</p>
            </div>
            <div class="step-number">2</div>
        </div>
        <div class="step-content">
            <div class="form-group">
                <label class="form-label">دامنه</label>
                <select class="form-control" data-installation-target="domain">
                    <option value="">انتخاب کنید...</option>
                </select>
            </div>
            
            <div class="status-message" data-installation-target="status"></div>
            
            <button class="btn" data-action="click->installation#getDomainInfo">
                <span data-installation-target="buttonText">دریافت دامنه‌ها</span>
                <span class="loading" data-installation-target="loading" style="display: none;"></span>
            </button>
        </div>
    </div>
    
    <!-- مرحله 3: تنظیمات دیتابیس -->
    <div class="step-card step-hidden" data-installation-target="step">
        <div class="step-header">
            <div>
                <h3>مرحله 3: تنظیمات دیتابیس</h3>
                <p>اطلاعات دیتابیس جدید را وارد کنید</p>
            </div>
            <div class="step-number">3</div>
        </div>
        <div class="step-content">
            <div class="form-group">
                <label class="form-label">نام دیتابیس</label>
                <input type="text" class="form-control" data-installation-target="databaseName" placeholder="hesabix_db">
            </div>
            
            <div class="form-group">
                <label class="form-label">نام کاربری دیتابیس</label>
                <input type="text" class="form-control" data-installation-target="databaseUser" placeholder="hesabix_user">
            </div>
            
            <div class="form-group">
                <label class="form-label">رمز عبور دیتابیس</label>
                <input type="password" class="form-control" data-installation-target="databasePassword" placeholder="رمز عبور قوی">
            </div>
            
            <div class="status-message" data-installation-target="status"></div>
            
            <button class="btn" data-action="click->installation#createDatabase">
                <span data-installation-target="buttonText">ایجاد دیتابیس</span>
                <span class="loading" data-installation-target="loading" style="display: none;"></span>
            </button>
        </div>
    </div>
    
    <!-- مرحله 4: آپلود فایل‌ها -->
    <div class="step-card step-hidden" data-installation-target="step">
        <div class="step-header">
            <div>
                <h3>مرحله 4: آپلود فایل‌ها</h3>
                <p>فایل‌های حسابیکس در حال دانلود و آپلود هستند</p>
            </div>
            <div class="step-number">4</div>
        </div>
        <div class="step-content">
            <div class="status-message" data-installation-target="status"></div>
            
            <button class="btn" data-action="click->installation#uploadFiles">
                <span data-installation-target="buttonText">شروع آپلود</span>
                <span class="loading" data-installation-target="loading" style="display: none;"></span>
            </button>
        </div>
    </div>
    
    <!-- مرحله 5: تنظیمات نهایی -->
    <div class="step-card step-hidden" data-installation-target="step">
        <div class="step-header">
            <div>
                <h3>مرحله 5: تنظیمات نهایی</h3>
                <p>تنظیم فایل‌های پیکربندی و نهایی‌سازی نصب</p>
            </div>
            <div class="step-number">5</div>
        </div>
        <div class="step-content">
            <div class="status-message" data-installation-target="status"></div>
            
            <button class="btn" data-action="click->installation#finalizeInstallation">
                <span data-installation-target="buttonText">نهایی‌سازی نصب</span>
                <span class="loading" data-installation-target="loading" style="display: none;"></span>
            </button>
        </div>
    </div>
    
    <!-- مرحله 6: تکمیل -->
    <div class="step-card step-hidden" data-installation-target="step">
        <div class="step-header">
            <div>
                <h3>تکمیل نصب</h3>
                <p>حسابیکس با موفقیت نصب شد!</p>
            </div>
            <div class="step-number">✓</div>
        </div>
        <div class="step-content">
            <div class="status-message status-success" data-installation-target="status">
                نصب حسابیکس با موفقیت تکمیل شد!
            </div>
            
            <div class="text-center">
                <a href="#" data-installation-target="adminUrl" class="btn" target="_blank">
                    ورود به پنل مدیریت
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        // تست ساده برای بررسی عملکرد
        function initializeInstallation() {
            console.log('DOM loaded');
            
            // تست دسترسی به المان‌ها
            const panelType = document.querySelector('[data-installation-target="panelType"]');
            const host = document.querySelector('[data-installation-target="host"]');
            const username = document.querySelector('[data-installation-target="username"]');
            const password = document.querySelector('[data-installation-target="password"]');
            
            console.log('Elements found:', {
                panelType: !!panelType,
                host: !!host,
                username: !!username,
                password: !!password
            });
        }

        // اجرا در هر دو حالت
        document.addEventListener('DOMContentLoaded', initializeInstallation);
        document.addEventListener('turbo:load', initializeInstallation);
    </script>
{% endblock %}