From 321402ebb7f73e4d985eb097afa5e41485675cb7 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 16 Nov 2021 12:30:04 -0500
Subject: [PATCH] New error state outline red under 32 char (#2951)

---
 frontend/components/forms/fields/InputField/_styles.scss   | 2 +-
 .../components/SecretEditorModal/SecretEditorModal.tsx     | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/components/forms/fields/InputField/_styles.scss b/frontend/components/forms/fields/InputField/_styles.scss
index 116eea4b56..889add4949 100644
--- a/frontend/components/forms/fields/InputField/_styles.scss
+++ b/frontend/components/forms/fields/InputField/_styles.scss
@@ -30,7 +30,7 @@
     border-radius: 4px;
 
     &:focus {
-      border-bottom-color: $ui-error;
+      border-color: $ui-error;
       background-color: $core-white;
       color: $core-fleet-black;
     }
diff --git a/frontend/pages/hosts/ManageHostsPage/components/SecretEditorModal/SecretEditorModal.tsx b/frontend/pages/hosts/ManageHostsPage/components/SecretEditorModal/SecretEditorModal.tsx
index c20d9a798e..61839c92fb 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/SecretEditorModal/SecretEditorModal.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/components/SecretEditorModal/SecretEditorModal.tsx
@@ -52,6 +52,13 @@ const SecretEditorModal = ({
   };
 
   const onSecretChange = (value: string) => {
+    if (value.length < 32) {
+      setErrors({
+        secret: "Secret",
+      });
+    } else {
+      setErrors({});
+    }
     setEnrollSecretString(value);
   };