form handling improvements

gallayl · gallayl · commit 2124cdb609f0 · 2026-02-22T15:13:40.000+01:00
diff --git a/frontend/package.json b/frontend/package.json
@@ -21,12 +21,12 @@
     "@furystack/cache": "^6.0.0",
     "@furystack/core": "^15.1.0",
     "@furystack/entity-sync": "^0.1.1",
-    "@furystack/entity-sync-client": "^0.1.1",
+    "@furystack/entity-sync-client": "^0.2.0",
     "@furystack/inject": "^12.0.30",
     "@furystack/logging": "^8.0.30",
     "@furystack/rest-client-fetch": "^8.0.37",
-    "@furystack/shades": "^12.1.0",
-    "@furystack/shades-common-components": "^12.3.0",
+    "@furystack/shades": "^12.2.0",
+    "@furystack/shades-common-components": "^12.4.0",
     "@furystack/utils": "^8.1.10",
     "common": "workspace:^"
   }
diff --git a/frontend/src/components/entity-forms/dependency-form.tsx b/frontend/src/components/entity-forms/dependency-form.tsx
@@ -28,13 +28,14 @@ export const DependencyForm = Shade<DependencyFormProps>({
       <Form<DependencyFormPayload>
         validate={isDependencyFormPayload}
         onSubmit={(data) =>
-          void props.onSubmit({
+          props.onSubmit({
             stackName: props.stackName,
             name: data.name,
             checkCommand: data.checkCommand,
             installationHelp: data.installationHelp,
           })
         }
+        disableOnSubmit
         style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '600px' }}
       >
         <h2 style={{ margin: '0' }}>{props.mode === 'create' ? 'Add Dependency' : 'Edit Dependency'}</h2>
diff --git a/frontend/src/components/entity-forms/github-repo-form.tsx b/frontend/src/components/entity-forms/github-repo-form.tsx
@@ -29,13 +29,14 @@ export const GitHubRepoForm = Shade<GitHubRepoFormProps>({
       <Form<GitHubRepoFormPayload>
         validate={isGitHubRepoFormPayload}
         onSubmit={(data) =>
-          void props.onSubmit({
+          props.onSubmit({
             stackName: props.stackName,
             url: data.url,
             displayName: data.displayName,
             description: data.description,
           })
         }
+        disableOnSubmit
         style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '600px' }}
       >
         <h2 style={{ margin: '0' }}>{props.mode === 'create' ? 'Add GitHub Repository' : 'Edit Repository'}</h2>
diff --git a/frontend/src/components/entity-forms/service-form.tsx b/frontend/src/components/entity-forms/service-form.tsx
@@ -37,7 +37,7 @@ export const ServiceForm = Shade<ServiceFormProps>({
       <Form<ServiceFormPayload>
         validate={isServiceFormPayload}
         onSubmit={(data) =>
-          void props.onSubmit({
+          props.onSubmit({
             stackName: props.stackName,
             displayName: data.displayName,
             description: data.description,
@@ -51,6 +51,7 @@ export const ServiceForm = Shade<ServiceFormProps>({
             autoRestartOnFetch: data.autoRestartOnFetch === 'on',
           })
         }
+        disableOnSubmit
         style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '600px' }}
       >
         <h2 style={{ margin: '0' }}>{props.mode === 'create' ? 'Create Service' : 'Edit Service'}</h2>
diff --git a/frontend/src/components/entity-forms/stack-form.tsx b/frontend/src/components/entity-forms/stack-form.tsx
@@ -29,13 +29,14 @@ export const StackForm = Shade<StackFormProps>({
       <Form<StackFormPayload>
         validate={isStackFormPayload}
         onSubmit={(data) =>
-          void props.onSubmit({
+          props.onSubmit({
             name: data.name,
             displayName: data.displayName,
             description: data.description,
             mainDirectory: data.mainDirectory,
           })
         }
+        disableOnSubmit
         style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '600px' }}
       >
         <h2 style={{ margin: '0' }}>{props.mode === 'create' ? 'Create Stack' : 'Edit Stack'}</h2>
diff --git a/frontend/src/pages/import-export/import-stack.tsx b/frontend/src/pages/import-export/import-stack.tsx
@@ -35,7 +35,6 @@ export const ImportStack = Shade({
     const [jsonInput, setJsonInput] = useState('json', '')
     const [parsed, setParsed] = useState<ParsedExport | null>('parsed', null)
     const [parseError, setParseError] = useState('parseError', '')
-    const [isImporting, setIsImporting] = useState('isImporting', false)
 
     const handleParse = () => {
       try {
@@ -55,7 +54,6 @@ export const ImportStack = Shade({
 
     const handleImport = async (formData: ImportConfigPayload) => {
       if (!parsed) return
-      setIsImporting(true)
       try {
         await injector.getInstance(StacksApiClient).call({
           method: 'POST',
@@ -83,7 +81,6 @@ export const ImportStack = Shade({
           type: 'error',
         })
       }
-      setIsImporting(false)
     }
 
     return (
@@ -133,7 +130,7 @@ export const ImportStack = Shade({
               </div>
             </Paper>
           ) : (
-            <Form<ImportConfigPayload> validate={isImportConfigPayload} onSubmit={(data) => void handleImport(data)}>
+            <Form<ImportConfigPayload> validate={isImportConfigPayload} onSubmit={handleImport} disableOnSubmit>
               <Paper elevation={1} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                 <h3 style={{ margin: '0' }}>Import: {parsed.stack.displayName}</h3>
                 <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap' }}>
@@ -169,7 +166,6 @@ export const ImportStack = Shade({
                   <Button
                     type="submit"
                     variant="contained"
-                    loading={isImporting}
                     startIcon={<Icon icon={icons.upload} size="small" />}
                   >
                     Import
diff --git a/frontend/src/pages/installer/create-admin-step.tsx b/frontend/src/pages/installer/create-admin-step.tsx
@@ -15,31 +15,21 @@ const isAdminPayload = (data: unknown): data is AdminPayload => {
 
 export const CreateAdminStep = Shade<WizardStepProps>({
   shadowDomName: 'shade-create-admin-step',
-  render: ({ props, injector, useState }) => {
-    const [isInstalling, setIsInstalling] = useState('isInstalling', false)
-
-    const handleSubmit = (data: AdminPayload) => {
-      setIsInstalling(true)
-      injector
-        .getInstance(InstallApiClient)
-        .call({
-          method: 'POST',
-          action: '/install',
-          body: data,
-        })
-        .then(() => {
-          props.onNext?.()
-          setIsInstalling(false)
-        })
-        .catch(() => {
-          setIsInstalling(false)
-        })
+  render: ({ props, injector }) => {
+    const handleSubmit = async (data: AdminPayload) => {
+      await injector.getInstance(InstallApiClient).call({
+        method: 'POST',
+        action: '/install',
+        body: data,
+      })
+      props.onNext?.()
     }
 
     return (
       <Form<AdminPayload>
         validate={isAdminPayload}
         onSubmit={handleSubmit}
+        disableOnSubmit
         style={{
           padding: '32px',
           display: 'flex',
@@ -61,7 +51,6 @@ export const CreateAdminStep = Shade<WizardStepProps>({
             labelTitle="Username"
             type="text"
             required
-            disabled={isInstalling}
             getHelperText={() => 'Choose a username for the admin account'}
           />
           <Input
@@ -72,7 +61,6 @@ export const CreateAdminStep = Shade<WizardStepProps>({
             autocomplete="off"
             minLength={4}
             required
-            disabled={isInstalling}
             getHelperText={() => 'Must be at least 4 characters'}
           />
         </div>
@@ -83,7 +71,6 @@ export const CreateAdminStep = Shade<WizardStepProps>({
           <Button
             type="submit"
             disabled={props.currentPage > props.maxPages - 1}
-            loading={isInstalling}
             variant="contained"
             color={props.currentPage === props.maxPages - 1 ? 'success' : 'primary'}
           >
diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx
@@ -131,17 +131,17 @@ export const Login = Shade({
                 validate={(data): data is LoginPayload => {
                   return (data as LoginPayload).userName?.length > 0 && (data as LoginPayload).password?.length > 0
                 }}
-                onSubmit={({ userName, password }) => {
-                  void sessionService.login(userName, password)
+                onSubmit={async ({ userName, password }) => {
+                  await sessionService.login(userName, password)
                 }}
+                disableOnSubmit
               >
                 <div className="login-fields">
                   <Input
                     labelTitle="Username"
                     name="userName"
                     autofocus
                     required
-                    disabled={isOperationInProgress}
                     variant="outlined"
                     type="text"
                     getStartIcon={() => <Icon icon={icons.user} size="small" />}
@@ -150,7 +150,6 @@ export const Login = Shade({
                     labelTitle="Password"
                     name="password"
                     required
-                    disabled={isOperationInProgress}
                     variant="outlined"
                     type="password"
                     getStartIcon={() => <Icon icon={icons.lock} size="small" />}
@@ -167,7 +166,6 @@ export const Login = Shade({
                   <Button
                     type="submit"
                     variant="contained"
-                    disabled={isOperationInProgress}
                     loading={isOperationInProgress}
                   >
                     Sign in
diff --git a/frontend/src/pages/settings/api-tokens-section.tsx b/frontend/src/pages/settings/api-tokens-section.tsx
@@ -31,11 +31,9 @@ export const ApiTokensSection = Shade({
       filter: currentUser ? { username: { $eq: currentUser.username } } : undefined,
     })
 
-    const [isCreating, setIsCreating] = useState('isCreating', false)
     const [revokingTokenId, setRevokingTokenId] = useState<string | null>('revokingTokenId', null)
 
     const handleCreateToken = async (payload: CreateTokenPayload) => {
-      setIsCreating(true)
       try {
         const { result } = await tokensApi.call({
           method: 'POST',
@@ -50,8 +48,6 @@ export const ApiTokensSection = Shade({
         })
       } catch {
         notys.emit('onNotyAdded', { title: 'Error', body: 'Failed to create token.', type: 'error' })
-      } finally {
-        setIsCreating(false)
       }
     }
 
@@ -98,14 +94,14 @@ export const ApiTokensSection = Shade({
 
         <Form<CreateTokenPayload>
           validate={isCreateTokenPayload}
-          onSubmit={(data) => void handleCreateToken(data)}
+          onSubmit={handleCreateToken}
+          disableOnSubmit
           style={{ display: 'flex', gap: '8px', marginBottom: '16px', alignItems: 'center' }}
         >
           <Input variant="outlined" labelTitle="Token name" name="name" style={{ flex: '1' }} required />
           <Button
             variant="contained"
             type="submit"
-            loading={isCreating}
             startIcon={<Icon icon={icons.plus} size="small" />}
             style={{ height: '100%', display: 'flex', alignItems: 'center' }}
           >
diff --git a/frontend/src/pages/settings/password-change-form.tsx b/frontend/src/pages/settings/password-change-form.tsx
@@ -21,10 +21,8 @@ export const PasswordChangeForm = Shade({
     const notys = injector.getInstance(NotyService)
 
     const [newPassword, setNewPassword] = useState('newPassword', '')
-    const [isSubmitting, setIsSubmitting] = useState('isSubmitting', false)
 
     const handleSubmit = async (payload: PasswordChangePayload) => {
-      setIsSubmitting(true)
       try {
         await identityApi.call({
           method: 'POST',
@@ -41,8 +39,6 @@ export const PasswordChangeForm = Shade({
         })
       } catch {
         notys.emit('onNotyAdded', { title: 'Error', body: 'Failed to change password.', type: 'error' })
-      } finally {
-        setIsSubmitting(false)
       }
     }
 
@@ -54,7 +50,8 @@ export const PasswordChangeForm = Shade({
         </h3>
         <Form<PasswordChangePayload>
           validate={isPasswordChangePayload}
-          onSubmit={(data) => void handleSubmit(data)}
+          onSubmit={handleSubmit}
+          disableOnSubmit
           style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}
         >
           <Input name="currentPassword" labelTitle="Current Password" type="password" variant="outlined" required />
@@ -84,7 +81,6 @@ export const PasswordChangeForm = Shade({
           <Button
             type="submit"
             variant="contained"
-            loading={isSubmitting}
             startIcon={<Icon icon={icons.save} size="small" />}
             style={{ alignSelf: 'flex-start' }}
           >
diff --git a/frontend/src/pages/wizards/create-service-wizard.tsx b/frontend/src/pages/wizards/create-service-wizard.tsx
@@ -86,7 +86,6 @@ export const CreateServiceWizard = Shade<CreateServiceWizardProps>({
 
     const handleCreateService = async (data: CreateServicePayload) => {
       const serviceId = crypto.randomUUID()
-      setState({ ...state, isSaving: true })
 
       try {
         await servicesApi.call({
@@ -114,15 +113,13 @@ export const CreateServiceWizard = Shade<CreateServiceWizardProps>({
           createdServiceId: serviceId,
           createdServiceName: data.displayName,
           hasRepoOrCommands: !!(data.installCommand || data.buildCommand),
-          isSaving: false,
         })
       } catch (error) {
         noty.emit('onNotyAdded', {
           title: 'Error',
           body: error instanceof Error ? error.message : 'Failed to create service',
           type: 'error',
         })
-        setState({ ...state, isSaving: false })
       }
     }
 
@@ -178,7 +175,6 @@ export const CreateServiceWizard = Shade<CreateServiceWizardProps>({
 
     const handleFinishNewRepo = async (repoData: NewRepoPayload) => {
       if (!state.createdServiceId) return
-      setState({ ...state, isSaving: true })
       try {
         const newId = crypto.randomUUID()
         await reposApi.call({
@@ -199,7 +195,6 @@ export const CreateServiceWizard = Shade<CreateServiceWizardProps>({
           body: error instanceof Error ? error.message : 'Failed to complete setup',
           type: 'error',
         })
-        setState({ ...state, isSaving: false })
       }
     }
 
@@ -256,7 +251,8 @@ export const CreateServiceWizard = Shade<CreateServiceWizardProps>({
           {stepIndicator}
           <Form<CreateServicePayload>
             validate={isCreateServicePayload}
-            onSubmit={(data) => void handleCreateService(data)}
+            onSubmit={handleCreateService}
+            disableOnSubmit
             style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}
           >
             <h2 style={{ margin: '0' }}>Create Service</h2>
@@ -301,7 +297,6 @@ export const CreateServiceWizard = Shade<CreateServiceWizardProps>({
               <Button
                 type="submit"
                 variant="contained"
-                loading={state.isSaving}
                 endIcon={<Icon icon={icons.chevronRight} size="small" />}
               >
                 Next
@@ -359,7 +354,8 @@ export const CreateServiceWizard = Shade<CreateServiceWizardProps>({
           {state.repoChoice === 'new' ? (
             <Form<NewRepoPayload>
               validate={isNewRepoPayload}
-              onSubmit={(data) => void handleFinishNewRepo(data)}
+              onSubmit={handleFinishNewRepo}
+              disableOnSubmit
               style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}
             >
               {repoChoiceOptions}
@@ -378,7 +374,6 @@ export const CreateServiceWizard = Shade<CreateServiceWizardProps>({
                   type="submit"
                   variant="contained"
                   color="success"
-                  loading={state.isSaving}
                   endIcon={<Icon icon={icons.chevronRight} size="small" />}
                 >
                   Next
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "@playwright/test": "^1.58.2",
     "@types/node": "^25.3.0",
     "@vitest/coverage-v8": "^4.0.18",
-    "eslint": "^10.0.0",
+    "eslint": "^10.0.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-jsdoc": "^62.7.0",
diff --git a/service/package.json b/service/package.json
@@ -27,7 +27,7 @@
     "@furystack/security": "^6.0.37",
     "@furystack/sequelize-store": "^6.0.38",
     "@furystack/websocket-api": "^13.1.10",
-    "@modelcontextprotocol/sdk": "1.27.0",
+    "@modelcontextprotocol/sdk": "1.26.0",
     "common": "workspace:^",
     "sequelize": "^6.37.7",
     "sqlite3": "^5.1.7"
diff --git a/yarn.lock b/yarn.lock
