feat: added a login page with Authentik authentication

packages/frontend/src/components/Layout.tsx

@@ -1,5 +1,5 @@
 import {NavLink, Outlet, useLocation, useSearchParams} from 'react-router-dom'
-import {AlertTriangle, ChevronsLeft, ChevronsRight, LayoutDashboard, Moon, Search, Sun} from 'lucide-react'
+import {AlertTriangle, ChevronsLeft, ChevronsRight, LayoutDashboard, LogOut, Moon, Search, Sun} from 'lucide-react'
 import {useCallback, useEffect, useRef, useState} from 'react'
 import theCloud from '../../../../TheCloud.png'
 import {useTheme} from '@/lib/useTheme'
@@ -220,6 +220,9 @@ export function Layout() {
                     </button>
                     <div id="topbar-status" className="topbar-status"/>
                     <AccountSwitcher/>
+                    <button className="icon-btn" type="button" title="Sign out" aria-label="Sign out" onClick={() => void signOut()}>
+                        <LogOut size={14}/>
+                    </button>
                     <div className={`connection ${isConnected ? 'connected' : 'disconnected'}`}>
                         <span className={connectionDotClass(status)} aria-hidden="true"/>
                         <span className="connection-state">{connectionLabel}</span>
@@ -234,6 +237,12 @@ export function Layout() {
     )
 }
 
+async function signOut(): Promise<void> {
+    const csrf = document.cookie.split('; ').find((item) => item.startsWith('floci_ui_csrf='))?.split('=')[1]
+    await fetch('/api/auth/logout', {method: 'POST', headers: csrf ? {'X-Floci-CSRF': decodeURIComponent(csrf)} : {}})
+    window.location.assign('/login')
+}
+
 /**
  * Topbar search bar.
  *