Feat UI byod landing page (#26592)

For #26211 and #26210 Add Android to byod enrollment landing page. this includes: **new android section in add hosts modal:** ![image](https://github.com/user-attachments/assets/f951df0c-4654-4434-8c95-8b57634d4921) **messaging when visiting from non android, ios, ipad device:** ![image](https://github.com/user-attachments/assets/169903a9-8d5e-4e3b-9b78-378a0e791b22) **enroll into android mdm UI:** ![image](https://github.com/user-attachments/assets/79c9c116-e003-4a80-b0e9-8fbe8775a82c) **various error states (secret is invalid, android or mac os mdm not enabled):** ![image](https://github.com/user-attachments/assets/bc0035ac-b2ed-47e5-8e25-8716fc642e70) ![image](https://github.com/user-attachments/assets/87b8ca87-3352-47fe-8dbf-1bc2a49553b1) ![image](https://github.com/user-attachments/assets/5a378f5f-84d3-4738-aab3-0f68760d317d) - [x] Changes file added for user-visible changes in `changes/`, `orbit/changes/` or `ee/fleetd-chrome/changes`. - [x] Manual QA for all new/changed functionality
2025-02-27 19:35:42 +00:00
parent b47e4a51ce
commit 0da4826480
11 changed files with 418 additions and 34 deletions
@@ -0,0 +1,55 @@
+import React, { useContext } from "react";
+import { Link } from "react-router";
+
+import PATHS from "router/paths";
+import { AppContext } from "context/app";
+
+// @ts-ignore
+import InputField from "components/forms/fields/InputField";
+
+const generateUrl = (serverUrl: string, enrollSecret: string) => {
+  return `${serverUrl}/enroll?enroll_secret=${encodeURIComponent(
+    enrollSecret
+  )}`;
+};
+
+const baseClass = "android-panel";
+
+interface IAndroidPanelProps {
+  enrollSecret: string;
+}
+
+const AndroidPanel = ({ enrollSecret }: IAndroidPanelProps) => {
+  const { config, isAndroidMdmEnabledAndConfigured } = useContext(AppContext);
+
+  if (!config) return null;
+
+  if (!isAndroidMdmEnabledAndConfigured) {
+    return (
+      <p>
+        <Link to={PATHS.ADMIN_INTEGRATIONS_MDM_ANDROID}>
+          Turn on Android MDM
+        </Link>{" "}
+        to enroll Android hosts.
+      </p>
+    );
+  }
+
+  const url = generateUrl(config.server_settings.server_url, enrollSecret);
+
+  return (
+    <div className={baseClass}>
+      <InputField
+        label="Send this to your end users:"
+        enableCopy
+        copyButtonPosition="inside"
+        readOnly
+        inputWrapperClass
+        name="enroll-link"
+        value={url}
+      />
+    </div>
+  );
+};
+
+export default AndroidPanel;