6f214dec48
This commit makes the following structural changes to the web client interface. No user-visible changes. 1. Splits login, legacy, readonly, and full management clients into their own components, and pulls them out into their own view files. 2. Renders the same Login component for all scenarios when the client is not logged in, regardless of legacy or debug mode. Styling comes from the existing legacy login, which is removed from legacy.tsx now that it is shared. 3. Adds a ui folder to hold non-Tailscale-specific components, starting with ProfilePic, previously housed in app.tsx. Updates tailscale/corp#14335 Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import React from "react"
|
|
import { NodeData } from "src/hooks/node-data"
|
|
import { ReactComponent as TailscaleIcon } from "src/icons/tailscale-icon.svg"
|
|
|
|
/**
|
|
* LoginClientView is rendered when the client is not authenticated
|
|
* to a tailnet.
|
|
*/
|
|
export default function LoginClientView({
|
|
data,
|
|
onLoginClick,
|
|
}: {
|
|
data: NodeData
|
|
onLoginClick: () => void
|
|
}) {
|
|
return (
|
|
<div className="mb-8 py-6 px-8 bg-white rounded-md shadow-2xl">
|
|
<TailscaleIcon className="my-2 mb-8" />
|
|
{data.IP ? (
|
|
<>
|
|
<div className="mb-6">
|
|
<p className="text-gray-700">
|
|
Your device's key has expired. Reauthenticate this device by
|
|
logging in again, or{" "}
|
|
<a
|
|
href="https://tailscale.com/kb/1028/key-expiry"
|
|
className="link"
|
|
target="_blank"
|
|
>
|
|
learn more
|
|
</a>
|
|
.
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={onLoginClick}
|
|
className="button button-blue w-full mb-4"
|
|
>
|
|
Reauthenticate
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="mb-6">
|
|
<h3 className="text-3xl font-semibold mb-3">Log in</h3>
|
|
<p className="text-gray-700">
|
|
Get started by logging in to your Tailscale network.
|
|
Or, learn more at{" "}
|
|
<a href="https://tailscale.com/" className="link" target="_blank">
|
|
tailscale.com
|
|
</a>
|
|
.
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={onLoginClick}
|
|
className="button button-blue w-full mb-4"
|
|
>
|
|
Log In
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|