From 4770a780b4e8d5075e440d3a9a068ac8e1bd896e Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 1 Mar 2023 19:08:47 -0600 Subject: [PATCH] Website: Add /demo/okta-webflow (#10238) Related to: https://github.com/fleetdm/fleet/issues/10210 Changes: - Added `/experimental/okta-webflow` - This page has a login form that accepts any input. When the login form is submitted, the page shows the user a EULA. - Updated policies, importer.less and routes - Updated `layouts/layout-sandbox` to hide the website's header and footer, and disable the Papercups chat widget when a variable named `optimizeForAppleWebview` is set to `true`. --------- Co-authored-by: Mike McNeil --- .../experimental/view-okta-webflow.js | 27 +++++++++ .../pages/experimental/okta-webflow.page.js | 50 +++++++++++++++++ website/assets/styles/importer.less | 1 + .../pages/experimental/okta-webflow.less | 29 ++++++++++ website/config/policies.js | 1 + website/config/routes.js | 9 +++ website/views/layouts/layout-customer.ejs | 1 + website/views/layouts/layout-landing.ejs | 1 + website/views/layouts/layout-sandbox.ejs | 12 ++-- website/views/layouts/layout.ejs | 1 + .../views/pages/experimental/okta-webflow.ejs | 55 +++++++++++++++++++ 11 files changed, 182 insertions(+), 5 deletions(-) create mode 100644 website/api/controllers/experimental/view-okta-webflow.js create mode 100644 website/assets/js/pages/experimental/okta-webflow.page.js create mode 100644 website/assets/styles/pages/experimental/okta-webflow.less create mode 100644 website/views/pages/experimental/okta-webflow.ejs diff --git a/website/api/controllers/experimental/view-okta-webflow.js b/website/api/controllers/experimental/view-okta-webflow.js new file mode 100644 index 0000000000..11cae44129 --- /dev/null +++ b/website/api/controllers/experimental/view-okta-webflow.js @@ -0,0 +1,27 @@ +module.exports = { + + + friendlyName: 'View okta webflow', + + + description: 'Display "Okta webflow" page.', + + + exits: { + + success: { + viewTemplatePath: 'pages/experimental/okta-webflow' + } + + }, + + + fn: async function () { + + // Respond with view. + return {}; + + } + + +}; diff --git a/website/assets/js/pages/experimental/okta-webflow.page.js b/website/assets/js/pages/experimental/okta-webflow.page.js new file mode 100644 index 0000000000..30f9913c10 --- /dev/null +++ b/website/assets/js/pages/experimental/okta-webflow.page.js @@ -0,0 +1,50 @@ +parasails.registerPage('okta-webflow', { + // ╦╔╗╔╦╔╦╗╦╔═╗╦ ╔═╗╔╦╗╔═╗╔╦╗╔═╗ + // ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣ + // ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝ + data: { + formData: { /* … */ }, + // For tracking client-side validation errors in our form. + // > Has property set to `true` for each invalid property in `formData`. + formErrors: { /* … */ }, + + // Form rules + formRules: { + username: {required: true }, + password: {required: true }, + }, + // Syncing / loading state + + syncing: false, + showEULA: false, + aggreeToEula: false, + }, + + // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗ + // ║ ║╠╣ ║╣ ║ ╚╦╝║ ║ ║╣ + // ╩═╝╩╚ ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝ + beforeMount: function() { + //… + }, + mounted: async function() { + //… + }, + + // ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗ + // ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗ + // ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝ + methods: { + //… + handleSubmittingFakeLoginForm: async function() { + return; + }, + submittedFakeLoginForm: async function() { + this.syncing = true; + await setTimeout(()=>{ + this.showEULA = true; + return; + }, 1000); + + }, + } +}); diff --git a/website/assets/styles/importer.less b/website/assets/styles/importer.less index 2af1205004..851c75612c 100644 --- a/website/assets/styles/importer.less +++ b/website/assets/styles/importer.less @@ -71,6 +71,7 @@ @import 'pages/fleet-mdm.less'; @import 'pages/upgrade.less'; @import 'pages/compliance.less'; +@import 'pages/experimental/okta-webflow.less'; @import 'pages/osquery-management.less'; @import 'pages/transparency.less'; diff --git a/website/assets/styles/pages/experimental/okta-webflow.less b/website/assets/styles/pages/experimental/okta-webflow.less new file mode 100644 index 0000000000..4787ff6c1c --- /dev/null +++ b/website/assets/styles/pages/experimental/okta-webflow.less @@ -0,0 +1,29 @@ +#okta-webflow { + + [purpose='login-card'] { + width: 100%; + height: 100vh; + padding-top: 16px; + padding-right: 120px; + padding-left: 120px; + } + [purpose='eula-card'] { + width: 100%; + height: 100vh; + padding-top: 16px; + padding-right: 120px; + padding-left: 120px; + padding-bottom: 16px; + margin-bottom: -60px; + } + [purpose='eula-container'] { + max-height: 450px; + padding-right: 16px; + overflow-x: hidden; + overflow-y: scroll; + p { + text-align: justify; + } + } + +} diff --git a/website/config/policies.js b/website/config/policies.js index 5820ca0ce8..fcdbffb153 100644 --- a/website/config/policies.js +++ b/website/config/policies.js @@ -56,4 +56,5 @@ module.exports.policies = { 'deliver-premium-upgrade-form': true, 'view-compliance': true, 'view-osquery-management': true, + 'experimental/*': true, // For internal Fleet demos }; diff --git a/website/config/routes.js b/website/config/routes.js index 200d0f5af5..c768af18b3 100644 --- a/website/config/routes.js +++ b/website/config/routes.js @@ -283,6 +283,15 @@ module.exports.routes = { }, + 'GET /experimental/okta-webflow': { + action: 'experimental/view-okta-webflow', + locals: { + layout: 'layouts/layout-sandbox', + optimizeForAppleWebview: true, + } + }, + + // ╦╔╦╗╔═╗╔═╗╦╔╗╔╔═╗ ┌─┬ ┌─┐┌┐┌┌┬┐┬┌┐┌┌─┐ ┌─┐┌─┐┌─┐┌─┐┌─┐─┐ // ║║║║╠═╣║ ╦║║║║║╣ │ │ ├─┤│││ │││││││ ┬ ├─┘├─┤│ ┬├┤ └─┐ │ diff --git a/website/views/layouts/layout-customer.ejs b/website/views/layouts/layout-customer.ejs index 394f7525c2..aac523b311 100644 --- a/website/views/layouts/layout-customer.ejs +++ b/website/views/layouts/layout-customer.ejs @@ -247,6 +247,7 @@ + diff --git a/website/views/layouts/layout-landing.ejs b/website/views/layouts/layout-landing.ejs index 40baae28d9..7916e69fa9 100644 --- a/website/views/layouts/layout-landing.ejs +++ b/website/views/layouts/layout-landing.ejs @@ -248,6 +248,7 @@ + diff --git a/website/views/layouts/layout-sandbox.ejs b/website/views/layouts/layout-sandbox.ejs index acaa1a9d03..314445c1a3 100644 --- a/website/views/layouts/layout-sandbox.ejs +++ b/website/views/layouts/layout-sandbox.ejs @@ -3,7 +3,7 @@ // we make sure certain view locals exist that are commonly used in this layout.ejs file. This ensures we // don't have to do `typeof` checks below. var me; - var hideHeaderOnThisPage; + var optimizeForAppleWebview;// For hiding the header and footer, and disabling papercups chat. var headerCTAHidden; %> @@ -130,8 +130,8 @@ height="0" width="0" style="display:none;visibility:hidden"> <%/* End Google Tag Manager (noscript) */%> -
-
+
+
<%// Call to action ribbon above page header %>
@@ -272,7 +272,7 @@ <%- body %> -
+
Creative Commons Licence CC BY-SA 4.0 @@ -297,9 +297,10 @@ <% /* Cookie consent banner */ %> <% /* Chat (Papercups) */ %> + <%if(!optimizeForAppleWebview){%> - + <%}%> <%/* Stripe.js */%> @@ -375,6 +376,7 @@ + diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs index f8f99eec0d..d4c6c43385 100644 --- a/website/views/layouts/layout.ejs +++ b/website/views/layouts/layout.ejs @@ -451,6 +451,7 @@ + diff --git a/website/views/pages/experimental/okta-webflow.ejs b/website/views/pages/experimental/okta-webflow.ejs new file mode 100644 index 0000000000..f0e26d73ff --- /dev/null +++ b/website/views/pages/experimental/okta-webflow.ejs @@ -0,0 +1,55 @@ +
+
+
+ Fleet logo +
+
+

Sign in

+ +
+ + +
Please provide your username.
+
+
+ + +
Please enter your password.
+
+
+ Sign in +
+ +
+
+
+
+ Fleet logo +
+

Terms and Conditions

+
+

END-USER LICENSE AGREEMENT FOR MDM SOFTWARE

+

PLEASE READ THIS END-USER LICENSE AGREEMENT ("EULA") CAREFULLY BEFORE USING THE MDM SOFTWARE. THIS EULA IS A LEGAL AGREEMENT BETWEEN YOU ("LICENSEE") AND [INSERT COMPANY NAME] ("LICENSOR") FOR THE MDM SOFTWARE.

+

BY USING THE MDM SOFTWARE, YOU AGREE TO BE BOUND BY THE TERMS OF THIS EULA. IF YOU DO NOT AGREE TO THE TERMS OF THIS EULA, DO NOT USE THE MDM SOFTWARE.

+

LICENSE GRANT

+

LICENSOR grants LICENSEE a non-exclusive, non-transferable license to use the MDM SOFTWARE solely for LICENSEE's own internal business purposes. LICENSEE shall not use the MDM SOFTWARE for any other purpose without the prior written consent of LICENSOR.

+

RESTRICTIONS ON USE

+

LICENSEE shall not (i) modify, alter, or create derivative works of the MDM SOFTWARE; (ii) reverse engineer, decompile, or disassemble the MDM SOFTWARE; (iii) distribute, sublicense, lease, rent, or otherwise transfer the MDM SOFTWARE to any third party; or (iv) use the MDM SOFTWARE in any manner that violates any applicable laws, rules, or regulations.

+

OWNERSHIP

+

The MDM SOFTWARE and all intellectual property rights therein are and shall remain the sole property of LICENSOR.

+

WARRANTY DISCLAIMER

+

THE MDM SOFTWARE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. LICENSOR DOES NOT WARRANT THAT THE MDM SOFTWARE WILL MEET LICENSEE'S REQUIREMENTS OR THAT THE OPERATION OF THE MDM SOFTWARE WILL BE UNINTERRUPTED OR ERROR-FREE.

+

LIMITATION OF LIABILITY

+

IN NO EVENT SHALL LICENSOR BE LIABLE FOR ANY INDIRECT, SPECIAL, INCIDENTAL, CONSEQUENTIAL, OR EXEMPLARY DAMAGES ARISING OUT OF OR IN CONNECTION WITH THE USE OF THE MDM SOFTWARE, INCLUDING, WITHOUT LIMITATION, DAMAGES FOR LOSS OF BUSINESS PROFITS, BUSINESS INTERRUPTION, LOSS OF BUSINESS INFORMATION, OR ANY OTHER PECUNIARY LOSS, WHETHER IN CONTRACT, NEGLIGENCE, TORT, OR OTHERWISE, EVEN IF LICENSOR HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

+

TERMINATION

+

This EULA shall terminate automatically if LICENSEE fails to comply with any of its terms and conditions. Upon termination, LICENSEE shall immediately cease all use of the MDM SOFTWARE and shall destroy all copies of the MDM SOFTWARE in its possession or control.

+

GENERAL

+

This EULA shall be governed by and construed in accordance with the laws of the jurisdiction in which LICENSOR is located. This EULA constitutes the entire agreement between LICENSEE and LICENSOR with respect to the MDM SOFTWARE and supersedes all prior or contemporaneous communications and proposals, whether oral or written, between LICENSEE and LICENSOR regarding the MDM SOFTWARE. If any provision of this EULA is held to be invalid or unenforceable, the remaining provisions shall remain in full force and effect. No waiver of any breach of any provision of this EULA shall constitute a waiver of any prior, concurrent, or subsequent breach of the same or any other provisions hereof.

+
+ Accept terms and continue +
+
+
+
+
+<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>