Update templates/change_password.html

templates/change_password.html

@@ -21,40 +21,11 @@
         padding: 2rem;
     }
     .password-header { text-align: center; margin-bottom: 2rem; }
-    .password-icon {
-        width: 70px;
-        height: 70px;
-        background: linear-gradient(135deg, #f59e0b, #d97706);
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 0 auto 1rem;
-    }
+    .password-icon { width: 70px; height: 70px; background: linear-gradient(135deg, #f59e0b, #d97706); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
     .password-icon i { font-size: 2rem; color: white; }
-    .btn-change {
-        width: 100%;
-        padding: 0.875rem;
-        background: linear-gradient(135deg, #3b82f6, #2563eb);
-        border: none;
-        border-radius: 0.75rem;
-        color: white;
-        font-weight: 600;
-        cursor: pointer;
-        margin-bottom: 1rem;
-    }
-    .btn-back {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-        background: #334155;
-        color: white;
-        padding: 0.75rem 1.5rem;
-        border-radius: 0.75rem;
-        text-decoration: none;
-        width: 100%;
-        justify-content: center;
-    }
+    .btn-change { width: 100%; padding: 0.875rem; background: linear-gradient(135deg, #3b82f6, #2563eb); border: none; border-radius: 0.75rem; color: white; font-weight: 600; cursor: pointer; margin-bottom: 1rem; }
+    .btn-change:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -5px #3b82f6; }
+    .btn-back { display: inline-flex; align-items: center; gap: 0.5rem; background: #334155; color: white; padding: 0.75rem 1.5rem; border-radius: 0.75rem; text-decoration: none; width: 100%; justify-content: center; }
 </style>
 {% endblock %}
 
@@ -67,7 +38,7 @@
             <p>Masukkan password lama dan password baru Anda</p>
         </div>
 
-        <form onsubmit="changePassword(event)">
+        <form id="changePasswordForm">
             <div class="form-group"><label>Password Lama</label><input type="password" id="oldPassword" placeholder="Masukkan password lama" required></div>
             <div class="form-group"><label>Password Baru</label><input type="password" id="newPassword" placeholder="Minimal 6 karakter" required></div>
             <div class="form-group"><label>Konfirmasi Password Baru</label><input type="password" id="confirmPassword" placeholder="Ulangi password baru" required></div>
@@ -76,5 +47,43 @@
         </form>
     </div>
 </div>
-<script src="{{ url_for('static', filename='js/auth.js') }}"></script>
+
+<script>
+    document.getElementById('changePasswordForm').addEventListener('submit', async function(e) {
+        e.preventDefault();
+        
+        const oldPassword = document.getElementById('oldPassword').value;
+        const newPassword = document.getElementById('newPassword').value;
+        const confirmPassword = document.getElementById('confirmPassword').value;
+        
+        if (newPassword !== confirmPassword) { alert('Password baru tidak cocok!'); return; }
+        if (newPassword.length < 6) { alert('Password minimal 6 karakter'); return; }
+        
+        const btn = e.target.querySelector('button');
+        btn.disabled = true;
+        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memproses...';
+        
+        try {
+            const response = await fetch('/api/auth/change-password', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ old_password: oldPassword, new_password: newPassword })
+            });
+            const result = await response.json();
+            
+            if (result.success) {
+                alert('Password berhasil diubah!');
+                window.location.href = '/profile';
+            } else {
+                alert('Error: ' + (result.error || 'Gagal mengubah password'));
+                btn.disabled = false;
+                btn.innerHTML = '<i class="fas fa-save"></i> Simpan Password';
+            }
+        } catch (error) {
+            alert('Terjadi kesalahan: ' + error.message);
+            btn.disabled = false;
+            btn.innerHTML = '<i class="fas fa-save"></i> Simpan Password';
+        }
+    });
+</script>
 {% endblock %}