Add login mode toggle: allow switching between local and enterprise login

- Added 'Local Users' and 'Enterprise' toggle buttons when LDAP is available
- Users can now choose which login method to use
- Defaults to local user list on page load
- Both modes fully functional and accessible
This commit is contained in:
2026-04-26 13:29:17 +03:00
parent 8d21eacd28
commit 7da86573b9

View File

@@ -9,6 +9,7 @@ import { useRouter } from 'next/navigation';
export default function LoginPage() {
const [mounted, setMounted] = useState(false);
const [users, setUsers] = useState<any[]>([]);
const [ldapAvailable, setLdapAvailable] = useState(false);
const [isEnterprise, setIsEnterprise] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [selectedUserForLogin, setSelectedUserForLogin] = useState<any | null>(null);
@@ -25,13 +26,15 @@ export default function LoginPage() {
setIsLoading(true);
// Get authentication mode from backend
const authMode = await inventoryApi.getAuthMode();
setIsEnterprise(authMode.mode === 'enterprise');
setLdapAvailable(authMode.ldap_enabled);
setIsEnterprise(false); // Always start with local mode for user choice
const userList = await inventoryApi.getUsers();
setUsers(userList);
} catch (error) {
console.error("Failed to load auth mode or users", error);
setIsEnterprise(false); // Default to local mode on error
setLdapAvailable(false);
setIsEnterprise(false);
} finally {
setIsLoading(false);
}
@@ -81,6 +84,32 @@ export default function LoginPage() {
</div>
) : (
<div className="grid gap-3">
{ldapAvailable && (
<div className="flex gap-2">
<button
type="button"
onClick={() => { setIsEnterprise(false); setSelectedUserForLogin(null); }}
className={`flex-1 py-2 px-3 text-sm font-normal rounded border transition-all ${
!isEnterprise
? 'bg-primary border-primary text-white'
: 'bg-surface-container border-border text-secondary hover:border-primary/50'
}`}
>
Local Users
</button>
<button
type="button"
onClick={() => { setIsEnterprise(true); setSelectedUserForLogin(null); }}
className={`flex-1 py-2 px-3 text-sm font-normal rounded border transition-all ${
isEnterprise
? 'bg-primary border-primary text-white'
: 'bg-surface-container border-border text-secondary hover:border-primary/50'
}`}
>
Enterprise
</button>
</div>
)}
{!selectedUserForLogin && !isEnterprise ? (
<>
{users.length > 0 ? (