优化 安装 environment 前端交互

beike/Installer/Views/environment-wizard.blade.php

@@ -10,20 +10,29 @@
 @endsection
 
 @section('content')
-@php
+  @php
     $entry_key = 'installer::installer_messages.environment.';
-@endphp
+  @endphp
   <div class="install-4">
     <h3 class="mb-5">{{ __('installer::installer_messages.environment.title') }}</h3>
 
     <form method="post" action="{{ route('installer.environment.save') }}" novalidate class="needs-validation">
       <input type="hidden" name="_token" value="{{ csrf_token() }}">
 
-      <div class="row gx-4 gy-3">
+      <div class="row gx-4 gy-3 mb-5 database-link-wrap">
         <div class="col-12">
-          <h5>{{ __('installer::installer_messages.environment.database_link') }}</h5>
+          <div class="d-flex align-items-center title-status">
+            <h5 class="mb-0">{{ __('installer::installer_messages.environment.database_link') }}</h5>
+            <div class="d-none ms-3 database-loading">
+              <div class="spinner-border spinner-border-sm text-muted"></div>
+              <span class="text-muted">检测数据库参数...</span>
+            </div>
+            <div class="text-success d-flex align-items-center ms-3 d-none"><i
+                class="bi bi-check-lg me-2 fs-4 lh-1"></i>数据库连接成功</div>
+          </div>
           <hr class="mb-0">
         </div>
+
         <div class="col-sm-6">
           <label class="form-label">
             {{ trans($entry_key . 'db_connection_label') }}
@@ -39,18 +48,19 @@
             {{ trans($entry_key . 'db_host_label') }}
           </label>
           <input class="form-control {{ $errors->has('database_hostname') ? 'is-invalid' : '' }}" name="database_hostname"
-            value="{{ old('database_hostname', '127.0.0.1') }}" required placeholder="{{ trans($entry_key . 'db_host_placeholder') }}">
+            value="{{ old('database_hostname', '127.0.0.1') }}" required
+            placeholder="{{ trans($entry_key . 'db_host_placeholder') }}">
           <span class="invalid-feedback"
             role="alert">{{ $errors->has('database_hostname') ? $errors->first('database_hostname') : __('common.error_required', ['name' => trans($entry_key . 'db_host_label')]) }}</span>
         </div>
 
-
         <div class="col-sm-6">
           <label class="form-label">
             {{ trans($entry_key . 'db_port_label') }}
           </label>
           <input class="form-control {{ $errors->has('database_port') ? 'is-invalid' : '' }}" name="database_port"
-            value="{{ old('database_port', '3306') }}" required placeholder="{{ trans($entry_key . 'db_host_placeholder') }}">
+            value="{{ old('database_port', '3306') }}" required
+            placeholder="{{ trans($entry_key . 'db_host_placeholder') }}">
           <span class="invalid-feedback"
             role="alert">{{ $errors->has('database_port') ? $errors->first('database_port') : __('common.error_required', ['name' => trans($entry_key . 'db_port_label')]) }}</span>
         </div>
@@ -60,7 +70,8 @@
             {{ trans($entry_key . 'db_name_label') }}
           </label>
           <input class="form-control {{ $errors->has('database_name') ? 'is-invalid' : '' }}" name="database_name"
-            value="{{ old('database_name', '') }}" required placeholder="{{ trans($entry_key . 'db_name_placeholder') }}">
+            value="{{ old('database_name', '') }}" required
+            placeholder="{{ trans($entry_key . 'db_name_placeholder') }}">
           <span class="invalid-feedback"
             role="alert">{{ $errors->has('database_name') ? $errors->first('database_name') : __('common.error_required', ['name' => trans($entry_key . 'db_name_label')]) }}</span>
         </div>
@@ -69,8 +80,9 @@
           <label class="form-label">
             {{ trans($entry_key . 'db_username_label') }}
           </label>
-          <input class="form-control {{ $errors->has('database_username') ? 'is-invalid' : '' }}" name="database_username"
+          <input class="form-control {{ $errors->has('database_username') ? 'is-invalid' : '' }}"
-            value="{{ old('database_username', 'root') }}" required placeholder="{{ trans($entry_key . 'db_username_placeholder') }}">
+            name="database_username" value="{{ old('database_username', 'root') }}" required
+            placeholder="{{ trans($entry_key . 'db_username_placeholder') }}">
           <span class="invalid-feedback"
             role="alert">{{ $errors->has('database_username') ? $errors->first('database_username') : __('common.error_required', ['name' => trans($entry_key . 'db_username_label')]) }}</span>
         </div>
@@ -79,39 +91,41 @@
           <label class="form-label">
             {{ trans($entry_key . 'db_password_label') }}
           </label>
-          <input class="form-control {{ $errors->has('database_password') ? 'is-invalid' : '' }}" name="database_password"
+          <input class="form-control {{ $errors->has('database_password') ? 'is-invalid' : '' }}"
-            value="{{ old('database_password', '') }}" placeholder="{{ trans($entry_key . 'db_password_placeholder') }}">
+            name="database_password" value="{{ old('database_password', '') }}"
+            placeholder="{{ trans($entry_key . 'db_password_placeholder') }}">
           <span class="invalid-feedback"
             role="alert">{{ $errors->has('database_password') ? $errors->first('database_password') : __('common.error_required', ['name' => trans($entry_key . 'db_password_label')]) }}</span>
         </div>
 
