From b25034da47c4fba69b6ec9db2580c7e828c94770 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Wed, 13 Nov 2024 16:01:11 -0500
Subject: [PATCH] Fleet UI: Prompted to re-enter password on SCEP/NDES
 credential updates (#23732)

---
 changes/23651-reenter-password                |  1 +
 .../MdmSettings/ScepPage/ScepPage.tests.tsx   |  6 ++++
 .../cards/MdmSettings/ScepPage/ScepPage.tsx   | 28 ++++++++++++++++++-
 3 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 changes/23651-reenter-password

diff --git a/changes/23651-reenter-password b/changes/23651-reenter-password
new file mode 100644
index 000000000000..b3fc7df44d87
--- /dev/null
+++ b/changes/23651-reenter-password
@@ -0,0 +1 @@
+- Fleet UI: Prompt user to reenter the password if SCEP/NDES url or username has changed
diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/ScepPage/ScepPage.tests.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/ScepPage/ScepPage.tests.tsx
index 69ae7e1337cc..08de1d821f01 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/ScepPage/ScepPage.tests.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/ScepPage/ScepPage.tests.tsx
@@ -18,6 +18,7 @@ describe("Scep Page", () => {
         formData={FORM_DATA}
         formErrors={{}}
         onInputChange={jest.fn()}
+        onBlur={jest.fn()}
         config={createMockConfig()}
         isLoading={false}
         isSaving={false}
@@ -37,6 +38,7 @@ describe("Scep Page", () => {
         formData={FORM_DATA}
         formErrors={{}}
         onInputChange={jest.fn()}
+        onBlur={jest.fn()}
         config={createMockConfig({
           mdm: createMockMdmConfig({ enabled_and_configured: false }),
         })}
@@ -56,6 +58,7 @@ describe("Scep Page", () => {
         formData={FORM_DATA}
         formErrors={{}}
         onInputChange={jest.fn()}
+        onBlur={jest.fn()}
         config={createMockConfig()}
         isLoading // test
         isSaving={false}
@@ -73,6 +76,7 @@ describe("Scep Page", () => {
         formData={{ scepUrl: "", adminUrl: "", username: "", password: "" }}
         formErrors={{}}
         onInputChange={jest.fn()}
+        onBlur={jest.fn()}
         config={createMockConfig()}
         isLoading={false}
         isSaving={false}
@@ -90,6 +94,7 @@ describe("Scep Page", () => {
         formData={FORM_DATA}
         formErrors={{}}
         onInputChange={jest.fn()}
+        onBlur={jest.fn()}
         config={createMockConfig()}
         isLoading={false}
         isSaving={false}
@@ -117,6 +122,7 @@ describe("Scep Page", () => {
         formData={INVALID_FORM_DATA}
         formErrors={FORM_ERRORS}
         onInputChange={jest.fn()}
+        onBlur={jest.fn()}
         config={createMockConfig()}
         isLoading={false}
         isSaving={false}
diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/ScepPage/ScepPage.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/ScepPage/ScepPage.tsx
index 6c27f6fc06e7..dc1874e637a1 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/ScepPage/ScepPage.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/ScepPage/ScepPage.tsx
@@ -41,6 +41,7 @@ interface IScepCertificateContentProps {
   formData: INdesFormData;
   formErrors: INdesFormErrors;
   onInputChange: ({ name, value }: IFormField) => void;
+  onBlur: (name: string, value: string) => void;
   config: IConfig | null;
   isPremiumTier: boolean;
   isLoading: boolean;
@@ -54,6 +55,7 @@ export const ScepCertificateContent = ({
   formData,
   formErrors,
   onInputChange,
+  onBlur,
   config,
   isPremiumTier,
   isLoading,
@@ -105,7 +107,6 @@ export const ScepCertificateContent = ({
       <div>
         <ol className={`${baseClass}__steps`}>
           <li>
-            {/* TODO: confirm URL */}
             <div>
               Connect to your Network Device Enrollment Service (
               <CustomLink
@@ -144,6 +145,7 @@ export const ScepCertificateContent = ({
                   }
                   value={formData.adminUrl}
                   onChange={onInputChange}
+                  onBlur={(e: any) => onBlur("adminUrl", e.target.value)}
                   parseTarget
                   error={formErrors.adminUrl}
                   placeholder="https://example.com/certsrv/mscep_admin/"
@@ -161,6 +163,7 @@ export const ScepCertificateContent = ({
                   }
                   value={formData.username}
                   onChange={onInputChange}
+                  onBlur={(e: any) => onBlur("username", e.target.value)}
                   parseTarget
                   placeholder="username@example.microsoft.com"
                 />
@@ -181,6 +184,7 @@ export const ScepCertificateContent = ({
                   parseTarget
                   placeholder="••••••••"
                   blockAutoComplete
+                  error={formErrors.password}
                 />
                 <Button
                   type="submit"
@@ -229,6 +233,7 @@ interface INdesFormData {
 interface INdesFormErrors {
   scepUrl?: string | null;
   adminUrl?: string | null;
+  password?: string | null;
 }
 
 export interface IFormField {
@@ -268,6 +273,26 @@ const ScepPage = ({ router }: IScepPageProps) => {
     setFormData((prev) => ({ ...prev, [name]: value }));
   };
 
+  const handleBlur = (name: string, value: string) => {
+    // If the value of admin url or username has changed and
+    // it was not originally empty, prompt user to re-enter password
+    if (
+      (name === "adminUrl" &&
+        value !== config?.integrations.ndes_scep_proxy?.admin_url &&
+        config?.integrations.ndes_scep_proxy?.admin_url !== "") ||
+      (name === "username" &&
+        value !== config?.integrations.ndes_scep_proxy?.username &&
+        config?.integrations.ndes_scep_proxy?.username !== "")
+    ) {
+      setFormErrors((prev: INdesFormErrors) => ({
+        ...prev,
+        password:
+          "Please re-enter your password due to changes in admin URL or username",
+      }));
+      setFormData((prev: INdesFormData) => ({ ...prev, password: "" }));
+    }
+  };
+
   const onFormSubmit = async (evt: React.MouseEvent<HTMLFormElement>) => {
     evt.preventDefault();
 
@@ -354,6 +379,7 @@ const ScepPage = ({ router }: IScepPageProps) => {
             formData={formData}
             formErrors={formErrors}
             onInputChange={onInputChange}
+            onBlur={handleBlur}
             config={appConfig || null}
             isPremiumTier={isPremiumTier || false}
             isLoading={isLoadingAppConfig}