feat: switch form fields to base-ui

This commit is contained in:
Aarnav Tale
2026-03-17 15:19:22 -04:00
parent 941971b8c7
commit 7403ebea06
75 changed files with 842 additions and 1086 deletions
+2 -2
View File
@@ -1,7 +1,7 @@
import { AlertCircle, CloudOff } from "lucide-react";
import Card from "~/components/Card";
import Code from "~/components/Code";
import Card from "~/components/card";
import Code from "~/components/code";
import Link from "~/components/link";
import type { OidcConnectorError } from "~/server/web/oidc-connector";
+11 -12
View File
@@ -1,15 +1,14 @@
import Card from '~/components/Card';
import Card from "~/components/card";
export default function Logout() {
return (
<div className="flex w-screen h-screen items-center justify-center">
<Card className="max-w-md m-4 sm:m-0">
<Card.Title>You have been logged out</Card.Title>
<Card.Text>
You can now close this window. If you would like to log in again,
please refresh the page.
</Card.Text>
</Card>
</div>
);
return (
<div className="flex h-screen w-screen items-center justify-center">
<Card className="m-4 max-w-md sm:m-0">
<Card.Title>You have been logged out</Card.Title>
<Card.Text>
You can now close this window. If you would like to log in again, please refresh the page.
</Card.Text>
</Card>
</div>
);
}
+50 -53
View File
@@ -1,63 +1,60 @@
import { AlertCircle } from 'lucide-react';
import Card from '~/components/Card';
import Code from '~/components/Code';
import { AlertCircle } from "lucide-react";
import Card from "~/components/card";
import Code from "~/components/code";
export function OidcErrorNotice({ code }: { code: string }) {
return (
<Card className="max-w-md m-4 sm:m-0 mb-4 sm:mb-4 border border-red-500">
<div className="flex items-center justify-between gap-4">
<Card.Title className="text-red-500">Configuration Issue(s)</Card.Title>
<AlertCircle className="w-6 h-6 mb-2 text-red-500" />
</div>
{getErrorMessage(code)}
</Card>
);
return (
<Card className="m-4 mb-4 max-w-md border border-red-500 sm:m-0 sm:mb-4">
<div className="flex items-center justify-between gap-4">
<Card.Title className="text-red-500">Configuration Issue(s)</Card.Title>
<AlertCircle className="mb-2 h-6 w-6 text-red-500" />
</div>
{getErrorMessage(code)}
</Card>
);
}
function getErrorMessage(code: string) {
switch (code) {
case 'error_no_query':
return (
<Card.Text>
The SSO provider did not correctly redirect back to Headplane with the
required parameters. Please ensure your SSO provider is configured
correctly.
</Card.Text>
);
switch (code) {
case "error_no_query":
return (
<Card.Text>
The SSO provider did not correctly redirect back to Headplane with the required
parameters. Please ensure your SSO provider is configured correctly.
</Card.Text>
);
case 'error_no_session':
case 'error_invalid_session':
return (
<Card.Text>
Unable to complete SSO login due to missing or invalid session data.
Ensure that your Headplane cookie configuration is correct and that
your browser is accepting cookies.
</Card.Text>
);
case "error_no_session":
case "error_invalid_session":
return (
<Card.Text>
Unable to complete SSO login due to missing or invalid session data. Ensure that your
Headplane cookie configuration is correct and that your browser is accepting cookies.
</Card.Text>
);
case 'error_no_sub':
return (
<Card.Text>
The SSO provider did not return a valid user identifier. Please ensure
your SSO provider is correctly configured to provide the{' '}
<Code>sub</Code> claim.
</Card.Text>
);
case "error_no_sub":
return (
<Card.Text>
The SSO provider did not return a valid user identifier. Please ensure your SSO provider
is correctly configured to provide the <Code>sub</Code> claim.
</Card.Text>
);
case 'error_auth_failed':
return (
<Card.Text>
Authentication with the SSO provider failed. Please try again later.
Headplane logs may provide more information.
</Card.Text>
);
case "error_auth_failed":
return (
<Card.Text>
Authentication with the SSO provider failed. Please try again later. Headplane logs may
provide more information.
</Card.Text>
);
default:
return (
<Card.Text>
An unknown error occurred during OIDC authentication. Please try again
later.
</Card.Text>
);
}
default:
return (
<Card.Text>
An unknown error occurred during OIDC authentication. Please try again later.
</Card.Text>
);
}
}
+4 -4
View File
@@ -3,9 +3,9 @@ import { useEffect, useState } from "react";
import { Form, redirect, useSearchParams } from "react-router";
import Button from "~/components/button";
import Card from "~/components/Card";
import Code from "~/components/Code";
import Input from "~/components/Input";
import Card from "~/components/card";
import Code from "~/components/code";
import Input from "~/components/input";
import Link from "~/components/link";
import { useLiveData } from "~/utils/live-data";
@@ -122,7 +122,7 @@ export default function Page({ loaderData, actionData }: Route.ComponentProps) {
</Card.Text>
<Input
className="mt-8 mb-2"
isRequired
required
label="API Key"
labelHidden
name="api_key"