settingsPage Init selfhost (#4734)

# Description of Changes

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## 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)

### 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.

---------

Co-authored-by: James Brunton <jbrunton96@gmail.com>

frontend/src/proprietary/auth/springAuthClient.ts

@@ -15,6 +15,7 @@ export interface User {
   role: string;
   enabled?: boolean;
   is_anonymous?: boolean;
+  isFirstLogin?: boolean;
   app_metadata?: Record<string, any>;
 }
 

frontend/src/proprietary/routes/Landing.tsx

@@ -1,8 +1,11 @@
+import { useState, useEffect } from 'react'
 import { Navigate, useLocation } from 'react-router-dom'
 import { useAuth } from '@app/auth/UseSession'
 import { useAppConfig } from '@app/contexts/AppConfigContext'
 import HomePage from '@app/pages/HomePage'
 import Login from '@app/routes/Login'
+import FirstLoginModal from '@app/components/shared/FirstLoginModal'
+import { accountService } from '@app/services/accountService'
 
 /**
  * Landing component - Smart router based on authentication status
@@ -12,12 +15,45 @@ import Login from '@app/routes/Login'
  * If user is not authenticated: Show Login or redirect to /login
  */
 export default function Landing() {
-  const { session, loading: authLoading } = useAuth();
+  const { session, loading: authLoading, refreshSession } = useAuth();
   const { config, loading: configLoading } = useAppConfig();
   const location = useLocation();
+  const [isFirstLogin, setIsFirstLogin] = useState(false);
+  const [checkingFirstLogin, setCheckingFirstLogin] = useState(false);
+  const [username, setUsername] = useState('');
 
   const loading = authLoading || configLoading;
 
+  // Check if user needs to change password on first login
+  useEffect(() => {
+    const checkFirstLogin = async () => {
+      if (session && config?.enableLogin !== false) {
+        try {
+          setCheckingFirstLogin(true)
+          const accountData = await accountService.getAccountData()
+          setUsername(accountData.username)
+          setIsFirstLogin(accountData.changeCredsFlag)
+        } catch (err) {
+          console.error('Failed to check first login status:', err)
+          // If account endpoint fails (404), user probably doesn't have security enabled
+          setIsFirstLogin(false)
+        } finally {
+          setCheckingFirstLogin(false)
+        }
+      }
+    }
+
+    checkFirstLogin()
+  }, [session, config])
+
+  const handlePasswordChanged = async () => {
+    // After password change, backend logs out the user
+    // Refresh session to detect logout and redirect to login
+    setIsFirstLogin(false) // Close modal first
+    await refreshSession()
+    // The auth system will automatically redirect to login when session is null
+  }
+
   console.log('[Landing] State:', {
     pathname: location.pathname,
     loading,
@@ -26,7 +62,7 @@ export default function Landing() {
   });
 
   // Show loading while checking auth and config
-  if (loading) {
+  if (loading || checkingFirstLogin) {
     return (
       <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
         <div className="text-center">
@@ -47,7 +83,16 @@ export default function Landing() {
 
   // If we have a session, show the main app
   if (session) {
-    return <HomePage />;
+    return (
+      <>
+        <FirstLoginModal
+          opened={isFirstLogin}
+          onPasswordChanged={handlePasswordChanged}
+          username={username}
+        />
+        <HomePage />
+      </>
+    );
   }
 
   // If we're at home route ("/"), show login directly (marketing/landing page)