rsp2k/headplane
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: unify all colors

Browse source
This commit is contained in:
Aarnav Tale 2025-02-04 17:21:03 -05:00
parent d1f6c450c0
commit 287ac2dff0
No known key found for this signature in database
30 changed files with 233 additions and 284 deletions
Download patch file Download diff file Expand all files Collapse all files

82
app/routes/settings/auth-keys.tsx
View file

@ -119,31 +119,31 @@ export async function loader({ request }: LoaderFunctionArgs) {
export default function Page() {
const { keys, users, server } = useLoaderData<typeof loader>();
const [user, setUser] = useState('All');
const [status, setStatus] = useState('Active');
const [user, setUser] = useState('__headplane_all');
const [status, setStatus] = useState('active');
const filteredKeys = keys.filter((key) => {
if (user !== 'All' && key.user !== user) {
if (user !== '__headplane_all' && key.user !== user) {
return false;
}
if (status !== 'All') {
if (status !== 'all') {
const now = new Date();
const expiry = new Date(key.expiration);
if (status === 'Active') {
if (status === 'active') {
return !(expiry < now) && (!key.used || key.reusable);
}
if (status === 'Used/Expired') {
if (status === 'expired') {
return key.used || expiry < now;
}
if (status === 'Reusable') {
if (status === 'reusable') {
return key.reusable;
}
if (status === 'Ephemeral') {
if (status === 'ephemeral') {
return key.ephemeral;
}
}
@ -160,8 +160,8 @@ export default function Page() {
</RemixLink>
<span className="mx-2">/</span> Pre-Auth Keys
</p>
<h1 className="text-2xl font-medium mb-4">Pre-Auth Keys</h1>
<p className="text-gray-700 dark:text-gray-300 mb-4">
<h1 className="text-2xl font-medium mb-2">Pre-Auth Keys</h1>
<p className="mb-4">
Headscale fully supports pre-authentication keys in order to easily add
devices to your Tailnet. To learn more about using pre-authentication
keys, visit the{' '}
@ -173,40 +173,34 @@ export default function Page() {
</Link>
</p>
<AddPreAuthKey users={users} />
<div className="flex justify-between gap-4 mt-4">
<div className="w-full">
<p className="text-sm text-gray-500 dark:text-gray-300">
Filter by user
</p>
<Select
label="Filter by User"
placeholder="Select a user"
onSelectionChange={(value) => setUser(value?.toString() ?? '')}
>
{[
<Select.Item key="All">All</Select.Item>,
...users.map((user) => (
<Select.Item key={user.name}>{user.name}</Select.Item>
)),
]}
</Select>
</div>
<div className="w-full">
<p className="text-sm text-gray-500 dark:text-gray-300">
Filter by status
</p>
<Select
label="Filter by status"
placeholder="Select a status"
defaultSelectedKey="Active"
>
<Select.Item key="All">All</Select.Item>
<Select.Item>Active</Select.Item>
<Select.Item>Used/Expired</Select.Item>
<Select.Item>Reusable</Select.Item>
<Select.Item>Ephemeral</Select.Item>
</Select>
</div>
<div className="flex items-center gap-4 mt-4">
<Select
label="Filter by User"
placeholder="Select a user"
className="w-full"
defaultSelectedKey="__headplane_all"
onSelectionChange={(value) => setUser(value?.toString() ?? '')}
>
{[
<Select.Item key="__headplane_all">All</Select.Item>,
...users.map((user) => (
<Select.Item key={user.name}>{user.name}</Select.Item>
)),
]}
</Select>
<Select
label="Filter by status"
placeholder="Select a status"
className="w-full"
defaultSelectedKey="active"
onSelectionChange={(value) => setStatus(value?.toString() ?? '')}
>
<Select.Item key="all">All</Select.Item>
<Select.Item key="active">Active</Select.Item>
<Select.Item key="expired">Used/Expired</Select.Item>
<Select.Item key="reusable">Reusable</Select.Item>
<Select.Item key="ephemeral">Ephemeral</Select.Item>
</Select>
</div>
<TableList className="mt-4">
{filteredKeys.length === 0 ? (

9
app/routes/settings/components/agent.tsx
View file

@ -9,7 +9,7 @@ export default function AgentSection() {
<>
<div className="flex flex-col w-2/3">
<h1 className="text-2xl font-medium mb-4">Local Agent</h1>
<p className="text-gray-700 dark:text-gray-300">
<p>
Headplane provides a local agent that can be installed on a server to
provide additional features including viewing device information and
SSH access via the web interface (soon). To learn more about the agent
@ -23,12 +23,7 @@ export default function AgentSection() {
</p>
</div>
<RemixLink to="/settings/local-agent">
<div
className={cn(
'text-lg font-medium flex items-center',
'text-gray-700 dark:text-gray-300',
)}
>
<div className={cn('text-lg font-medium flex items-center')}>
Manage Agent
<ArrowRightIcon className="w-5 h-5 ml-2" />
</div>

23
app/routes/settings/components/agent/manage.tsx
View file

@ -1,5 +1,5 @@
import Card from '~/components/Card'
import StatusCircle from '~/components/StatusCircle'
import Card from '~/components/Card';
import StatusCircle from '~/components/StatusCircle';
import type { HostInfo } from '~/types';
import * as hinfo from '~/utils/host-info';
@ -12,26 +12,21 @@ export default function AgentManagement({ reachable, hostInfo }: Props) {
console.log('hostInfo:', hostInfo);
return (
<div className="flex flex-col w-2/3">
<h1 className="text-2xl font-medium mb-4">
Local Agent Configuration
</h1>
<p className="text-gray-700 dark:text-gray-300 mb-8">
A local agent has already been configured for this
Headplane instance. You can manage the agent settings here.
<h1 className="text-2xl font-medium mb-4">Local Agent Configuration</h1>
<p className="mb-8">
A local agent has already been configured for this Headplane instance.
You can manage the agent settings here.
</p>
<Card>
<div className="flex items-center gap-2">
<StatusCircle
isOnline={reachable}
className="w-4 h-4 px-1 w-fit"
/>
<StatusCircle isOnline={reachable} className="w-4 h-4 px-1" />
<div>
<p className="text-lg font-bold">
{hostInfo.Hostname ?? 'Unknown'}
</p>
<p className="leading-snug">
{hinfo.getTSVersion(hostInfo)}
<span className="ml-2 text-sm text-gray-500 dark:text-gray-300">
<span className="ml-2 text-sm text-headplane-600 dark:text-headplane-300">
{hinfo.getOSInfo(hostInfo)}
</span>
</p>
@ -40,5 +35,5 @@ export default function AgentManagement({ reachable, hostInfo }: Props) {
{JSON.stringify(hostInfo)}
</Card>
</div>
)
);
}

11
app/routes/settings/overview.tsx
View file

@ -11,7 +11,7 @@ export default function Page() {
<div className="flex flex-col gap-8 max-w-screen-lg">
<div className="flex flex-col w-2/3">
<h1 className="text-2xl font-medium mb-4">Settings</h1>
<p className="text-gray-700 dark:text-gray-300">
<p>
The settings page is still under construction. As I'm able to add more
features, I'll be adding them here. If you require any features, feel
free to open an issue on the GitHub repository.
@ -19,7 +19,7 @@ export default function Page() {
</div>
<div className="flex flex-col w-2/3">
<h1 className="text-2xl font-medium mb-4">Pre-Auth Keys</h1>
<p className="text-gray-700 dark:text-gray-300">
<p>
Headscale fully supports pre-authentication keys in order to easily
add devices to your Tailnet. To learn more about using
pre-authentication keys, visit the{' '}
@ -32,12 +32,7 @@ export default function Page() {
</p>
</div>
<RemixLink to="/settings/auth-keys">
<div
className={cn(
'text-lg font-medium flex items-center',
'text-gray-700 dark:text-gray-300',
)}
>
<div className="text-lg font-medium flex items-center">
Manage Auth Keys
<ArrowRightIcon className="w-5 h-5 ml-2" />
</div>