diff --git a/src/components/wizard/BackendSelectionStep.tsx b/src/components/wizard/BackendSelectionStep.tsx index df7d0f5..af151a5 100644 --- a/src/components/wizard/BackendSelectionStep.tsx +++ b/src/components/wizard/BackendSelectionStep.tsx @@ -50,9 +50,14 @@ export function BackendSelectionStep() { dispatch({ type: 'SET_STEP', payload: 1 }); } + function onInvalidSubmit() { + // Only one validatable field in this step: remote-name + document.getElementById('remote-name')?.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + function handleCardClick(backendType: BackendType) { pendingBackend.current = backendType; - void handleSubmit(onValidSubmit)(); + void handleSubmit(onValidSubmit, onInvalidSubmit)(); } return ( @@ -62,7 +67,7 @@ export function BackendSelectionStep() { Name your remote and pick the cloud storage provider you want to connect to. Your choice determines which credentials are required in the next step.

-
+ , string> = { azureblob: 'Azure Blob Storage', s3: 'Amazon S3', @@ -60,7 +67,7 @@ export function RemoteConfigStep() { Enter the credentials for your selected backend. These values are written directly into the generated rclone.conf and are never sent to any server.

- + {backendType === 'azureblob' ? ( <> {/* Account field via FieldRenderer */}