Skip to content

Commit

Permalink
refactor: migrated setup and update to Twig
Browse files Browse the repository at this point in the history
  • Loading branch information
@thorsten
thorsten committed Jun 14, 2024
1 parent b6776a2 commit 837d789
Show file tree
Hide file tree
Showing 21 changed files with 1,306 additions and 722 deletions.
3 changes: 3 additions & 0 deletions phpmyfaq/.htaccess
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,9 @@ Header set Access-Control-Allow-Headers "Content-Type, Authorization"
# User pages
RewriteRule ^user/(ucp|bookmarks|request-removal|logout|register) index.php?action=$1 [L,QSA]

# Setup and update pages
RewriteRule ^setup/(.*) setup/index.php [L,QSA]

# Administration API
RewriteRule ^admin/api/(.*) admin/api/index.php [L,QSA]

Expand Down
8 changes: 4 additions & 4 deletions phpmyfaq/assets/src/configuration/update.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@ export const handleUpdateNextStepButton = () => {
if (nextStepButton && nextStep) {
nextStepButton.addEventListener('click', (event) => {
event.preventDefault();
window.location.replace(`./update.php?step=${nextStep.value}`);
window.location.replace(`./update?step=${nextStep.value}`);
});
}
};

export const handleUpdateInformation = async () => {
if (window.location.href.endsWith('update.php')) {
if (window.location.href.endsWith('/update')) {
const installedVersion = document.getElementById('phpmyfaq-update-installed-version');

try {
Expand Down Expand Up @@ -67,7 +67,7 @@ export const handleUpdateInformation = async () => {
};

export const handleConfigBackup = async () => {
if (window.location.href.endsWith('update.php?step=2')) {
if (window.location.href.endsWith('/update?step=2')) {
const installedVersion = document.getElementById('phpmyfaq-update-installed-version');

try {
Expand Down Expand Up @@ -96,7 +96,7 @@ export const handleConfigBackup = async () => {
};

export const handleDatabaseUpdate = async () => {
if (window.location.href.endsWith('update.php?step=3')) {
if (window.location.href.endsWith('/update?step=3')) {
const installedVersion = document.getElementById('phpmyfaq-update-installed-version');

try {
Expand Down
258 changes: 132 additions & 126 deletions phpmyfaq/assets/templates/admin/configuration/upgrade.twig
View file
Original file line number Diff line number Diff line change
@@ -1,145 +1,151 @@
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">
<i class="bi bi-arrow-clockwise" aria-hidden="true"></i>
{{ adminHeaderUpgrade }}
</h1>
<h1 class="h2">
<i class="bi bi-arrow-clockwise" aria-hidden="true"></i>
{{ adminHeaderUpgrade }}
</h1>
</div>

<div class="row">
<div class="col-6">
<div class="col-6">

<div id="pmf-update-step-health-check" class="card shadow w-100 mb-3">
<div class="card-body">
<h5 class="card-title">
{{ headerCheckHealth }}
</h5>
<p class="card-text">
{{ msgHealthCheck }}
</p>
<!-- Step 1: Check for system health -->
<div class="d-grid gap-2 d-md-flex justify-content-between">
<button type="button" class="btn btn-primary mb-2" id="pmf-button-check-health">
{{ buttonCheckHealth }}
</button>
<output id="result-check-health"></output>
</div>
</div>
<div id="pmf-update-step-health-check" class="card shadow w-100 mb-3">
<div class="card-body">
<h5 class="card-title">
{{ headerCheckHealth }}
</h5>
<p class="card-text">
{{ msgHealthCheck }}
</p>
<!-- Step 1: Check for system health -->
<div class="d-grid gap-2 d-md-flex justify-content-between">
<button type="button" class="btn btn-primary mb-2" id="pmf-button-check-health">
{{ buttonCheckHealth }}
</button>
<output id="result-check-health"></output>
</div>
</div>
</div>

<div id="pmf-update-step-check-versions" class="card shadow w-100 mb-3">
<div class="card-body">
<h5 class="card-title">
{{ headerCheckUpdates }}
</h5>
<p class="card-text">
{{ msgUpdateCheck }}
</p>
<!-- Step 2: Check for a new version -->
<div class="d-grid gap-2 d-md-flex justify-content-between">
<button type="button" class="btn btn-primary mb-2" id="pmf-button-check-updates">
{{ buttonCheckUpdates }}
</button>
<output id="result-check-versions"></output>
</div>
</div>
<div id="pmf-update-step-check-versions" class="card shadow w-100 mb-3">
<div class="card-body">
<h5 class="card-title">
{{ headerCheckUpdates }}
</h5>
<p class="card-text">
{{ msgUpdateCheck }}
</p>
<!-- Step 2: Check for a new version -->
<div class="d-grid gap-2 d-md-flex justify-content-between">
<button type="button" class="btn btn-primary mb-2" id="pmf-button-check-updates">
{{ buttonCheckUpdates }}
</button>
<output id="result-check-versions"></output>
</div>
</div>
</div>

<div id="pmf-update-step-download" class="card shadow w-100 mb-3">
<div class="card-body">
<h5 class="card-title">
{{ headerDownloadPackage }}
</h5>
<p class="card-text">
{{ msgDownloadPackage }}
</p>
<!-- Nightlies can be downloaded always if activated -->
{% if isOnNightlies %}
<p class="alert alert-warning">
{{ alertNightlyBuild }}
</p>
<div class="d-grid gap-2 d-md-flex justify-content-between">
<button type="button" class="btn btn-primary mb-2" id="pmf-button-download-now">
{{ buttonDownloadPackage }}
</button>
<output id="result-download-nightly"></output>
</div>
{% endif %}
</div>
</div>
<div id="pmf-update-step-download" class="card shadow w-100 mb-3">
<div class="card-body">
<h5 class="card-title">
{{ headerDownloadPackage }}
</h5>
<p class="card-text">
{{ msgDownloadPackage }}
</p>
<!-- Nightlies can be downloaded always if activated -->
{% if isOnNightlies %}
<p class="alert alert-warning">
{{ alertNightlyBuild }}
</p>
<div class="d-grid gap-2 d-md-flex justify-content-between">
<button type="button" class="btn btn-primary mb-2" id="pmf-button-download-now">
{{ buttonDownloadPackage }}
</button>
<output id="result-download-nightly"></output>
</div>
{% endif %}
</div>
</div>

<div id="pmf-update-step-extract-package" class="card shadow w-100 mb-3 d-none">
<div class="card-body">
<h5 class="card-title">
{{ headerExtractPackage }}
</h5>
<p class="card-text">
{{ msgExtractPackage }}
</p>
<!-- Step 4: Extract downloaded package -->
<div>
<div class="d-grid gap-2 d-md-flex justify-content-between">
<button type="button" class="btn btn-primary mb-2" id="pmf-button-extract-package">
{{ buttonExtractPackage }}
</button>
<output id="result-extract-package"></output>
</div>
</div>
</div>
<div id="pmf-update-step-extract-package" class="card shadow w-100 mb-3 d-none">
<div class="card-body">
<h5 class="card-title">
{{ headerExtractPackage }}
</h5>
<p class="card-text">
{{ msgExtractPackage }}
</p>
<!-- Step 4: Extract downloaded package -->
<div>
<div class="d-grid gap-2 d-md-flex justify-content-between">
<button type="button" class="btn btn-primary mb-2" id="pmf-button-extract-package">
{{ buttonExtractPackage }}
</button>
<output id="result-extract-package"></output>
</div>
</div>
</div>
</div>

<div id="pmf-update-step-install-package" class="card shadow w-100 mb-3 d-none">
<div class="card-body">
<h5 class="card-title">
5. Install downloaded package
</h5>
<p class="card-text">
This extracts the downloaded package into your filesystem.
</p>
<!-- Step 5: Install downloaded package -->
<div>
<div class="d-grid gap-2 d-md-flex justify-content-between">
<div>
<button type="button" class="btn btn-primary mb-2" id="pmf-button-install-package">
Install downloaded package
</button>
</div>
<div>
<ol>
<li>Backup of current installation <span id="pmf-backup-done"></span></li>
<li>Installation of new files <span id="pmf-installation-done"></span></li>
</ol>
</div>
<div class="w-25">
<div class="progress w-100 mt-1 mb-2" role="progressbar">
<div class="progress-bar progress-bar-striped progress-bar-animated"
id="result-backup-package" style="width: 0">
0%
</div>
</div>
<div class="progress w-100" role="progressbar">
<div class="progress-bar progress-bar-striped progress-bar-animated"
id="result-install-package" style="width: 0">
0%
</div>
</div>
</div>
</div>
<div id="pmf-update-step-install-package" class="card shadow w-100 mb-3 d-none">
<div class="card-body">
<h5 class="card-title">
5. Install downloaded package
</h5>
<p class="card-text">
This extracts the downloaded package into your filesystem.
</p>
<!-- Step 5: Install downloaded package -->
<div>
<div class="d-grid gap-2 d-md-flex justify-content-between">
<div>
<button type="button" class="btn btn-primary mb-2" id="pmf-button-install-package">
Install downloaded package
</button>
</div>
<div>
<ol>
<li>Backup of current installation <span id="pmf-backup-done"></span></li>
<li>Installation of new files <span id="pmf-installation-done"></span></li>
</ol>
</div>
<div class="w-25">
<div class="progress w-100 mt-1 mb-2" role="progressbar">
<div class="progress-bar progress-bar-striped progress-bar-animated"
id="result-backup-package" style="width: 0">
0%
</div>
</div>
<div class="progress w-100" role="progressbar">
<div class="progress-bar progress-bar-striped progress-bar-animated"
id="result-install-package" style="width: 0">
0%
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
<div class="col-6">
<div>
<p class="alert alert-info">
You can still use the manual <a href="../setup/update">update process</a> if you prefer.
</p>
</div>
<div class="col-6">
<div>
{{ msgLastCheckDate }}
<output id="dateLastChecked">{{ dateLastChecked | date('Y-m-d H:i:s') }}</output>
</div>
<div>
{{ msgLastVersionAvailable }}
<output id="versionLastChecked">n/a</output>
</div>
<div>
{{ msgReleaseEnvironment }} <output id="releaseEnvironment">{{ releaseEnvironment }}</output>
</div>
<div>
{{ msgLastCheckDate }}
<output id="dateLastChecked">{{ dateLastChecked | date('Y-m-d H:i:s') }}</output>
</div>
<div>
{{ msgLastVersionAvailable }}
<output id="versionLastChecked">n/a</output>
</div>
<div>
{{ msgReleaseEnvironment }}
<output id="releaseEnvironment">{{ releaseEnvironment }}</output>
</div>
</div>
</div>
49 changes: 49 additions & 0 deletions phpmyfaq/assets/templates/setup/base.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>phpMyFAQ {{ newVersion }} {{ setupType }}</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">
<script src="../assets/dist/setup.js"></script>
<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>

{% block content %}{% endblock %}

<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/update.js"></script>
</body>
</html>
Loading

0 comments on commit 837d789

Please sign in to comment.