18f12d6ce3
- Updated ChannelInstructionsPanel to include a button for viewing documentation, improving user guidance. - Enhanced ChannelTokenField to support showing/hiding secret values with appropriate labels and icons. - Refined ChannelTypeSelector to display connection type icons and improved layout for better user experience. - Added new messages for documentation links, validation feedback, and secret management in i18n. - Extended ChannelMeta to include optional documentation URLs for better context on configuration fields. - Implemented credential validation logic in ChannelsPage to ensure user inputs are validated before saving. - Introduced ChannelLogo component to display channel icons in the UI. - Added tests for channel credential validation to ensure proper error handling and feedback.
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { Hash } from 'lucide-react';
|
|
|
|
type ChannelAccountIdFieldProps = {
|
|
label: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
placeholder?: string;
|
|
helpText?: string;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
export default function ChannelAccountIdField({
|
|
label,
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
helpText,
|
|
disabled,
|
|
}: ChannelAccountIdFieldProps) {
|
|
return (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2 text-[13px] font-medium text-foreground/80">
|
|
<Hash className="h-3.5 w-3.5 text-foreground/55" />
|
|
<span>{label}</span>
|
|
</div>
|
|
|
|
<input
|
|
value={value}
|
|
onChange={(event) => onChange(event.target.value)}
|
|
placeholder={placeholder}
|
|
disabled={disabled}
|
|
autoComplete="off"
|
|
className="h-[44px] w-full rounded-[14px] border border-black/10 bg-white px-3 text-[13px] text-foreground outline-none transition-colors placeholder:text-foreground/35 focus:border-blue-500 disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-[#101013] dark:text-gray-100"
|
|
/>
|
|
|
|
{helpText ? (
|
|
<div className="text-[12px] leading-[18px] text-foreground/55 dark:text-gray-500">{helpText}</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|