Settings display demo and login fix (#4884)

# Description of Changes
<img width="1569" height="980" alt="image"
src="https://github.com/user-attachments/assets/dca1c227-ed84-4393-97a1-e3ce6eb1620b"
/>

<img width="1596" height="935" alt="image"
src="https://github.com/user-attachments/assets/2003e1be-034a-4cbb-869e-6d5d912ab61d"
/>

<img width="1543" height="997" alt="image"
src="https://github.com/user-attachments/assets/fe0c4f4b-eeee-4db4-a041-e554f350255a"
/>


---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

frontend/src/core/services/accountService.ts

@@ -31,4 +31,14 @@ export const accountService = {
     formData.append('newPassword', newPassword);
     await apiClient.post('/api/v1/user/change-password', formData);
   },
+
+  /**
+   * Change user password on first login (resets firstLogin flag)
+   */
+  async changePasswordOnLogin(currentPassword: string, newPassword: string): Promise<void> {
+    const formData = new FormData();
+    formData.append('currentPassword', currentPassword);
+    formData.append('newPassword', newPassword);
+    await apiClient.post('/api/v1/user/change-password-on-login', formData);
+  },
 };

frontend/src/core/services/httpErrorHandler.ts

@@ -92,6 +92,32 @@ export async function handleHttpError(error: any): Promise<boolean> {
   if (error?.config?.suppressErrorToast === true) {
     return false; // Don't show global toast, but continue rejection
   }
+
+  // Handle 401 authentication errors
+  const status: number | undefined = error?.response?.status;
+  if (status === 401) {
+    const pathname = window.location.pathname;
+
+    // Check if we're already on an auth page
+    const isAuthPage = pathname.includes('/login') ||
+                      pathname.includes('/signup') ||
+                      pathname.includes('/auth/') ||
+                      pathname.includes('/invite/');
+
+    // If not on auth page, redirect to login with expired session message
+    if (!isAuthPage) {
+      console.debug('[httpErrorHandler] 401 detected, redirecting to login');
+      // Store the current location so we can redirect back after login
+      const currentLocation = window.location.pathname + window.location.search;
+      // Redirect to login with state
+      window.location.href = `/login?expired=true&from=${encodeURIComponent(currentLocation)}`;
+      return true; // Suppress toast since we're redirecting
+    }
+
+    // On auth pages, suppress the toast (user is already trying to authenticate)
+    console.debug('[httpErrorHandler] Suppressing 401 on auth page:', pathname);
+    return true;
+  }
   // Compute title/body (friendly) from the error object
   const { title, body } = extractAxiosErrorMessage(error);
 
@@ -112,7 +138,6 @@ export async function handleHttpError(error: any): Promise<boolean> {
 
   // 2) Generic-vs-special dedupe by endpoint
   const url: string | undefined = error?.config?.url;
-  const status: number | undefined = error?.response?.status;
   const now = Date.now();
   const isSpecial =
     status === 422 ||

frontend/src/core/services/userManagementService.ts

@@ -1,257 +0,0 @@
-import apiClient from '@app/services/apiClient';
-
-export interface User {
-  id: number;
-  username: string;
-  email?: string;
-  roleName: string; // Translation key like "adminUserSettings.admin"
-  rolesAsString?: string; // Actual role ID like "ROLE_ADMIN"
-  enabled: boolean;
-  isFirstLogin?: boolean;
-  authenticationType?: string;
-  team?: {
-    id: number;
-    name: string;
-  };
-  createdAt?: string;
-  updatedAt?: string;
-  // Enriched client-side fields
-  isActive?: boolean;
-  lastRequest?: number; // timestamp in milliseconds
-}
-
-export interface AdminSettingsData {
-  users: User[];
-  userSessions: Record<string, boolean>;
-  userLastRequest: Record<string, number>; // username -> timestamp in milliseconds
-  totalUsers: number;
-  activeUsers: number;
-  disabledUsers: number;
-  currentUsername?: string;
-  roleDetails?: Record<string, string>;
-  teams?: any[];
-  maxPaidUsers?: number;
-  // License information
-  maxAllowedUsers: number;
-  availableSlots: number;
-  grandfatheredUserCount: number;
-  licenseMaxUsers: number;
-  premiumEnabled: boolean;
-}
-
-export interface CreateUserRequest {
-  username: string;
-  password?: string;
-  role: string;
-  teamId?: number;
-  authType: 'password' | 'SSO';
-  forceChange?: boolean;
-}
-
-export interface UpdateUserRoleRequest {
-  username: string;
-  role: string;
-  teamId?: number;
-}
-
-export interface InviteUsersRequest {
-  emails: string; // Comma-separated email addresses
-  role: string;
-  teamId?: number;
-}
-
-export interface InviteUsersResponse {
-  successCount: number;
-  failureCount: number;
-  message?: string;
-  errors?: string;
-  error?: string;
-}
-
-export interface InviteLinkRequest {
-  email: string;
-  role: string;
-  teamId?: number;
-  expiryHours?: number;
-  sendEmail?: boolean;
-}
-
-export interface InviteLinkResponse {
-  token: string;
-  inviteUrl: string;
-  email: string;
-  expiresAt: string;
-  expiryHours: number;
-  emailSent?: boolean;
-  emailError?: string;
-  error?: string;
-}
-
-export interface InviteToken {
-  id: number;
-  email: string;
-  role: string;
-  teamId?: number;
-  createdBy: string;
-  createdAt: string;
-  expiresAt: string;
-}
-
-/**
- * User Management Service
- * Provides functions to interact with user management backend APIs
- */
-export const userManagementService = {
-  /**
-   * Get all users with session data (admin only)
-   */
-  async getUsers(): Promise<AdminSettingsData> {
-    const response = await apiClient.get<AdminSettingsData>('/api/v1/proprietary/ui-data/admin-settings');
-    return response.data;
-  },
-
-  /**
-   * Get users without a team
-   */
-  async getUsersWithoutTeam(): Promise<User[]> {
-    const response = await apiClient.get<User[]>('/api/v1/users/without-team');
-    return response.data;
-  },
-
-  /**
-   * Create a new user (admin only)
-   */
-  async createUser(data: CreateUserRequest): Promise<void> {
-    const formData = new FormData();
-    formData.append('username', data.username);
-    if (data.password) {
-      formData.append('password', data.password);
-    }
-    formData.append('role', data.role);
-    if (data.teamId) {
-      formData.append('teamId', data.teamId.toString());
-    }
-    formData.append('authType', data.authType);
-    if (data.forceChange !== undefined) {
-      formData.append('forceChange', data.forceChange.toString());
-    }
-    await apiClient.post('/api/v1/user/admin/saveUser', formData, {
-      suppressErrorToast: true, // Component will handle error display
-    } as any);
-  },
-
-  /**
-   * Update user role and/or team (admin only)
-   */
-  async updateUserRole(data: UpdateUserRoleRequest): Promise<void> {
-    const formData = new FormData();
-    formData.append('username', data.username);
-    formData.append('role', data.role);
-    if (data.teamId) {
-      formData.append('teamId', data.teamId.toString());
-    }
-    await apiClient.post('/api/v1/user/admin/changeRole', formData, {
-      suppressErrorToast: true,
-    } as any);
-  },
-
-  /**
-   * Enable or disable a user (admin only)
-   */
-  async toggleUserEnabled(username: string, enabled: boolean): Promise<void> {
-    const formData = new FormData();
-    formData.append('enabled', enabled.toString());
-    await apiClient.post(`/api/v1/user/admin/changeUserEnabled/${username}`, formData, {
-      suppressErrorToast: true,
-    } as any);
-  },
-
-  /**
-   * Delete a user (admin only)
-   */
-  async deleteUser(username: string): Promise<void> {
-    await apiClient.post(`/api/v1/user/admin/deleteUser/${username}`, null, {
-      suppressErrorToast: true,
-    } as any);
-  },
-
-  /**
-   * Invite users via email (admin only)
-   * Sends comma-separated email addresses, creates accounts with random passwords,
-   * and sends invitation emails
-   */
-  async inviteUsers(data: InviteUsersRequest): Promise<InviteUsersResponse> {
-    const formData = new FormData();
-    formData.append('emails', data.emails);
-    formData.append('role', data.role);
-    if (data.teamId) {
-      formData.append('teamId', data.teamId.toString());
-    }
-
-    const response = await apiClient.post<InviteUsersResponse>(
-      '/api/v1/user/admin/inviteUsers',
-      formData,
-      {
-        suppressErrorToast: true, // Component will handle error display
-      } as any
-    );
-
-    return response.data;
-  },
-
-  /**
-   * Generate an invite link (admin only)
-   */
-  async generateInviteLink(data: InviteLinkRequest): Promise<InviteLinkResponse> {
-    const formData = new FormData();
-    // Only append email if it's provided and not empty
-    if (data.email && data.email.trim()) {
-      formData.append('email', data.email);
-    }
-    formData.append('role', data.role);
-    if (data.teamId) {
-      formData.append('teamId', data.teamId.toString());
-    }
-    if (data.expiryHours) {
-      formData.append('expiryHours', data.expiryHours.toString());
-    }
-    if (data.sendEmail !== undefined) {
-      formData.append('sendEmail', data.sendEmail.toString());
-    }
-
-    const response = await apiClient.post<InviteLinkResponse>(
-      '/api/v1/invite/generate',
-      formData,
-      {
-        suppressErrorToast: true,
-      } as any
-    );
-
-    return response.data;
-  },
-
-  /**
-   * Get list of active invite links (admin only)
-   */
-  async getInviteLinks(): Promise<InviteToken[]> {
-    const response = await apiClient.get<{ invites: InviteToken[] }>('/api/v1/invite/list');
-    return response.data.invites;
-  },
-
-  /**
-   * Revoke an invite link (admin only)
-   */
-  async revokeInviteLink(inviteId: number): Promise<void> {
-    await apiClient.delete(`/api/v1/invite/revoke/${inviteId}`, {
-      suppressErrorToast: true,
-    } as any);
-  },
-
-  /**
-   * Clean up expired invite links (admin only)
-   */
-  async cleanupExpiredInvites(): Promise<{ deletedCount: number }> {
-    const response = await apiClient.post<{ deletedCount: number }>('/api/v1/invite/cleanup');
-    return response.data;
-  },
-};