Adding HTTP Header Authentication

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

@@ -13,7 +13,7 @@ import {
     ListResourceUsersResponse
 } from "@server/routers/resource";
 import { Button } from "@app/components/ui/button";
-import { set, z } from "zod";
+import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
@@ -26,9 +26,10 @@ import {
     FormMessage
 } from "@app/components/ui/form";
 import { ListUsersResponse } from "@server/routers/user";
-import { Binary, Key } from "lucide-react";
+import { Binary, Key, Bot } from "lucide-react";
 import SetResourcePasswordForm from "../../../../../../components/SetResourcePasswordForm";
 import SetResourcePincodeForm from "../../../../../../components/SetResourcePincodeForm";
+import SetResourceHeaderAuthForm from "../../../../../../components/SetResourceHeaderAuthForm";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import {
@@ -57,10 +58,13 @@ import {
     SelectTrigger,
     SelectValue
 } from "@app/components/ui/select";
+<<<<<<< HEAD
 import { Separator } from "@app/components/ui/separator";
 import { build } from "@server/build";
 import { usePrivateSubscriptionStatusContext } from "@app/hooks/privateUseSubscriptionStatusContext";
 import { TierId } from "@server/lib/private/billing/tiers";
+=======
+>>>>>>> 6f6c351f (Adding HTTP Header Authentication)
 
 const UsersRolesFormSchema = z.object({
     roles: z.array(
@@ -140,9 +144,12 @@ export default function ResourceAuthenticationPage() {
         useState(false);
     const [loadingRemoveResourcePincode, setLoadingRemoveResourcePincode] =
         useState(false);
+    const [loadingRemoveResourceHeaderAuth, setLoadingRemoveResourceHeaderAuth] =
+        useState(false);
 
     const [isSetPasswordOpen, setIsSetPasswordOpen] = useState(false);
     const [isSetPincodeOpen, setIsSetPincodeOpen] = useState(false);
+    const [isSetHeaderAuthOpen, setIsSetHeaderAuthOpen] = useState(false);
 
     const usersRolesForm = useForm({
         resolver: zodResolver(UsersRolesFormSchema),
@@ -429,6 +436,37 @@ export default function ResourceAuthenticationPage() {
             .finally(() => setLoadingRemoveResourcePincode(false));
     }
 
+    function removeResourceHeaderAuth() {
+        setLoadingRemoveResourceHeaderAuth(true);
+
+        api.post(`/resource/${resource.resourceId}/header-auth`, {
+            user: null,
+            password: null
+        })
+            .then(() => {
+                toast({
+                    title: t("resourceHeaderAuthRemove"),
+                    description: t("resourceHeaderAuthRemoveDescription")
+                });
+
+                updateAuthInfo({
+                    headerAuth: false
+                });
+                router.refresh();
+            })
+            .catch((e) => {
+                toast({
+                    variant: "destructive",
+                    title: t("resourceErrorHeaderAuthRemove"),
+                    description: formatAxiosError(
+                        e,
+                        t("resourceErrorHeaderAuthRemoveDescription")
+                    )
+                });
+            })
+            .finally(() => setLoadingRemoveResourceHeaderAuth(false));
+    }
+
     if (pageLoading) {
         return <></>;
     }
@@ -463,6 +501,20 @@ export default function ResourceAuthenticationPage() {
                 />
             )}
 
+            {isSetHeaderAuthOpen && (
+                <SetResourceHeaderAuthForm
+                    open={isSetHeaderAuthOpen}
+                    setOpen={setIsSetHeaderAuthOpen}
+                    resourceId={resource.resourceId}
+                    onSetHeaderAuth={() => {
+                        setIsSetHeaderAuthOpen(false);
+                        updateAuthInfo({
+                            headerAuth: true
+                        });
+                    }}
+                />
+            )}
+
             <SettingsContainer>
                 <SettingsSection>
                     <SettingsSectionHeader>
@@ -778,6 +830,36 @@ export default function ResourceAuthenticationPage() {
                                         : t("pincodeAdd")}
                                 </Button>
                             </div>
+
+                            {/* Header Authentication Protection */}
+                            <div className="flex items-center justify-between border rounded-md p-2">
+                                <div
+                                    className={`flex items-center ${!authInfo.headerAuth ? "text-muted-foreground" : "text-green-500"} space-x-2 text-sm`}
+                                >
+                                    <Bot size="14" />
+                                    <span>
+                                        {t("resourceHeaderAuthProtection", {
+                                            status: authInfo.headerAuth
+                                                ? t("enabled")
+                                                : t("disabled")
+                                        })}
+                                    </span>
+                                </div>
+                                <Button
+                                    variant="secondary"
+                                    size="sm"
+                                    onClick={
+                                        authInfo.headerAuth
+                                            ? removeResourceHeaderAuth
+                                            : () => setIsSetHeaderAuthOpen(true)
+                                    }
+                                    loading={loadingRemoveResourceHeaderAuth}
+                                >
+                                    {authInfo.headerAuth
+                                        ? t("headerAuthRemove")
+                                        : t("headerAuthAdd")}
+                                </Button>
+                            </div>
                         </SettingsSectionForm>
                     </SettingsSectionBody>
                 </SettingsSection>

src/components/PermissionsSelectBox.tsx

@@ -57,6 +57,7 @@ function getActionsCategories(root: boolean) {
             [t('actionListAllowedResourceRoles')]: "listResourceRoles",
             [t('actionSetResourcePassword')]: "setResourcePassword",
             [t('actionSetResourcePincode')]: "setResourcePincode",
+            [t('actionSetResourceHeaderAuth')]: "setResourceHeaderAuth",
             [t('actionSetResourceEmailWhitelist')]: "setResourceWhitelist",
             [t('actionGetResourceEmailWhitelist')]: "getResourceWhitelist",
             [t('actionCreateSiteResource')]: "createSiteResource",

src/components/SetResourceHeaderAuthForm.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { Button } from "@app/components/ui/button";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { Input } from "@app/components/ui/input";
+import { toast } from "@app/hooks/useToast";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle
+} from "@app/components/Credenza";
+import { formatAxiosError } from "@app/lib/api";
+import { AxiosResponse } from "axios";
+import { Resource } from "@server/db";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useTranslations } from "next-intl";
+
+const setHeaderAuthFormSchema = z.object({
+    user: z.string().min(4).max(100),
+    password: z.string().min(4).max(100)
+});
+
+type SetHeaderAuthFormValues = z.infer<typeof setHeaderAuthFormSchema>;
+
+const defaultValues: Partial<SetHeaderAuthFormValues> = {
+    user: "",
+    password: ""
+};
+
+type SetHeaderAuthFormProps = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    resourceId: number;
+    onSetHeaderAuth?: () => void;
+};
+
+export default function SetResourceHeaderAuthForm({
+    open,
+    setOpen,
+    resourceId,
+    onSetHeaderAuth
+}: SetHeaderAuthFormProps) {
+    const api = createApiClient(useEnvContext());
+    const t = useTranslations();
+
+    const [loading, setLoading] = useState(false);
+
+    const form = useForm<SetHeaderAuthFormValues>({
+        resolver: zodResolver(setHeaderAuthFormSchema),
+        defaultValues
+    });
+
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+
+        form.reset();
+    }, [open]);
+
+    async function onSubmit(data: SetHeaderAuthFormValues) {
+        setLoading(true);
+
+        api.post<AxiosResponse<Resource>>(`/resource/${resourceId}/header-auth`, {
+            user: data.user,
+            password: data.password
+        })
+            .catch((e) => {
+                toast({
+                    variant: "destructive",
+                    title: t('resourceErrorHeaderAuthSetup'),
+                    description: formatAxiosError(
+                        e,
+                        t('resourceErrorHeaderAuthSetupDescription')
+                    )
+                });
+            })
+            .then(() => {
+                toast({
+                    title: t('resourceHeaderAuthSetup'),
+                    description: t('resourceHeaderAuthSetupDescription')
+                });
+
+                if (onSetHeaderAuth) {
+                    onSetHeaderAuth();
+                }
+            })
+            .finally(() => setLoading(false));
+    }
+
+    return (
+        <>
+            <Credenza
+                open={open}
+                onOpenChange={(val) => {
+                    setOpen(val);
+                    setLoading(false);
+                    form.reset();
+                }}
+            >
+                <CredenzaContent>
+                    <CredenzaHeader>
+                        <CredenzaTitle>{t('resourceHeaderAuthSetupTitle')}</CredenzaTitle>
+                        <CredenzaDescription>
+                            {t('resourceHeaderAuthSetupTitleDescription')}
+                        </CredenzaDescription>
+                    </CredenzaHeader>
+                    <CredenzaBody>
+                        <Form {...form}>
+                            <form
+                                onSubmit={form.handleSubmit(onSubmit)}
+                                className="space-y-4"
+                                id="set-header-auth-form"
+                            >
+                                <FormField
+                                    control={form.control}
+                                    name="user"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>{t('user')}</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    autoComplete="off"
+                                                    type="text"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="password"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>{t('password')}</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    autoComplete="off"
+                                                    type="password"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                            </form>
+                        </Form>
+                    </CredenzaBody>
+                    <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">{t('close')}</Button>
+                        </CredenzaClose>
+                        <Button
+                            type="submit"
+                            form="set-header-auth-form"
+                            loading={loading}
+                            disabled={loading}
+                        >
+                            {t('resourceHeaderAuthSubmit')}
+                        </Button>
+                    </CredenzaFooter>
+                </CredenzaContent>
+            </Credenza>
+        </>
+    );
+}