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:
@@ -9,6 +9,7 @@ import { useRouter } from 'next/navigation';
|
|||||||
export default function LoginPage() {
|
export default function LoginPage() {
|
||||||
const [mounted, setMounted] = useState(false);
|
const [mounted, setMounted] = useState(false);
|
||||||
const [users, setUsers] = useState<any[]>([]);
|
const [users, setUsers] = useState<any[]>([]);
|
||||||
|
const [ldapAvailable, setLdapAvailable] = useState(false);
|
||||||
const [isEnterprise, setIsEnterprise] = useState(false);
|
const [isEnterprise, setIsEnterprise] = useState(false);
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
const [selectedUserForLogin, setSelectedUserForLogin] = useState<any | null>(null);
|
const [selectedUserForLogin, setSelectedUserForLogin] = useState<any | null>(null);
|
||||||
@@ -25,13 +26,15 @@ export default function LoginPage() {
|
|||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
// Get authentication mode from backend
|
// Get authentication mode from backend
|
||||||
const authMode = await inventoryApi.getAuthMode();
|
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();
|
const userList = await inventoryApi.getUsers();
|
||||||
setUsers(userList);
|
setUsers(userList);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Failed to load auth mode or users", error);
|
console.error("Failed to load auth mode or users", error);
|
||||||
setIsEnterprise(false); // Default to local mode on error
|
setLdapAvailable(false);
|
||||||
|
setIsEnterprise(false);
|
||||||
} finally {
|
} finally {
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
}
|
}
|
||||||
@@ -81,6 +84,32 @@ export default function LoginPage() {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="grid gap-3">
|
<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 ? (
|
{!selectedUserForLogin && !isEnterprise ? (
|
||||||
<>
|
<>
|
||||||
{users.length > 0 ? (
|
{users.length > 0 ? (
|
||||||
|
|||||||
Reference in New Issue
Block a user