From c92df1168dedac60664b8a3744db82ea6eb331b9 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Thu, 11 Apr 2024 00:40:01 +0300
Subject: [PATCH] Implement change display name

---
 public/login.html                         |  2 +-
 public/scripts/templates/admin.html       |  6 +--
 public/scripts/templates/changeName.html  |  5 +++
 public/scripts/templates/userProfile.html |  6 +--
 public/scripts/user.js                    | 55 ++++++++++++++++++++++-
 src/endpoints/users-private.js            | 30 +++++++++++++
 src/users.js                              |  1 +
 7 files changed, 97 insertions(+), 8 deletions(-)
 create mode 100644 public/scripts/templates/changeName.html

diff --git a/public/login.html b/public/login.html
index a0b7464a7..5c6cd2366 100644
--- a/public/login.html
+++ b/public/login.html
@@ -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;"
diff --git a/public/scripts/templates/admin.html b/public/scripts/templates/admin.html
index 51ecca71c..2b9c42fe7 100644
--- a/public/scripts/templates/admin.html
+++ b/public/scripts/templates/admin.html
@@ -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.">
diff --git a/public/scripts/templates/changeName.html b/public/scripts/templates/changeName.html
new file mode 100644
index 000000000..76f76a68d
--- /dev/null
+++ b/public/scripts/templates/changeName.html
@@ -0,0 +1,5 @@
+<div class="flex-container">
+    <h3>
+        Enter a new display name:
+    </h3>
+</div>
diff --git a/public/scripts/templates/userProfile.html b/public/scripts/templates/userProfile.html
index 770cddce1..f95a3ba61 100644
--- a/public/scripts/templates/userProfile.html
+++ b/public/scripts/templates/userProfile.html
@@ -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>
diff --git a/public/scripts/user.js b/public/scripts/user.js
index 2aa2199a0..e36460227 100644
--- a/public/scripts/user.js
+++ b/public/scripts/user.js
@@ -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);
diff --git a/src/endpoints/users-private.js b/src/endpoints/users-private.js
index 71f2832f3..445016376 100644
--- a/src/endpoints/users-private.js
+++ b/src/endpoints/users-private.js
@@ -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,
 };
diff --git a/src/users.js b/src/users.js
index 98c4d6aa7..b5daae291 100644
--- a/src/users.js
+++ b/src/users.js
@@ -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
  */