Added disabled submit button

Author: joshua-smee-ttd

src/web/components/ApiKeyManagement/KeyDisableDialog.tsx

@@ -39,7 +39,7 @@ function KeyDisableDialog({ onDisable, triggerButton, apiKey, setApiKey }: KeyDi
         <br />
         Type the Key ID to confirm: <b>{apiKey.key_id}</b>
       </p>
-      <Form onSubmit={onSubmit} submitButtonText='Disable Key'>
+      <Form onSubmit={onSubmit} submitButtonText='Disable Key' disableSubmitWhenInvalid>
         <TextInput
           inputName='Key Id'
           placeholder={apiKey.key_id}

src/web/components/Core/Form.tsx

@@ -17,6 +17,7 @@ type FormProps<T extends FieldValues> = {
   children: ReactNode;
   onError?: (error: unknown) => void;
   defaultValues?: DeepPartial<T>;
+  disableSubmitWhenInvalid?: boolean;
   submitButtonText?: string;
   customizeSubmit?: boolean;
   id?: string;
@@ -33,6 +34,7 @@ export function Form<T extends FieldValues>({
   onError,
   defaultValues,
   children,
+  disableSubmitWhenInvalid,
   submitButtonText,
   customizeSubmit,
 }: FormProps<T>) {
@@ -42,7 +44,7 @@ export function Form<T extends FieldValues>({
   const {
     handleSubmit,
     setError,
-    formState: { errors, isSubmitting },
+    formState: { errors, isSubmitting, isDirty, isValid },
   } = methods;
   const submit = useCallback(
     async (formData: T) => {
@@ -75,7 +77,11 @@ export function Form<T extends FieldValues>({
         {children}
         {!customizeSubmit && (
           <div className='form-footer'>
-            <button type='submit' disabled={isSubmitting} className='primary-button'>
+            <button
+              type='submit'
+              disabled={isSubmitting || (disableSubmitWhenInvalid && (!isDirty || !isValid))}
+              className='primary-button'
+            >
               {submitButtonText ?? 'Submit'}
             </button>
           </div>