secret reference frontend usage
This commit is contained in:
Jakub Trávník
parent
58b1a0574e
commit
c4ec8ea62b
8 changed files with 75 additions and 12 deletions
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
Loading…
Reference in a new issue