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.
71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
import { Eye, EyeOff } from 'lucide-react';
|
|
|
|
type ChannelTokenFieldProps = {
|
|
label: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
placeholder?: string;
|
|
helpText?: string;
|
|
disabled?: boolean;
|
|
showSecret?: boolean;
|
|
onToggleSecret?: () => void;
|
|
showSecretLabel?: string;
|
|
hideSecretLabel?: string;
|
|
required?: boolean;
|
|
};
|
|
|
|
export default function ChannelTokenField({
|
|
label,
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
helpText,
|
|
disabled,
|
|
showSecret,
|
|
onToggleSecret,
|
|
showSecretLabel,
|
|
hideSecretLabel,
|
|
required,
|
|
}: ChannelTokenFieldProps) {
|
|
const isSecretField = typeof showSecret === 'boolean' && typeof onToggleSecret === 'function';
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<label className="block text-[15px] font-semibold text-[#171717] dark:text-[#f3f4f6]">
|
|
{label}
|
|
{required ? <span className="ml-1 text-[#d14343]">*</span> : null}
|
|
</label>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<input
|
|
value={value}
|
|
onChange={(event) => onChange(event.target.value)}
|
|
placeholder={placeholder}
|
|
disabled={disabled}
|
|
autoComplete="off"
|
|
type={isSecretField && !showSecret ? 'password' : 'text'}
|
|
className="h-[56px] w-full rounded-[18px] border border-black/10 bg-[#fbf8f1] px-5 text-[15px] text-[#171717] outline-none transition-colors placeholder:text-[#98a2b3] focus:border-[#8ea8ff] disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-[#1a1a1e] dark:text-gray-100 dark:placeholder:text-gray-500"
|
|
/>
|
|
</div>
|
|
|
|
{isSecretField ? (
|
|
<button
|
|
type="button"
|
|
onClick={onToggleSecret}
|
|
disabled={disabled}
|
|
className="inline-flex h-[56px] w-[56px] shrink-0 items-center justify-center rounded-[18px] border border-black/10 bg-[#fbf8f1] text-[#667085] transition-colors hover:bg-black/5 hover:text-[#171717] disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-[#1a1a1e] dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-100"
|
|
aria-label={showSecret ? (hideSecretLabel ?? 'Hide secret') : (showSecretLabel ?? 'Show secret')}
|
|
>
|
|
{showSecret ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
|
|
{helpText ? (
|
|
<div className="text-[14px] leading-7 text-[#667085] dark:text-gray-400">{helpText}</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|