Add user settings feature to update username and password

Signed-off-by: YoungSoo Shin <shinys000114@gmail.com>
This commit is contained in:
2025-09-26 12:47:03 +09:00
parent 89e17efcfc
commit 40fd0a667a
5 changed files with 153 additions and 5 deletions

View File

@@ -197,6 +197,11 @@
id="current-limit-settings-tab" role="tab" type="button">Current Limit
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-target="#user-settings-pane" data-bs-toggle="tab"
id="user-settings-tab" role="tab" type="button">User Settings
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="device-settings-tab" data-bs-toggle="tab"
data-bs-target="#device-settings-pane" type="button" role="tab">Device
@@ -331,6 +336,28 @@
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
<div class="tab-pane fade" id="user-settings-pane" role="tabpanel">
<form id="user-settings-form">
<div class="mb-3">
<label class="form-label" for="new-username">New Username</label>
<input class="form-control" id="new-username" required type="text">
</div>
<div class="mb-3">
<label class="form-label" for="new-password">New Password</label>
<input class="form-control" id="new-password" required type="password">
</div>
<div class="mb-3">
<label class="form-label" for="confirm-password">Confirm New Password</label>
<input class="form-control" id="confirm-password" required type="password">
</div>
<div class="d-flex justify-content-end pt-3 border-top mt-3">
<button class="btn btn-primary me-2" id="user-settings-apply-button" type="submit">
Apply
</button>
<button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="device-settings-pane" role="tabpanel">
<div class="mb-3">
<label for="baud-rate-select" class="form-label">UART Baud Rate</label>

View File

@@ -171,3 +171,22 @@ export async function fetchVersion() {
});
return await handleResponse(response).then(res => res.json());
}
/**
* Updates the user's username and password on the server.
* @param {string} newUsername The new username.
* @param {string} newPassword The new password.
* @returns {Promise<Object>} A promise that resolves to the server's JSON response.
* @throws {Error} Throws an error if the update fails.
*/
export async function updateUserSettings(newUsername, newPassword) {
const response = await fetch('/api/setting', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
...getAuthHeaders(),
},
body: JSON.stringify({new_username: newUsername, new_password: newPassword}),
});
return await handleResponse(response).then(res => res.json());
}

View File

@@ -44,6 +44,12 @@ const themeIconLogin = document.getElementById('theme-icon-login');
const themeToggleMain = document.getElementById('theme-toggle');
const themeIconMain = document.getElementById('theme-icon');
// User Settings DOM Elements
const userSettingsForm = document.getElementById('user-settings-form');
const newUsernameInput = document.getElementById('new-username');
const newPasswordInput = document.getElementById('new-password');
const confirmPasswordInput = document.getElementById('confirm-password');
// --- WebSocket Event Handlers ---
@@ -168,6 +174,38 @@ function handleLogout() {
// For now, just hide the main content.
}
// --- User Settings Functions ---
async function handleUserSettingsSubmit(event) {
event.preventDefault();
const newUsername = newUsernameInput.value;
const newPassword = newPasswordInput.value;
const confirmPassword = confirmPasswordInput.value;
if (!newUsername || !newPassword || !confirmPassword) {
alert('Please fill in all fields for username and password.');
return;
}
if (newPassword !== confirmPassword) {
alert('New password and confirm password do not match.');
return;
}
try {
const response = await api.updateUserSettings(newUsername, newPassword);
if (response && response.status === 'user_credentials_updated') {
alert('Username and password updated successfully. Please log in again with new credentials.');
handleLogout(); // Force logout to re-authenticate with new credentials
} else {
alert(`Failed to update credentials: ${response.message || 'Unknown error'}`);
}
} catch (error) {
console.error('Error updating user settings:', error);
alert(`Error updating user settings: ${error.message}`);
}
}
// --- Theme Toggle Functions ---
function setupThemeToggles() {
// Initialize theme for login page
@@ -230,6 +268,11 @@ function initializeMainAppContent() {
setupEventListeners(); // Attach main app event listeners
logoutButton.addEventListener('click', handleLogout); // Attach logout listener
connect();
// Attach user settings form listener
if (userSettingsForm) {
userSettingsForm.addEventListener('submit', handleUserSettingsSubmit);
}
}
function initialize() {