From 910d00c19522a70125bfb5e5081a7ef4000e7f54 Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Thu, 17 Jun 2021 00:59:20 -0400
Subject: [PATCH] fix(ui): do not allow submission of invalid form inputs
 (#1799)

---
 src/components/Settings/SettingsMain.tsx              | 11 +++++++++--
 src/components/Settings/SettingsPlex.tsx              |  3 ++-
 .../UserSettings/UserPasswordChange/index.tsx         |  4 ++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/Settings/SettingsMain.tsx b/src/components/Settings/SettingsMain.tsx
index 2913f5b7d..25751115f 100644
--- a/src/components/Settings/SettingsMain.tsx
+++ b/src/components/Settings/SettingsMain.tsx
@@ -178,7 +178,14 @@ const SettingsMain: React.FC = () => {
             }
           }}
         >
-          {({ errors, touched, isSubmitting, values, setFieldValue }) => {
+          {({
+            errors,
+            touched,
+            isSubmitting,
+            isValid,
+            values,
+            setFieldValue,
+          }) => {
             return (
               <Form className="section">
                 {userHasPermission(Permission.ADMIN) && (
@@ -397,7 +404,7 @@ const SettingsMain: React.FC = () => {
                       <Button
                         buttonType="primary"
                         type="submit"
-                        disabled={isSubmitting}
+                        disabled={isSubmitting || !isValid}
                       >
                         {isSubmitting
                           ? intl.formatMessage(globalMessages.saving)
diff --git a/src/components/Settings/SettingsPlex.tsx b/src/components/Settings/SettingsPlex.tsx
index 8d3d0e73d..3724cfecb 100644
--- a/src/components/Settings/SettingsPlex.tsx
+++ b/src/components/Settings/SettingsPlex.tsx
@@ -342,6 +342,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
           handleSubmit,
           setFieldValue,
           isSubmitting,
+          isValid,
         }) => {
           return (
             <form className="section" onSubmit={handleSubmit}>
@@ -517,7 +518,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                     <Button
                       buttonType="primary"
                       type="submit"
-                      disabled={isSubmitting}
+                      disabled={isSubmitting || !isValid}
                     >
                       {isSubmitting
                         ? intl.formatMessage(globalMessages.saving)
diff --git a/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx b/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
index 2aba35b7c..624e0a143 100644
--- a/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
@@ -143,7 +143,7 @@ const UserPasswordChange: React.FC = () => {
           }
         }}
       >
-        {({ errors, touched, isSubmitting }) => {
+        {({ errors, touched, isSubmitting, isValid }) => {
           return (
             <Form className="section">
               {!data.hasPassword && (
@@ -221,7 +221,7 @@ const UserPasswordChange: React.FC = () => {
                     <Button
                       buttonType="primary"
                       type="submit"
-                      disabled={isSubmitting}
+                      disabled={isSubmitting || !isValid}
                     >
                       {isSubmitting
                         ? intl.formatMessage(globalMessages.saving)