basic-secret-connection-settings.tsx•1.99 kB
import { Static, Type } from '@sinclair/typebox';
import React from 'react';
import { useFormContext } from 'react-hook-form';
import {
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { BasicAuthProperty } from '@activepieces/pieces-framework';
import { UpsertBasicAuthRequest } from '@activepieces/shared';
type BasicAuthConnectionSettingsProps = {
authProperty: BasicAuthProperty;
};
const BasicAuthConnectionSettings = React.memo(
({ authProperty }: BasicAuthConnectionSettingsProps) => {
const forSchema = Type.Object({
request: UpsertBasicAuthRequest,
});
const form = useFormContext<Static<typeof forSchema>>();
return (
<>
<FormField
name="request.value.username"
control={form.control}
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>{authProperty.username.displayName}</FormLabel>
<FormControl>
<Input {...field} type="text" />
</FormControl>
<FormDescription>
{authProperty.username.description}
</FormDescription>
</FormItem>
)}
></FormField>
<FormField
name="request.value.password"
control={form.control}
render={({ field }) => (
<FormItem className="flex flex-col mt-3.5">
<FormLabel>{authProperty.password.displayName}</FormLabel>
<FormControl>
<Input {...field} type="password" />
</FormControl>
<FormDescription>
{authProperty.password.description}
</FormDescription>
</FormItem>
)}
></FormField>
</>
);
},
);
BasicAuthConnectionSettings.displayName = 'BasicAuthConnectionSettings';
export { BasicAuthConnectionSettings };