secret reference frontend usage

app/client/modules/notifications/components/create-notification-form.tsx

@@ -14,6 +14,7 @@ import {
 	FormMessage,
 } from "~/client/components/ui/form";
 import { Input } from "~/client/components/ui/input";
+import { SecretInput } from "~/client/components/ui/secret-input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
 import { Checkbox } from "~/client/components/ui/checkbox";
 import { notificationConfigSchema } from "~/schemas/notifications";
@@ -213,7 +214,11 @@ export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValue
 								<FormItem>
 									<FormLabel>Password (Optional)</FormLabel>
 									<FormControl>
-										<Input {...field} type="password" placeholder="••••••••" />
+										<SecretInput
+											{...field}
+											isDirty={form.getFieldState("password", form.formState).isDirty}
+											placeholder="••••••••"
+										/>
 									</FormControl>
 									<FormMessage />
 								</FormItem>
@@ -415,7 +420,11 @@ export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValue
 								<FormItem>
 									<FormLabel>App Token</FormLabel>
 									<FormControl>
-										<Input {...field} type="password" placeholder="••••••••" />
+										<SecretInput
+											{...field}
+											isDirty={form.getFieldState("token", form.formState).isDirty}
+											placeholder="••••••••"
+										/>
 									</FormControl>
 									<FormDescription>Application token from Gotify.</FormDescription>
 									<FormMessage />
@@ -510,7 +519,11 @@ export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValue
 								<FormItem>
 									<FormLabel>Password (Optional)</FormLabel>
 									<FormControl>
-										<Input {...field} type="password" placeholder="••••••••" />
+										<SecretInput
+											{...field}
+											isDirty={form.getFieldState("password", form.formState).isDirty}
+											placeholder="••••••••"
+										/>
 									</FormControl>
 									<FormDescription>Password for server authentication, if required.</FormDescription>
 									<FormMessage />
@@ -567,7 +580,11 @@ export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValue
 								<FormItem>
 									<FormLabel>API Token</FormLabel>
 									<FormControl>
-										<Input {...field} type="password" placeholder="••••••••" />
+										<SecretInput
+											{...field}
+											isDirty={form.getFieldState("apiToken", form.formState).isDirty}
+											placeholder="••••••••"
+										/>
 									</FormControl>
 									<FormDescription>Application API token from your Pushover application.</FormDescription>
 									<FormMessage />
@@ -627,7 +644,11 @@ export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValue
 								<FormItem>
 									<FormLabel>Bot Token</FormLabel>
 									<FormControl>
-										<Input {...field} type="password" placeholder="123456789:ABC-DEF1234ghIkl-zyx57W2v1u123ew11" />
+										<SecretInput
+											{...field}
+											isDirty={form.getFieldState("botToken", form.formState).isDirty}
+											placeholder="123456789:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"
+										/>
 									</FormControl>
 									<FormDescription>
 										Telegram bot token. Get this from BotFather when you create your bot.

app/client/modules/repositories/components/create-repository-form.tsx

@@ -16,6 +16,7 @@ import {
 	FormMessage,
 } from "../../../components/ui/form";
 import { Input } from "../../../components/ui/input";
+import { SecretInput } from "../../../components/ui/secret-input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../components/ui/select";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/ui/tooltip";
 import { useSystemInfo } from "~/client/hooks/use-system-info";
