|
78 | 78 | {% block body_javascript %} |
79 | 79 | <script> |
80 | 80 | document.addEventListener('DOMContentLoaded', function() { |
81 | | - let currentStep = 0 |
| 81 | + let currentStep = 0, |
| 82 | + useExistingPterodactylSettings = false |
82 | 83 |
|
83 | 84 | const stepCount = 5, |
84 | 85 | forms = document.querySelectorAll('form[data-step]'), |
|
105 | 106 | .then(response => { |
106 | 107 | if (response.ok) { |
107 | 108 | if (currentStep === stepCount) { |
108 | | - return sendConfiguration() |
| 109 | + return sendConfiguration(submitButton) |
109 | 110 | } |
110 | 111 |
|
111 | 112 | response.json().then(response => { |
|
144 | 145 | }) |
145 | 146 | }) |
146 | 147 |
|
| 148 | + document.addEventListener('click', function(e) { |
| 149 | + const overrideButton = e.target.closest('.btn-override-settings') |
| 150 | + if (overrideButton) { |
| 151 | + const step = overrideButton.getAttribute('data-step') |
| 152 | + showPterodactylForm(parseInt(step)) |
| 153 | + return |
| 154 | + } |
| 155 | +
|
| 156 | + const nextConfiguredButton = e.target.closest('.btn-next-configured') |
| 157 | + if (nextConfiguredButton) { |
| 158 | + e.preventDefault() |
| 159 | + const form = document.querySelector('form[data-step="2"]') |
| 160 | + form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true })) |
| 161 | + return |
| 162 | + } |
| 163 | + }) |
| 164 | +
|
147 | 165 | skipButtons.forEach(skipButton => { |
148 | 166 | skipButton.addEventListener('click', function() { |
149 | 167 | setCurrentStep(currentStep + 1) |
|
161 | 179 | document.querySelector('div[data-step="' + step + '"]')?.classList.remove('d-none') |
162 | 180 | currentStep = step |
163 | 181 | document.getElementById('current-step').innerText = currentStep |
| 182 | +
|
| 183 | + if (step === 2) { |
| 184 | + checkIfPterodactylConfigured() |
| 185 | + } |
| 186 | + } |
| 187 | +
|
| 188 | + function checkIfPterodactylConfigured() { |
| 189 | + const validateEndpointUrl = '{{ path('first_configuration_validate_step') }}' |
| 190 | + const formData = new FormData() |
| 191 | + formData.append('step', 2) |
| 192 | + formData.append('checkExistingSettings', 'true') |
| 193 | + formData.append('language', languageSelect.value) |
| 194 | +
|
| 195 | + fetch(validateEndpointUrl, { |
| 196 | + method: 'POST', |
| 197 | + body: formData |
| 198 | + }).then(response => { |
| 199 | + if (response.ok) { |
| 200 | + showPterodactylAlreadyConfigured() |
| 201 | + } else { |
| 202 | + showPterodactylForm(2) |
| 203 | + } |
| 204 | + }).catch(() => { |
| 205 | + showPterodactylForm(2) |
| 206 | + }) |
| 207 | + } |
| 208 | +
|
| 209 | + function showPterodactylAlreadyConfigured() { |
| 210 | + const alreadyConfiguredDiv = document.querySelector('.pterodactyl-already-configured[data-step="2"]') |
| 211 | + const formFields = document.querySelectorAll('.pterodactyl-form-fields') |
| 212 | + const overrideButton = document.querySelector('.btn-override-settings[data-step="2"]') |
| 213 | + |
| 214 | + if (alreadyConfiguredDiv) { |
| 215 | + alreadyConfiguredDiv.classList.remove('d-none') |
| 216 | + } |
| 217 | + formFields.forEach(field => { |
| 218 | + field.classList.add('d-none') |
| 219 | + }) |
| 220 | + if (overrideButton) { |
| 221 | + overrideButton.classList.remove('d-none') |
| 222 | + } |
| 223 | + useExistingPterodactylSettings = true |
| 224 | + } |
| 225 | +
|
| 226 | +
|
| 227 | + function showPterodactylForm(step) { |
| 228 | + const alreadyConfiguredDiv = document.querySelector('.pterodactyl-already-configured[data-step="' + step + '"]') |
| 229 | + const formFields = document.querySelectorAll('.pterodactyl-form-fields') |
| 230 | + const overrideButton = document.querySelector('.btn-override-settings[data-step="' + step + '"]') |
| 231 | + const textError = document.querySelector('.text-error[data-step="' + step + '"]') |
| 232 | + |
| 233 | + if (alreadyConfiguredDiv) { |
| 234 | + alreadyConfiguredDiv.classList.add('d-none') |
| 235 | + } |
| 236 | + formFields.forEach(field => { |
| 237 | + field.classList.remove('d-none') |
| 238 | + }) |
| 239 | + if (overrideButton) { |
| 240 | + overrideButton.classList.add('d-none') |
| 241 | + } |
| 242 | + if (textError) { |
| 243 | + textError.classList.add('d-none') |
| 244 | + } |
| 245 | + enableNextButton(step) |
| 246 | + useExistingPterodactylSettings = false |
| 247 | + } |
| 248 | +
|
| 249 | + function enableNextButton(step) { |
| 250 | + const form = document.querySelector('form[data-step="' + step + '"]') |
| 251 | + if (form) { |
| 252 | + const submitButton = form.querySelector('button[type="submit"]') |
| 253 | + if (submitButton) { |
| 254 | + submitButton.disabled = false |
| 255 | + } |
| 256 | + } |
| 257 | + } |
| 258 | +
|
| 259 | + function disableNextButton(step) { |
| 260 | + const form = document.querySelector('form[data-step="' + step + '"]') |
| 261 | + if (form) { |
| 262 | + const submitButton = form.querySelector('button[type="submit"]') |
| 263 | + if (submitButton) { |
| 264 | + submitButton.disabled = true |
| 265 | + } |
| 266 | + } |
164 | 267 | } |
165 | 268 |
|
166 | 269 | function validateStep(step) { |
167 | 270 | const validateEndpointUrl = '{{ path('first_configuration_validate_step') }}', |
168 | 271 | form = document.querySelector('form[data-step="' + step + '"]'), |
169 | 272 | formData = new FormData(form) |
170 | 273 |
|
171 | | - // For step 5 (user validation), we also need Pterodactyl API data from step 2 |
172 | | - if (step === 5) { |
173 | | - const pterodactylForm = document.querySelector('form[data-step="2"]') |
174 | | - if (pterodactylForm) { |
175 | | - const pterodactylUrlInput = pterodactylForm.querySelector('input[name="pterodactyl_panel_url"]') |
176 | | - const pterodactylApiKeyInput = pterodactylForm.querySelector('input[name="pterodactyl_panel_api_key"]') |
177 | | - |
178 | | - if (pterodactylUrlInput && pterodactylUrlInput.value) { |
179 | | - formData.append('pterodactyl_panel_url', pterodactylUrlInput.value) |
| 274 | + switch (step) { |
| 275 | + case 2: |
| 276 | + if (useExistingPterodactylSettings) { |
| 277 | + formData.delete('pterodactyl_panel_url') |
| 278 | + formData.delete('pterodactyl_panel_api_key') |
| 279 | + formData.append('checkExistingSettings', 'true') |
180 | 280 | } |
181 | | - if (pterodactylApiKeyInput && pterodactylApiKeyInput.value) { |
182 | | - formData.append('pterodactyl_panel_api_key', pterodactylApiKeyInput.value) |
| 281 | + break |
| 282 | + case 5: |
| 283 | + if (useExistingPterodactylSettings) { |
| 284 | + formData.append('useExistingPterodactylSettings', 'true') |
| 285 | + } else { |
| 286 | + const pterodactylForm = document.querySelector('form[data-step="2"]') |
| 287 | + if (pterodactylForm) { |
| 288 | + const pterodactylUrlInput = pterodactylForm.querySelector('input[name="pterodactyl_panel_url"]') |
| 289 | + const pterodactylApiKeyInput = pterodactylForm.querySelector('input[name="pterodactyl_panel_api_key"]') |
| 290 | + |
| 291 | + if (pterodactylUrlInput && pterodactylUrlInput.value) { |
| 292 | + formData.append('pterodactyl_panel_url', pterodactylUrlInput.value) |
| 293 | + } |
| 294 | + if (pterodactylApiKeyInput && pterodactylApiKeyInput.value) { |
| 295 | + formData.append('pterodactyl_panel_api_key', pterodactylApiKeyInput.value) |
| 296 | + } |
| 297 | + } |
183 | 298 | } |
184 | | - } |
| 299 | + break |
185 | 300 | } |
186 | 301 |
|
187 | 302 | formData.append('step', step) |
|
193 | 308 | }) |
194 | 309 | } |
195 | 310 |
|
196 | | - function sendConfiguration() { |
| 311 | + function sendConfiguration(submitButton) { |
197 | 312 | const sendConfigurationEndpointUrl = '{{ path('first_configuration_finish') }}', |
198 | 313 | successUrl = '{{ path('app_login') }}', |
199 | 314 | allForms = document.querySelectorAll('form'), |
|
207 | 322 | }) |
208 | 323 | }) |
209 | 324 |
|
| 325 | + if (useExistingPterodactylSettings) { |
| 326 | + formData.append('useExistingPterodactylSettings', 'true') |
| 327 | + formData.delete('pterodactyl_panel_url') |
| 328 | + formData.delete('pterodactyl_panel_api_key') |
| 329 | + } |
| 330 | +
|
210 | 331 | fetch(sendConfigurationEndpointUrl, { |
211 | 332 | method: 'POST', |
212 | 333 | body: formData |
213 | 334 | }).then(response => { |
214 | 335 | if (response.ok) { |
215 | 336 | window.location.href = successUrl |
| 337 | + } else { |
| 338 | + submitButton.disabled = false |
| 339 | + return response.json().then(data => { |
| 340 | + handleStepError(5, data.message || '{{ 'pteroca.first_configuration.messages.validation_error'|trans }}') |
| 341 | + }).catch(() => { |
| 342 | + handleStepError(5, '{{ 'pteroca.first_configuration.messages.validation_error'|trans }}') |
| 343 | + }) |
216 | 344 | } |
| 345 | + }).catch(() => { |
| 346 | + handleStepError(5, '{{ 'pteroca.first_configuration.messages.validation_error'|trans }}') |
| 347 | + submitButton.disabled = false |
217 | 348 | }) |
218 | 349 | } |
219 | 350 |
|
|
0 commit comments