dify/web/app/components/tools/mcp/sections/authentication-section.tsx

'use client'
import type { FC } from 'react'
import { Alert, AlertDescription, AlertTitle } from '@langgenius/dify-ui/alert'
import { cn } from '@langgenius/dify-ui/cn'
import { Input } from '@langgenius/dify-ui/input'
import { Switch } from '@langgenius/dify-ui/switch'
import { useId } from 'react'
import { useTranslation } from 'react-i18next'
import { API_PREFIX } from '@/config'

type AuthenticationSectionProps = {
  isDynamicRegistration: boolean
  onDynamicRegistrationChange: (value: boolean) => void
  clientID: string
  onClientIDChange: (value: string) => void
  credentials: string
  onCredentialsChange: (value: string) => void
}

const AuthenticationSection: FC<AuthenticationSectionProps> = ({
  isDynamicRegistration,
  onDynamicRegistrationChange,
  clientID,
  onClientIDChange,
  credentials,
  onCredentialsChange,
}) => {
  const { t } = useTranslation(['tools'])
  const dynamicRegistrationLabelId = useId()
  const clientIdInputId = useId()
  const clientSecretInputId = useId()

  return (
    <>
      <div>
        <div className="mb-1 flex h-6 items-center">
          <Switch
            aria-labelledby={dynamicRegistrationLabelId}
            className="me-2"
            checked={isDynamicRegistration}
            onCheckedChange={onDynamicRegistrationChange}
          />
          <span id={dynamicRegistrationLabelId} className="system-sm-medium text-text-secondary">
            {t(($) => $['mcp.modal.useDynamicClientRegistration'], { ns: 'tools' })}
          </span>
        </div>
        {!isDynamicRegistration && (
          <Alert type="warning" className="mt-2">
            <AlertTitle>{t(($) => $['mcp.modal.redirectUrlWarning'], { ns: 'tools' })}</AlertTitle>
            <AlertDescription>
              <code className="mt-1 block rounded-sm bg-state-warning-active px-2 py-1 system-xs-medium break-all text-text-secondary">
                {`${API_PREFIX}/mcp/oauth/callback`}
              </code>
            </AlertDescription>
          </Alert>
        )}
      </div>
      <div>
        <div className={cn('mb-1 flex h-6 items-center', isDynamicRegistration && 'opacity-50')}>
          <label htmlFor={clientIdInputId} className="system-sm-medium text-text-secondary">
            {t(($) => $['mcp.modal.clientID'], { ns: 'tools' })}
          </label>
        </div>
        <Input
          id={clientIdInputId}
          value={clientID}
          onChange={(e) => onClientIDChange(e.target.value)}
          placeholder={t(($) => $['mcp.modal.clientID'], { ns: 'tools' })}
          disabled={isDynamicRegistration}
        />
      </div>
      <div>
        <div className={cn('mb-1 flex h-6 items-center', isDynamicRegistration && 'opacity-50')}>
          <label htmlFor={clientSecretInputId} className="system-sm-medium text-text-secondary">
            {t(($) => $['mcp.modal.clientSecret'], { ns: 'tools' })}
          </label>
        </div>
        <Input
          id={clientSecretInputId}
          value={credentials}
          onChange={(e) => onCredentialsChange(e.target.value)}
          placeholder={t(($) => $['mcp.modal.clientSecretPlaceholder'], { ns: 'tools' })}
          disabled={isDynamicRegistration}
        />
      </div>
    </>
  )
}

export default AuthenticationSection