User profile view

public/scripts/templates/admin.html

@@ -72,9 +72,6 @@
     </div>
     <div class="navTab registerNewUserBlock" style="display: none;">
         <form class="flex-container flexFlowColumn flexGap10 userCreateForm" action="javascript:void(0);">
-            <h3 data-i18n="Register New SillyTavern User">
-                Register New SillyTavern User
-            </h3>
             <div class="flex-container flexNoGap">
                 <span data-i18n="User Handle:">User Handle:</span>
                 <span class="warning">*</span>

public/scripts/templates/userProfile.html

@@ -0,0 +1,80 @@
+<div class="flex-container flexFlowColumn justifyLeft flexGap10">
+    <div>
+        <h2 class="marginBot10">
+            <span>Hi,</span>&nbsp;<span class="userName margin0"></span>
+        </h2>
+    </div>
+    <div>
+        <h3>
+            Account Info
+        </h3>
+        <div class="flex-container flexGap10">
+            <div>
+                <div class="avatar" title="To change your user avatar, select a default persona in Persona Management menu.">
+                    <img src="img/ai4.png" alt="avatar">
+                </div>
+            </div>
+            <div class="flex1 flex-container flexGap10">
+                <div class="flex-container flexFlowColumn">
+                    <div>
+                        <span data-i18n="Handle:">Handle:</span>
+                        <span class="userHandle"></span>
+                    </div>
+                    <div>
+                        <span data-i18n="Role:">Role:</span>
+                        <span class="userRole"></span>
+                    </div>
+                </div>
+                <div class="flex-container flexFlowColumn">
+                    <div>
+                        <span data-i18n="Created:">Created:</span>
+                        <span class="userCreated"></span>
+                    </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>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div>
+        <h3>
+            Account Actions
+        </h3>
+        <div class="flex-container flexFlowColumn flexNoGap">
+            <div class="flex-container">
+                <div class="userChangePasswordButton menu_button menu_button_icon" title="Change your password.">
+                    <i class="fa-fw fa-solid fa-key"></i>
+                    <span data-i18n="Change Password">Change Password</span>
+                </div>
+            </div>
+            <div class="flex-container">
+                <div class="userSettingsSnapshotsButton menu_button menu_button_icon" title="Manage your settings snapshots.">
+                    <i class="fa-fw fa-solid fa-camera"></i>
+                    <span data-i18n="Settings Snapshots">Settings Snapshots</span>
+                </div>
+                <div class="userBackupButton menu_button menu_button_icon" title="Download a complete backup of user data.">
+                    <i class="fa-fw fa-solid fa-download"></i>
+                    <span data-i18n="Download Backup">Download Backup</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div>
+        <h3>
+            Danger Zone
+        </h3>
+        <div class="flex-container">
+            <div class="userResetSettings menu_button menu_button_icon" title="Reset your settings to factory defaults.">
+                <i class="fa-fw fa-solid fa-cog warning"></i>
+                <span data-i18n="Reset Settings">Reset Settings</span>
+            </div>
+            <div class="userResetAll menu_button menu_button_icon" 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>
+        </div>
+    </div>
+</div>

public/scripts/user.js

@@ -2,7 +2,7 @@ import { getRequestHeaders, renderTemplate } from '../script.js';
 import { POPUP_RESULT, POPUP_TYPE, callGenericPopup } from './popup.js';
 
 /**
- * @type {import('../../src/users.js').User} Logged in user
+ * @type {import('../../src/users.js').UserViewModel} Logged in user
  */
 export let currentUser = null;
 
@@ -357,6 +357,27 @@ async function deleteUser(handle, callback) {
     }
 }
 
+async function openUserProfile() {
+    await getCurrentUser();
+    const template = $(renderTemplate('userProfile'));
+    template.find('.userName').text(currentUser.name);
+    template.find('.userHandle').text(currentUser.handle);
+    template.find('.avatar img').attr('src', currentUser.avatar);
+    template.find('.userRole').text(currentUser.admin ? 'Admin' : 'User');
+    template.find('.userCreated').text(new Date(currentUser.created).toLocaleString());
+    template.find('.hasPassword').toggle(currentUser.password);
+    template.find('.noPassword').toggle(!currentUser.password);
+    template.find('.userChangePasswordButton').on('click', () => changePassword(currentUser.handle, () => { }));
+    template.find('.userBackupButton').on('click', function () {
+        $(this).addClass('disabled');
+        backupUserData(currentUser.handle, () => {
+            $(this).removeClass('disabled');
+        });
+    });
+
+    callGenericPopup(template, POPUP_TYPE.TEXT, '', { okButton: 'Close', wide: false, large: false, allowVerticalScrolling: true, allowHorizontalScrolling: false });
+}
+
 async function openAdminPanel() {
     async function renderUsers() {
         const users = await getUsers();
@@ -406,7 +427,7 @@ async function openAdminPanel() {
         });
     });
 
-    callGenericPopup(template, POPUP_TYPE.TEXT, '', { okButton: 'Close', wide: true, large: true, allowVerticalScrolling: true, allowHorizontalScrolling: false });
+    callGenericPopup(template, POPUP_TYPE.TEXT, '', { okButton: 'Close', wide: false, large: false, allowVerticalScrolling: true, allowHorizontalScrolling: false });
     renderUsers();
 }
 
@@ -430,4 +451,7 @@ jQuery(() => {
     $('#admin_button').on('click', () => {
         openAdminPanel();
     });
+    $('#account_button').on('click', () => {
+        openUserProfile();
+    });
 });

src/endpoints/users-private.js

@@ -33,6 +33,7 @@ router.get('/me', async (request, response) => {
             avatar: getUserAvatar(user.handle),
             admin: user.admin,
             password: !!user.password,
+            created: user.created,
         };
 
         return response.json(viewModel);

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 {number} [created] - The timestamp when the user was created
  */
 
 /**