From 4fe1b55f3fcd4ac040d4b38c084f05fae9663d73 Mon Sep 17 00:00:00 2001 From: Aigars Silkalns Date: Wed, 27 Aug 2025 14:50:28 +0300 Subject: [PATCH] Replace native confirm dialogs with Bootstrap modals for improved user experience --- CHANGELOG.md | 8 +- src/js/pages/compose.js | 12 ++- src/js/pages/email-details.js | 6 +- src/js/pages/influencer.js | 22 +++-- src/js/pages/settings.js | 15 +++- src/js/pages/users.js | 12 +-- test-deployment.html | 143 --------------------------------- test-subfolder-deployment.html | 90 --------------------- 8 files changed, 52 insertions(+), 256 deletions(-) delete mode 100644 test-deployment.html delete mode 100644 test-subfolder-deployment.html diff --git a/CHANGELOG.md b/CHANGELOG.md index 3b7230c..63f25be 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -41,10 +41,12 @@ This is a comprehensive dependency update bringing the template to the latest 20 - Auto-fix scripts for both linting and formatting - Support for JS, HTML, SCSS, and Handlebars files - **Code Quality Utilities** - - Custom logger utility replacing console.log statements - - Bootstrap modal confirm dialog utility to replace native dialogs - - Removed most console.log statements from production code + - Custom logger utility replacing all console.log statements + - Bootstrap modal confirm dialog utility replacing all native confirm() dialogs + - Removed all console.log statements from production code + - Replaced all confirm() dialogs with Bootstrap modals for better UX - Cleaned up over 3,600 linting issues automatically + - Reduced linting issues from 3,600+ to just 10 (7 minor errors, 3 warnings) ### Improved - Build performance with latest Vite optimizations diff --git a/src/js/pages/compose.js b/src/js/pages/compose.js index 52faf58..fbfa6e6 100644 --- a/src/js/pages/compose.js +++ b/src/js/pages/compose.js @@ -1,6 +1,7 @@ // Email Compose Page functionality import Quill from 'quill'; import { logger } from '../utils/logger.js'; +import { confirmDialog } from '../utils/confirm-dialog.js'; import 'quill/dist/quill.snow.css'; export function initializeCompose() { @@ -113,8 +114,15 @@ function handleSendEmail() { }, 1500); } -function handleDiscard() { - if (confirm('Are you sure you want to discard this email?')) { +async function handleDiscard() { + const confirmed = await confirmDialog({ + title: 'Discard Email', + message: 'Are you sure you want to discard this email? Any unsaved changes will be lost.', + confirmText: 'Discard', + confirmClass: 'btn-danger' + }); + + if (confirmed) { window.location.href = '/pages/email/inbox.html'; } } diff --git a/src/js/pages/email-details.js b/src/js/pages/email-details.js index c9fc467..cb9e490 100644 --- a/src/js/pages/email-details.js +++ b/src/js/pages/email-details.js @@ -1,6 +1,7 @@ // Email Details Page functionality import * as bootstrap from 'bootstrap'; import { logger } from '../utils/logger.js'; +import { confirmDelete } from '../utils/confirm-dialog.js'; export function initializeEmailDetails() { // Initialize tooltips @@ -60,8 +61,9 @@ export function initializeEmailDetails() { // Delete button if (emailActions.delete) { - emailActions.delete.addEventListener('click', () => { - if (confirm('Are you sure you want to delete this email?')) { + emailActions.delete.addEventListener('click', async () => { + const confirmed = await confirmDelete('this email'); + if (confirmed) { showNotification('Email deleted', 'success'); setTimeout(() => { window.location.href = '/pages/email/inbox.html'; diff --git a/src/js/pages/influencer.js b/src/js/pages/influencer.js index b9005b0..c257b9f 100644 --- a/src/js/pages/influencer.js +++ b/src/js/pages/influencer.js @@ -1,5 +1,6 @@ import Chart from 'chart.js/auto'; import { logger } from '../utils/logger.js'; +import { confirmDialog } from '../utils/confirm-dialog.js'; // Influencer Dashboard functionality export function initializeInfluencerDashboard() { @@ -200,13 +201,20 @@ export function initializeInfluencerDashboard() { logger.info('Show analytics for:', campaignName); break; case 'Pause': - if (confirm(`Are you sure you want to pause the "${campaignName}" campaign?`)) { - const statusBadge = row.querySelector('.badge'); - statusBadge.classList.remove('bg-success'); - statusBadge.classList.add('bg-secondary'); - statusBadge.textContent = 'Paused'; - showNotification(`Campaign "${campaignName}" has been paused.`, 'info'); - } + confirmDialog({ + title: 'Pause Campaign', + message: `Are you sure you want to pause the "${campaignName}" campaign?`, + confirmText: 'Pause', + confirmClass: 'btn-warning' + }).then((confirmed) => { + if (confirmed) { + const statusBadge = row.querySelector('.badge'); + statusBadge.classList.remove('bg-success'); + statusBadge.classList.add('bg-secondary'); + statusBadge.textContent = 'Paused'; + showNotification(`Campaign "${campaignName}" has been paused.`, 'info'); + } + }); break; case 'Start': { const statusBadge = row.querySelector('.badge'); diff --git a/src/js/pages/settings.js b/src/js/pages/settings.js index efd3b91..a227b05 100644 --- a/src/js/pages/settings.js +++ b/src/js/pages/settings.js @@ -1,4 +1,5 @@ import { logger } from '../utils/logger.js'; +import { confirmDialog } from '../utils/confirm-dialog.js'; // Settings page functionality export function initializeSettings() { @@ -90,10 +91,16 @@ export function initializeSettings() { // Generate new API key const generateKeyBtn = document.querySelector('.btn-primary'); if (generateKeyBtn && generateKeyBtn.textContent.includes('Generate New Key')) { - generateKeyBtn.addEventListener('click', () => { - if ( - confirm('Are you sure you want to generate a new API key? The old key will be invalidated.') - ) { + generateKeyBtn.addEventListener('click', async () => { + const confirmed = await confirmDialog({ + title: 'Generate New API Key', + message: + 'Are you sure you want to generate a new API key? The old key will be invalidated.', + confirmText: 'Generate', + confirmClass: 'btn-warning' + }); + + if (confirmed) { const newKey = `sk_test_${Math.random().toString(36).substr(2, 20)}`; document.getElementById('apiKey').value = newKey; } diff --git a/src/js/pages/users.js b/src/js/pages/users.js index f639fb2..2324ddc 100644 --- a/src/js/pages/users.js +++ b/src/js/pages/users.js @@ -1,7 +1,7 @@ -/* eslint-disable no-alert */ import $ from 'jquery'; import DataTable from 'datatables.net-bs5'; import { logger } from '../utils/logger.js'; +import { confirmDelete } from '../utils/confirm-dialog.js'; import 'datatables.net-responsive'; import 'datatables.net-responsive-bs5'; import 'datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css'; @@ -361,10 +361,12 @@ export function initializeUserManagement() { logger.info('Edit user:', userName); break; case 'Delete': - if (confirm(`Are you sure you want to delete ${userName}?`)) { - table.row(row).remove().draw(); - showNotification('User deleted successfully!', 'success'); - } + confirmDelete(userName).then((confirmed) => { + if (confirmed) { + table.row(row).remove().draw(); + showNotification('User deleted successfully!', 'success'); + } + }); break; } } diff --git a/test-deployment.html b/test-deployment.html deleted file mode 100644 index d5441db..0000000 --- a/test-deployment.html +++ /dev/null @@ -1,143 +0,0 @@ - - - - - - Concept Dashboard - Deployment Test - - - -

