@ -4,25 +4,29 @@ import LegacyClientView from "src/components/views/legacy-client-view"
import LoginClientView from "src/components/views/login-client-view"
import ReadonlyClientView from "src/components/views/readonly-client-view"
import useAuth from "src/hooks/auth"
import useNodeData , { NodeData } from "src/hooks/node-data"
import useNodeData from "src/hooks/node-data"
import ManagementClientView from "./views/management-client-view"
export default function App() {
const { data , refreshData , updateNode } = useNodeData ( )
const { data : auth , loading : loadingAuth , waitOnAuth } = useAuth ( )
return (
< div className = "flex flex-col items-center min-w-sm max-w-lg mx-auto py-14" >
{ ! data ? (
< div className = "text-center "> Loading . . . < / div > // TODO(sonia): add a loading view
{ ! data || loadingAuth ? (
< div className = "text-center py-14 "> Loading . . . < / div > // TODO(sonia): add a loading view
) : data ? . Status === "NeedsLogin" || data ? . Status === "NoState" ? (
// Client not on a tailnet, render login.
< LoginClientView
data = { data }
onLoginClick = { ( ) = > updateNode ( { Reauthenticate : true } ) }
/ >
) : data . DebugMode === "full" && auth ? . ok ? (
// Render new client interface in management mode.
< ManagementClientView { ...data } / >
) : data . DebugMode === "login" || data . DebugMode === "full" ? (
// Render new client interface.
< WebClient { ...data } / >
// Render new client interface in readonly mode .
< ReadonlyClientView data = { data } auth = { auth } waitOnAuth = { waitOnAuth } / >
) : (
// Render legacy client interface.
< LegacyClientView
@ -31,25 +35,11 @@ export default function App() {
updateNode = { updateNode }
/ >
) }
{ data && < Footer licensesURL = { data . LicensesURL } / > }
{ data && ! loadingAuth && < Footer licensesURL = { data . LicensesURL } / > }
< / div >
)
}
function WebClient ( props : NodeData ) {
const { data : auth , loading : loadingAuth , waitOnAuth } = useAuth ( )
if ( loadingAuth ) {
return < div className = "text-center py-14" > Loading . . . < / div >
}
return props . DebugMode === "full" && auth ? . ok ? (
< ManagementClientView { ...props } / >
) : (
< ReadonlyClientView data = { props } auth = { auth } waitOnAuth = { waitOnAuth } / >
)
}
export function Footer ( props : { licensesURL : string ; className? : string } ) {
return (
< footer