feat: rewrite of the update script using Twig (#2492)

.editorconfig

@@ -8,7 +8,7 @@ insert_final_newline = true
 indent_style = space
 
 # HTML, SCSS, JS, YAML and JSON files
-[{*.html,*.scss,*.js,*.json,*.yml}]
+[{*.html,*.twig,*.scss,*.js,*.json,*.yml}]
 indent_size = 2
 
 # PHP files

phpmyfaq/assets/src/configuration/index.js

@@ -0,0 +1,2 @@
+export * from './setup';
+export * from './update';

phpmyfaq/assets/src/configuration/setup.js

@@ -0,0 +1,73 @@
+/**
+ * Setup functions
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public License,
+ * v. 2.0. If a copy of the MPL was not distributed with this file, You can
+ * obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * @package   phpMyFAQ
+ * @author    Thorsten Rinne <[email protected]>
+ * @copyright 2015-2023 phpMyFAQ Team
+ * @license   http://www.mozilla.org/MPL/2.0/ Mozilla Public License Version 2.0
+ * @link      https://www.phpmyfaq.de
+ * @since     2015-12-24
+ */
+
+import { insertAfter } from '../utils';
+
+export const selectDatabaseSetup = (event) => {
+  const database = document.getElementById('dbdatafull');
+  const databasePort = document.getElementById('sql_port');
+  const sqlite = document.getElementById('dbsqlite');
+
+  switch (event.target.value) {
+    case 'mysqli':
+      databasePort.value = 3306;
+      sqlite.className = 'd-none';
+      database.className = 'd-block';
+      break;
+    case 'pgsql':
+      databasePort.value = 5432;
+      sqlite.className = 'd-none';
+      database.className = 'd-block';
+      break;
+    case 'sqlsrv':
+      databasePort.value = 1433;
+      sqlite.className = 'd-none';
+      database.className = 'd-block';
+      break;
+    case 'sqlite3':
+      sqlite.className = 'd-block';
+      database.className = 'd-none';
+      break;
+    default:
+      sqlite.className = 'd-none';
+      database.className = 'd-block';
+      break;
+  }
+};
+
+export const addElasticsearchServerInput = () => {
+  const wrapper = document.getElementById('elasticsearch-server-wrapper');
+  const input = document.createElement('input');
+
+  // Set attributes for input
+  input.className = 'form-control';
+  input.className += ' mt-1';
+  input.type = 'text';
+  input.name = 'elasticsearch_server[]';
+  input.placeholder = `127.0.0.1:9200`;
+
+  insertAfter(wrapper, input);
+};
+
+export const stepIndicator = (step) => {
+  // This function removes the "active" class of all steps...
+  let i,
+    steps = document.getElementsByClassName('stepIndicator');
+  for (i = 0; i < steps.length; i++) {
+    steps[i].className = steps[i].className.replace(' active', '');
+  }
+  //... and adds the "active" class on the current step:
+  steps[step].className += ' active';
+};

phpmyfaq/assets/src/configuration/update.js

@@ -0,0 +1,25 @@
+/**
+ * Update functions
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public License,
+ * v. 2.0. If a copy of the MPL was not distributed with this file, You can
+ * obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * @package   phpMyFAQ
+ * @author    Thorsten Rinne <[email protected]>
+ * @copyright 2023 phpMyFAQ Team
+ * @license   http://www.mozilla.org/MPL/2.0/ Mozilla Public License Version 2.0
+ * @link      https://www.phpmyfaq.de
+ * @since     2023-10-22
+ */
+
+export const handleUpdateNextStepButton = () => {
+  const nextStepButton = document.getElementById('phpmyfaq-update-next-step');
+
+  if (nextStepButton) {
+    nextStepButton.addEventListener('click', (event) => {
+      event.preventDefault();
+      window.location.replace('./update.php?step=2');
+    });
+  }
+};

phpmyfaq/assets/src/setup.js

@@ -13,65 +13,8 @@
  * @since     2015-12-24
  */
 
-import { insertAfter } from './utils';
 import { handlePasswordToggle } from './utils';
-
-export const selectDatabaseSetup = (event) => {
-  const database = document.getElementById('dbdatafull');
-  const databasePort = document.getElementById('sql_port');
-  const sqlite = document.getElementById('dbsqlite');
-
-  switch (event.target.value) {
-    case 'mysqli':
-      databasePort.value = 3306;
-      sqlite.className = 'd-none';
-      database.className = 'd-block';
-      break;
-    case 'pgsql':
-      databasePort.value = 5432;
-      sqlite.className = 'd-none';
-      database.className = 'd-block';
-      break;
-    case 'sqlsrv':
-      databasePort.value = 1433;
-      sqlite.className = 'd-none';
-      database.className = 'd-block';
-      break;
-    case 'sqlite3':
-      sqlite.className = 'd-block';
-      database.className = 'd-none';
-      break;
-    default:
-      sqlite.className = 'd-none';
-      database.className = 'd-block';
-      break;
-  }
-};
-
-export const addElasticsearchServerInput = () => {
-  const wrapper = document.getElementById('elasticsearch-server-wrapper');
-  const input = document.createElement('input');
-
-  // Set attributes for input
-  input.className = 'form-control';
-  input.className += ' mt-1';
-  input.type = 'text';
-  input.name = 'elasticsearch_server[]';
-  input.placeholder = `127.0.0.1:9200`;
-
-  insertAfter(wrapper, input);
-};
-
-const stepIndicator = (step) => {
-  // This function removes the "active" class of all steps...
-  let i,
-    steps = document.getElementsByClassName('stepIndicator');
-  for (i = 0; i < steps.length; i++) {
-    steps[i].className = steps[i].className.replace(' active', '');
-  }
-  //... and adds the "active" class on the current step:
-  steps[step].className += ' active';
-};
+import { addElasticsearchServerInput, selectDatabaseSetup, stepIndicator } from './configuration';
 
 document.addEventListener('DOMContentLoaded', () => {
   'use strict';
@@ -112,7 +55,9 @@ document.addEventListener('DOMContentLoaded', () => {
   function showTab(n) {
     const currentStep = document.getElementsByClassName('step');
 
-    currentStep[n].style.display = 'block';
+    if (currentStep) {
+      currentStep[n].style.display = 'block';
+    }
 
     const prevButton = document.getElementById('prevBtn');
     const nextButton = document.getElementById('nextBtn');

phpmyfaq/assets/src/update.js

@@ -0,0 +1,3 @@
+import { handleUpdateNextStepButton } from './configuration';
+
+handleUpdateNextStepButton();

phpmyfaq/assets/templates/setup/update.twig

@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>phpMyFAQ {{ newVersion }} Update</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="application-name" content="phpMyFAQ {{ newVersion }}">
+  <meta name="copyright" content="(c) 2001-{{ currentYear }} phpMyFAQ Team">
+  <link rel="stylesheet" href="../assets/dist/styles.css">
+  <link rel="shortcut icon" href="../assets/themes/default/img/favicon.ico">
+</head>
+  <body>
+
+    <nav class="p-3 text-bg-dark border-bottom">
+      <div class="container">
+        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
+          <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
+            <li class="pmf-nav-link">
+              <a href="{{ documentationUrl }}" class="pmf-nav-link" target="_blank">
+                Documentation
+              </a>
+            </li>
+            <li class="pmf-nav-link">
+              <a href="https://www.phpmyfaq.de/support" class="pmf-nav-link" target="_blank">
+                Support
+              </a>
+            </li>
+            <li class="pmf-nav-link">
+              <a href="https://forum.phpmyfaq.de/" class="pmf-nav-link" target="_blank">
+                Forums
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+    <main role="main">
+      <section id="phpmyfaq-setup-form">
+        <div class="container shadow-lg p-5 mt-5 bg-light-subtle">
+          <div class="px-4 pt-2 my-2 text-center border-bottom">
+            <h1 class="display-4 fw-bold">phpMyFAQ {{ newVersion }} Update</h1>
+            <div class="col-lg-6 mx-auto">
+              <p class="lead mb-4">
+                Did you already read our <a target="_blank" href="{{ documentationUrl }}">documentation</a>
+                carefully before starting the phpMyFAQ setup?
+              </p>
+            </div>
+          </div>
+
+          <div class="form-header d-flex my-4">
+            <span class="stepIndicator">Update information</span>
+            <span class="stepIndicator">File backups</span>
+            <span class="stepIndicator">Database updates</span>
+          </div>
+
+          {{ include('setup/update/step1.twig') }}
+
+        </div>
+        </section>
+    </main>
+
+    <footer class="setup-footer container mt-1">
+      <p class="text-end">
+        &copy; 2001-{{ currentYear }} <a target="_blank" href="https://www.phpmyfaq.de/">phpMyFAQ Team</a>
+      </p>
+    </footer>
+
+    <!-- <script src="../assets/dist/frontend.js"></script> -->
+    <script src="../assets/dist/update.js"></script>
+  </body>
+</html>

phpmyfaq/assets/templates/setup/update/step1.twig

@@ -0,0 +1,80 @@
+<form action="#" method="post" name="phpmyfaq-update-form" id="phpmyfaq-update-form">
+  <input name="installed-version" type="hidden" value="{{ installedVersion }}">
+  <input name="next-step" id="phpmyfaq-update-next-step" type="hidden" value="2">
+
+  <div class="row">
+    <div class="col">
+      <div class="alert alert-info text-center mt-2" role="alert">
+        <strong>
+          <i aria-hidden="true" class="fa fa-info-circle"></i>
+          Please create a full backup of your database, your templates,
+          attachments and uploaded images before running this update.
+        </strong>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col">
+      <p>This update script will work <strong>only</strong> for the following versions:</p>
+      <ul>
+        <li>phpMyFAQ 3.0.x</li>
+        <li>phpMyFAQ 3.1.x</li>
+        <li>phpMyFAQ 3.2.x</li>
+      </ul>
+    </div>
+    <div class="col">
+      <p>This update script <strong>will not</strong> work for the following versions:</p>
+      <ul>
+        <li>phpMyFAQ 0.x</li>
+        <li>phpMyFAQ 1.x</li>
+        <li>phpMyFAQ 2.x</li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col">
+
+      {% if errorCheckPreUpgrade %}
+      <div class="alert alert-danger" role="alert">
+        <h4 class="alert-heading">Fatal error!</h4>
+        {{ errorMessagePreUpgrade }}
+      </div>
+      {% endif %}
+
+      {% if configTableNotAvailable %}
+        <div class="alert alert-danger" role="alert">
+          <h4 class="alert-heading">Fatal error!</h4>
+          Looks like there's a problem with the <code>faqconfig</code> table.
+        </div>
+      {% endif %}
+
+      {% if installedVersionTooOld %}
+        <div class="alert alert-danger" role="alert">
+          <h4 class="alert-heading">Attention</h4>
+          Your current installed version is phpMyFAQ {{ installedVersion }}.
+          Please update to the latest phpMyFAQ 3.0 version first.
+        </div>
+      {% endif %}
+
+      {% if isMaintenanceModeEnabled %}
+      <div class="alert alert-danger" role="alert">
+        <h4 class="alert-heading">Heads up!</h4>
+        Please enable the maintenance mode in the <a href="../admin/?action=config">admin section</a>
+        before running the update script.
+        </div>
+      {% endif %}
+
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col d-flex justify-content-end">
+      <button class="btn btn-primary btn-next btn-lg {{ nextStepButtonEnabled }}" type="button"
+              id="phpmyfaq-update-next-step" {{ nextStepButtonEnabled }}>
+        Next update step
+      </button>
+    </div>
+  </div>
+</form>