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 { useState } from 'react';
|
||||||
import type { UseFormRegister, FieldError } from 'react-hook-form';
|
import type { UseFormRegister, FieldError } from 'react-hook-form';
|
||||||
import { PasswordField } from '../ui/PasswordField';
|
import { PasswordField } from '../ui/PasswordField';
|
||||||
|
import { BACKEND_REGISTRY } from '../../schemas/registry';
|
||||||
|
|
||||||
type AuthMethod = 'sas' | 'key';
|
type AuthMethod = 'sas' | 'key';
|
||||||
|
|
||||||
@@ -15,6 +16,9 @@ interface AzureAuthToggleProps {
|
|||||||
export function AzureAuthToggle({ register, errors }: AzureAuthToggleProps) {
|
export function AzureAuthToggle({ register, errors }: AzureAuthToggleProps) {
|
||||||
const [authMethod, setAuthMethod] = useState<AuthMethod>('sas');
|
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 (
|
return (
|
||||||
<div className="flex flex-col gap-3">
|
<div className="flex flex-col gap-3">
|
||||||
{/* Segmented control */}
|
{/* Segmented control */}
|
||||||
@@ -54,6 +58,7 @@ export function AzureAuthToggle({ register, errors }: AzureAuthToggleProps) {
|
|||||||
registration={register('sas_url')}
|
registration={register('sas_url')}
|
||||||
placeholder="https://mystorageaccount.blob.core.windows.net/?sv=..."
|
placeholder="https://mystorageaccount.blob.core.windows.net/?sv=..."
|
||||||
helpText="Full SAS URL including account and container"
|
helpText="Full SAS URL including account and container"
|
||||||
|
tooltipText={sasUrlTooltip}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={authMethod === 'key' ? 'block' : 'hidden'}>
|
<div className={authMethod === 'key' ? 'block' : 'hidden'}>
|
||||||
@@ -63,6 +68,7 @@ export function AzureAuthToggle({ register, errors }: AzureAuthToggleProps) {
|
|||||||
error={errors.key}
|
error={errors.key}
|
||||||
registration={register('key')}
|
registration={register('key')}
|
||||||
helpText="Base64-encoded storage account key"
|
helpText="Base64-encoded storage account key"
|
||||||
|
tooltipText={keyTooltip}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -14,9 +14,29 @@ interface SftpAuthToggleProps {
|
|||||||
|
|
||||||
export function SftpAuthToggle({ register, errors }: SftpAuthToggleProps) {
|
export function SftpAuthToggle({ register, errors }: SftpAuthToggleProps) {
|
||||||
const [authMethod, setAuthMethod] = useState<AuthMethod>('password');
|
const [authMethod, setAuthMethod] = useState<AuthMethod>('password');
|
||||||
|
const [showAuthTip, setShowAuthTip] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-3">
|
<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 */}
|
{/* Segmented control */}
|
||||||
<div className="flex rounded-md border border-gray-300 overflow-hidden">
|
<div className="flex rounded-md border border-gray-300 overflow-hidden">
|
||||||
<button
|
<button
|
||||||
|
|||||||
Reference in New Issue
Block a user