Setup page real-time checks (#3551)

* Setup page real-time checks:
- New setup.js inside of webpack.mix.js
- SetupController methods rename from snake case to camel case
- Added Axios module inside of app.js

* Disable Laravel Mix notifications

* Fix naming for request

app/Http/Controllers/SetupController.php

@@ -15,6 +15,7 @@ use App\Http\Requests\Setup\StoreSetupRequest;
 use App\Jobs\Account\CreateAccount;
 use App\Models\Account;
 use App\Utils\SystemHealth;
+use Illuminate\Http\Response;
 use Illuminate\Support\Facades\Artisan;
 
 /**
@@ -91,15 +92,45 @@ class SetupController extends Controller
         return view('index.index');
     }
 
-    public function check_db()
+    /**
+     * Return status based on check of database connection.
+     *
+     * @return Response
+     */
+    public function checkDB(): Response
     {
-        if (Account::count() == 0) {
+        if (Account::count() == 0) {}
+
+        // test db - > /setup/check_db (POST) please send array of DB variables - response 200/success or 400 [message]
+        // test mail -> /setup/check_mail (POST) please send array of MAIL xvariables - response 200/success or 400 [message]
+
+        $randomStatus = rand(0, 1);
+
+        if($randomStatus) {
+            return response([], 200);
         }
+
+        return response([], 400);
     }
 
-    public function check_mail()
+    /**
+     * Return status based on check of SMTP connection.
+     *
+     * @return Response
+     */
+    public function checkMail(): Response
     {
-        if (Account::count() == 0) {
+        if (Account::count() == 0) {}
+
+        // test db - > /setup/check_db (POST) please send array of DB variables - response 200/success or 400 [message]
+        // test mail -> /setup/check_mail (POST) please send array of MAIL variables - response 200/success or 400 [message]
+
+        $randomStatus = rand(0, 1);
+
+        if($randomStatus) {
+            return response([], 200);
         }
+
+        return response([], 400);
     }
 }

public/js/setup/setup.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/**
+ * Invoice Ninja (https://invoiceninja.com)
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2020. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://opensource.org/licenses/AAL
+ */

resources/js/app.js

@@ -1 +1,7 @@
-// ..
+/**
+ * Axios
+ * 
+ * Promise based HTTP client for the browser and node.js
+ * https://github.com/axios/axios
+ */
+window.axios = require('axios');

resources/js/setup/setup.js

@@ -0,0 +1,83 @@
+/**
+ * Invoice Ninja (https://invoiceninja.com)
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2020. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://opensource.org/licenses/AAL
+ */
+
+import Axios from "axios";
+
+class Setup {
+    constructor() {
+        this.checkDbButton = document.getElementById("test-db-connection");
+        this.checkDbAlert = document.getElementById("database-response");
+        this.checkDbEndpoint = document.querySelector(
+            'meta[name="test-db-endpoint"]'
+        ).content;
+
+        this.checkSmtpButton = document.getElementById("test-smtp-connection");
+        this.checkSmtpAlert = document.getElementById("smtp-response");
+        this.checkSmtpEndpoint = document.querySelector(
+            'meta[name="test-smtp-endpoint"]'
+        ).content;
+    }
+
+    handleDatabaseCheck() {
+
+        let data = {
+            host: document.querySelector('input[name="host"]').value,
+            database: document.querySelector('input[name="database"]').value,
+            username: document.querySelector('input[name="db_username"]').value,
+            password: document.querySelector('input[name="db_password"]').value,
+        }
+
+        Axios.post(this.checkDbEndpoint, data)
+            .then(response => this.handleSuccess(this.checkDbAlert))
+            .catch(e => this.handleFailure(this.checkDbAlert));
+    }
+
+    handleSmtpCheck() {
+
+        let data = {
+            driver: document.querySelector('select[name="mail_driver"]').value,
+            from_name: document.querySelector('input[name="mail_name"]').value,
+            from_address: document.querySelector('input[name="mail_address"]').value,
+            username: document.querySelector('input[name="mail_username"]').value,
+            host: document.querySelector('input[name="mail_host"]').value,
+            port: document.querySelector('input[name="mail_port"]').value,
+            encryption: document.querySelector('select[name="encryption"]').value,
+            password: document.querySelector('input[name="mail_password"]').value,
+        }
+
+        Axios.post(this.checkSmtpEndpoint, data)
+            .then(response => this.handleSuccess(this.checkSmtpAlert))
+            .catch(e => this.handleFailure(this.checkSmtpAlert));
+    }
+
+    handleSuccess(element) {
+        element.classList.remove("alert-failure");
+        element.innerText = "Success!";
+        element.classList.add("alert-success");
+    }
+
+    handleFailure(element) {
+        element.classList.remove("alert-success");
+        element.innerText = "Oops, looks like something isn't correct!";
+        element.classList.add("alert-failure");
+    }
+
+    handle() {
+        this.checkDbButton.addEventListener("click", () =>
+            this.handleDatabaseCheck()
+        );
+
+        this.checkSmtpButton.addEventListener("click", () =>
+            this.handleSmtpCheck()
+        );
+    }
+}
+
+new Setup().handle();

resources/views/setup/_account.blade.php

@@ -14,7 +14,7 @@
                     {{ ctrans('texts.first_name') }}
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="text" class="input" name="user_first_name">
+                    <input type="text" class="input" name="first_name">
                 </dd>
             </div>
             <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
@@ -22,7 +22,7 @@
                     {{ ctrans('texts.last_name') }}
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="text" class="input" name="user_last_name">
+                    <input type="text" class="input" name="last_name">
                 </dd>
             </div>
             <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
@@ -30,7 +30,7 @@
                     {{ ctrans('texts.email') }}
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="email" class="input" name="user_email">
+                    <input type="email" class="input" name="email">
                 </dd>
             </div>
             <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
@@ -38,7 +38,7 @@
                     {{ ctrans('texts.password') }}
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="password" class="input" name="user_password">
+                    <input type="password" class="input" name="password">
                 </dd>
             </div>
         </dl>

resources/views/setup/_application.blade.php

@@ -14,7 +14,7 @@
                     {{ ctrans('texts.url') }}*
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="text" class="input" name="application_url" required>
+                    <input type="text" class="input" name="url" required>
                 </dd>
             </div>
             <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
@@ -22,7 +22,7 @@
                     {{ ctrans('texts.https') }}
                 </dt>
                 <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="checkbox" class="form-checkbox mr-1" name="require_https">
+                    <input type="checkbox" class="form-checkbox mr-1" name="https">
                     <span>{{ ctrans('texts.require') }}</span>
                 </dd>
             </div>
@@ -31,7 +31,7 @@
                     {{ ctrans('texts.debug') }}
                 </dt>
                 <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="checkbox" class="form-checkbox mr-1" name="enable_debug">
+                    <input type="checkbox" class="form-checkbox mr-1" name="debug">
                     <span>{{ ctrans('texts.enable') }}</span>
                 </dd>
             </div>
@@ -40,7 +40,7 @@
                     {{ ctrans('texts.reports') }}
                 </dt>
                 <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="checkbox" class="form-checkbox mr-1" name="enable_debug">
+                    <input type="checkbox" class="form-checkbox mr-1" name="send_logs">
                     <span>{{ ctrans('texts.send_fail_logs_to_our_server') }}</span>
                 </dd>
             </div>

resources/views/setup/_database.blade.php

@@ -31,7 +31,7 @@ FLUSH PRIVILEGES;
                     {{ ctrans('texts.driver') }}
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="text" class="input border-none" name="database_driver" value="MySQL" readonly>
+                    <input type="text" class="input border-none" name="db_driver" value="MySQL" readonly>
                 </dd>
             </div>
             <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
@@ -39,7 +39,7 @@ FLUSH PRIVILEGES;
                     {{ ctrans('texts.host') }}*
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="text" class="input" name="database_host" required>
+                    <input type="text" class="input" name="host" required>
                 </dd>
             </div>
             <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
@@ -47,7 +47,7 @@ FLUSH PRIVILEGES;
                     {{ ctrans('texts.database') }}*
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="text" class="input" name="database_db" required>
+                    <input type="text" class="input" name="database" required>
                 </dd>
             </div>
             <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
@@ -55,7 +55,7 @@ FLUSH PRIVILEGES;
                     {{ ctrans('texts.username') }}*
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="text" class="input" name="database_username" required>
+                    <input type="text" class="input" name="db_username" required>
                 </dd>
             </div>
             <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
@@ -63,17 +63,17 @@ FLUSH PRIVILEGES;
                     {{ ctrans('texts.password') }}
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="password" class="input" name="database_password">
+                    <input type="password" class="input" name="db_password">
                 </dd>
             </div>
             <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
                 <dt class="text-sm leading-5 font-medium text-gray-500">
-                    <button class="button button-primary py-2 px-3 text-xs">{{ ctrans('texts.test_connection') }}</button>
+                    <button type="button" class="button button-primary py-2 px-3 text-xs" id="test-db-connection">
+                        {{ ctrans('texts.test_connection') }}
+                    </button>
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <div class="alert alert-success py-2 bg-gray-50">
-                        Success!
-                    </div>
+                    <div class="alert py-2 bg-gray-50" id="database-response"></div>
                 </dd>
             </div>
         </dl>

resources/views/setup/_mail.blade.php

@@ -14,7 +14,7 @@
                     {{ ctrans('texts.driver') }}
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <select name="smtp_driver" class="input form-select">
+                    <select name="mail_driver" class="input form-select">
                         <option value="1">SMTP</option>
                     </select>
                 </dd>
@@ -24,7 +24,7 @@
                     {{ ctrans('texts.from_name') }}
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="text" class="input" name="email_from_name">
+                    <input type="text" class="input" name="mail_name">
                 </dd>
             </div>
             <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
@@ -32,7 +32,7 @@
                     {{ ctrans('texts.from_address') }}
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="email" class="input" name="email_from_address">
+                    <input type="email" class="input" name="mail_address">
                 </dd>
             </div>
             <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
@@ -40,7 +40,7 @@
                     {{ ctrans('texts.username') }}
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="text" class="input" name="smtp_username">
+                    <input type="text" class="input" name="mail_username">
                 </dd>
             </div>
             <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
@@ -48,7 +48,7 @@
                     {{ ctrans('texts.host') }}
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="text" class="input" name="smtp_host">
+                    <input type="text" class="input" name="mail_host">
                 </dd>
             </div>
             <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
@@ -56,7 +56,7 @@
                     {{ ctrans('texts.port') }}
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="text" class="input" name="smtp_port">
+                    <input type="text" class="input" name="mail_port">
                 </dd>
             </div>
             <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
@@ -64,7 +64,7 @@
                     {{ ctrans('texts.encryption') }}
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <select name="smpt_encryption" class="input form-select">
+                    <select name="encryption" class="input form-select">
                         <option value="1">TLS</option>
                         <option value="2">SSL</option>
                     </select>
@@ -72,20 +72,20 @@
             </div>
             <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
                 <dt class="text-sm leading-5 font-medium text-gray-500">
-                    {{ ctrans('texts.encryption') }}
+                    {{ ctrans('texts.password') }}
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="password" class="input" name="smtp_password">
+                    <input type="password" class="input" name="mail_password">
                 </dd>
             </div>
             <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
                 <dt class="text-sm leading-5 font-medium text-gray-500">
-                    <button class="button button-primary py-2 px-3 text-xs">{{ ctrans('texts.test_connection') }}</button>
+                    <button type="button" class="button button-primary py-2 px-3 text-xs" id="test-smtp-connection">
+                        {{ ctrans('texts.test_connection') }}
+                    </button>
                 </dt>
                 <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <div class="alert alert-failure py-2 bg-gray-50">
-                        Oops!
-                    </div>
+                    <div class="alert py-2 bg-gray-50" id="smtp-response"></div>
                 </dd>
             </div>
         </dl>

resources/views/setup/index.blade.php

@@ -1,9 +1,14 @@
 @extends('portal.ninja2020.layout.clean')
 @section('meta_title', ctrans('texts.setup'))
 
+@push('head')
+    <meta name="test-db-endpoint" content="{{ url('/setup/check_db') }}">
+    <meta name="test-smtp-endpoint" content="{{ url('/setup/check_mail') }}">
+@endpush
+
 @section('body')
 <div class="container mx-auto mb-10">
-    <form action="#" method="post">
+    <form action="{{ url('/setup') }}" method="post">
         @csrf
 
         <div class="grid grid-cols-12 px-6">
@@ -22,13 +27,13 @@
                 <div class="flex justify-center mt-4">
                     <div class="flex flex-col">
                         <div class="mt-4">
-                            <input type="checkbox" class="form-checkbox" name="terms" required>
+                            <input type="checkbox" class="form-checkbox" name="terms_of_service" required>
                             <span>I agree to
                                 <a class="button-link" href="https://www.invoiceninja.com/self-hosting-terms-service/">{{ ctrans('texts.terms_of_service') }}</a>
                             </span>
                         </div>
                         <div class="mt-2">
-                            <input type="checkbox" class="form-checkbox" name="privacy" required>
+                            <input type="checkbox" class="form-checkbox" name="privacy_policy" required>
                             <span>I agree to
                                 <a class="button-link" href="https://www.invoiceninja.com/self-hosting-privacy-data-control/">{{ ctrans('texts.privacy_policy') }}</a>
                             </span>
@@ -41,4 +46,8 @@
         </div>
     </form>
 </div>
-@endsection
+@endsection
+
+@push('footer')
+    <script src="{{ asset('js/setup/setup.js') }}"></script>
+@endpush

routes/web.php

@@ -5,8 +5,8 @@
 
 Route::get('/', 'BaseController@flutterRoute')->middleware('guest');
 Route::get('setup', 'SetupController@index')->middleware('guest');
-Route::post('setup/check_db', 'SetupController@check_db')->middleware('guest');
-Route::post('setup/check_mail', 'SetupController@check_mail')->middleware('guest');
+Route::post('setup/check_db', 'SetupController@checkDB')->middleware('guest');
+Route::post('setup/check_mail', 'SetupController@checkMail')->middleware('guest');
 Route::post('setup', 'SetupController@doSetup')->middleware('guest');
 
 /*

webpack.mix.js

@@ -27,6 +27,10 @@ mix.js("resources/js/app.js", "public/js")
     .js(
         "resources/js/clients/payments/process.js",
         "public/js/clients/payments/process.js"
+    )
+    .js(
+        "resources/js/setup/setup.js", 
+        "public/js/setup/setup.js"
     );
 
 mix.sass("resources/sass/app.scss", "public/css")
@@ -40,4 +44,4 @@ mix.sass("resources/sass/app.scss", "public/css")
     });
 
 mix.version();
-mix.disableSuccessNotifications();
+mix.disableNotifications();