fix: password input on sensible fields (#134)

Co-authored-by: Théo LAGACHE <theo.lagache@soluce-technologies.com>

src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/notifications/forms/discord.form.tsx

@@ -1,12 +1,17 @@
 import { UseFormReturn } from "react-hook-form";
-import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
+import {
-import {Input} from "@/components/ui/input";
+  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>
         )}
       />
     </>
-    )
+  );
-}
+};

src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/notifications/forms/gotify.form.tsx

@@ -1,12 +1,18 @@
-import {UseFormReturn} from "react-hook-form";
+import type { 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 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>
         )}
       />
     </>
-    )
+  );
-}
+};

src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/notifications/forms/ntfy.form.tsx

@@ -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/>

src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/notifications/forms/slack.form.tsx

@@ -1,13 +1,17 @@
-
 import { UseFormReturn } from "react-hook-form";
-import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
+import {
-import {Input} from "@/components/ui/input";
+  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>
         )}
       />
     </>
-    )
+  );
-}
+};

src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/notifications/forms/telegram.form.tsx

@@ -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>
         )}
       />
     </>
-    )
+  );
-}
+};

src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/notifications/forms/webhook.form.tsx

@@ -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>
     </>
-    )
+  );
-}
+};

src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/storages/forms/s3.form.tsx

@@ -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
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
-                                checked={field.value}
-                                onCheckedChange={field.onChange}
-                            />
             </FormControl>
             <FormMessage />
           </FormItem>
         )}
       />
-
     </>
-    )
+  );
-}
+};