File size: 3,871 Bytes
3b6afc0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
import { TPlugin, TPluginAuthConfig } from '@librechat/data-provider';
import { Save } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { TPluginAction } from './PluginStoreDialog';
import { HoverCard, HoverCardTrigger } from '~/components/ui';
import { PluginTooltip } from '.';
type TPluginAuthFormProps = {
plugin: TPlugin | undefined;
onSubmit: (installActionData: TPluginAction) => void;
};
function PluginAuthForm({ plugin, onSubmit }: TPluginAuthFormProps) {
const {
register,
handleSubmit,
formState: { errors, isDirty, isValid, isSubmitting },
} = useForm();
return (
<div className="flex w-full flex-col items-center gap-2">
<div className="grid w-full gap-6 sm:grid-cols-2">
<form
className="col-span-1 flex w-full flex-col items-start justify-start gap-2"
method="POST"
onSubmit={handleSubmit((auth) =>
onSubmit({ pluginKey: plugin!.pluginKey, action: 'install', auth }),
)}
>
{plugin!.authConfig?.map((config: TPluginAuthConfig, i: number) => (
<div key={`${config.authField}-${i}`} className="flex w-full flex-col gap-1">
<label
htmlFor={config.authField}
className="mb-1 text-left text-sm font-medium text-slate-700/70 dark:text-slate-50/70"
>
{config.label}
</label>
<HoverCard openDelay={300}>
<HoverCardTrigger className="grid w-full items-center gap-2">
<input
type="text"
autoComplete="off"
id={config.authField}
aria-invalid={!!errors[config.authField]}
aria-describedby={`${config.authField}-error`}
aria-label={config.label}
aria-required="true"
{...register(config.authField, {
required: `${config.label} is required.`,
minLength: {
value: 10,
message: `${config.label} must be at least 10 characters long`,
},
})}
className="flex h-10 max-h-10 w-full resize-none rounded-md border border-gray-200 bg-transparent px-3 py-2 text-sm text-gray-700 shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:border-slate-400 focus:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-opacity-0 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 focus:dark:bg-gray-600 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0"
/>
</HoverCardTrigger>
<PluginTooltip content={config.description} position="right" />
</HoverCard>
{errors[config.authField] && (
<span role="alert" className="mt-1 text-sm text-red-400">
{/* @ts-ignore - Type 'string | FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined' is not assignable to type 'ReactNode' */}
{errors[config.authField].message}
</span>
)}
</div>
))}
<button
disabled={!isDirty || !isValid || isSubmitting}
type="submit"
className="btn btn-primary relative"
>
<div className="flex items-center justify-center gap-2">
Save
<Save className="flex h-4 w-4 items-center stroke-2" />
</div>
</button>
</form>
</div>
</div>
);
}
export default PluginAuthForm;
|