added settings page with ability to update password, delete user and CRUD and share abilities for associated children
This commit is contained in:
Brian Bjarke Jensen
@@ -0,0 +1,845 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Settings - Baby Monitor</title>
|
||||
<link rel="stylesheet" href="/menu.css" />
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
padding: 40px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 40px;
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.form-group input:disabled {
|
||||
background-color: #f5f5f5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 0.2s,
|
||||
box-shadow 0.2s;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
background: #6c757d;
|
||||
}
|
||||
|
||||
.button.secondary:hover {
|
||||
box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
|
||||
}
|
||||
|
||||
.button.success {
|
||||
background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
|
||||
}
|
||||
|
||||
.button.success:hover {
|
||||
box-shadow: 0 4px 12px rgba(86, 171, 47, 0.4);
|
||||
}
|
||||
|
||||
.children-list {
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.child-card {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.child-card h3 {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.child-info {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.child-info p {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.child-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 12px 20px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quick-action {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
background: white;
|
||||
border: 2px solid #667eea;
|
||||
color: #667eea;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.quick-action:hover {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>⚙️ Settings</h1>
|
||||
<p class="subtitle">Manage your account and children</p>
|
||||
|
||||
<div id="alert" class="hidden"></div>
|
||||
|
||||
<div class="section">
|
||||
<h2>👤 Account Information</h2>
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>🔑 Change Password</h2>
|
||||
<form id="userForm">
|
||||
<div class="form-group">
|
||||
<label for="currentPassword">Current Password</label>
|
||||
<input type="password" id="currentPassword" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="newPassword">New Password</label>
|
||||
<input type="password" id="newPassword" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="confirmPassword">Confirm New Password</label>
|
||||
<input type="password" id="confirmPassword" />
|
||||
</div>
|
||||
<button type="submit" class="button" id="saveUserBtn">
|
||||
💾 Save Changes
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 40px;
|
||||
padding-top: 30px;
|
||||
border-top: 2px solid #dc3545;
|
||||
"
|
||||
>
|
||||
<h3 style="color: #dc3545; margin-bottom: 15px">⚠️ Danger Zone</h3>
|
||||
<p style="color: #666; margin-bottom: 15px; font-size: 14px">
|
||||
Deleting your account is permanent and cannot be undone. This will:
|
||||
</p>
|
||||
<ul
|
||||
style="
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 20px;
|
||||
font-size: 14px;
|
||||
"
|
||||
>
|
||||
<li>Delete your account permanently</li>
|
||||
<li>Delete all children that have no other parents</li>
|
||||
<li>
|
||||
Delete all logs (feedings, diaper changes, sleep) for orphaned
|
||||
children
|
||||
</li>
|
||||
<li>
|
||||
Remove you as a parent from shared children (they will remain for
|
||||
other parents)
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
class="button"
|
||||
style="
|
||||
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
|
||||
"
|
||||
onclick="confirmDeleteAccount()"
|
||||
>
|
||||
🗑️ Delete Account
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>👶 Your Children</h2>
|
||||
|
||||
<button
|
||||
class="quick-action"
|
||||
onclick="window.location.href='/add-child.html'"
|
||||
>
|
||||
➕ Add New Child
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="quick-action"
|
||||
onclick="showRedeemCodeModal()"
|
||||
style="border-color: #56ab2f; color: #56ab2f"
|
||||
>
|
||||
🔗 Redeem Share Code
|
||||
</button>
|
||||
|
||||
<div id="childrenContent" class="loading">
|
||||
<p>Loading children...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Redeem Code Modal -->
|
||||
<div
|
||||
class="modal"
|
||||
id="redeemCodeModal"
|
||||
style="
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
"
|
||||
>
|
||||
<h2 style="margin-top: 0">🔗 Redeem Share Code</h2>
|
||||
<p style="color: #666; margin-bottom: 20px">
|
||||
Enter the share code to get access to a child.
|
||||
</p>
|
||||
<form id="redeemCodeForm">
|
||||
<div class="form-group">
|
||||
<label for="shareCode">Share Code</label>
|
||||
<input
|
||||
type="text"
|
||||
id="shareCode"
|
||||
placeholder="Enter code"
|
||||
required
|
||||
style="
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: flex; gap: 10px; margin-top: 20px">
|
||||
<button
|
||||
type="button"
|
||||
class="button secondary"
|
||||
onclick="closeRedeemCodeModal()"
|
||||
style="flex: 1"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" class="button success" style="flex: 1">
|
||||
Redeem
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Share Code Modal -->
|
||||
<div
|
||||
class="modal"
|
||||
id="shareCodeModal"
|
||||
style="
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
"
|
||||
>
|
||||
<h2 style="margin-top: 0">🔗 Share Code</h2>
|
||||
<p style="color: #666; margin-bottom: 20px" id="shareCodeChildName"></p>
|
||||
<div
|
||||
style="
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
letter-spacing: 2px;
|
||||
"
|
||||
id="shareCodeValue"
|
||||
></span>
|
||||
<button
|
||||
onclick="copyShareCode()"
|
||||
style="
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
"
|
||||
>
|
||||
📋 Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p style="color: #666; font-size: 14px; margin-bottom: 20px">
|
||||
Share this code with another user. They can use it in Settings >
|
||||
Redeem Share Code to get access to this child.
|
||||
<br /><br />
|
||||
This code expires in 7 days.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="button"
|
||||
onclick="closeShareCodeModal()"
|
||||
style="width: 100%"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/menu.js"></script>
|
||||
<script>
|
||||
const token = localStorage.getItem("access_token");
|
||||
if (!token) {
|
||||
window.location.href = "/login.html";
|
||||
}
|
||||
|
||||
// Initialize burger menu
|
||||
initBurgerMenu({ includeHome: true });
|
||||
|
||||
let currentUser = null;
|
||||
let children = [];
|
||||
|
||||
// Load user data and children
|
||||
async function loadData() {
|
||||
try {
|
||||
// Fetch user info
|
||||
const userResponse = await fetch("/api/me", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (userResponse.ok) {
|
||||
currentUser = await userResponse.json();
|
||||
document.getElementById("username").value = currentUser.username;
|
||||
} else {
|
||||
window.location.href = "/login.html";
|
||||
return;
|
||||
}
|
||||
|
||||
// Fetch children
|
||||
const childrenResponse = await fetch("/api/children", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (childrenResponse.ok) {
|
||||
children = await childrenResponse.json();
|
||||
displayChildren();
|
||||
} else {
|
||||
showAlert("Failed to load children", "error");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading data:", error);
|
||||
showAlert("Network error. Please try again.", "error");
|
||||
}
|
||||
}
|
||||
|
||||
function displayChildren() {
|
||||
const container = document.getElementById("childrenContent");
|
||||
|
||||
if (children.length === 0) {
|
||||
container.innerHTML = `
|
||||
<p style="color: #666; text-align: center; padding: 20px;">
|
||||
No children added yet. Click "Add New Child" to get started.
|
||||
</p>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="children-list">
|
||||
${children
|
||||
.map(
|
||||
(child) => `
|
||||
<div class="child-card">
|
||||
<h3>👶 ${child.name}</h3>
|
||||
<div class="child-info">
|
||||
<p><strong>Birth Date:</strong> ${formatDate(child.birth_time)}</p>
|
||||
<p><strong>Birth Weight:</strong> ${child.birth_weight}g</p>
|
||||
<p><strong>Added:</strong> ${formatDate(child.created_at)}</p>
|
||||
</div>
|
||||
<div class="child-actions">
|
||||
<button class="button secondary" onclick="editChild(${child.id})">
|
||||
✏️ Edit
|
||||
</button>
|
||||
<button class="button success" onclick="shareChild(${child.id})">
|
||||
🔗 Share
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function formatDate(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
}
|
||||
|
||||
function editChild(childId) {
|
||||
// Redirect to a child edit page or show a modal
|
||||
// For now, just show an alert
|
||||
const child = children.find((c) => c.id === childId);
|
||||
if (child) {
|
||||
alert(`Edit functionality for ${child.name} coming soon!`);
|
||||
}
|
||||
}
|
||||
|
||||
async function shareChild(childId) {
|
||||
const child = children.find((c) => c.id === childId);
|
||||
if (!child) return;
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/children/invitations", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
child_id: childId,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to create invitation");
|
||||
}
|
||||
|
||||
const invitation = await response.json();
|
||||
|
||||
// Show the share code modal
|
||||
document.getElementById("shareCodeChildName").textContent =
|
||||
`Share code for ${child.name}`;
|
||||
document.getElementById("shareCodeValue").textContent =
|
||||
invitation.code;
|
||||
window.currentShareCode = invitation.code; // Store for copy function
|
||||
document.getElementById("shareCodeModal").style.display = "flex";
|
||||
} catch (error) {
|
||||
console.error("Error creating share code:", error);
|
||||
showAlert("Failed to create share code. Please try again.", "error");
|
||||
}
|
||||
}
|
||||
|
||||
function closeShareCodeModal() {
|
||||
document.getElementById("shareCodeModal").style.display = "none";
|
||||
window.currentShareCode = null;
|
||||
}
|
||||
|
||||
function copyShareCode() {
|
||||
const code = window.currentShareCode;
|
||||
if (!code) return;
|
||||
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard
|
||||
.writeText(code)
|
||||
.then(() => {
|
||||
showAlert("Share code copied to clipboard!", "success");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Failed to copy to clipboard:", err);
|
||||
showAlert(
|
||||
"Failed to copy. Please copy the code manually.",
|
||||
"error",
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// Fallback for older browsers
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = code;
|
||||
textArea.style.position = "fixed";
|
||||
textArea.style.left = "-999999px";
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand("copy");
|
||||
showAlert("Share code copied to clipboard!", "success");
|
||||
} catch (err) {
|
||||
showAlert(
|
||||
"Failed to copy. Please copy the code manually.",
|
||||
"error",
|
||||
);
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
}
|
||||
|
||||
function showRedeemCodeModal() {
|
||||
document.getElementById("redeemCodeModal").style.display = "flex";
|
||||
}
|
||||
|
||||
function closeRedeemCodeModal() {
|
||||
document.getElementById("redeemCodeModal").style.display = "none";
|
||||
document.getElementById("redeemCodeForm").reset();
|
||||
}
|
||||
|
||||
document
|
||||
.getElementById("redeemCodeForm")
|
||||
.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const code = document.getElementById("shareCode").value.trim();
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/children/invitations/redeem", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({ code }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
// Show the specific error message from the backend in a popup
|
||||
alert(error.detail || "Failed to redeem code");
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
alert(result.message);
|
||||
closeRedeemCodeModal();
|
||||
|
||||
// Reload children list
|
||||
await loadData();
|
||||
} catch (error) {
|
||||
console.error("Error redeeming code:", error);
|
||||
// Display the actual error message in a popup
|
||||
alert(error.message);
|
||||
}
|
||||
});
|
||||
|
||||
async function confirmDeleteAccount() {
|
||||
const confirmed = confirm(
|
||||
"⚠️ WARNING: This action cannot be undone!\n\n" +
|
||||
"Are you absolutely sure you want to delete your account?\n\n" +
|
||||
"This will:\n" +
|
||||
"• Delete your account permanently\n" +
|
||||
"• Delete all children that have no other parents\n" +
|
||||
"• Delete ALL logs for orphaned children\n" +
|
||||
"• Remove you as a parent from shared children\n\n" +
|
||||
'Type "DELETE" in the next prompt to confirm.',
|
||||
);
|
||||
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
const confirmText = prompt("Type DELETE to confirm account deletion:");
|
||||
if (confirmText !== "DELETE") {
|
||||
showAlert(
|
||||
"Account deletion cancelled. You must type DELETE exactly.",
|
||||
"info",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/account", {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to delete account");
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
// Show deletion summary
|
||||
let message = "✅ Account deleted successfully!\n\n";
|
||||
if (result.deleted_children && result.deleted_children.length > 0) {
|
||||
message += `Deleted children: ${result.deleted_children.join(", ")}\n`;
|
||||
}
|
||||
if (result.deleted_logs) {
|
||||
message += `\nDeleted logs:\n`;
|
||||
message += `• Feedings: ${result.deleted_logs.feedings}\n`;
|
||||
message += `• Diaper Changes: ${result.deleted_logs.diaper_changes}\n`;
|
||||
message += `• Sleep Sessions: ${result.deleted_logs.sleep_sessions}`;
|
||||
}
|
||||
|
||||
alert(message);
|
||||
|
||||
// Logout and redirect
|
||||
localStorage.removeItem("token");
|
||||
window.location.href = "/login.html";
|
||||
} catch (error) {
|
||||
console.error("Error deleting account:", error);
|
||||
showAlert("Failed to delete account. Please try again.", "error");
|
||||
}
|
||||
}
|
||||
|
||||
function showAlert(message, type) {
|
||||
const alert = document.getElementById("alert");
|
||||
alert.className = `alert alert-${type}`;
|
||||
alert.textContent = message;
|
||||
alert.classList.remove("hidden");
|
||||
|
||||
setTimeout(() => {
|
||||
alert.classList.add("hidden");
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Handle user form submission
|
||||
document
|
||||
.getElementById("userForm")
|
||||
.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const currentPassword =
|
||||
document.getElementById("currentPassword").value;
|
||||
const newPassword = document.getElementById("newPassword").value;
|
||||
const confirmPassword =
|
||||
document.getElementById("confirmPassword").value;
|
||||
|
||||
// Validate passwords
|
||||
if (newPassword && newPassword !== confirmPassword) {
|
||||
alert("New passwords do not match");
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword && !currentPassword) {
|
||||
alert("Current password is required to change password");
|
||||
return;
|
||||
}
|
||||
|
||||
// If no password change requested, just show success
|
||||
if (!newPassword) {
|
||||
alert("No changes to save");
|
||||
return;
|
||||
}
|
||||
|
||||
const saveBtn = document.getElementById("saveUserBtn");
|
||||
saveBtn.disabled = true;
|
||||
saveBtn.textContent = "Saving...";
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/change-password", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
current_password: currentPassword,
|
||||
new_password: newPassword,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.detail || "Failed to change password");
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
alert(result.message);
|
||||
|
||||
// Clear form
|
||||
document.getElementById("userForm").reset();
|
||||
} catch (error) {
|
||||
console.error("Error updating password:", error);
|
||||
alert(error.message || "Failed to update password");
|
||||
} finally {
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.textContent = "💾 Save Changes";
|
||||
}
|
||||
});
|
||||
|
||||
// Load data on page load
|
||||
loadData();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user