From b49cbcd84fd8e4b8ac56fd6d7e722d0aa8c6078c Mon Sep 17 00:00:00 2001
From: grandeljay <github.jay@grandel.anonaddy.me>
Date: Wed, 12 Oct 2022 19:45:26 +0200
Subject: [PATCH] Improve installer

---
 src/api/database-test.php  | 44 +++++++++++++++++++++++++
 src/assets/css/install.css |  4 +++
 src/assets/js/install.js   | 36 +++++++++++++++++++++
 src/pages/install.php      | 66 ++++++++++++++++++++++++++------------
 4 files changed, 129 insertions(+), 21 deletions(-)
 create mode 100644 src/api/database-test.php
 create mode 100644 src/assets/css/install.css
 create mode 100644 src/assets/js/install.js

diff --git a/src/api/database-test.php b/src/api/database-test.php
new file mode 100644
index 00000000..dd04861d
--- /dev/null
+++ b/src/api/database-test.php
@@ -0,0 +1,44 @@
+<?php
+
+/**
+ * Database test
+ *
+ * @category API
+ */
+
+namespace wishthis;
+
+ob_start();
+
+$api = true;
+
+require '../../index.php';
+
+$response = array();
+
+switch ($_SERVER['REQUEST_METHOD']) {
+    case 'POST':
+        $success = false;
+
+        try {
+            $dsn = 'mysql:host=' . $_POST['DATABASE_HOST'] . ';dbname=' . $_POST['DATABASE_NAME'] . ';port=3306;charset=utf8';
+            $pdo = new \PDO(
+                $dsn,
+                $_POST['DATABASE_USER'],
+                $_POST['DATABASE_PASSWORD']
+            );
+
+            $success = true;
+        } catch (\Throwable $th) {
+            echo $th->getMessage();
+        }
+
+        $response['success'] = $success;
+        break;
+}
+
+$response['warning'] = ob_get_clean();
+
+header('Content-type: application/json; charset=utf-8');
+echo json_encode($response);
+die();
diff --git a/src/assets/css/install.css b/src/assets/css/install.css
new file mode 100644
index 00000000..41a166cd
--- /dev/null
+++ b/src/assets/css/install.css
@@ -0,0 +1,4 @@
+svg#logo {
+    width: 100%;
+    height: 5vh;
+}
diff --git a/src/assets/js/install.js b/src/assets/js/install.js
new file mode 100644
index 00000000..49b37f53
--- /dev/null
+++ b/src/assets/js/install.js
@@ -0,0 +1,36 @@
+$(function() {
+
+    /**
+     * Step 1
+     */
+    $(document).on('click', '#database-test', function(event) {
+        var form         = $(this).closest('form');
+        var formDatabase = new URLSearchParams(new FormData(form[0]));
+
+        form.addClass('loading');
+
+        fetch('/src/api/database-test.php', {
+            method : 'POST',
+            body   : formDatabase
+        })
+        .then(handleFetchError)
+        .then(handleFetchResponse)
+        .then(function(response) {
+            if (response.success) {
+                $('input[type="submit"]').removeClass('disabled');
+
+                form.form('remove errors');
+
+                $('body').toast({ message : 'Database connection succeeded.' });
+            } else {
+                $('input[type="submit"]').addClass('disabled');
+
+                form.form('add errors', ['Database connection failed.']);
+            }
+        })
+        .finally(function() {
+            form.removeClass('loading');
+        });
+    });
+
+});
diff --git a/src/pages/install.php b/src/pages/install.php
index c1e2b6af..1665af0c 100644
--- a/src/pages/install.php
+++ b/src/pages/install.php
@@ -26,41 +26,61 @@ switch ($step) {
         <main>
             <div class="ui hidden divider"></div>
             <div class="ui container">
+                <?= file_get_contents(ROOT . '/src/assets/img/logo.svg') ?>
+
+                <h1 class="ui header"><?= $page->title ?></h1>
+
                 <div class="ui segment">
-                    <h1 class="ui header"><?= $page->title ?></h1>
                     <h2 class="ui header"><?= sprintf(__('Step %d'), $step) ?></h2>
+
                     <p><?= __('Welcome to the wishthis installer.') ?></p>
+                </div>
+
+                <div class="ui segment">
+                    <h3 class="ui header"><?= __('Database') ?></h3>
+
                     <p><?= __('wishthis needs a database to function properly. Please enter your credentials.') ?></p>
 
                     <form class="ui form" action="<?= Page::PAGE_INSTALL ?>" method="POST">
                         <input type="hidden" name="install" value="true" />
                         <input type="hidden" name="step" value="<?= $step + 1; ?>" />
 
-                        <div class="field">
-                            <label><?= __('Host') ?></label>
-                            <input type="text" name="DATABASE_HOST" placeholder="localhost" value="localhost" />
+                        <div class="ui error message"></div>
+
+                        <div class="equal width fields">
+                            <div class="field">
+                                <label><?= __('Host') ?></label>
+                                <input type="text" name="DATABASE_HOST" placeholder="localhost" value="localhost" />
+                            </div>
+
+                            <div class="field">
+                                <label><?= __('Name') ?></label>
+                                <input type="text" name="DATABASE_NAME" placeholder="wishthis" value="wishthis" />
+                            </div>
                         </div>
 
-                        <div class="field">
-                            <label><?= __('Name') ?></label>
-                            <input type="text" name="DATABASE_NAME" placeholder="wishthis" value="wishthis" />
+                        <div class="equal width fields">
+                            <div class="field">
+                                <label><?= __('Username') ?></label>
+                                <input type="text" name="DATABASE_USER" placeholder="root" value="root" />
+                            </div>
+
+                            <div class="field">
+                                <label><?= __('Password') ?></label>
+                                <input type="text" name="DATABASE_PASSWORD" />
+                            </div>
                         </div>
 
-                        <div class="field">
-                            <label><?= __('Username') ?></label>
-                            <input type="text" name="DATABASE_USER" placeholder="root" value="root" />
+                        <div class="inline fields">
+                            <input class="ui primary disabled button"
+                                type="submit"
+                                value="<?= __('Save') ?>"
+                                title="<?= __('Save') ?>"
+                            />
+                            <button class="ui button" id="database-test" type="button">
+                                <?= __('Test connection') ?>
+                            </button>
                         </div>
-
-                        <div class="field">
-                            <label><?= __('Password') ?></label>
-                            <input type="text" name="DATABASE_PASSWORD" />
-                        </div>
-
-                        <input class="ui primary button"
-                               type="submit"
-                               value="<?= __('Continue') ?>"
-                               title="<?= __('Continue') ?>"
-                        />
                     </form>
                 </div>
             </div>
@@ -69,6 +89,10 @@ switch ($step) {
         break;
 
     case 2:
+        /**
+         * Set sitemap path in robots.txt
+         */
+
         /**
          * Cache
          */