Improve UI and run migrations when system updated

sangnguyenplus · sangnguyenplus · commit f990edaca79e · 2025-06-25T15:41:19.000+07:00
diff --git a/public/js/api-settings.js b/public/js/api-settings.js
diff --git a/resources/js/api-settings.js b/resources/js/api-settings.js
@@ -47,20 +47,20 @@ $(() => {
 
     // Update examples when API key changes
     $('#api-key-input').on('input', function() {
-        const apiKey = $(this).val() || 'your-api-key-here';
+        const apiKey = $(this).val() || (window.trans.api.your_api_key_here || 'your-api-key-here');
         updateExamplesWithApiKey(apiKey);
 
         // Show/hide copy button based on whether there's a value
         const copyButton = $('#copy-api-key');
-        if (apiKey && apiKey !== 'your-api-key-here') {
+        if (apiKey && apiKey !== (window.trans.api.your_api_key_here || 'your-api-key-here')) {
             copyButton.show();
         } else {
             copyButton.hide();
         }
     });
 
     // Initialize examples on page load
-    const currentApiKey = $('#api-key-input').val() || 'your-api-key-here';
+    const currentApiKey = $('#api-key-input').val() || (window.trans.api.your_api_key_here || 'your-api-key-here');
     updateExamplesWithApiKey(currentApiKey);
 
     // Handle service account file upload
@@ -80,7 +80,7 @@ $(() => {
 
             // Validate file size (max 2MB)
             if (file.size > 2 * 1024 * 1024) {
-                Botble.showError('File size must be less than 2MB.');
+                Botble.showError(window.trans.api.file_size_too_large || 'File size must be less than 2MB.');
                 return;
             }
 
@@ -92,7 +92,7 @@ $(() => {
     $('#remove-service-account-btn').on('click', function(e) {
         e.preventDefault();
 
-        if (confirm('Are you sure you want to remove the service account file?')) {
+        if (confirm(window.trans.api.confirm_remove_service_account || 'Are you sure you want to remove the service account file?')) {
             removeServiceAccountFile();
         }
     });
@@ -175,7 +175,7 @@ $(() => {
         const removeBtn = $('#remove-service-account-btn');
         const originalHtml = removeBtn.html();
 
-        removeBtn.prop('disabled', true).html('<i class="ti ti-loader"></i>');
+        removeBtn.prop('disabled', true).html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6l0 -3" /><path d="M16.25 7.75l2.15 -2.15" /><path d="M18 12l3 0" /><path d="M16.25 16.25l2.15 2.15" /><path d="M12 18l0 3" /><path d="M7.75 16.25l-2.15 2.15" /><path d="M6 12l-3 0" /><path d="M7.75 7.75l-2.15 -2.15" /></svg>');
 
         $.ajax({
             url: '/admin/settings/api/remove-service-account',
@@ -226,16 +226,16 @@ $(() => {
         if (path && filename) {
             statusDiv.html(`
                 <small class="text-success">
-                    <i class="ti ti-file-check me-1"></i>
-                    Service account file: <strong>${filename}</strong>
-                    <span class="text-muted">(Just uploaded)</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-1"><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M9 15l2 2l4 -4" /></svg>
+                    ${window.trans.api.service_account_file_label || 'Service account file:'} <strong>${filename}</strong>
+                    <span class="text-muted">${window.trans.api.just_uploaded || '(Just uploaded)'}</span>
                 </small>
             `);
         } else {
             statusDiv.html(`
                 <small class="text-warning">
-                    <i class="ti ti-file-x me-1"></i>
-                    Service account file is <strong>not uploaded</strong>. Please upload your service account JSON file.
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-1"><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M10 12l4 4m0 -4l-4 4" /></svg>
+                    ${window.trans.api.service_account_not_uploaded || 'Service account file is <strong>not uploaded</strong>. Please upload your service account JSON file.'}
                 </small>
             `);
         }
@@ -253,13 +253,13 @@ $(() => {
         const message = $('#notification-message').val().trim();
 
         if (!title) {
-            Botble.showError('Please enter a notification title.');
+            Botble.showError(window.trans.api.please_enter_notification_title || 'Please enter a notification title.');
             $('#notification-title').focus();
             return;
         }
 
         if (!message) {
-            Botble.showError('Please enter a notification message.');
+            Botble.showError(window.trans.api.please_enter_notification_message || 'Please enter a notification message.');
             $('#notification-message').focus();
             return;
         }
@@ -301,7 +301,7 @@ $(() => {
                 }
             },
             error: function(xhr) {
-                let errorMessage = 'An error occurred while sending the notification.';
+                let errorMessage = window.trans.api.notification_error_occurred || 'An error occurred while sending the notification.';
 
                 if (xhr.responseJSON && xhr.responseJSON.message) {
                     errorMessage = xhr.responseJSON.message;
@@ -339,12 +339,12 @@ $(() => {
     function generateRandomApiKey() {
         const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
         let result = '';
-        
+
         // Generate a 32-character random string
         for (let i = 0; i < 32; i++) {
             result += chars.charAt(Math.floor(Math.random() * chars.length));
         }
-        
+
         return result;
     }
 
@@ -354,16 +354,16 @@ $(() => {
      */
     function updateExamplesWithApiKey(apiKey) {
         const baseUrl = window.location.origin + '/api/v1';
-        
+
         // Update cURL example
-        const curlExample = `curl -X GET "${baseUrl}/products" \\
+        const curlExample = `curl -X GET "${baseUrl}/pages" \\
      -H "Accept: application/json" \\
      -H "X-API-KEY: ${apiKey}"`;
-        
+
         $('#curl-example').text(curlExample);
-        
+
         // Update JavaScript example
-        const jsExample = `fetch("${baseUrl}/products", {
+        const jsExample = `fetch("${baseUrl}/pages", {
     method: "GET",
     headers: {
         "Accept": "application/json",
@@ -372,7 +372,7 @@ $(() => {
 })
 .then(response => response.json())
 .then(data => console.log(data));`;
-        
+
         $('#js-example').text(jsExample);
     }
 
@@ -385,27 +385,32 @@ $(() => {
     function showNotificationResult(type, message, data = null) {
         const resultDiv = $('#notification-result');
         const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
-        const iconClass = type === 'success' ? 'ti-check-circle' : 'ti-alert-circle';
+        const iconSvg = type === 'success'
+            ? '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 12l2 2l4 -4" /></svg>'
+            : '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 8v4" /><path d="M12 16h.01" /></svg>';
 
         let content = `
             <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
-                <i class="${iconClass} me-2"></i>
+                ${iconSvg}
                 <strong>${message}</strong>
         `;
 
         if (data && type === 'success') {
+            const sentText = (window.trans.api.sent_to_devices || 'Sent to: :count devices').replace(':count', data.sent_count || 0);
+            const failedText = (window.trans.api.failed_devices || 'Failed: :count devices').replace(':count', data.failed_count || 0);
+
             content += `
                 <div class="mt-2">
                     <small>
-                        Sent to: ${data.sent_count || 0} devices<br>
-                        Failed: ${data.failed_count || 0} devices
+                        ${sentText}<br>
+                        ${failedText}
                     </small>
                 </div>
             `;
         }
 
         content += `
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="${window.trans.api.close || 'Close'}"></button>
             </div>
         `;
 
@@ -445,10 +450,15 @@ $(() => {
         // Update the notification send info text
         const infoText = $('#notification-send-info');
         if (infoText.length && stats.total > 0) {
+            const deviceText = (window.trans.api.will_send_to_devices || 'Will send to :total active devices (:android Android, :ios iOS, :customers customers)')
+                .replace(':total', stats.total)
+                .replace(':android', stats.android)
+                .replace(':ios', stats.ios)
+                .replace(':customers', stats.customers);
+
             infoText.html(`
-                <i class="ti ti-info-circle me-1"></i>
-                Will send to ${stats.total} active devices
-                (${stats.android} Android, ${stats.ios} iOS, ${stats.customers} customers)
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-1"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 9h.01" /><path d="M11 12h1v4h1" /></svg>
+                ${deviceText}
             `);
         }
     }
diff --git a/resources/lang/en/api.php b/resources/lang/en/api.php
@@ -87,4 +87,19 @@
     'fcm_step_4_2' => 'Enter the path to your service account JSON file',
     'fcm_security_note_title' => 'Security Note:',
     'fcm_security_note' => 'Keep your service account JSON file secure and never commit it to version control. Store it in a secure location on your server.',
+
+    // Additional JavaScript translations
+    'your_api_key_here' => 'your-api-key-here',
+    'file_size_too_large' => 'File size must be less than 2MB.',
+    'confirm_remove_service_account' => 'Are you sure you want to remove the service account file?',
+    'service_account_file_label' => 'Service account file:',
+    'just_uploaded' => '(Just uploaded)',
+    'service_account_not_uploaded' => 'Service account file is <strong>not uploaded</strong>. Please upload your service account JSON file.',
+    'please_enter_notification_title' => 'Please enter a notification title.',
+    'please_enter_notification_message' => 'Please enter a notification message.',
+    'notification_error_occurred' => 'An error occurred while sending the notification.',
+    'sent_to_devices' => 'Sent to: :count devices',
+    'failed_devices' => 'Failed: :count devices',
+    'will_send_to_devices' => 'Will send to :total active devices (:android Android, :ios iOS, :customers customers)',
+    'close' => 'Close',
 ];
diff --git a/resources/views/settings/partials/fcm-setup-instructions.blade.php b/resources/views/settings/partials/fcm-setup-instructions.blade.php
@@ -1,55 +1,57 @@
 <div class="mt-3">
-    <div class="card border-0 bg-light">
+    <div class="card border-0 bg-white">
         <div class="card-body">
             <h6 class="mb-3">
                 <x-core::icon name="ti ti-info-circle" class="me-2" />
                 {{ trans('packages/api::api.fcm_setup_title') }}
             </h6>
-            
+
             <div class="row">
                 <div class="col-md-6">
                     <h6 class="text-primary">{{ trans('packages/api::api.fcm_step_1_title') }}</h6>
-                    <ol class="small mb-3">
+                    <ul class="small mb-3">
                         <li>{{ trans('packages/api::api.fcm_step_1_1') }}</li>
                         <li>{{ trans('packages/api::api.fcm_step_1_2') }}</li>
                         <li>{{ trans('packages/api::api.fcm_step_1_3') }}</li>
-                    </ol>
+                    </ul>
                 </div>
-                
+
                 <div class="col-md-6">
                     <h6 class="text-primary">{{ trans('packages/api::api.fcm_step_2_title') }}</h6>
-                    <ol class="small mb-3">
+                    <ul class="small mb-3">
                         <li>{{ trans('packages/api::api.fcm_step_2_1') }}</li>
                         <li>{{ trans('packages/api::api.fcm_step_2_2') }}</li>
                         <li>{{ trans('packages/api::api.fcm_step_2_3') }}</li>
                         <li>{{ trans('packages/api::api.fcm_step_2_4') }}</li>
-                    </ol>
+                    </ul>
                 </div>
             </div>
 
             <div class="row">
                 <div class="col-md-6">
                     <h6 class="text-primary">{{ trans('packages/api::api.fcm_step_3_title') }}</h6>
-                    <ol class="small mb-3">
+                    <ul class="small mb-3">
                         <li>{{ trans('packages/api::api.fcm_step_3_1') }}</li>
                         <li>{{ trans('packages/api::api.fcm_step_3_2') }}</li>
                         <li>{{ trans('packages/api::api.fcm_step_3_3') }}</li>
-                    </ol>
+                    </ul>
                 </div>
-                
+
                 <div class="col-md-6">
                     <h6 class="text-primary">{{ trans('packages/api::api.fcm_step_4_title') }}</h6>
-                    <ol class="small mb-3">
+                    <ul class="small mb-3">
                         <li>{{ trans('packages/api::api.fcm_step_4_1') }}</li>
                         <li>{{ trans('packages/api::api.fcm_step_4_2') }}</li>
-                    </ol>
+                    </ul>
                 </div>
             </div>
 
             <div class="alert alert-info mb-0">
                 <x-core::icon name="ti ti-bulb" class="me-2" />
-                <strong>{{ trans('packages/api::api.fcm_security_note_title') }}</strong>
-                {{ trans('packages/api::api.fcm_security_note') }}
+                <p class="mb-0">
+                    <strong>{{ trans('packages/api::api.fcm_security_note_title') }}</strong>
+                    {{ trans('packages/api::api.fcm_security_note') }}
+                </p>
             </div>
         </div>
     </div>
diff --git a/resources/views/settings/partials/send-notification-form.blade.php b/resources/views/settings/partials/send-notification-form.blade.php
@@ -1,7 +1,7 @@
 <div class="mt-4 send-notification-section">
     <h6 class="mb-3">{{ trans('packages/api::api.send_custom_notification') }}</h6>
-    
-    <div class="card border-0 bg-light">
+
+    <div class="card border-0 bg-white">
         <div class="card-body">
             <div id="send-notification-form">
                 @csrf
@@ -37,7 +37,7 @@ class="form-control"
                         </div>
                     </div>
                 </div>
-                
+
                 <div class="mb-3">
                     <label for="notification-message" class="form-label">
                         {{ trans('packages/api::api.notification_message') }}
diff --git a/resources/views/settings/partials/usage-examples.blade.php b/resources/views/settings/partials/usage-examples.blade.php
@@ -4,20 +4,20 @@
 
 <div class="mt-3">
     <h6>{{ trans('packages/api::api.api_usage_examples') }}</h6>
-    
+
     <div class="mb-3 api-code-example">
         <label class="form-label">{{ trans('packages/api::api.api_usage_curl_example') }}</label>
         <div class="position-relative">
-            <pre class="bg-dark text-light p-3 rounded" style="font-size: 0.875rem;"><code id="curl-example">curl -X GET "{{ $baseUrl }}/products" \
+            <pre class="bg-dark text-light p-3 rounded" style="font-size: 0.875rem;"><code id="curl-example">curl -X GET "{{ $baseUrl }}/pages" \
      -H "Accept: application/json" \
      -H "X-API-KEY: your-api-key-here"</code></pre>
         </div>
     </div>
-    
+
     <div class="mb-3 api-code-example">
         <label class="form-label">{{ trans('packages/api::api.api_usage_javascript_example') }}</label>
         <div class="position-relative">
-            <pre class="bg-dark text-light p-3 rounded" style="font-size: 0.875rem;"><code id="js-example">fetch("{{ $baseUrl }}/products", {
+            <pre class="bg-dark text-light p-3 rounded" style="font-size: 0.875rem;"><code id="js-example">fetch("{{ $baseUrl }}/pages", {
     method: "GET",
     headers: {
         "Accept": "application/json",
diff --git a/src/Http/Controllers/ApiController.php b/src/Http/Controllers/ApiController.php
@@ -43,6 +43,20 @@ public function edit(SanctumTokenTable $sanctumTokenTable)
             'invalid_json_file' => trans('packages/api::api.invalid_json_file'),
             'file_upload_error' => trans('packages/api::api.file_upload_error'),
             'file_remove_error' => trans('packages/api::api.file_remove_error'),
+            'send_notification' => trans('packages/api::api.send_notification'),
+            'your_api_key_here' => trans('packages/api::api.your_api_key_here'),
+            'file_size_too_large' => trans('packages/api::api.file_size_too_large'),
+            'confirm_remove_service_account' => trans('packages/api::api.confirm_remove_service_account'),
+            'service_account_file_label' => trans('packages/api::api.service_account_file_label'),
+            'just_uploaded' => trans('packages/api::api.just_uploaded'),
+            'service_account_not_uploaded' => trans('packages/api::api.service_account_not_uploaded'),
+            'please_enter_notification_title' => trans('packages/api::api.please_enter_notification_title'),
+            'please_enter_notification_message' => trans('packages/api::api.please_enter_notification_message'),
+            'notification_error_occurred' => trans('packages/api::api.notification_error_occurred'),
+            'sent_to_devices' => trans('packages/api::api.sent_to_devices'),
+            'failed_devices' => trans('packages/api::api.failed_devices'),
+            'will_send_to_devices' => trans('packages/api::api.will_send_to_devices'),
+            'close' => trans('packages/api::api.close'),
         ];
 
         return view('packages/api::settings', compact('form', 'sanctumTokenTable', 'translations'));
diff --git a/src/Providers/ApiServiceProvider.php b/src/Providers/ApiServiceProvider.php
@@ -9,6 +9,7 @@
 use Botble\Api\Http\Middleware\ApiKeyMiddleware;
 use Botble\Api\Http\Middleware\ForceJsonResponseMiddleware;
 use Botble\Api\Models\PersonalAccessToken;
+use Botble\Base\Events\SystemUpdateDBMigrated;
 use Botble\Base\Facades\PanelSectionManager;
 use Botble\Base\PanelSections\PanelSectionItem;
 use Botble\Base\Supports\ServiceProvider;
@@ -105,6 +106,10 @@ public function boot(): void
                 return $permissions;
             }, 120);
         });
+
+        $this->app['events']->listen(SystemUpdateDBMigrated::class, function () {
+            $this->app['migrator']->run($this->getPath('database/migrations'));
+        });
     }
 
     protected function getPath(?string $path = null): string
