From 7ccf47ca44fc29c76014b715b65879d67e103bc5 Mon Sep 17 00:00:00 2001 From: Gabriel Hernandez Date: Wed, 11 Feb 2026 09:57:36 +0000 Subject: [PATCH] update enroll page to include QR codes for enrolling various devices (#39389) **Related issue:** Resolves #38880, #38881 This adds the UI updates to the enroll page to so that verious devices can enroll after scanning the QR code. > NOTE: still a small piece is needed to integrate with the API changes and to ensure android devices can actually enroll with the new QR code. # Checklist for submitter - [x] Changes file added for user-visible changes in `changes/`, `orbit/changes/` or `ee/fleetd-chrome/changes`. See [Changes files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/guides/committing-changes.md#changes-files) for more information. - [x] QA'd all new/changed functionality manually --- frontend/templates/enroll-ota.html | 472 ++++++++++++++++++++--------- 1 file changed, 337 insertions(+), 135 deletions(-) diff --git a/frontend/templates/enroll-ota.html b/frontend/templates/enroll-ota.html index 502a155e4f..785118e7c7 100644 --- a/frontend/templates/enroll-ota.html +++ b/frontend/templates/enroll-ota.html @@ -58,20 +58,24 @@ border-bottom: 1px solid #e2e4ea; } - h1 { - margin-bottom: 8px; - } - p { font-size: 14px; } - + + a { + color: #515774; + text-decoration: none; + font-weight: 600; + border-bottom: 1px solid #e2e4ea; + } + ol { display: flex; flex-direction: column; gap: 48px; list-style: none; padding: 0; + margin: 0; } li { @@ -117,7 +121,41 @@ #main-content { margin: 0 auto; padding: 48px 24px; - max-width: 800px; + max-width: 1000px; + } + + .device-instructions-content { + display: flex; + flex-direction: column; + gap: 48px; + } + + .content-with-sidebar { + display: flex; + justify-content: space-between; + gap: 64px; + } + + .mobile-enroll-sidebar p { + max-width: 208px; + font-weight: bold; + } + + .qr-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 24px; + background-color: #f9fafc; + padding: 24px; + border: 1px solid #e2e4ea; + border-radius: 8px; + } + + .fully-managed-instructions .qr-container { + padding: 8px; + border-radius: 4px; + background-color: #fff; } .device-enroll-message { @@ -140,6 +178,10 @@ } @media screen and (max-width: 430px) { + .device-instructions-content { + gap: 24px; + } + .enroll-link { width: 100%; } @@ -147,124 +189,206 @@ - + - + + + + - + @@ -296,6 +420,15 @@
+ + +