Fix up UI around resource auth headers

server/routers/resource/listResources.ts

@@ -1,6 +1,6 @@
 import { Request, Response, NextFunction } from "express";
 import { z } from "zod";
-import { db } from "@server/db";
+import { db, resourceHeaderAuth } from "@server/db";
 import {
     resources,
     userResources,
@@ -56,7 +56,8 @@ function queryResources(accessibleResourceIds: number[], orgId: string) {
             proxyPort: resources.proxyPort,
             enabled: resources.enabled,
             domainId: resources.domainId,
-            niceId: resources.niceId
+            niceId: resources.niceId,
+            headerAuthId: resourceHeaderAuth.headerAuthId
         })
         .from(resources)
         .leftJoin(
@@ -67,6 +68,10 @@ function queryResources(accessibleResourceIds: number[], orgId: string) {
             resourcePincode,
             eq(resourcePincode.resourceId, resources.resourceId)
         )
+        .leftJoin(
+            resourceHeaderAuth,
+            eq(resourceHeaderAuth.resourceId, resources.resourceId)
+        )
         .where(
             and(
                 inArray(resources.resourceId, accessibleResourceIds),

src/app/[orgId]/settings/resources/[niceId]/authentication/page.tsx

@@ -837,7 +837,7 @@ export default function ResourceAuthenticationPage() {
                                     <Bot size="14" />
                                     <span>
                                         {authInfo.headerAuth
-                                            ? t("resourceHeaderAuthProtection")
+                                            ? t("resourceHeaderAuthProtectionEnabled")
                                             : t(
                                                   "resourceHeaderAuthProtectionDisabled"
                                               )}

src/app/[orgId]/settings/resources/page.tsx

@@ -86,7 +86,8 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
                 : resource.sso ||
                     resource.pincodeId !== null ||
                     resource.passwordId !== null ||
-                    resource.whitelist
+                    resource.whitelist ||
+                    resource.headerAuthId
                   ? "protected"
                   : "not_protected",
             enabled: resource.enabled,

src/components/ResourceInfoBox.tsx

@@ -43,7 +43,8 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                                     {authInfo.password ||
                                     authInfo.pincode ||
                                     authInfo.sso ||
-                                    authInfo.whitelist ? (
+                                    authInfo.whitelist ||
+                                    authInfo.headerAuth ? (
                                         <div className="flex items-start space-x-2 text-green-500">
                                             <ShieldCheck className="w-4 h-4 mt-0.5" />
                                             <span>{t("protected")}</span>