Apple MDM: require server URL confirmation before turning off (#48595)

Adds a text input to the "Turn off MDM" confirmation modal that requires
the admin to type the Fleet server URL before the Turn off button
becomes enabled. Prevents accidental MDM deactivation on the wrong Fleet
instance.

<!-- Add the related story/sub-task/bug number, like Resolves #123, or
remove if NA -->
**Related issue:** Resolves #42073

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Improved the Apple MDM disable flow by requiring the correct Fleet URL
before confirming the action.
* The disable confirmation modal now appears only when the needed
configuration is available, reducing the chance of errors.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: CodeRabbit <noreply@coderabbit.ai>

Author: 3 people

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleMdmPage/AppleMdmPage.tsx

@@ -131,8 +131,9 @@ const AppleMdmPage = ({ router }: { router: InjectedRouter }) => {
             onRenew={onRenewCert}
           />
         )}
-        {showTurnOffMdmModal && (
+        {showTurnOffMdmModal && config && (
           <TurnOffAppleMdmModal
+            serverUrl={config.server_settings.server_url}
             onCancel={toggleTurnOffMdmModal}
             onConfirm={turnOffMdm}
           />

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleMdmPage/components/modals/TurnOffAppleMdmModal/TurnOffAppleMdmModal.tsx

@@ -1,21 +1,25 @@
 import React, { useCallback, useState } from "react";
 
 import Button from "components/buttons/Button";
-
+import InputField from "components/forms/fields/InputField";
 import Modal from "components/Modal";
 
 const baseClass = "modal turn-off-apple-mdm-modal";
+const bemClass = "turn-off-apple-mdm-modal";
 
 interface ITurnOffAppleMdmModalProps {
+  serverUrl: string;
   onCancel: () => void;
   onConfirm: () => void;
 }
 
 const TurnOffAppleMdmModal = ({
+  serverUrl,
   onConfirm,
   onCancel,
 }: ITurnOffAppleMdmModalProps): JSX.Element => {
   const [isDeleting, setIsDeleting] = useState(false);
+  const [enteredUrl, setEnteredUrl] = useState("");
 
   const onClickConfirm = useCallback(() => {
     setIsDeleting(true);
@@ -25,16 +29,28 @@ const TurnOffAppleMdmModal = ({
   return (
     <Modal title="Turn off MDM" onExit={onCancel} className={baseClass}>
       <div className={baseClass}>
-        If you want to use MDM features again, you&apos;ll have to upload a new
-        APNs certificate and all end users will have to turn MDM off and back
-        on.
+        <p>
+          If you want to use MDM features again, you&apos;ll have to upload a
+          new APNs certificate and all end users will have to turn MDM off and
+          back on.
+        </p>
+        <p>
+          To confirm, enter your Fleet URL: <b>{serverUrl}</b>
+        </p>
+        <InputField
+          autofocus
+          inputWrapperClass={`${bemClass}__url-input`}
+          placeholder="https://fleet.example.com"
+          value={enteredUrl}
+          onChange={(val: string) => setEnteredUrl(val)}
+        />
         <div className="modal-cta-wrap">
           <Button
             type="button"
             variant="alert"
             onClick={onClickConfirm}
             isLoading={isDeleting}
-            disabled={isDeleting}
+            disabled={isDeleting || enteredUrl !== serverUrl}
           >
             Turn off
           </Button>