diff --git a/client/web/src/components/app.tsx b/client/web/src/components/app.tsx index 28350e52e..eb403a5e7 100644 --- a/client/web/src/components/app.tsx +++ b/client/web/src/components/app.tsx @@ -1,30 +1,123 @@ import React from "react" import { Footer, Header, IP, State } from "src/components/legacy" -import useNodeData from "src/hooks/node-data" +import useNodeData, { NodeData } from "src/hooks/node-data" +import { ReactComponent as ConnectedDeviceIcon } from "src/icons/connected-device.svg" +import { ReactComponent as TailscaleIcon } from "src/icons/tailscale-icon.svg" +import { ReactComponent as TailscaleLogo } from "src/icons/tailscale-logo.svg" export default function App() { // TODO(sonia): use isPosting value from useNodeData // to fill loading states. const { data, refreshData, updateNode } = useNodeData() - return ( -
- {!data ? ( - // TODO(sonia): add a loading view -
Loading...
+ if (!data) { + // TODO(sonia): add a loading view + return
Loading...
+ } + + const needsLogin = data?.Status === "NeedsLogin" || data?.Status === "NoState" + + return !needsLogin && + (data.DebugMode === "login" || data.DebugMode === "full") ? ( +
+ {data.DebugMode === "login" ? ( + ) : ( - <> -
-
- - -
-
- + + )} +
+
+ ) : ( + // Legacy client UI +
+
+
+ + +
+
+
+ ) +} + +function LoginView(props: NodeData) { + return ( + <> +
+ +
+
+
+ +
+
+ Owned by +
+
+ {/* TODO(sonia): support tagged node profile view more eloquently */} + {props.Profile.LoginName} +
+
+
+
+
+ +
+
+ {props.DeviceName} +
+
{props.IP}
+
+
+ +
+
+ + ) +} + +function ManageView(props: NodeData) { + return ( +
+
+ +
+

{props.Profile.LoginName}

+ {/* TODO(sonia): support tagged node profile view more eloquently */} + +
+
+

This device

+
+
+
+ +

{props.DeviceName}

+
+

{props.IP}

+
+
+

+ Tailscale is up and running. You can connect to this device from devices + in your tailnet by using its name or IP address. +

+
+ ) +} + +function ProfilePic({ url }: { url: string }) { + return ( +
+ {url ? ( +
+ ) : ( +
)}
) diff --git a/client/web/src/components/legacy.tsx b/client/web/src/components/legacy.tsx index 5d7e269f1..a6f8ca7de 100644 --- a/client/web/src/components/legacy.tsx +++ b/client/web/src/components/legacy.tsx @@ -282,14 +282,14 @@ export function State({ } } -export function Footer(props: { data: NodeData }) { - const { data } = props - +export function Footer(props: { licensesURL: string; className?: string }) { return ( -