Website: add /remediate and /turn-on-mdm pages for Microsoft compliance proxy (#30094)

Related to: https://github.com/fleetdm/fleet/issues/26521 Changes: - Added two pages that will be used for the Microsoft compliance proxy (`/microsoft-compliance-partner/turn-on-mdm` & `/microsoft-compliance-partner/remediate`)
2025-06-18 13:34:30 -05:00
parent 2e43ac4f7a
commit 7b764152b3
19 changed files with 393 additions and 1 deletions
@@ -0,0 +1,27 @@
+module.exports = {
+
+
+  friendlyName: 'View remediate',
+
+
+  description: 'Display "Remediate" page.',
+
+
+  exits: {
+
+    success: {
+      viewTemplatePath: 'pages/microsoft-proxy/remediate'
+    }
+
+  },
+
+
+  fn: async function () {
+
+    // Respond with view.
+    return {};
+
+  }
+
+
+};
@@ -0,0 +1,27 @@
+module.exports = {
+
+
+  friendlyName: 'View turn on mdm',
+
+
+  description: 'Display "Turn on mdm" page.',
+
+
+  exits: {
+
+    success: {
+      viewTemplatePath: 'pages/microsoft-proxy/turn-on-mdm'
+    }
+
+  },
+
+
+  fn: async function () {
+
+    // Respond with view.
+    return {};
+
+  }
+
+
+};
@@ -0,0 +1,25 @@
+parasails.registerPage('remediate', {
+  //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
+  //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
+  //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
+  data: {
+    //…
+  },
+
+  //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
+  //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
+  //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
+  beforeMount: function() {
+    //…
+  },
+  mounted: async function() {
+    //…
+  },
+
+  //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
+  //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
+  //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
+  methods: {
+    //…
+  }
+});
@@ -0,0 +1,25 @@
+parasails.registerPage('turn-on-mdm', {
+  //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
+  //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
+  //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
+  data: {
+    //…
+  },
+
+  //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
+  //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
+  //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
+  beforeMount: function() {
+    //…
+  },
+  mounted: async function() {
+    //…
+  },
+
+  //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
+  //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
+  //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
+  methods: {
+    //…
+  }
+});
@@ -88,3 +88,5 @@
@import 'pages/policy-details.less';
@import 'pages/os-settings.less';
@import 'pages/configuration-builder.less';
+@import 'pages/microsoft-proxy/turn-on-mdm.less';
+@import 'pages/microsoft-proxy/remediate.less';
@@ -635,7 +635,7 @@ html, body {
 [purpose='page-wrap'].header-hidden {
  padding-top: 0px;
  padding-bottom: 0px;
-  background: #F9FAFC;
+  background: #FFF;
 }

 // Landing page footer styles
@@ -0,0 +1,101 @@
+#remediate {
+  background-color: #FFF;
+
+  h1 {
+    color: var(--Fleet-Black-100, #192147);
+    text-align: center;
+
+    /* Title LF (FKA h2) */
+    font-family: Inter;
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 38.4px; /* 120% */
+    margin-bottom: 24px;
+  }
+
+  p {
+    color: var(--Fleet-Black-75, #515774);
+    text-align: center;
+
+    /* Body SM (FKA Card text) */
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px; /* 150% */
+    margin-bottom: 0px;
+  }
+  [purpose='page-container'] {
+    padding: 120px 0px 60px 0px;
+  }
+  [purpose='page-content'] {
+    max-width: 528px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  [purpose='remediation-steps'] {
+    margin-top: 80px;
+    margin-bottom: 80px;
+    counter-reset: custom-counter;
+    list-style-type: none;
+    padding-inline-start: 0px;
+    padding: 0;
+    ul > li {
+      text-indent: 0px;
+      margin-left: 0px;
+    }
+    > li {
+      counter-increment: custom-counter;
+      margin-left: 36px;
+      text-indent: -36px;
+      padding-left: 0px;
+      margin-bottom: 40px;
+      img {
+        max-height: 170px;
+        margin-top: 20px;
+        max-width: 100%;
+      }
+      p {
+        display: inline;
+        margin-bottom: 0px;
+      }
+    }
+    > li::before {
+      content: counter(custom-counter);
+      background-color: #E2E4EA;
+      width: 24px;
+      font-size: 13px;
+      display: inline-block;
+      border-radius: 50%;
+      margin-right: 10px;
+      padding: 2px 4px;
+      text-align: center;
+      line-height: 20px;
+      text-indent: 0px;
+    }
+  }
+  [purpose='bottom-logo'] {
+    position: absolute;
+    bottom: 60px;
+    right: calc(~'50% - 34.5px');
+    img {
+      height: 24px;
+    }
+  }
+  @media(max-width: 991px) {
+    [purpose='page-container'] {
+      padding: 80px 32px 40px 32px;
+    }
+  }
+  @media(max-width: 767px) {
+    [purpose='page-container'] {
+      padding: 80px 24px 40px 24px;
+    }
+  }
+  @media(max-width: 575px) {
+    [purpose='page-container'] {
+      padding: 48px 16px 40px 26px;
+    }
+  }
+}
@@ -0,0 +1,103 @@
+#turn-on-mdm {
+  background-color: #FFF;
+
+  h1 {
+    color: var(--Fleet-Black-100, #192147);
+    text-align: center;
+
+    /* Title LF (FKA h2) */
+    font-family: Inter;
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 38.4px; /* 120% */
+    margin-bottom: 24px;
+  }
+
+  p {
+    color: var(--Fleet-Black-75, #515774);
+    text-align: center;
+
+    /* Body SM (FKA Card text) */
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px; /* 150% */
+    margin-bottom: 0px;
+  }
+  [purpose='page-container'] {
+    padding: 120px 0px 60px 0px;
+
+  }
+  [purpose='page-content'] {
+    max-width: 528px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  [purpose='remediation-steps'] {
+    margin-top: 80px;
+    margin-bottom: 80px;
+    counter-reset: custom-counter;
+    list-style-type: none;
+    padding-inline-start: 0px;
+    padding: 0;
+    ul > li {
+      text-indent: 0px;
+      margin-left: 0px;
+    }
+    > li {
+      counter-increment: custom-counter;
+      margin-left: 36px;
+      text-indent: -36px;
+      padding-left: 0px;
+      margin-bottom: 40px;
+      img {
+        max-height: 170px;
+        margin-top: 20px;
+        max-width: 100%;
+      }
+      p {
+        display: inline;
+        margin-bottom: 0px;
+      }
+    }
+    > li::before {
+      content: counter(custom-counter);
+      background-color: #E2E4EA;
+      width: 24px;
+      font-size: 13px;
+      display: inline-block;
+      border-radius: 50%;
+      margin-right: 10px;
+      padding: 2px 4px;
+      text-align: center;
+      line-height: 20px;
+      text-indent: 0px;
+    }
+  }
+  [purpose='bottom-logo'] {
+    position: absolute;
+    bottom: 60px;
+    right: calc(~'50% - 34.5px');
+    img {
+      height: 24px;
+    }
+  }
+  @media(max-width: 991px) {
+    [purpose='page-container'] {
+      padding: 80px 32px 40px 32px;
+    }
+  }
+  @media(max-width: 767px) {
+    [purpose='page-container'] {
+      padding: 80px 24px 40px 24px;
+    }
+  }
+  @media(max-width: 575px) {
+    [purpose='page-container'] {
+      padding: 48px 16px 40px 26px;
+    }
+  }
+}
+
@@ -73,4 +73,6 @@ module.exports.policies = {
  'microsoft-proxy/receive-redirect-from-microsoft': true,
  'view-configuration-builder': true,
  'android-proxy/*': true,
+  'microsoft-proxy/view-remediate': true,
+  'microsoft-proxy/view-turn-on-mdm': true,
 };
@@ -498,6 +498,22 @@ module.exports.routes = {
    }
  },

+  'GET /microsoft-compliance-partner/remediate': {
+    action: 'microsoft-proxy/view-remediate',
+    locals: {
+      showConfigurationProfileLayout: true,
+      hideStartCTA: true,
+    }
+  },
+
+  'GET /microsoft-compliance-partner/turn-on-mdm': {
+    action: 'microsoft-proxy/view-turn-on-mdm',
+    locals: {
+      showConfigurationProfileLayout: true,
+      hideStartCTA: true,
+    }
+  },
+
  //  ╦  ╔═╗╔═╗╔═╗╔═╗╦ ╦  ╦═╗╔═╗╔╦╗╦╦═╗╔═╗╔═╗╔╦╗╔═╗
  //  ║  ║╣ ║ ╦╠═╣║  ╚╦╝  ╠╦╝║╣  ║║║╠╦╝║╣ ║   ║ ╚═╗
  //  ╩═╝╚═╝╚═╝╩ ╩╚═╝ ╩   ╩╚═╚═╝═╩╝╩╩╚═╚═╝╚═╝ ╩ ╚═╝
@@ -475,6 +475,8 @@
    <script src="/js/pages/legal/privacy.page.js"></script>
    <script src="/js/pages/legal/terms.page.js"></script>
    <script src="/js/pages/meetups.page.js"></script>
+    <script src="/js/pages/microsoft-proxy/remediate.page.js"></script>
+    <script src="/js/pages/microsoft-proxy/turn-on-mdm.page.js"></script>
    <script src="/js/pages/observability.page.js"></script>
    <script src="/js/pages/os-settings.page.js"></script>
    <script src="/js/pages/osquery-table-details.page.js"></script>
@@ -0,0 +1,35 @@
+<div id="remediate" v-cloak>
+
+  <div purpose="page-container">
+    <div purpose="page-content" class="d-flex flex-column justify-content-between">
+      <h1>Secure your device</h1>
+      <p>Your organization has blocked sign-in because your computer is failing some security checks. Follow the steps below to restore access.</p>
+      <ol purpose="remediation-steps">
+        <li>
+          <p>Click the Fleet icon in your menu bar, and select <strong>My device</strong>:</p>
+          <img alt="The Fleet Desktop menu" src="/images/remediate-step-1-456x170@2x.png">
+        </li>
+        <li>
+          <p>Navigate to the <strong>Policies</strong> tab:</p>
+          <img alt="The Policies tab" src="/images/remediate-step-2-456x170@2x.png">
+        </li>
+        <li>
+          <p>Select the failing policies and follow the resolution instructions:</p>
+          <img alt="Failing policies" src="/images/remediate-step-3-456x170@2x.png">
+        </li>
+        <li>
+          <p>Click the <strong>Refetch</strong> button:</p>
+          <img alt="Clicking the refetch button on the 'My device' page" src="/images/remediate-step-4-456x170@2x.png">
+        </li>
+        <li>
+          <p>Once all policies have a <strong>Yes</strong> status, you'll be able to log in.</p>
+        </li>
+      </ol>
+      <div purpose="bottom-logo" class="d-flex flex-row justify-content-center">
+        <a href="/"><img alt="The Fleet logo" src="/images/fleet-logo-muted-69x24@2x.png"></a>
+      </div>
+    </div>
+  </div>
+
+</div>
+<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
@@ -0,0 +1,27 @@
+<div id="turn-on-mdm" v-cloak>
+
+  <div purpose="page-container">
+    <div purpose="page-content" class="d-flex flex-column justify-content-between">
+      <h1>Turn on MDM</h1>
+      <p>Your organization has blocked sign-in because your computer does not have mobile device management (MDM) turned on. Follow the steps below to resolve.</p>
+      <ol purpose="remediation-steps">
+        <li>
+          <p>Click the Fleet icon in your menu bar, and select <strong>My device</strong>:</p>
+          <img alt="The Fleet Desktop menu" src="/images/remediate-step-1-456x170@2x.png">
+        </li>
+        <li>
+          <p>Click <strong>Turn on MDM </strong></p>
+          <img alt="The 'My Device' page in Fleet" src="/images/turn-on-mdm-step-2-456x170@2x.png">
+        </li>
+        <li>
+          <p>Follow the on-screen instructions, then try logging in again.</p>
+        </li>
+      </ol>
+      <div purpose="bottom-logo" class="d-flex flex-row justify-content-center">
+        <a href="/"><img alt="The Fleet logo" src="/images/fleet-logo-muted-69x24@2x.png"></a>
+      </div>
+    </div>
+  </div>
+
+</div>
+<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>