feat: refactor several components and clean up ui

app/routes/auth/login/config-error.tsx

@@ -3,7 +3,7 @@ import { AlertCircle, CloudOff } from "lucide-react";
 import Card from "~/components/Card";
 import Code from "~/components/Code";
 import Link from "~/components/link";
-import { OidcConnectorError } from "~/server/web/oidc-connector";
+import type { OidcConnectorError } from "~/server/web/oidc-connector";
 
 export function OidcDiscoveryFailedNotice() {
   return (
@@ -34,11 +34,7 @@ export function OidcConfigErrorNotice({ errors }: { errors: OidcConnectorError[]
             <li key={code.key}>{code.node}</li>
           ))}
         </ul>{" "}
-        <Link
-          isExternal
-          name="Headplane OIDC Issues"
-          to="https://headplane.net/configuration/sso#troubleshooting"
-        >
+        <Link external styled to="https://headplane.net/configuration/sso#troubleshooting">
           Learn more
         </Link>
       </Card.Text>
@@ -54,7 +50,7 @@ function mapOidcErrorsToMessages(errors: OidcConnectorError[]) {
 
   for (const error of errors) {
     switch (error) {
-      case "INVALID_API_KEY":
+      case "INVALID_API_KEY": {
         messages.push({
           key: error,
           node: (
@@ -65,8 +61,9 @@ function mapOidcErrorsToMessages(errors: OidcConnectorError[]) {
           ),
         });
         break;
+      }
 
-      case "MISSING_AUTHORIZATION_ENDPOINT":
+      case "MISSING_AUTHORIZATION_ENDPOINT": {
         messages.push({
           key: error,
           node: (
@@ -77,8 +74,9 @@ function mapOidcErrorsToMessages(errors: OidcConnectorError[]) {
           ),
         });
         break;
+      }
 
-      case "MISSING_TOKEN_ENDPOINT":
+      case "MISSING_TOKEN_ENDPOINT": {
         messages.push({
           key: error,
           node: (
@@ -89,8 +87,9 @@ function mapOidcErrorsToMessages(errors: OidcConnectorError[]) {
           ),
         });
         break;
+      }
 
-      case "MISSING_USERINFO_ENDPOINT":
+      case "MISSING_USERINFO_ENDPOINT": {
         messages.push({
           key: error,
           node: (
@@ -101,8 +100,9 @@ function mapOidcErrorsToMessages(errors: OidcConnectorError[]) {
           ),
         });
         break;
+      }
 
-      case "MISSING_REQUIRED_CLAIMS":
+      case "MISSING_REQUIRED_CLAIMS": {
         messages.push({
           key: error,
           node: (
@@ -113,8 +113,9 @@ function mapOidcErrorsToMessages(errors: OidcConnectorError[]) {
           ),
         });
         break;
+      }
 
-      case "UNKNOWN_ERROR":
+      case "UNKNOWN_ERROR": {
         messages.push({
           key: error,
           node: (
@@ -125,6 +126,7 @@ function mapOidcErrorsToMessages(errors: OidcConnectorError[]) {
           ),
         });
         break;
+      }
     }
   }
 

app/routes/auth/login/page.tsx

@@ -27,7 +27,7 @@ export async function loader({ request, context }: Route.LoaderArgs) {
   const oidcConnector = await context.oidc?.connector.get();
 
   // MARK: This works because the OIDC connector will always return false
-  // for `isExclusive` if the OIDC config isn't usable.
+  // For `isExclusive` if the OIDC config isn't usable.
   if (oidcConnector?.isExclusive && urlState !== "logout") {
     return redirect("/oidc/start");
   }
@@ -63,14 +63,14 @@ export default function Page({ loaderData, actionData }: Route.ComponentProps) {
 
   useEffect(() => {
     // State is a one time thing, we need to remove it after it has
-    // been consumed to prevent logic loops.
+    // Been consumed to prevent logic loops.
     if (urlState !== null) {
       const searchParams = new URLSearchParams(params);
       searchParams.delete("s");
 
       // Replacing because it's not a navigation, just a cleanup of the URL
       // We can't use the useSearchParams method since it revalidates
-      // which will trigger a full reload
+      // Which will trigger a full reload
       const newUrl = searchParams.toString()
         ? `{${window.location.pathname}?${searchParams.toString()}`
         : window.location.pathname;
@@ -103,8 +103,8 @@ export default function Page({ loaderData, actionData }: Route.ComponentProps) {
                 Headplane is configured to use secure cookies, but this site is being served over an
                 insecure connection and login will not work correctly.{" "}
                 <Link
-                  isExternal
-                  name="Headplane Common Issues"
+                  external
+                  styled
                   to="https://headplane.net/configuration/common-issues#issue-logging-in-does-not-do-anything"
                 >
                   Learn more.