Implement change display name

This commit is contained in:
Cohee 2024-04-11 00:40:01 +03:00
parent 01a4aa51f7
commit c92df1168d
7 changed files with 97 additions and 8 deletions

View File

@ -52,9 +52,9 @@
<div id="passwordEntryBlock" style="display:none;"
class="flex-container flexFlowColumn alignItemsCenter">
<input id="userPassword" class="text_pole" type="password" placeholder="Password" autocomplete="current-password">
<a id="recoverPassword" href="#" onclick="return false;">Forgot password?</a>
<div class="flex-container">
<div id="loginButton" class="menu_button">Login</div>
<div id="recoverPassword" class="menu_button">Recover</div>
</div>
</div>
<div id="passwordRecoveryBlock" style="display:none;"

View File

@ -16,8 +16,8 @@
</div>
<div class="flex1 flex-container flexFlowColumn flexNoGap justifyLeft">
<div class="flex-container flexGap10 alignItemsCenter">
<i class="hasPassword fa-solid fa-lock"></i>
<i class="noPassword fa-solid fa-lock-open"></i>
<i class="hasPassword fa-solid fa-lock" title="This account is password protected."></i>
<i class="noPassword fa-solid fa-lock-open" title="This account is not password protected."></i>
<h3 class="userName margin0"></h3>
<small class="userHandle">&nbsp;</small>
</div>
@ -38,7 +38,7 @@
</div>
<div class="flex-container flexFlowColumn">
<div class="flex-container">
<div class="userEditButton menu_button disabled">
<div class="userChangeNameButton menu_button" title="Change user display name.">
<i class="fa-fw fa-solid fa-pencil"></i>
</div>
<div class="userEnableButton menu_button" title="Enable user account.">

View File

@ -0,0 +1,5 @@
<div class="flex-container">
<h3>
Enter a new display name:
</h3>
</div>

View File

@ -35,8 +35,8 @@
</div>
<div>
<span data-i18n="Password:">Password:</span>
<i class="hasPassword fa-fw fa-solid fa-lock"></i>
<i class="noPassword fa-fw fa-solid fa-lock-open"></i>
<i class="hasPassword fa-fw fa-solid fa-lock" title="This account is password protected."></i>
<i class="noPassword fa-fw fa-solid fa-lock-open" title="This account is not password protected."></i>
</div>
</div>
</div>
@ -74,7 +74,7 @@
<i class="fa-fw fa-solid fa-cog warning"></i>
<span data-i18n="Reset Settings">Reset Settings</span>
</div>
<div class="userResetAllButton menu_button menu_button_icon" title="Wipe all user data and reset your account to factory settings.">
<div class="userResetAllButton menu_button menu_button_icon disabled" title="Wipe all user data and reset your account to factory settings.">
<i class="fa-fw fa-solid fa-skull warning"></i>
<span data-i18n="Reset Everything">Reset Everything</span>
</div>

View File

@ -54,6 +54,10 @@ async function getCurrentUser() {
}
}
/**
* Get a list of all users.
* @returns {Promise<import('../../src/users.js').UserViewModel[]>} Users
*/
async function getUsers() {
try {
const response = await fetch('/api/users/get', {
@ -394,6 +398,43 @@ async function resetSettings(handle, callback) {
}
}
/**
* Change a user's display name.
* @param {string} handle User handle
* @param {string} name Current name
* @param {function} callback Success callback
*/
async function changeName(handle, name, callback) {
try {
const template = $(renderTemplate('changeName'));
const result = await callGenericPopup(template, POPUP_TYPE.INPUT, name, { okButton: 'Change', cancelButton: 'Cancel', wide: false, large: false });
if (!result) {
throw new Error('Change name cancelled');
}
name = String(result);
const response = await fetch('/api/users/change-name', {
method: 'POST',
headers: getRequestHeaders(),
body: JSON.stringify({ handle, name }),
});
if (!response.ok) {
const data = await response.json();
toastr.error(data.error || 'Unknown error', 'Failed to change name');
throw new Error('Failed to change name');
}
toastr.success('Name changed successfully', 'Name Changed');
callback();
} catch (error) {
console.error('Error changing name:', error);
}
}
async function openUserProfile() {
await getCurrentUser();
const template = $(renderTemplate('userProfile'));
@ -404,6 +445,10 @@ async function openUserProfile() {
template.find('.userCreated').text(new Date(currentUser.created).toLocaleString());
template.find('.hasPassword').toggle(currentUser.password);
template.find('.noPassword').toggle(!currentUser.password);
template.find('.userChangeNameButton').on('click', async () => changeName(currentUser.handle, currentUser.name, async () => {
await getCurrentUser();
template.find('.userName').text(currentUser.name);
}));
template.find('.userChangePasswordButton').on('click', () => changePassword(currentUser.handle, async () => {
await getCurrentUser();
template.find('.hasPassword').toggle(currentUser.password);
@ -417,7 +462,14 @@ async function openUserProfile() {
});
template.find('.userResetSettingsButton').on('click', () => resetSettings(currentUser.handle, () => location.reload()));
callGenericPopup(template, POPUP_TYPE.TEXT, '', { okButton: 'Close', wide: false, large: false, allowVerticalScrolling: true, allowHorizontalScrolling: false });
const popupOptions = {
okButton: 'Close',
wide: false,
large: false,
allowVerticalScrolling: true,
allowHorizontalScrolling: false,
};
callGenericPopup(template, POPUP_TYPE.TEXT, '', popupOptions);
}
async function openAdminPanel() {
@ -440,6 +492,7 @@ async function openAdminPanel() {
userBlock.find('.userDemoteButton').toggle(user.admin).on('click', () => demoteUser(user.handle, renderUsers));
userBlock.find('.userChangePasswordButton').on('click', () => changePassword(user.handle, renderUsers));
userBlock.find('.userDelete').on('click', () => deleteUser(user.handle, renderUsers));
userBlock.find('.userChangeNameButton').on('click', async () => changeName(user.handle, user.name, renderUsers));
userBlock.find('.userBackupButton').on('click', function () {
$(this).addClass('disabled').off('click');
backupUserData(user.handle, renderUsers);

View File

@ -135,6 +135,36 @@ router.post('/reset-settings', jsonParser, async (request, response) => {
}
});
router.post('/change-name', jsonParser, async (request, response) => {
try {
if (!request.body.name || !request.body.handle) {
console.log('Change name failed: Missing required fields');
return response.status(400).json({ error: 'Missing required fields' });
}
if (request.body.handle !== request.user.profile.handle && !request.user.profile.admin) {
console.log('Change name failed: Unauthorized');
return response.status(403).json({ error: 'Unauthorized' });
}
/** @type {import('../users').User} */
const user = await storage.getItem(toKey(request.body.handle));
if (!user) {
console.log('Change name failed: User not found');
return response.status(404).json({ error: 'User not found' });
}
user.name = request.body.name;
await storage.setItem(toKey(request.body.handle), user);
return response.sendStatus(204);
} catch (error) {
console.error('Change name failed', error);
return response.sendStatus(500);
}
});
module.exports = {
router,
};

View File

@ -49,6 +49,7 @@ const STORAGE_KEYS = {
* @property {string} avatar - The user's avatar image
* @property {boolean} admin - Whether the user is an admin (can manage other users)
* @property {boolean} password - Whether the user is password protected
* @property {boolean} [enabled] - Whether the user is enabled
* @property {number} [created] - The timestamp when the user was created
*/