feat(07-02): wire AzureAuthToggle tooltipText + add SFTP auth-method tooltip
- AzureAuthToggle reads sas_url/key tooltipText from BACKEND_REGISTRY and passes to PasswordField - SftpAuthToggle adds showAuthTip state with ⓘ button above segmented control - All 159 tests pass including UX-01 tooltip toggle tests
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
import type { UseFormRegister, FieldError } from 'react-hook-form';
|
||||
import { PasswordField } from '../ui/PasswordField';
|
||||
import { BACKEND_REGISTRY } from '../../schemas/registry';
|
||||
|
||||
type AuthMethod = 'sas' | 'key';
|
||||
|
||||
@@ -15,6 +16,9 @@ interface AzureAuthToggleProps {
|
||||
export function AzureAuthToggle({ register, errors }: AzureAuthToggleProps) {
|
||||
const [authMethod, setAuthMethod] = useState<AuthMethod>('sas');
|
||||
|
||||
const sasUrlTooltip = BACKEND_REGISTRY.azureblob.fields.find(f => f.key === 'sas_url')?.tooltipText;
|
||||
const keyTooltip = BACKEND_REGISTRY.azureblob.fields.find(f => f.key === 'key')?.tooltipText;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
{/* Segmented control */}
|
||||
@@ -54,6 +58,7 @@ export function AzureAuthToggle({ register, errors }: AzureAuthToggleProps) {
|
||||
registration={register('sas_url')}
|
||||
placeholder="https://mystorageaccount.blob.core.windows.net/?sv=..."
|
||||
helpText="Full SAS URL including account and container"
|
||||
tooltipText={sasUrlTooltip}
|
||||
/>
|
||||
</div>
|
||||
<div className={authMethod === 'key' ? 'block' : 'hidden'}>
|
||||
@@ -63,6 +68,7 @@ export function AzureAuthToggle({ register, errors }: AzureAuthToggleProps) {
|
||||
error={errors.key}
|
||||
registration={register('key')}
|
||||
helpText="Base64-encoded storage account key"
|
||||
tooltipText={keyTooltip}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -14,9 +14,29 @@ interface SftpAuthToggleProps {
|
||||
|
||||
export function SftpAuthToggle({ register, errors }: SftpAuthToggleProps) {
|
||||
const [authMethod, setAuthMethod] = useState<AuthMethod>('password');
|
||||
const [showAuthTip, setShowAuthTip] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
{/* Auth method label + ⓘ button */}
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-sm font-medium text-gray-700">Authentication Method</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowAuthTip(v => !v)}
|
||||
aria-label="More info about authentication methods"
|
||||
className="text-blue-500 hover:text-blue-700 text-xs leading-none"
|
||||
>
|
||||
ⓘ
|
||||
</button>
|
||||
</div>
|
||||
{showAuthTip && (
|
||||
<p className="text-xs text-blue-700 bg-blue-50 border border-blue-200 rounded px-2 py-1.5 mt-1">
|
||||
Password auth sends your password to the SFTP server on each connection.
|
||||
Key-based auth uses a private key (more secure — the server only stores your public key).
|
||||
Paste the full private key PEM content (including the -----BEGIN/END----- lines) if using key-based auth.
|
||||
</p>
|
||||
)}
|
||||
{/* Segmented control */}
|
||||
<div className="flex rounded-md border border-gray-300 overflow-hidden">
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user