@@ -241,7 +242,12 @@ export const CreateRepositoryForm = ({
 									<FormItem>
 										<FormLabel>Repository Password</FormLabel>
 										<FormControl>
-											<Input type="password" placeholder="Enter repository password" {...field} />
+											<SecretInput
+												placeholder="Enter repository password"
+												value={field.value ?? ""}
+												onChange={field.onChange}
+												isDirty={form.getFieldState("customPassword", form.formState).isDirty}
+											/>
 										</FormControl>
 										<FormDescription>
 											The password used to encrypt this repository. It will be stored securely.

app/client/modules/repositories/components/repository-forms/azure-repository-form.tsx

@@ -8,6 +8,7 @@ import {
 	FormMessage,
 } from "../../../../components/ui/form";
 import { Input } from "../../../../components/ui/input";
+import { SecretInput } from "../../../../components/ui/secret-input";
 import type { RepositoryFormValues } from "../create-repository-form";
 
 type Props = {
@@ -52,7 +53,12 @@ export const AzureRepositoryForm = ({ form }: Props) => {
 					<FormItem>
 						<FormLabel>Account Key</FormLabel>
 						<FormControl>
-							<Input type="password" placeholder="••••••••" {...field} />
+							<SecretInput
+								placeholder="••••••••"
+								value={field.value ?? ""}
+								onChange={field.onChange}
+								isDirty={form.getFieldState("accountKey", form.formState).isDirty}
+							/>
 						</FormControl>
 						<FormDescription>Azure Storage account key for authentication.</FormDescription>
 						<FormMessage />

app/client/modules/repositories/components/repository-forms/r2-repository-form.tsx

@@ -8,6 +8,7 @@ import {
 	FormMessage,
 } from "../../../../components/ui/form";
 import { Input } from "../../../../components/ui/input";
+import { SecretInput } from "../../../../components/ui/secret-input";
 import type { RepositoryFormValues } from "../create-repository-form";
 
 type Props = {
@@ -68,7 +69,12 @@ export const R2RepositoryForm = ({ form }: Props) => {
 					<FormItem>
 						<FormLabel>Secret Access Key</FormLabel>
 						<FormControl>
-							<Input type="password" placeholder="••••••••" {...field} />
+							<SecretInput
+								placeholder="••••••••"
+								value={field.value ?? ""}
+								onChange={field.onChange}
+								isDirty={form.getFieldState("secretAccessKey", form.formState).isDirty}
+							/>
 						</FormControl>
 						<FormDescription>R2 API token Secret Access Key (shown once when creating token).</FormDescription>
 						<FormMessage />

app/client/modules/repositories/components/repository-forms/rest-repository-form.tsx

@@ -8,6 +8,7 @@ import {
 	FormMessage,
 } from "../../../../components/ui/form";
 import { Input } from "../../../../components/ui/input";
+import { SecretInput } from "../../../../components/ui/secret-input";
 import type { RepositoryFormValues } from "../create-repository-form";
 
 type Props = {
@@ -66,7 +67,12 @@ export const RestRepositoryForm = ({ form }: Props) => {
 					<FormItem>
 						<FormLabel>Password (Optional)</FormLabel>
 						<FormControl>
-							<Input type="password" placeholder="••••••••" {...field} />
+							<SecretInput
+								placeholder="••••••••"
+								value={field.value ?? ""}
+								onChange={field.onChange}
+								isDirty={form.getFieldState("password", form.formState).isDirty}
+							/>
 						</FormControl>
 						<FormDescription>Password for REST server authentication.</FormDescription>
 						<FormMessage />

app/client/modules/repositories/components/repository-forms/s3-repository-form.tsx

@@ -8,6 +8,7 @@ import {
 	FormMessage,
 } from "../../../../components/ui/form";
 import { Input } from "../../../../components/ui/input";
+import { SecretInput } from "../../../../components/ui/secret-input";
 import type { RepositoryFormValues } from "../create-repository-form";
 
 type Props = {
@@ -66,7 +67,12 @@ export const S3RepositoryForm = ({ form }: Props) => {
 					<FormItem>
 						<FormLabel>Secret Access Key</FormLabel>
 						<FormControl>
-							<Input type="password" placeholder="••••••••" {...field} />
+							<SecretInput
+								placeholder="••••••••"
+								value={field.value ?? ""}
+								onChange={field.onChange}
+								isDirty={form.getFieldState("secretAccessKey", form.formState).isDirty}
+							/>
 						</FormControl>
 						<FormDescription>S3 secret access key for authentication.</FormDescription>
 						<FormMessage />

app/client/modules/volumes/components/volume-forms/smb-form.tsx

@@ -9,6 +9,7 @@ import {
 	FormMessage,
 } from "../../../../components/ui/form";
 import { Input } from "../../../../components/ui/input";
+import { SecretInput } from "../../../../components/ui/secret-input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../../components/ui/select";
 
 type Props = {
@@ -67,7 +68,12 @@ export const SMBForm = ({ form }: Props) => {
 					<FormItem>
 						<FormLabel>Password</FormLabel>
 						<FormControl>
-							<Input type="password" placeholder="••••••••" value={field.value} onChange={field.onChange} />
+							<SecretInput
+								placeholder="••••••••"
+								value={field.value ?? ""}
+								onChange={field.onChange}
+								isDirty={form.getFieldState("password", form.formState).isDirty}
+							/>
 						</FormControl>
 						<FormDescription>Password for SMB authentication.</FormDescription>
 						<FormMessage />

app/client/modules/volumes/components/volume-forms/webdav-form.tsx

@@ -9,6 +9,7 @@ import {
 	FormMessage,
 } from "../../../../components/ui/form";
 import { Input } from "../../../../components/ui/input";
+import { SecretInput } from "../../../../components/ui/secret-input";
 
 type Props = {
 	form: UseFormReturn<FormValues>;
@@ -66,7 +67,12 @@ export const WebDAVForm = ({ form }: Props) => {
 					<FormItem>
 						<FormLabel>Password (Optional)</FormLabel>
 						<FormControl>
-							<Input type="password" placeholder="••••••••" {...field} />
+							<SecretInput
+								placeholder="••••••••"
+								value={field.value ?? ""}
+								onChange={field.onChange}
+								isDirty={form.getFieldState("password", form.formState).isDirty}
+							/>
 						</FormControl>
 						<FormDescription>Password for WebDAV authentication (optional).</FormDescription>
 						<FormMessage />