44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import { Input } from '@/components/ui/input'
|
|
import { useLocalApiServer } from '@/hooks/useLocalApiServer'
|
|
import { useState, useEffect } from 'react'
|
|
|
|
export function TrustedHostsInput() {
|
|
const { trustedHosts, setTrustedHosts } = useLocalApiServer()
|
|
const [inputValue, setInputValue] = useState(trustedHosts.join(', '))
|
|
|
|
// Update input value when trustedHosts changes externally
|
|
useEffect(() => {
|
|
setInputValue(trustedHosts.join(', '))
|
|
}, [trustedHosts])
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const value = e.target.value
|
|
setInputValue(value)
|
|
}
|
|
|
|
const handleBlur = () => {
|
|
// Split by comma and clean up each host
|
|
const hosts = inputValue
|
|
.split(',')
|
|
.map((host) => host.trim())
|
|
.filter((host) => host.length > 0)
|
|
|
|
// Remove duplicates
|
|
const uniqueHosts = [...new Set(hosts)]
|
|
|
|
setTrustedHosts(uniqueHosts)
|
|
setInputValue(uniqueHosts.join(', '))
|
|
}
|
|
|
|
return (
|
|
<Input
|
|
type="text"
|
|
value={inputValue}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
className="w-full h-8 text-sm"
|
|
placeholder="Enter trusted hosts"
|
|
/>
|
|
)
|
|
}
|