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:
2026-03-31 13:33:36 +02:00
parent 9aae9e33bd
commit 7c10600d02
2 changed files with 26 additions and 0 deletions
@@ -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>
+20
View File
@@ -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