/home/ejrndhmu/tokobiolink.com/user/pages/settings.php
<!-- Settings Page -->
<div class="mb-6">
<h2 class="text-2xl font-bold text-gray-800 mb-4">Pengaturan Akun</h2>
<p class="text-gray-600 mb-6">Kelola profil dan keamanan akun Anda.</p>
</div>
<!-- Profile Settings -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
<div class="border-b border-gray-200 p-6">
<div class="flex items-center">
<div class="bg-blue-primary w-12 h-12 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-user text-white text-xl"></i>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800">Informasi Profil</h3>
<p class="text-gray-600 text-sm">Update informasi dasar akun Anda</p>
</div>
</div>
</div>
<div class="p-6">
<form method="POST" action="" class="space-y-6">
<input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
<input type="hidden" name="action" value="update_profile">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="full_name" class="block text-sm font-medium text-gray-700 mb-2">
Nama Lengkap
</label>
<input type="text"
id="full_name"
name="full_name"
value="<?php echo htmlspecialchars($full_name); ?>"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent transition duration-200"
required>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">
Email
</label>
<input type="email"
id="email"
name="email"
value="<?php echo htmlspecialchars($email); ?>"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent transition duration-200"
required>
</div>
</div>
<div>
<label for="username" class="block text-sm font-medium text-gray-700 mb-2">
Username
</label>
<input type="text"
id="username"
value="<?php echo htmlspecialchars($username); ?>"
class="w-full px-4 py-3 border border-gray-300 rounded-lg bg-gray-50 text-gray-500"
disabled>
<p class="text-sm text-gray-500 mt-1">
<i class="fas fa-info-circle mr-1"></i>
Username tidak dapat diubah
</p>
</div>
<div class="flex justify-end">
<button type="submit"
class="bg-blue-primary hover:bg-blue-dark text-white px-6 py-3 rounded-lg transition duration-200 font-medium">
<i class="fas fa-save mr-2"></i>
Simpan Perubahan
</button>
</div>
</form>
</div>
</div>
<!-- Password Settings -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
<div class="border-b border-gray-200 p-6">
<div class="flex items-center">
<div class="bg-green-600 w-12 h-12 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-lock text-white text-xl"></i>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800">Keamanan Password</h3>
<p class="text-gray-600 text-sm">Ubah password untuk menjaga keamanan akun</p>
</div>
</div>
</div>
<div class="p-6">
<form method="POST" action="" class="space-y-6">
<input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
<input type="hidden" name="action" value="change_password">
<div>
<label for="current_password" class="block text-sm font-medium text-gray-700 mb-2">
Password Saat Ini
</label>
<input type="password"
id="current_password"
name="current_password"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent transition duration-200"
required>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="new_password" class="block text-sm font-medium text-gray-700 mb-2">
Password Baru
</label>
<input type="password"
id="new_password"
name="new_password"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent transition duration-200"
required>
</div>
<div>
<label for="confirm_password" class="block text-sm font-medium text-gray-700 mb-2">
Konfirmasi Password Baru
</label>
<input type="password"
id="confirm_password"
name="confirm_password"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent transition duration-200"
required>
</div>
</div>
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
<h4 class="font-medium text-yellow-800 mb-2">
<i class="fas fa-shield-alt mr-2"></i>
Tips Keamanan Password
</h4>
<ul class="text-sm text-yellow-700 space-y-1">
<li>• Gunakan minimal 8 karakter</li>
<li>• Kombinasikan huruf besar, kecil, angka, dan simbol</li>
<li>• Jangan gunakan informasi pribadi yang mudah ditebak</li>
<li>• Gunakan password yang berbeda untuk setiap akun</li>
</ul>
</div>
<div class="flex justify-end">
<button type="submit"
class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg transition duration-200 font-medium">
<i class="fas fa-key mr-2"></i>
Ubah Password
</button>
</div>
</form>
</div>
</div>
<!-- Account Statistics -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
<div class="border-b border-gray-200 p-6">
<div class="flex items-center">
<div class="bg-purple-600 w-12 h-12 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-chart-bar text-white text-xl"></i>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800">Statistik Akun</h3>
<p class="text-gray-600 text-sm">Informasi aktivitas dan status akun Anda</p>
</div>
</div>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-blue-50 rounded-lg p-4 border border-blue-200">
<div class="flex items-center mb-2">
<i class="fas fa-calendar-alt text-blue-primary mr-2"></i>
<span class="font-medium text-gray-800">Bergabung Sejak</span>
</div>
<p class="text-lg font-semibold text-blue-primary">
<?php echo formatDate($created_at); ?>
</p>
</div>
<div class="bg-green-50 rounded-lg p-4 border border-green-200">
<div class="flex items-center mb-2">
<i class="fas fa-box text-green-600 mr-2"></i>
<span class="font-medium text-gray-800">Total Produk</span>
</div>
<p class="text-lg font-semibold text-green-600">
<?php echo count(getUserProductsByUser($user_id)); ?>
</p>
</div>
<div class="bg-orange-50 rounded-lg p-4 border border-orange-200">
<div class="flex items-center mb-2">
<i class="fas fa-user-check text-orange-600 mr-2"></i>
<span class="font-medium text-gray-800">Status Akun</span>
</div>
<p class="text-lg font-semibold text-orange-600">
<?php echo $status == 'active' ? 'Aktif' : 'Tidak Aktif'; ?>
</p>
</div>
</div>
</div>
</div>
<!-- Security Tips -->
<div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg p-6 text-white">
<div class="flex items-start">
<div class="bg-white bg-opacity-20 w-12 h-12 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
<i class="fas fa-shield-alt text-white text-xl"></i>
</div>
<div>
<h4 class="text-lg font-semibold mb-3">Tips Keamanan Akun</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
<div>
<h5 class="font-medium mb-2 text-blue-100">Praktik Terbaik:</h5>
<ul class="space-y-1 text-blue-100">
<li class="flex items-start">
<i class="fas fa-check mr-2 mt-0.5 flex-shrink-0"></i>
Selalu logout setelah selesai menggunakan
</li>
<li class="flex items-start">
<i class="fas fa-check mr-2 mt-0.5 flex-shrink-0"></i>
Jangan bagikan informasi login Anda
</li>
<li class="flex items-start">
<i class="fas fa-check mr-2 mt-0.5 flex-shrink-0"></i>
Update password secara berkala
</li>
</ul>
</div>
<div>
<h5 class="font-medium mb-2 text-blue-100">Hindari:</h5>
<ul class="space-y-1 text-blue-100">
<li class="flex items-start">
<i class="fas fa-times mr-2 mt-0.5 flex-shrink-0"></i>
Login dari komputer umum
</li>
<li class="flex items-start">
<i class="fas fa-times mr-2 mt-0.5 flex-shrink-0"></i>
Menggunakan password yang sama di tempat lain
</li>
<li class="flex items-start">
<i class="fas fa-times mr-2 mt-0.5 flex-shrink-0"></i>
Mengabaikan notifikasi keamanan
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
// Password confirmation validation
document.getElementById('confirm_password').addEventListener('input', function() {
const newPassword = document.getElementById('new_password').value;
const confirmPassword = this.value;
if (newPassword !== confirmPassword) {
this.setCustomValidity('Password tidak cocok');
} else {
this.setCustomValidity('');
}
});
// Password strength indicator
document.getElementById('new_password').addEventListener('input', function() {
const password = this.value;
let strength = 0;
if (password.length >= 8) strength++;
if (/[a-z]/.test(password)) strength++;
if (/[A-Z]/.test(password)) strength++;
if (/[0-9]/.test(password)) strength++;
if (/[^A-Za-z0-9]/.test(password)) strength++;
// You can add visual strength indicator here if needed
});
</script>