client/src/components/Plugins/Store/PluginAuthForm.tsx

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;