TheArchive/tailscale
1
0
Fork 0
mirror of https://github.com/tailscale/tailscale.git synced 2025-01-07 16:17:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

client/web: hook up remaining legacy POST requests

Browse Source 
Hooks up remaining legacy POST request from the React side in --dev.

Updates tailscale/corp#13775

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
This commit is contained in:
Sonia Appasamy 2023-08-22 11:44:36 -04:00 committed by Sonia Appasamy
parent db017d3b12
commit 50b558de74
3 changed files with 69 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/web/src/components/app.tsx
View File

@ -15,7 +15,7 @@ export default function App() {
) : ( ) : (
<> <>
<main className="container max-w-lg mx-auto mb-8 py-6 px-8 bg-white rounded-md shadow-2xl"> <main className="container max-w-lg mx-auto mb-8 py-6 px-8 bg-white rounded-md shadow-2xl">
<Header data={data} /> <Header data={data} updateNode={updateNode} />
<IP data={data} /> <IP data={data} />
<State data={data} updateNode={updateNode} /> <State data={data} updateNode={updateNode} />
</main> </main>

115
client/web/src/components/legacy.tsx
View File

@ -7,9 +7,13 @@ import { NodeData, NodeUpdate } from "src/hooks/node-data"
// purely to ease migration to the new React-based web client, and will // purely to ease migration to the new React-based web client, and will
// eventually be completely removed. // eventually be completely removed.
export function Header(props: { data: NodeData }) { export function Header({
const { data } = props data,
updateNode,
}: {
data: NodeData
updateNode: (update: NodeUpdate) => void
}) {
return ( return (
<header className="flex justify-between items-center min-width-0 py-2 mb-8"> <header className="flex justify-between items-center min-width-0 py-2 mb-8">
<svg <svg
@ -61,41 +65,52 @@ export function Header(props: { data: NodeData }) {
></circle> ></circle>
</svg> </svg>
<div className="flex items-center justify-end space-x-2 w-2/3"> <div className="flex items-center justify-end space-x-2 w-2/3">
{data.Profile && ( {data.Profile &&
<> data.Status !== "NoState" &&
<div className="text-right w-full leading-4"> data.Status !== "NeedsLogin" && (
<h4 className="truncate leading-normal"> <>
{data.Profile.LoginName} <div className="text-right w-full leading-4">
</h4> <h4 className="truncate leading-normal">
<div className="text-xs text-gray-500 text-right"> {data.Profile.LoginName}
<a href="#" className="hover:text-gray-700 js-loginButton"> </h4>
Switch account <div className="text-xs text-gray-500 text-right">
</a>{" "} <button
|{" "} onClick={() => updateNode({ Reauthenticate: true })}
<a href="#" className="hover:text-gray-700 js-loginButton"> className="hover:text-gray-700"
Reauthenticate >
</a>{" "} Switch account
|{" "} </button>{" "}
<a href="#" className="hover:text-gray-700 js-logoutButton"> |{" "}
Logout <button
</a> onClick={() => updateNode({ Reauthenticate: true })}
className="hover:text-gray-700"
>
Reauthenticate
</button>{" "}
|{" "}
<button
onClick={() => updateNode({ ForceLogout: true })}
className="hover:text-gray-700"
>
Logout
</button>
</div>
</div> </div>
</div> <div className="relative flex-shrink-0 w-8 h-8 rounded-full overflow-hidden">
<div className="relative flex-shrink-0 w-8 h-8 rounded-full overflow-hidden"> {data.Profile.ProfilePicURL ? (
{data.Profile.ProfilePicURL ? ( <div
<div className="w-8 h-8 flex pointer-events-none rounded-full bg-gray-200"
className="w-8 h-8 flex pointer-events-none rounded-full bg-gray-200" style={{
style={{ backgroundImage: `url(${data.Profile.ProfilePicURL})`,
backgroundImage: `url(${data.Profile.ProfilePicURL})`, backgroundSize: "cover",
backgroundSize: "cover", }}
}} />
/> ) : (
) : ( <div className="w-8 h-8 flex pointer-events-none rounded-full border border-gray-400 border-dashed" />
<div className="w-8 h-8 flex pointer-events-none rounded-full border border-gray-400 border-dashed" /> )}
)} </div>
</div> </>
</> )}
)}
</div> </div>
</header> </header>
) )
@ -129,9 +144,9 @@ export function IP(props: { data: NodeData }) {
<line x1="6" y1="6" x2="6.01" y2="6"></line> <line x1="6" y1="6" x2="6.01" y2="6"></line>
<line x1="6" y1="18" x2="6.01" y2="18"></line> <line x1="6" y1="18" x2="6.01" y2="18"></line>
</svg> </svg>
<div> <h4 className="font-semibold truncate mr-2">
<h4 className="font-semibold truncate mr-2">{data.DeviceName}</h4> {data.DeviceName || "Your device"}
</div> </h4>
</div> </div>
<h5>{data.IP}</h5> <h5>{data.IP}</h5>
</div> </div>
@ -190,11 +205,12 @@ export function State({
. .
</p> </p>
</div> </div>
<a href="#" className="mb-4 js-loginButton" target="_blank"> <button
<button className="button button-blue w-full"> onClick={() => updateNode({ Reauthenticate: true })}
Reauthenticate className="button button-blue w-full mb-4"
</button> >
</a> Reauthenticate
</button>
</> </>
) )
} else { } else {
@ -215,9 +231,12 @@ export function State({
. .
</p> </p>
</div> </div>
<a href="#" className="mb-4 js-loginButton" target="_blank"> <button
<button className="button button-blue w-full">Log In</button> onClick={() => updateNode({ Reauthenticate: true })}
</a> className="button button-blue w-full mb-4"
>
Log In
</button>
</> </>
) )
} }

1
client/web/src/hooks/node-data.ts
View File

@ -56,6 +56,7 @@ export default function useNodeData() {
setIsPosting(true) setIsPosting(true)
update = { update = {
...update,
// Default to current data value for any unset fields. // Default to current data value for any unset fields.
AdvertiseRoutes: AdvertiseRoutes:
update.AdvertiseRoutes !== undefined update.AdvertiseRoutes !== undefined