From d2a705732c511cb35d13b9b9890bdfdabcbab8d3 Mon Sep 17 00:00:00 2001
From: ardhikaxx <ardhikayanuar58@gmail.com>
Date: Sun, 14 Jun 2026 19:04:46 +0700
Subject: [PATCH] feat: add sweetalert client-side validation and standardize
 alerts

---
 resources/views/auth/login.blade.php      | 43 ++++++++++++++
 resources/views/auth/register.blade.php   | 68 +++++++++++++++++++++++
 resources/views/layouts/auth.blade.php    |  1 +
 resources/views/partials/alerts.blade.php | 11 +---
 4 files changed, 114 insertions(+), 9 deletions(-)

diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 7475e8f..c4f3c9c 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -62,4 +62,47 @@
         </div>
     </div>
 </div>
+@push('scripts')
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const form = document.querySelector('form[action="{{ url('/login') }}"]');
+    
+    if (form) {
+        form.addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            const email = form.querySelector('input[name="email"]').value.trim();
+            const password = form.querySelector('input[name="password"]').value;
+            
+            if (!email) {
+                return showError('Validasi Gagal', 'Email tidak boleh kosong.');
+            }
+            
+            // Simple email validation
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            if (!emailRegex.test(email)) {
+                return showError('Validasi Gagal', 'Format email tidak valid.');
+            }
+            
+            if (!password) {
+                return showError('Validasi Gagal', 'Password tidak boleh kosong.');
+            }
+            
+            // If all validation passes, submit the form
+            this.submit();
+        });
+    }
+    
+    function showError(title, text) {
+        Swal.fire({
+            icon: 'error',
+            title: title,
+            text: text,
+            confirmButtonColor: '#0f766e',
+            confirmButtonText: 'OK'
+        });
+    }
+});
+</script>
+@endpush
 @endsection
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 134650f..8be3ca2 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -81,4 +81,72 @@
         </div>
     </div>
 </div>
+
+@push('scripts')
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const form = document.querySelector('form[action="{{ url('/register') }}"]');
+    
+    if (form) {
+        form.addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            const name = form.querySelector('input[name="name"]').value.trim();
+            const email = form.querySelector('input[name="email"]').value.trim();
+            const phone = form.querySelector('input[name="phone"]').value.trim();
+            const password = form.querySelector('input[name="password"]').value;
+            const passwordConfirmation = form.querySelector('input[name="password_confirmation"]').value;
+            const terms = form.querySelector('#terms').checked;
+            
+            if (!name) {
+                return showError('Validasi Gagal', 'Nama lengkap tidak boleh kosong.');
+            }
+            
+            if (!email) {
+                return showError('Validasi Gagal', 'Email tidak boleh kosong.');
+            }
+            
+            // Simple email validation
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            if (!emailRegex.test(email)) {
+                return showError('Validasi Gagal', 'Format email tidak valid.');
+            }
+            
+            if (!password) {
+                return showError('Validasi Gagal', 'Password tidak boleh kosong.');
+            }
+            
+            if (password.length < 6) {
+                return showError('Validasi Gagal', 'Password minimal 6 karakter.');
+            }
+            
+            if (!passwordConfirmation) {
+                return showError('Validasi Gagal', 'Konfirmasi password tidak boleh kosong.');
+            }
+            
+            if (password !== passwordConfirmation) {
+                return showError('Validasi Gagal', 'Password dan Konfirmasi Password tidak sama.');
+            }
+            
+            if (!terms) {
+                return showError('Validasi Gagal', 'Anda harus menyetujui syarat dan ketentuan.');
+            }
+            
+            // If all validation passes, submit the form
+            this.submit();
+        });
+    }
+    
+    function showError(title, text) {
+        Swal.fire({
+            icon: 'error',
+            title: title,
+            text: text,
+            confirmButtonColor: '#0f766e',
+            confirmButtonText: 'OK'
+        });
+    }
+});
+</script>
+@endpush
 @endsection
diff --git a/resources/views/layouts/auth.blade.php b/resources/views/layouts/auth.blade.php
index c235b12..7171914 100644
--- a/resources/views/layouts/auth.blade.php
+++ b/resources/views/layouts/auth.blade.php
@@ -80,5 +80,6 @@ function initPasswordToggles() {
             });
         }
     </script>
+    @stack('scripts')
 </body>
 </html>
diff --git a/resources/views/partials/alerts.blade.php b/resources/views/partials/alerts.blade.php
index 1da347a..082ac3d 100644
--- a/resources/views/partials/alerts.blade.php
+++ b/resources/views/partials/alerts.blade.php
@@ -4,15 +4,8 @@
             icon: 'success',
             title: 'Berhasil!',
             text: @json(session('success')),
-            timer: 3000,
-            showConfirmButton: false,
-            toast: true,
-            position: 'top-end',
-            timerProgressBar: true,
-            didOpen: (toast) => {
-                toast.addEventListener('mouseenter', Swal.stopTimer)
-                toast.addEventListener('mouseleave', Swal.resumeTimer)
-            }
+            confirmButtonColor: '#0f766e',
+            confirmButtonText: 'OK'
         });
     </script>
 @endif