Fix: perbaikan alert

[pandigresik]

Pull Request: Perbaiki alert konfirmasi windows ke alert standar OpenDK

Description

Standarisasi seluruh notifikasi di aplikasi dengan mengganti native browser alert() dan confirm() dengan Bootstrap modal yang konsisten. Membuat Blade component (x-modal-alert dan x-modal-confirm) serta JavaScript utility (modal-helper.js) agar semua notifikasi memiliki tampilan seragam dan dapat dikelola dengan mudah.

Changes made:

1. New Component: resources/views/components/modal-alert.blade.php — Blade component x-modal-alert untuk menampilkan pesan notifikasi dengan dukungan tipe (success/danger/warning/info)
2. New Component: resources/views/components/modal-confirm.blade.php — Blade component x-modal-confirm untuk konfirmasi dengan callback dan data-confirm attribute
3. New Utility: public/js/modal-helper.js — JavaScript helper dengan fungsi openAlert(), openConfirm(), dan event handler untuk data-confirm attribute
4. Layout Integration: resources/views/layouts/app.blade.php dan dashboard_template.blade.php — Include komponen modal dan JS helper
5. Layout Migration: Migrasi livewireInstance.on('success'/'error') dari SweetAlert2 ke openAlert()
6. JS Migration: public/js/admin.js — Migrasi errorValidation() dari SweetAlert2 ke openAlert()
7. View Migration: ~26 file blade — Ganti native alert() dengan openAlert() (file validation, OTP/2FA errors, AJAX errors)
8. View Migration: ~8 file blade — Ganti native confirm() dengan openConfirm() atau data-confirm attribute (delete confirmation, archive messages, backup database)

Reason for change:

• Point 1: Native browser alert() dan confirm() tampil tidak konsisten antar browser dan tidak sesuai dengan tema aplikasi
• Point 2: Menggunakan Bootstrap modal memberikan tampilan yang seragam dengan komponen lain di aplikasi yang sudah menggunakan modal
• Point 3: Dengan Blade component dan JS utility terpusat, perawatan notifikasi lebih mudah dan konsisten

Impact of change:

• ✅ Konsistensi UI: Semua notifikasi menggunakan Bootstrap modal dengan tema yang sama
• ✅ User Experience: Modal Bootstrap lebih user-friendly daripada native browser dialog
• ✅ Maintainability: Perubahan notifikasi cukup di satu tempat (component/JS helper)
• ✅ Fitur: Modal alert mendukung type (success/danger/warning/info) untuk konteks yang berbeda

Related Issue

• Solusi untuk issue #1635

Steps to Reproduce

Before fix (problem):

1. Buka halaman form upload file (artikel, pengurus, dll)
2. Upload file dengan format tidak didukung
3. ❌ Muncul native browser alert('File tersebut tidak diperbolehkan.')
4. Buka halaman OTP/2FA verification
5. Tunggu hingga kode expired
6. ❌ Muncul native browser alert('Kode OTP telah kadaluarsa...')
7. Klik tombol hapus data
8. ❌ Muncul native browser confirm('Yakin ingin menghapus?')

After fix (solution):

1. Buka halaman form upload file
2. Upload file dengan format tidak didukung
3. ✅ Muncul Bootstrap modal dengan pesan peringatan (icon warning)
4. Buka halaman OTP/2FA verification
5. Tunggu hingga kode expired
6. ✅ Muncul Bootstrap modal dengan pesan informasi
7. Klik tombol hapus data
8. ✅ Muncul Bootstrap modal konfirmasi dengan tombol Batal/Ya

Checklist

• Saya sudah mengikuti aturan penulisan script
• Saya sudah mengikuti proses review pull request
• Saya sudah membuat unit test/integration test untuk memverifikasi perbaikan
• Manual testing sudah dilakukan di environment development
• Tidak ada console error atau warning
• Kode sudah di-review oleh minimal 1 orang

Technical Details

Technical Explanation

Membuat dua Blade component yang dirender di layout:

{{-- resources/views/components/modal-alert.blade.php --}}
<x-modal-alert />  {{-- Include di layout --}}

{{-- resources/views/components/modal-confirm.blade.php --}}
<x-modal-confirm />  {{-- Include di layout --}}

JS helper modal-helper.js menyediakan tiga mekanisme:

1. openAlert(message, title, type) — Fungsi global untuk menampilkan modal alert. Type (success/danger/warning/info) mengubah class pada .modal-content untuk warna yang sesuai (Bootstrap 3 modal-success, modal-danger, dll)

