-
User List
-
-
+
+
User Management
+
+
+
+
+
+
User List
+
+
+
+
+
+
+
-
+
-
-
-
+
Title
+
Message
+
@@ -299,6 +448,7 @@ button:focus {
// DOM Elements
const form = document.getElementById('userForm');
const submitButton = document.getElementById('submitButton');
+ const submitText = document.getElementById('submitText');
const cancelEdit = document.getElementById('cancelEdit');
const userList = document.getElementById('userList');
const refreshButton = document.getElementById('refreshUsers');
@@ -308,8 +458,18 @@ button:focus {
// Form submission
form.addEventListener('submit', async (e) => {
e.preventDefault();
- const name = document.getElementById('name').value;
- const email = document.getElementById('email').value;
+
+ const name = document.getElementById('name').value.trim();
+ const email = document.getElementById('email').value.trim();
+
+ if (!name || !email) {
+ showCustomAlert('⚠️ Validation Error', 'Please fill in all fields');
+ return;
+ }
+
+ // Show loading state
+ submitButton.disabled = true;
+ submitText.innerHTML = '
Processing...';
const userData = {
name,
@@ -327,13 +487,17 @@ button:focus {
// Create new user
userData.createdAt = serverTimestamp();
const docRef = await addDoc(usersCollection, userData);
- showCustomAlert('✅ Success!', `User created with ID: ${docRef.id}`);
+ showCustomAlert('🎉 User Created!', `New user added successfully!`);
}
form.reset();
resetFormState();
} catch (error) {
- showCustomAlert('⚠ Error', 'Operation failed');
+ showCustomAlert('⚠️ Error', 'Operation failed. Please try again.');
console.error('Firestore error:', error);
+ } finally {
+ // Reset button state
+ submitButton.disabled = false;
+ submitText.textContent = isEditing ? 'Update User' : 'Add User';
}
});
@@ -347,7 +511,7 @@ button:focus {
function resetFormState() {
isEditing = false;
currentEditId = null;
- submitButton.textContent = 'Add User';
+ submitText.textContent = 'Add User';
cancelEdit.style.display = 'none';
document.getElementById('userId').value = '';
}
@@ -357,50 +521,76 @@ button:focus {
userList.innerHTML = '';
if (users.empty) {
- userList.innerHTML = '
No users found
';
+ userList.innerHTML = `
+
+
+
No Users Found
+
Add your first user using the form above
+
+ `;
return;
}
users.forEach((doc) => {
const user = doc.data();
+ const createdAt = user.createdAt?.toDate() || new Date();
+ const updatedAt = user.updatedAt?.toDate() || new Date();
+
const userCard = document.createElement('div');
userCard.className = 'user-card';
userCard.innerHTML = `
-
-
${user.name}
-
${user.email}
-
ID: ${doc.id}
-
+
${user.name}
+
${user.email}
+
+ ID: ${doc.id}
+
+
+
+ Created: ${createdAt.toLocaleDateString()}
+
+
+
+ Updated: ${updatedAt.toLocaleDateString()}
+
-
-
+
+
`;
userList.appendChild(userCard);
});
// Add event listeners
- document.querySelectorAll('.user-actions .edit').forEach(button => {
- button.addEventListener('click', (e) => editUser(e.target.dataset.id));
+ document.querySelectorAll('.edit').forEach(button => {
+ button.addEventListener('click', (e) => editUser(e.currentTarget.dataset.id));
});
- document.querySelectorAll('.user-actions .delete').forEach(button => {
- button.addEventListener('click', (e) => deleteUser(e.target.dataset.id));
+ document.querySelectorAll('.delete').forEach(button => {
+ button.addEventListener('click', (e) => deleteUser(e.currentTarget.dataset.id));
});
}
// Load users
async function loadUsers() {
try {
+ refreshButton.innerHTML = '
Loading...';
const querySnapshot = await getDocs(usersCollection);
displayUsers(querySnapshot);
} catch (error) {
- showCustomAlert('⚠ Error', 'Failed to load users');
+ showCustomAlert('⚠️ Error', 'Failed to load users');
console.error('Load users error:', error);
+ } finally {
+ refreshButton.innerHTML = '
Refresh';
}
}
- // Edit user - Fixed version
+ // Edit user
async function editUser(id) {
try {
const userRef = doc(db, "users", id);
@@ -414,26 +604,41 @@ button:focus {
isEditing = true;
currentEditId = id;
- submitButton.textContent = 'Update User';
+ submitText.textContent = 'Update User';
cancelEdit.style.display = 'inline-block';
+
+ // Scroll to form
+ form.scrollIntoView({ behavior: 'smooth' });
} else {
- showCustomAlert('⚠ Error', 'User not found');
+ showCustomAlert('⚠️ Error', 'User not found');
}
} catch (error) {
- showCustomAlert('⚠ Error', 'Failed to load user data');
+ showCustomAlert('⚠️ Error', 'Failed to load user data');
console.error('Edit user error:', error);
}
}
// Delete user
async function deleteUser(id) {
- if (!confirm('Are you sure you want to delete this user?')) return;
-
try {
- await deleteDoc(doc(db, "users", id));
- showCustomAlert('✅ Success!', 'User deleted successfully');
+ const userRef = doc(db, "users", id);
+ const userSnap = await getDoc(userRef);
+
+ if (!userSnap.exists()) {
+ showCustomAlert('⚠️ Error', 'User not found');
+ return;
+ }
+
+ const user = userSnap.data();
+
+ if (!confirm(`Are you sure you want to delete ${user.name}? This action cannot be undone.`)) {
+ return;
+ }
+
+ await deleteDoc(userRef);
+ showCustomAlert('✅ Deleted!', 'User has been removed successfully.');
} catch (error) {
- showCustomAlert('⚠ Error', 'Could not delete user');
+ showCustomAlert('⚠️ Error', 'Could not delete user');
console.error('Delete error:', error);
}
}