diff --git a/app/components/Attribute.tsx b/app/components/Attribute.tsx index a1e1f0d..d67b6f5 100644 --- a/app/components/Attribute.tsx +++ b/app/components/Attribute.tsx @@ -7,6 +7,7 @@ export interface AttributeProps { value: string; isCopyable?: boolean; link?: string; + suppressHydrationWarning?: boolean; } export default function Attribute({ @@ -14,6 +15,7 @@ export default function Attribute({ value, link, isCopyable, + suppressHydrationWarning, }: AttributeProps) { return (
@@ -27,6 +29,7 @@ export default function Attribute({ )}
-

{value}

+

+ {value} +

diff --git a/app/layouts/shell.tsx b/app/layouts/shell.tsx index 8c3d2c3..1a49cdb 100644 --- a/app/layouts/shell.tsx +++ b/app/layouts/shell.tsx @@ -7,13 +7,13 @@ import { } from 'react-router'; import Button from '~/components/Button'; import Card from '~/components/Card'; -import Code from '~/components/Code'; import Footer from '~/components/Footer'; import Header from '~/components/Header'; import type { LoadContext } from '~/server'; import { Capabilities } from '~/server/web/roles'; import { User } from '~/types'; import log from '~/utils/log'; +import toast from '~/utils/toast'; // This loads the bare minimum for the application to function // So we know that if context fails to load then well, oops? @@ -122,7 +122,7 @@ export default function Shell() { <>
{/* Always show the outlet if we are onboarding */} - {(data.onboarding ? true : data.uiAccess) ? ( + {(data.onboarding ? true : !data.uiAccess) ? ( ) : ( @@ -134,11 +134,21 @@ export default function Shell() { Connect to Tailscale with your devices to access this Tailnet. Use this command to help you get started: - +

+ Click this button to copy the command. +

Your account does not have access to the UI. Please contact your administrator if you believe this is a mistake. diff --git a/app/routes/machines/components/machine-row.tsx b/app/routes/machines/components/machine-row.tsx index 5f900e9..7597b55 100644 --- a/app/routes/machines/components/machine-row.tsx +++ b/app/routes/machines/components/machine-row.tsx @@ -180,7 +180,7 @@ export default function MachineRow({ isOnline={machine.online && !expired} className="w-4 h-4" /> -

+

{machine.online && !expired ? 'Connected' : new Date(machine.lastSeen).toLocaleString()} diff --git a/app/routes/machines/machine.tsx b/app/routes/machines/machine.tsx index ab93056..0d6eaeb 100644 --- a/app/routes/machines/machine.tsx +++ b/app/routes/machines/machine.tsx @@ -310,14 +310,17 @@ export default function Page() { diff --git a/app/routes/settings/components/key.tsx b/app/routes/settings/components/key.tsx index 54c6ddf..73a8ed5 100644 --- a/app/routes/settings/components/key.tsx +++ b/app/routes/settings/components/key.tsx @@ -22,15 +22,19 @@ export default function AuthKeyRow({ authKey, server }: Props) { - - + +

To use this key, run the following command on your device:

tailscale up --login-server {server} --authkey {authKey.key} -
+
{(authKey.used && !authKey.reusable) || new Date(authKey.expiration) < new Date() ? undefined : ( diff --git a/app/routes/users/components/user-row.tsx b/app/routes/users/components/user-row.tsx index 7fd2329..b6d9118 100644 --- a/app/routes/users/components/user-row.tsx +++ b/app/routes/users/components/user-row.tsx @@ -42,7 +42,10 @@ export default function UserRow({ user, role }: UserRowProps) {

{mapRoleToName(role)}

-

+

{new Date(user.createdAt).toLocaleDateString()}

@@ -54,7 +57,9 @@ export default function UserRow({ user, role }: UserRowProps) { )} > -

{isOnline ? 'Connected' : new Date(lastSeen).toLocaleString()}

+

+ {isOnline ? 'Connected' : new Date(lastSeen).toLocaleString()} +

diff --git a/app/routes/users/onboarding.tsx b/app/routes/users/onboarding.tsx index 13faca7..52e4cee 100644 --- a/app/routes/users/onboarding.tsx +++ b/app/routes/users/onboarding.tsx @@ -12,7 +12,6 @@ import { } from 'react-router'; import Button from '~/components/Button'; import Card from '~/components/Card'; -import Code from '~/components/Code'; import Link from '~/components/Link'; import Options from '~/components/Options'; import StatusCircle from '~/components/StatusCircle'; @@ -21,6 +20,7 @@ import { Machine } from '~/types'; import cn from '~/utils/cn'; import { useLiveData } from '~/utils/live-data'; import log from '~/utils/log'; +import toast from '~/utils/toast'; export async function loader({ request, @@ -152,20 +152,19 @@ export default function Page() { } > -

+

+ Click this button to copy the command.{' '}