Discharge7443/fleet
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

Website: Add /demo/okta-webflow (#10238)

Browse Source 
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 <mikermcneil@users.noreply.github.com>
This commit is contained in:
Eric
2023-03-01 19:08:47 -06:00
committed by GitHub
co-authored by Mike McNeil
parent e7476c6a9d
commit 4770a780b4
11 changed files with 182 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/api/controllers/experimental/view-okta-webflow.js
Vendored
+27
View File
@@ -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 {};
}
};
website/assets/js/pages/experimental/okta-webflow.page.js
Vendored
+50
View File
@@ -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);
},
}
});
website/assets/styles/importer.less
Vendored
+1
View File
@@ -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';
website/assets/styles/pages/experimental/okta-webflow.less
Vendored
+29
View File
@@ -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;
}
}
}
website/config/policies.js
Vendored
+1
View File
@@ -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
};
website/config/routes.js
Vendored
+9
View File
@@ -283,6 +283,15 @@ module.exports.routes = {
},
'GET /experimental/okta-webflow': {
action: 'experimental/view-okta-webflow',
locals: {
layout: 'layouts/layout-sandbox',
optimizeForAppleWebview: true,
}
},
// ╦╔╦╗╔═╗╔═╗╦╔╗╔╔═╗ ┌─┬ ┌─┐┌┐┌┌┬┐┬┌┐┌┌─┐ ┌─┐┌─┐┌─┐┌─┐┌─┐─┐
// ║║║║╠═╣║ ╦║║║║║╣ │ │ ├─┤│││ │││││││ ┬ ├─┘├─┤│ ┬├┤ └─┐ │
website/views/layouts/layout-customer.ejs
Vendored
+1
View File
@@ -247,6 +247,7 @@
<script src="/js/pages/entrance/login.page.js"></script>
<script src="/js/pages/entrance/new-password.page.js"></script>
<script src="/js/pages/entrance/signup.page.js"></script>
<script src="/js/pages/experimental/okta-webflow.page.js"></script>
<script src="/js/pages/faq.page.js"></script>
<script src="/js/pages/fleet-mdm.page.js"></script>
<script src="/js/pages/get-started.page.js"></script>
website/views/layouts/layout-landing.ejs
Vendored
+1
View File
@@ -248,6 +248,7 @@
<script src="/js/pages/entrance/login.page.js"></script>
<script src="/js/pages/entrance/new-password.page.js"></script>
<script src="/js/pages/entrance/signup.page.js"></script>
<script src="/js/pages/experimental/okta-webflow.page.js"></script>
<script src="/js/pages/faq.page.js"></script>
<script src="/js/pages/fleet-mdm.page.js"></script>
<script src="/js/pages/get-started.page.js"></script>
website/views/layouts/layout-sandbox.ejs
Vendored
+7 -5
View File
@@ -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;
%><!DOCTYPE html>
<html>
@@ -130,8 +130,8 @@
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<%/* End Google Tag Manager (noscript) */%>
<div style="padding-bottom: 60px; background-color: #FFF;" purpose="page-wrap">
<div class="header" purpose="header-container">
<div style="padding-bottom: <%= optimizeForAppleWebview ? '0px' : '60px' %>; background-color: #FFF;" purpose="page-wrap">
<div class="header <%= optimizeForAppleWebview ? 'd-none' : '' %>" purpose="header-container">
<%// Call to action ribbon above page header %>
<div purpose="header-ribbon-cta" class="<%= headerCTAHidden ? 'd-none' : 'd-flex' %> flex-row justify-content-center align-items-md-center">
<div class="mb-0 d-flex flex-lg-row flex-column justify-content-center py-3 px-2">
@@ -272,7 +272,7 @@
<%- body %>
<div purpose="footer" style="position: absolute; bottom: 0px; width: 100%; height: 60px; color: #515774;">
<div purpose="footer" class="<%= optimizeForAppleWebview ? 'd-none' : '' %>" style="position: absolute; bottom: 0px; width: 100%; height: 60px; color: #515774;">
<div style="max-width: 500px;" class="container-fluid">
<div style="font-size: 11px; line-height: 18px;" class="d-sm-flex d-block flex-sm-row justify-content-center mr-4 mr-md-auto">
<img alt="Creative Commons Licence CC BY-SA 4.0" src="/images/logo-creative-commons-160x30@2x.png" style="width: 80px; height: 15px;" class="mr-2 mb-2 mb-sm-0"/>
@@ -297,9 +297,10 @@
<% /* Cookie consent banner */ %>
<script id="cookieyes" type="text/javascript" src="https://cdn-cookieyes.com/client_data/71bcdd51b166ceeb18bd0d28/script.js"></script>
<% /* Chat (Papercups) */ %>
<%if(!optimizeForAppleWebview){%>
<script>window.Papercups = { config: { accountId: '5b59eeac-1578-4fdb-b946-e17c1dca0c51', primaryColor:'#6A67FE', requireEmailUpfront: true } };</script>
<script type="text/javascript" async defer src="https://app.papercups.io/widget.js"></script>
<%}%>
<%/* Stripe.js */%>
<script src="https://js.stripe.com/v3/"></script>
@@ -375,6 +376,7 @@
<script src="/js/pages/entrance/login.page.js"></script>
<script src="/js/pages/entrance/new-password.page.js"></script>
<script src="/js/pages/entrance/signup.page.js"></script>
<script src="/js/pages/experimental/okta-webflow.page.js"></script>
<script src="/js/pages/faq.page.js"></script>
<script src="/js/pages/fleet-mdm.page.js"></script>
<script src="/js/pages/get-started.page.js"></script>
website/views/layouts/layout.ejs
Vendored
+1
View File
@@ -451,6 +451,7 @@
<script src="/js/pages/entrance/login.page.js"></script>
<script src="/js/pages/entrance/new-password.page.js"></script>
<script src="/js/pages/entrance/signup.page.js"></script>
<script src="/js/pages/experimental/okta-webflow.page.js"></script>
<script src="/js/pages/faq.page.js"></script>
<script src="/js/pages/fleet-mdm.page.js"></script>
<script src="/js/pages/get-started.page.js"></script>
website/views/pages/experimental/okta-webflow.ejs
Vendored
+55
View File
@@ -0,0 +1,55 @@
<div id="okta-webflow" v-cloak>
<div purpose="page-content">
<div purpose="login-card" class="card" v-if="!showEULA">
<img class="mx-auto" alt="Fleet logo" src="/images/logo-blue-162x92@2x.png">
<hr class="px-3">
<div class="card-body">
<p style="font-size: 24px;" class="text-center text-muted">Sign in</p>
<ajax-form :syncing.sync="syncing" :form-data="formData" :form-rules="formRules" :form-errors.sync="formErrors" :handle-submitting="handleSubmittingFakeLoginForm" @submitted="submittedFakeLoginForm()">
<div class="form-group">
<label for="username">Username</label>
<input type="username" class="form-control" :class="[formErrors.username ? 'is-invalid' : '']" v-model.trim="formData.username" autocomplete="email" focus-first>
<div class="invalid-feedback" v-if="formErrors.username">Please provide your username.</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" :class="[formErrors.password ? 'is-invalid' : '']" v-model.trim="formData.password" autocomplete="current-password">
<div class="invalid-feedback" v-if="formErrors.password">Please enter your password.</div>
</div>
<div class="pb-3">
<ajax-button :syncing="syncing" spinner="true" purpose="submit-button" class="btn-info mt-4 btn-lg btn-block">Sign in</ajax-button>
</div>
</ajax-form>
</div>
</div>
<div purpose="eula-card" class="card" v-else>
<div class="d-flex flex-row justify-content-center">
<img class="mx-auto" alt="Fleet logo" src="/images/logo-blue-162x92@2x.png">
</div>
<p style="font-size: 24px; font-weight: 700;" class="text-center">Terms and Conditions</p>
<div purpose="eula-container" class="pb-2">
<p><strong>END-USER LICENSE AGREEMENT FOR MDM SOFTWARE</strong></p>
<p>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.</p>
<p>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.</p>
<p><strong>LICENSE GRANT</strong></p>
<p>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.</p>
<p><strong>RESTRICTIONS ON USE</strong></p>
<p>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.</p>
<p><strong>OWNERSHIP</strong></p>
<p>The MDM SOFTWARE and all intellectual property rights therein are and shall remain the sole property of LICENSOR.</p>
<p><strong>WARRANTY DISCLAIMER</strong></p>
<p>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.</p>
<p><strong>LIMITATION OF LIABILITY</strong></p>
<p>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.</p>
<p><strong>TERMINATION</strong></p>
<p>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.</p>
<p><strong>GENERAL</strong></p>
<p>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.</p>
<div class="d-flex flex-row justify-content-center">
<a class="mt-3 mb-2 mx-auto btn btn-info"><span style="color: #FFF">Accept terms and continue</span></a>
</div>
</div>
</div>
</div>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>