refactor(secret-input): remove isDirty check

This commit is contained in:
Nicolas Meienberger
2025-12-16 20:45:33 +01:00
parent e39552ee68
commit 47b3c80317
9 changed files with 15 additions and 68 deletions

View File

@@ -14,11 +14,9 @@ export const isStoredSecretValue = (value?: string): boolean => {
return value.startsWith("env://") || value.startsWith("file://") || value.startsWith("encv1:");
};
type SecretInputProps = Omit<React.ComponentProps<typeof Input>, "type"> & {
isDirty?: boolean;
};
type SecretInputProps = Omit<React.ComponentProps<typeof Input>, "type">
export const SecretInput = ({ className, isDirty, value, ...props }: SecretInputProps) => {
export const SecretInput = ({ className, value, ...props }: SecretInputProps) => {
const [revealed, setRevealed] = useState(false);
const showAsPlaintext = useMemo(() => {
@@ -26,8 +24,8 @@ export const SecretInput = ({ className, isDirty, value, ...props }: SecretInput
return false;
}
return isStoredSecretValue(value) && !isDirty;
}, [isDirty, value]);
return isStoredSecretValue(value);
}, [value]);
const type = useMemo(() => {
if (showAsPlaintext) {

View File

@@ -214,11 +214,7 @@ export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValue
<FormItem>
<FormLabel>Password (Optional)</FormLabel>
<FormControl>
<SecretInput
{...field}
isDirty={form.getFieldState("password", form.formState).isDirty}
placeholder="••••••••"
/>
<SecretInput {...field} placeholder="••••••••" />
</FormControl>
<FormMessage />
</FormItem>
@@ -420,11 +416,7 @@ export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValue
<FormItem>
<FormLabel>App Token</FormLabel>
<FormControl>
<SecretInput
{...field}
isDirty={form.getFieldState("token", form.formState).isDirty}
placeholder="••••••••"
/>
<SecretInput {...field} placeholder="••••••••" />
</FormControl>
<FormDescription>Application token from Gotify.</FormDescription>
<FormMessage />
@@ -519,11 +511,7 @@ export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValue
<FormItem>
<FormLabel>Password (Optional)</FormLabel>
<FormControl>
<SecretInput
{...field}
isDirty={form.getFieldState("password", form.formState).isDirty}
placeholder="••••••••"
/>
<SecretInput {...field} placeholder="••••••••" />
</FormControl>
<FormDescription>Password for server authentication, if required.</FormDescription>
<FormMessage />
@@ -580,11 +568,7 @@ export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValue
<FormItem>
<FormLabel>API Token</FormLabel>
<FormControl>
<SecretInput
{...field}
isDirty={form.getFieldState("apiToken", form.formState).isDirty}
placeholder="••••••••"
/>
<SecretInput {...field} placeholder="••••••••" />
</FormControl>
<FormDescription>Application API token from your Pushover application.</FormDescription>
<FormMessage />
@@ -644,11 +628,7 @@ export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValue
<FormItem>
<FormLabel>Bot Token</FormLabel>
<FormControl>
<SecretInput
{...field}
isDirty={form.getFieldState("botToken", form.formState).isDirty}
placeholder="123456789:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"
/>
<SecretInput {...field} placeholder="123456789:ABC-DEF1234ghIkl-zyx57W2v1u123ew11" />
</FormControl>
<FormDescription>
Telegram bot token. Get this from BotFather when you create your bot.

View File

@@ -246,7 +246,6 @@ export const CreateRepositoryForm = ({
placeholder="Enter repository password"
value={field.value ?? ""}
onChange={field.onChange}
isDirty={form.getFieldState("customPassword", form.formState).isDirty}
/>
</FormControl>
<FormDescription>

View File

@@ -53,12 +53,7 @@ export const AzureRepositoryForm = ({ form }: Props) => {
<FormItem>
<FormLabel>Account Key</FormLabel>
<FormControl>
<SecretInput
placeholder="••••••••"
value={field.value ?? ""}
onChange={field.onChange}
isDirty={form.getFieldState("accountKey", form.formState).isDirty}
/>
<SecretInput placeholder="••••••••" value={field.value ?? ""} onChange={field.onChange} />
</FormControl>
<FormDescription>Azure Storage account key for authentication.</FormDescription>
<FormMessage />

View File

@@ -69,12 +69,7 @@ export const R2RepositoryForm = ({ form }: Props) => {
<FormItem>
<FormLabel>Secret Access Key</FormLabel>
<FormControl>
<SecretInput
placeholder="••••••••"
value={field.value ?? ""}
onChange={field.onChange}
isDirty={form.getFieldState("secretAccessKey", form.formState).isDirty}
/>
<SecretInput placeholder="••••••••" value={field.value ?? ""} onChange={field.onChange} />
</FormControl>
<FormDescription>R2 API token Secret Access Key (shown once when creating token).</FormDescription>
<FormMessage />

View File

@@ -67,12 +67,7 @@ export const RestRepositoryForm = ({ form }: Props) => {
<FormItem>
<FormLabel>Password (Optional)</FormLabel>
<FormControl>
<SecretInput
placeholder="••••••••"
value={field.value ?? ""}
onChange={field.onChange}
isDirty={form.getFieldState("password", form.formState).isDirty}
/>
<SecretInput placeholder="••••••••" value={field.value ?? ""} onChange={field.onChange} />
</FormControl>
<FormDescription>Password for REST server authentication.</FormDescription>
<FormMessage />

View File

@@ -67,12 +67,7 @@ export const S3RepositoryForm = ({ form }: Props) => {
<FormItem>
<FormLabel>Secret Access Key</FormLabel>
<FormControl>
<SecretInput
placeholder="••••••••"
value={field.value ?? ""}
onChange={field.onChange}
isDirty={form.getFieldState("secretAccessKey", form.formState).isDirty}
/>
<SecretInput placeholder="••••••••" value={field.value ?? ""} onChange={field.onChange} />
</FormControl>
<FormDescription>S3 secret access key for authentication.</FormDescription>
<FormMessage />

View File

@@ -68,12 +68,7 @@ export const SMBForm = ({ form }: Props) => {
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<SecretInput
placeholder="••••••••"
value={field.value ?? ""}
onChange={field.onChange}
isDirty={form.getFieldState("password", form.formState).isDirty}
/>
<SecretInput placeholder="••••••••" value={field.value ?? ""} onChange={field.onChange} />
</FormControl>
<FormDescription>Password for SMB authentication.</FormDescription>
<FormMessage />

View File

@@ -67,12 +67,7 @@ export const WebDAVForm = ({ form }: Props) => {
<FormItem>
<FormLabel>Password (Optional)</FormLabel>
<FormControl>
<SecretInput
placeholder="••••••••"
value={field.value ?? ""}
onChange={field.onChange}
isDirty={form.getFieldState("password", form.formState).isDirty}
/>
<SecretInput placeholder="••••••••" value={field.value ?? ""} onChange={field.onChange} />
</FormControl>
<FormDescription>Password for WebDAV authentication (optional).</FormDescription>
<FormMessage />