Fleet UI: Prompted to re-enter password on SCEP/NDES credential updates (#23732)

changes/23651-reenter-password

@@ -0,0 +1 @@
+- Fleet UI: Prompt user to reenter the password if SCEP/NDES url or username has changed

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}

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}