diff --git a/src/App.css b/src/App.css index 85c99a5..0258aa0 100644 --- a/src/App.css +++ b/src/App.css @@ -10,11 +10,11 @@ body { #root { margin: 0 auto; - display: flex; + /*display: flex;*/ flex-direction: column; place-items: flex-start; min-width: 320px; - max-width: 1100px; + max-width: 1280px; min-height: 100vh; } @@ -23,25 +23,8 @@ body { margin: 0 auto; padding: 2rem; text-align: center; -} - -/*.xlogo:hover {*/ -/* filter: drop-shadow(0 0 2em #f5c600);*/ -/*}*/ - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } + /* only horizontal scroll */ + overflow-x: auto; } .card { diff --git a/src/App.tsx b/src/App.tsx index 3bfdb25..2f46d88 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,13 +3,26 @@ import Login from "./Login.tsx"; import {Navigate, Route, Routes} from "react-router-dom"; import Home from "./Home.tsx"; import NavBar from "./NavBar.tsx"; -import {useAuth} from "react-oidc-context"; +import {hasAuthParams, useAuth} from "react-oidc-context"; import NotFound from "./NotFound.tsx"; +import {useEffect, useState} from "react"; +import Spinner from "./Spinner.tsx"; function App() { - const {user} = useAuth(); + const auth = useAuth(); + const [hasTriedSignin, setHasTriedSignin] = useState(false); + + useEffect(() => { + if (!hasAuthParams() && + !auth.isAuthenticated && !auth.activeNavigator && !auth.isLoading && + !hasTriedSignin && auth.user + ) { + auth.signinSilent(); + setHasTriedSignin(true); + } + }, [auth, hasTriedSignin]); const AnonRoutes = <> }/> @@ -22,13 +35,13 @@ function App() { return <>
- + {auth.isLoading ? : <> - {user === undefined ? null : user ? LoggedInRoutes : AnonRoutes} + {auth.user === undefined ? null : auth.user ? LoggedInRoutes : AnonRoutes} }/> }/> - + }
diff --git a/src/NavBar.tsx b/src/NavBar.tsx index 4d366d8..b30edca 100644 --- a/src/NavBar.tsx +++ b/src/NavBar.tsx @@ -30,7 +30,7 @@ function NavBar() { const alignedSpinner = - const rightItem = auth.user === undefined ? alignedSpinner : auth.user ? userMenu : loginButton; + const rightItem = auth.isLoading ? alignedSpinner : auth.user ? userMenu : loginButton; return (