2. openConfirm(message, title, callback, btnYesText) — Fungsi global untuk konfirmasi dengan callback. Menggunakan variabel global confirmCallback yang dipanggil saat tombol "Ya" diklik

3. [data-confirm] attribute — Event handler delegated untuk tombol submit form atau link. Secara otomatis mencegah default action, menampilkan konfirmasi, dan mengeksekusi submit/navigasi jika dikonfirmasi

Configuration changes

Tidak ada perubahan konfigurasi

Dependencies added

Tidak ada dependencies baru (menggunakan Bootstrap 3 yang sudah terinstall)

Testing

Manual Testing

• Upload file tidak didukung di form artikel, pengurus, sinergi program, regulasi, prosedur, media sosial, slide, album, galeri, user
• OTP/2FA expired di halaman verify-login, verify-activation, verify-settings
• Resend OTP sukses/gagal di semua halaman auth
• Konfirmasi hapus data (data_sarana, komplain jawaban, log viewer, backup)
• Arsip pesan (masuk, keluar, read)
• Backup/delete database
• Run php artisan storage:link via log viewer
• Ganti SMTP
• Livewire success/error events dari layout
• Error validation response dari admin.js

Breaking Changes

None — semua native alert/confirm diganti dengan Bootstrap modal yang memiliki perilaku serupa (modal alert bersifat blocking dengan tombol OK, modal confirm dengan Batal/Ya)

Migration Guide

Not required — perubahan hanya pada frontend, tidak ada perubahan database atau API

References

• Issue #1635
• Bootstrap 3 Modal

[github-actions]

🔄 AI PR Review sedang antri di server...

Proses review akan segera dimulai di background — hasil akan muncul sebagai komentar setelah selesai.
Powered by CrewAI · PR #1639

[analisopendesa]

1. perlu ada penyesuaian pada bagian Pesan kadaluarsa karena tidak sempat tampil di halaman OTP/2FA karena openAlert(...) langsung diikuti redirect (window.location.href) pada blok yang sama (resources/views/auth/...verify-*.blade.php, contoh: baris 192-195/240-241).

sebelumnya kita menggunakan alert() blocking, sekarang modal non-blocking.

kalo solusi dari AI saya baca bisa dibuat seperti ini :

Tambahkan callback onClose di openAlert, lalu pindahkan redirect ke callback itu.

// public/js/modal-helper.js
function openAlert(message, title, type, onClose) {
    var modal = $('#modal-alert');
    modal.find('.modal-title').text(title || 'Pesan');
    modal.find('.modal-body').text(message || ''); // lihat poin 3
    modal.find('.modal-content').removeClass('modal-danger modal-success modal-warning modal-info');

    if (type) {
        modal.find('.modal-content').addClass('modal-' + type);
    }

    modal.off('hidden.bs.modal.alertCallback');
    if (typeof onClose === 'function') {
        modal.one('hidden.bs.modal.alertCallback', onClose);
    }

    modal.modal('show');
}

Contoh pakai di file OTP/2FA (semua kasus kadaluarsa):

openAlert('Kode OTP telah kadaluarsa. Silakan minta kode baru.', 'Info', 'warning', function () {
    window.location.href = '{{ route('otp2fa.index') }}';
});

2. Bypass validasi form pada elemen data-confirm karena callback menjalankan form[0].submit() (public/js/modal-helper.js:40), sehingga submit event/validator (termasuk JsValidator di SMTP form) bisa terlewati.

solusi yang bisa diterapkan :
Ganti form[0].submit() karena itu melewati handler validasi.
// public/js/modal-helper.js (di callback openConfirm untuk data-confirm)
if (form.length) {
if (form[0].requestSubmit) {
form[0].requestSubmit(btn[0]); // mempertahankan validasi native + submit event
} else {
form.trigger('submit'); // fallback tanpa bypass event validator
}
} else if (href) {
window.location.href = href;
}

3. Risiko XSS karena isi modal di-render pakai .html(message) (public/js/modal-helper.js:6,17), padahal sebelumnya alert() menampilkan plain text.

Solusi yang bisa diterapkan :
Ganti .html(message) jadi .text(message) di alert & confirm.
// sebelum
modal.find('.modal-body').html(message || '');

// sesudah
modal.find('.modal-body').text(message || '');

[pandigresik]

simplescreenrecorder-2026-07-15_16.34.56.mp4