-        <div class="col-12 mt-5">
+      </div>
+
+      <div class="row gx-4 gy-3 admin-data-wrap d-none">
+        <div class="col-12">
           <h5>{{ __('installer::installer_messages.environment.admin_info') }}</h5>
           <hr class="mb-0">
         </div>
-
         <div class="col-sm-6">
           <label class="form-label">
             {{ trans($entry_key . 'admin_email') }}
           </label>
           <input class="form-control {{ $errors->has('admin_email') ? 'is-invalid' : '' }}" name="admin_email"
-            value="{{ old('admin_email', '') }}" required placeholder="{{ trans($entry_key . 'admin_email') }}">
+            value="{{ old('admin_email', 'admin') }}" required placeholder="{{ trans($entry_key . 'admin_email') }}">
           <span class="invalid-feedback"
             role="alert">{{ $errors->has('admin_email') ? $errors->first('admin_email') : __('common.error_required', ['name' => trans($entry_key . 'admin_email')]) }}</span>
         </div>
 
-
         <div class="col-sm-6">
           <label class="form-label">
             {{ trans($entry_key . 'admin_password') }}
           </label>
-          <input class="form-control {{ $errors->has('admin_password') ? 'is-invalid' : '' }}" type="password" name="admin_password" name="admin_password"
+          <input class="form-control {{ $errors->has('admin_password') ? 'is-invalid' : '' }}" name="admin_password"
-            value="{{ old('admin_password', '') }}" required placeholder="{{ trans($entry_key . 'admin_password') }}">
+            name="admin_password" value="{{ old('admin_password', '') }}" required
+            placeholder="{{ trans($entry_key . 'admin_password') }}">
           <span class="invalid-feedback"
             role="alert">{{ $errors->has('admin_password') ? $errors->first('admin_password') : __('common.error_required', ['name' => trans($entry_key . 'admin_password')]) }}</span>
         </div>
 
-
         <div class="col-sm-12 my-5">
           <div class="d-flex justify-content-end">
             <button class="btn btn-primary d-flex align-items-center" type="submit">
@@ -120,9 +134,6 @@
             </button>
           </div>
         </div>
-
-
-
       </div>
     </form>
   </div>
@@ -130,25 +141,93 @@
 
 @section('scripts')
   <script type="text/javascript">
-  // Example starter JavaScript for disabling form submissions if there are invalid fields
+    $(function() {
-  $(function () {
+      $('input[name="admin_password"]').val(randomString(16));
-    var forms = document.querySelectorAll(".needs-validation");
 
-    // Loop over them and prevent submission
+      $('.database-link-wrap input').on('keyup', function() {
-    Array.prototype.slice.call(forms).forEach(function (form) {
+        if (isDatabaseInputVal()) {
-      form.addEventListener(
+          debounce(getDatabaseStatus, 500)
-        "submit",
+        }
-        function (event) {
+      })
-          if (!form.checkValidity()) {
+    })
-            event.preventDefault();
+
-            event.stopPropagation();
+    // Example starter JavaScript for disabling form submissions if there are invalid fields
+    $(function() {
+      var forms = document.querySelectorAll(".needs-validation");
+
+      // Loop over them and prevent submission
+      Array.prototype.slice.call(forms).forEach(function(form) {
+        form.addEventListener(
+          "submit",
+          function(event) {
+            if (!form.checkValidity()) {
+              event.preventDefault();
+              event.stopPropagation();
+            }
+
+            form.classList.add("was-validated");
+          },
+          false
+        );
+      });
+    });
+
+    function randomString(length) {
+      let str = '';
+      for (; str.length < length; str += Math.random().toString(36).substr(2));
+      return str.substr(0, length);
+    }
+
+    function isDatabaseInputVal() {
+      let isDate = true;
+      $('.database-link-wrap input').each((index, el) => {
+        if ($(el).val() == '') {
+          isDate = false;
+        }
+      })
+
+      return isDate
+    }
+
+    let _debounceTimeout = null;
+
+    function debounce(fn, delay = 500) {
+      clearTimeout(_debounceTimeout);
+      _debounceTimeout = setTimeout(() => {
+        fn();
+      }, delay);
+    }
+
+    function getDatabaseStatus() {
+      const self = this;
+      $('.database-link-wrap input').removeClass('is-invalid')
+
+      $.ajax({
+        url: 'environment/validate_db',
+        type: 'POST',
+        data: $('form :input[name!="admin_email"][name!="admin_password"]').serialize(),
+        beforeSend: function () {$('.database-loading').removeClass('d-none')},
+        complete: function() {
+          $('.database-loading').addClass('d-none');
+        },
+        success: function(json) {
+          if (json.status == 'fail') {
+            var data = Object.keys(json.data);
+
+            data.forEach((e)=> {
+              $('.database-link-wrap input[name="' + e + '"]').addClass('is-invalid').next('.invalid-feedback').text(json.data[e])
+            })
+
+            $('.admin-data-wrap').addClass('d-none')
           }
 
-          form.classList.add("was-validated");
+          if (json.status == 'success') {
-        },
+            $('.database-link-wrap input').addClass('is-valid')
-        false
+            $('.title-status .text-success').removeClass('d-none')
-      );
+            $('.admin-data-wrap').removeClass('d-none')
-    });
+          }
-  });
+        }
+      });
+    }
   </script>
 @endsection