Fix: Extend Basic Auth compatibility with browsers

This commit is contained in:
Julien Breton
2025-12-01 01:18:09 +01:00
parent 02fbc279b5
commit 46ed27a218
31 changed files with 527 additions and 300 deletions

View File

@@ -1,6 +1,6 @@
"use client";
import { Button } from "@app/components/ui/button";
import {Button} from "@app/components/ui/button";
import {
Form,
FormControl,
@@ -9,12 +9,12 @@ import {
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 {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,
@@ -25,23 +25,27 @@ import {
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";
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";
import {SwitchInput} from "@/components/SwitchInput";
import {InfoPopup} from "@/components/ui/info-popup";
const setHeaderAuthFormSchema = z.object({
user: z.string().min(4).max(100),
password: z.string().min(4).max(100)
password: z.string().min(4).max(100),
extendedCompatibility: z.boolean()
});
type SetHeaderAuthFormValues = z.infer<typeof setHeaderAuthFormSchema>;
const defaultValues: Partial<SetHeaderAuthFormValues> = {
user: "",
password: ""
password: "",
extendedCompatibility: false
};
type SetHeaderAuthFormProps = {
@@ -52,11 +56,11 @@ type SetHeaderAuthFormProps = {
};
export default function SetResourceHeaderAuthForm({
open,
setOpen,
resourceId,
onSetHeaderAuth
}: SetHeaderAuthFormProps) {
open,
setOpen,
resourceId,
onSetHeaderAuth
}: SetHeaderAuthFormProps) {
const api = createApiClient(useEnvContext());
const t = useTranslations();
@@ -80,18 +84,9 @@ export default function SetResourceHeaderAuthForm({
api.post<AxiosResponse<Resource>>(`/resource/${resourceId}/header-auth`, {
user: data.user,
password: data.password
password: data.password,
extendedCompatibility: data.extendedCompatibility
})
.catch((e) => {
toast({
variant: "destructive",
title: t('resourceErrorHeaderAuthSetup'),
description: formatAxiosError(
e,
t('resourceErrorHeaderAuthSetupDescription')
)
});
})
.then(() => {
toast({
title: t('resourceHeaderAuthSetup'),
@@ -102,6 +97,16 @@ export default function SetResourceHeaderAuthForm({
onSetHeaderAuth();
}
})
.catch((e) => {
toast({
variant: "destructive",
title: t('resourceErrorHeaderAuthSetup'),
description: formatAxiosError(
e,
t('resourceErrorHeaderAuthSetupDescription')
)
});
})
.finally(() => setLoading(false));
}
@@ -132,7 +137,7 @@ export default function SetResourceHeaderAuthForm({
<FormField
control={form.control}
name="user"
render={({ field }) => (
render={({field}) => (
<FormItem>
<FormLabel>{t('user')}</FormLabel>
<FormControl>
@@ -142,14 +147,14 @@ export default function SetResourceHeaderAuthForm({
{...field}
/>
</FormControl>
<FormMessage />
<FormMessage/>
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
render={({field}) => (
<FormItem>
<FormLabel>{t('password')}</FormLabel>
<FormControl>
@@ -159,7 +164,25 @@ export default function SetResourceHeaderAuthForm({
{...field}
/>
</FormControl>
<FormMessage />
<FormMessage/>
</FormItem>
)}
/>
<FormField
control={form.control}
name="extendedCompatibility"
render={({field}) => (
<FormItem>
<FormControl>
<SwitchInput
id="header-auth-compatibility-toggle"
label={t("headerAuthCompatibility")}
info={t('headerAuthCompatibilityInfo')}
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
<FormMessage/>
</FormItem>
)}
/>