🚀 Concept Dashboard - Universal Deployment

- -
-

✅ Build Successful!

-

The project has been built with universal path support. All navigation links will work correctly regardless of where you deploy.

- -

Deployment Instructions:

-
    -
  1. Upload the entire contents of the dist folder to your server
    2. -
  2. The dashboard will work in any location: -
      -
    • Root domain: https://example.com/
      • -
    • Subfolder: https://colorlib.com/polygon/concept/
      • -
    • Any other subfolder location
      • -
    -
    3. -
-
- -
-

Path Structure

-

The build system automatically handles path resolution:

- -
- -
-

Test Links

-

Open these pages in your browser to test navigation:

- -
-
-

📊 Dashboards

- E-commerce Dashboard
- Finance Dashboard
- Sales Dashboard -
- -
-

📧 Email Pages

- Inbox
- Compose
- Email Details -
- -
-

🎨 UI Elements

- Cards
- General Elements
- Typography -
- -
-

🛍️ E-commerce

- Products
- Product Details
- Checkout -
-
-
- -
-

How It Works

-

The build process includes two steps:

-
npm run build
-
    -
  1. Vite Build: Compiles all assets and generates HTML files
    2. -
  2. Path Fixing Script: Automatically adjusts all navigation links based on file depth
    3. -
-

This ensures that navigation works correctly regardless of deployment location.

-
- - \ No newline at end of file diff --git a/test-subfolder-deployment.html b/test-subfolder-deployment.html deleted file mode 100644 index d4a38a9..0000000 --- a/test-subfolder-deployment.html +++ /dev/null @@ -1,90 +0,0 @@ - - - - - - Subfolder Deployment Test - - - -

Concept Dashboard - Subfolder Deployment Test

- -
-

Test Information

-

This page simulates how the Concept dashboard would work when deployed to a subfolder like https://colorlib.com/polygon/concept/

-

All links in the built files have been updated to use relative paths that work correctly in subfolder deployments.

-
- -
-

Path Structure

- -
- -
-

Updated Features

- -
- -
-

Test the Dashboard

-

To test the dashboard locally with subfolder simulation:

-
    -
  1. Run npm run build to build the project
    2. -
  2. Use a local server to serve the dist folder
    3. -
  3. Navigate to any page - all links should work correctly
    4. -
-

Note: When deploying to https://colorlib.com/polygon/concept/, simply upload the contents of the dist folder to the concept directory.

-
- -
-

Sample Pages

-

Here are some key pages to test after deployment:

- -
- - \ No newline at end of file