fix: password input on sensible fields (#134)

Co-authored-by: Théo LAGACHE <theo.lagache@soluce-technologies.com>
This commit is contained in:
Théo LAGACHE
2026-03-04 13:24:10 +01:00
committed by GitHub
co-authored by Théo LAGACHE
parent 85c0445a64
commit 90be3ab731
7 changed files with 379 additions and 330 deletions
@@ -1,12 +1,17 @@
import { UseFormReturn } from "react-hook-form";
import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
import {Input} from "@/components/ui/input";
import {
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Separator } from "@/components/ui/separator";
import { PasswordInput } from "@/components/ui/password-input";
type NotifierDiscordFormProps = {
form: UseFormReturn<any, any, any>
}
form: UseFormReturn<any, any, any>;
};
export const NotifierDiscordForm = ({ form }: NotifierDiscordFormProps) => {
return (
@@ -19,12 +24,15 @@ export const NotifierDiscordForm = ({form}: NotifierDiscordFormProps) => {
<FormItem>
<FormLabel>Discord Webhook URL</FormLabel>
<FormControl>
<Input {...field} placeholder="https://discord.com/api/webhooks/..."/>
<PasswordInput
{...field}
placeholder="https://discord.com/api/webhooks/..."
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</>
)
}
);
};
@@ -1,12 +1,18 @@
import {UseFormReturn} from "react-hook-form";
import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
import type { UseFormReturn } from "react-hook-form";
import {
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import { PasswordInput } from "@/components/ui/password-input";
type NotifierGotifyFormProps = {
form: UseFormReturn<any, any, any>
}
form: UseFormReturn<any, any, any>;
};
export const NotifierGotifyForm = ({ form }: NotifierGotifyFormProps) => {
return (
@@ -32,12 +38,12 @@ export const NotifierGotifyForm = ({form}: NotifierGotifyFormProps) => {
<FormItem>
<FormLabel>Application Token</FormLabel>
<FormControl>
<Input {...field} placeholder="A1b2C3d4E5f6G7h"/>
<PasswordInput {...field} placeholder="A1b2C3d4E5f6G7h" />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</>
)
}
);
};
@@ -49,7 +49,7 @@ export const NotifierNtfyForm = ({form}: NotifierNtfyFormProps) => {
<FormItem>
<FormLabel>Access Token (Optional)</FormLabel>
<FormControl>
<Input {...field} placeholder="tk_..."/>
<PasswordInput {...field} placeholder="tk_..."/>
</FormControl>
<p className="text-xs text-muted-foreground">Only required for protected topics or self-hosted instances with auth.</p>
<FormMessage/>
@@ -1,13 +1,17 @@
import { UseFormReturn } from "react-hook-form";
import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
import {Input} from "@/components/ui/input";
import {
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Separator } from "@/components/ui/separator";
import { PasswordInput } from "@/components/ui/password-input";
type NotifierSmtpFormProps = {
form: UseFormReturn<any, any, any>
}
form: UseFormReturn<any, any, any>;
};
export const NotifierSlackForm = ({ form }: NotifierSmtpFormProps) => {
return (
@@ -20,12 +24,15 @@ export const NotifierSlackForm = ({form}: NotifierSmtpFormProps) => {
<FormItem>
<FormLabel>Slack Webhook URL</FormLabel>
<FormControl>
<Input {...field} placeholder="https://hooks.slack.com/services/..."/>
<PasswordInput
{...field}
placeholder="https://hooks.slack.com/services/..."
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</>
)
}
);
};
@@ -1,12 +1,18 @@
import { UseFormReturn } from "react-hook-form";
import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
import {
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import { PasswordInput } from "@/components/ui/password-input";
type NotifierTelegramFormProps = {
form: UseFormReturn<any, any, any>
}
form: UseFormReturn<any, any, any>;
};
export const NotifierTelegramForm = ({ form }: NotifierTelegramFormProps) => {
return (
@@ -19,7 +25,10 @@ export const NotifierTelegramForm = ({form}: NotifierTelegramFormProps) => {
<FormItem>
<FormLabel>Telegram Bot Token</FormLabel>
<FormControl>
<Input {...field} placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"/>
<PasswordInput
{...field}
placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"
/>
</FormControl>
<FormMessage />
</FormItem>
@@ -35,9 +44,19 @@ export const NotifierTelegramForm = ({form}: NotifierTelegramFormProps) => {
<Input {...field} placeholder="-100123456789 or 123456789" />
</FormControl>
<p className="text-xs text-muted-foreground">
You must start the conversation with the bot first (<strong>/start</strong>). <br/>
You must start the conversation with the bot first (
<strong>/start</strong>). <br />
For groups, add the bot to the group. <br />
You can use <a href="https://t.me/userinfobot" target="_blank" rel="noopener noreferrer" className="underline">@userinfobot</a> to find your ID.
You can use{" "}
<a
href="https://t.me/userinfobot"
target="_blank"
rel="noopener noreferrer"
className="underline"
>
@userinfobot
</a>{" "}
to find your ID.
</p>
<FormMessage />
</FormItem>
@@ -53,12 +72,13 @@ export const NotifierTelegramForm = ({form}: NotifierTelegramFormProps) => {
<Input {...field} placeholder="123456" />
</FormControl>
<p className="text-xs text-muted-foreground">
Unique identifier for the target message thread (topic) of the forum; for forum supergroups only
Unique identifier for the target message thread (topic) of the
forum; for forum supergroups only
</p>
<FormMessage />
</FormItem>
)}
/>
</>
)
}
);
};
@@ -1,12 +1,18 @@
import { UseFormReturn } from "react-hook-form";
import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
import {
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import { PasswordInput } from "@/components/ui/password-input";
type NotifierWebhookFormProps = {
form: UseFormReturn<any, any, any>
}
form: UseFormReturn<any, any, any>;
};
export const NotifierWebhookForm = ({ form }: NotifierWebhookFormProps) => {
return (
@@ -49,7 +55,7 @@ export const NotifierWebhookForm = ({form}: NotifierWebhookFormProps) => {
<FormItem>
<FormLabel>Secret Value (Optional)</FormLabel>
<FormControl>
<Input {...field} placeholder="Secret value..."/>
<PasswordInput {...field} placeholder="Secret value..." />
</FormControl>
<FormMessage />
</FormItem>
@@ -58,8 +64,9 @@ export const NotifierWebhookForm = ({form}: NotifierWebhookFormProps) => {
</div>
</div>
<p className="text-xs text-muted-foreground mt-2">
If provided, the secret will be sent in the specified header (defaults to <code>X-Webhook-Secret</code>).
If provided, the secret will be sent in the specified header (defaults
to <code>X-Webhook-Secret</code>).
</p>
</>
)
}
);
};
@@ -1,14 +1,19 @@
import { UseFormReturn } from "react-hook-form";
import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
import {
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import { PasswordInput } from "@/components/ui/password-input";
import { Switch } from "@/components/ui/switch";
type StorageS3FormProps = {
form: UseFormReturn<any, any, any>
}
form: UseFormReturn<any, any, any>;
};
export const StorageS3Form = ({ form }: StorageS3FormProps) => {
return (
@@ -100,16 +105,12 @@ export const StorageS3Form = ({form}: StorageS3FormProps) => {
<FormItem>
<FormLabel>Use SSL</FormLabel>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
<Switch checked={field.value} onCheckedChange={field.onChange} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</>
)
}
);
};