From cd82d068f85c1230016181b85caf323593f7ed18 Mon Sep 17 00:00:00 2001 From: Eric Date: Thu, 30 Oct 2025 12:49:00 -0500 Subject: [PATCH] Website: Update Fleet premium trial page and signup modal (#35004) Related to: https://github.com/fleetdm/fleet/issues/33798 Changes: - Updated the position of the close button on the mobile signup modal. - updated the signup modal to clear the form and errors when users switch the displayed form. - Updated the styles and spacing on the forgot password page to match current website styles. - Updated the mobile styles and spacing between elements on the Fleet Premium trial page (/try). --- .../js/components/signup-modal.component.js | 31 ++++++-- .../components/signup-modal.component.less | 74 ++++++++++++++----- .../pages/entrance/forgot-password.less | 23 +++--- .../styles/pages/fleet-premium-trial.less | 44 ++++++++--- .../views/pages/entrance/forgot-password.ejs | 2 +- website/views/pages/fleet-premium-trial.ejs | 6 +- 6 files changed, 131 insertions(+), 49 deletions(-) diff --git a/website/assets/js/components/signup-modal.component.js b/website/assets/js/components/signup-modal.component.js index 3b15662a76..1bec43f2a6 100644 --- a/website/assets/js/components/signup-modal.component.js +++ b/website/assets/js/components/signup-modal.component.js @@ -1,7 +1,7 @@ /** * * ----------------------------------------------------------------------------- - * A button with a built-in animated arrow + * A modal with a combined signup/login form * * @type {Component} * @@ -25,7 +25,10 @@ parasails.registerComponent('signupModal', { data: function (){ return { formToDisplay: 'signup', + // Shared by forms syncing: false, + cloudError: undefined, + // Signup form signupFormData: {}, signupFormErrors: {}, signupFormRules: { @@ -34,15 +37,16 @@ parasails.registerComponent('signupModal', { emailAddress: {required: true, isEmail: true}, password: {required: true}, }, - cloudError: undefined, + // Login form loginFormData: {}, loginFormErrors: {}, loginFormRules: { emailAddress: {required: true, isEmail: true}, password: {required: true}, }, - _bsModalIsAnimatingOut: false, + // For + _bsModalIsAnimatingOut: false, originalScrollPosition: undefined,//« more on this below }; }, @@ -65,12 +69,12 @@ parasails.registerComponent('signupModal', {

We just need a few details in order to get started.

@@ -105,12 +109,10 @@ parasails.registerComponent('signupModal', {
-

This email is already linked to a Fleet account.
Please sign in with your email and password.

+ This email is already linked to a Fleet account.
Please sign in with your email and password. -

Please enter your work or school email address. -

An icon indicating that this section has important information @@ -140,6 +142,7 @@ parasails.registerComponent('signupModal', {
Sign in
+ Forgot your password? @@ -194,6 +197,18 @@ parasails.registerComponent('signupModal', { // $(this.$el).off('shown.bs.modal'); });//ƒ }, + watch: { + + formToDisplay: function() { + // Reset forms and form errors when the form is switched. + this.signupFormData = {}; + this.signupFormErrors = {}; + this.loginFormData = {}; + this.loginFormErrors = {}; + this.cloudError = undefined; + } + + }, // ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗ // ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗ // ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝ diff --git a/website/assets/styles/components/signup-modal.component.less b/website/assets/styles/components/signup-modal.component.less index a09dfc9909..0d48d6053c 100644 --- a/website/assets/styles/components/signup-modal.component.less +++ b/website/assets/styles/components/signup-modal.component.less @@ -109,6 +109,18 @@ .small { font-size: 12px; } + a { + cursor: pointer; + line-height: 150%; + color: #515774; + text-decoration: underline; + text-underline-offset: 2px; + } + [parasails-component='cloud-error'] { + p { + color: @core-vibrant-red; + } + } } [purpose='submit-button'] { @@ -144,12 +156,8 @@ [purpose='modal-close-button'] { .btn-reset(); opacity: 0.6; - padding-top: 8px; - padding-bottom: 8px; - padding-left: 16px; - padding-right: 16px; - top: 5px; - right: 0; + top: 25px; + right: 25px; font-size: 28px; line-height: 1; &:hover { @@ -225,15 +233,6 @@ } -// // Modal backdrop styles are exposed globally here because this gets appended to the -// .modal-backdrop { -// background-color: #192147; -// max-width: 100vw; -// max-height: 100vh; -// &.show { -// opacity: 0.25; -// } -// } @media (max-width: 991px) { .modal-backdrop.signup { background-color: #FFF; @@ -247,17 +246,58 @@ [parasails-component='signup-modal'] { max-width: 100vw; -webkit-overflow-scrolling: touch;//« makes this actually scrollable on certain phones + [purpose='signup-modal'] { + margin: auto; + width: 100%; + } [purpose='modal-dialog'] { z-index: 100; position: relative; - // max-width: 100%; + max-width: 100%; [purpose='modal-content'] { box-shadow: none; margin-top: 48px; width: 100%; - // max-width: 100%; + max-width: 100%; padding: 48px; border: none; + [purpose='modal-close-button'] { + top: -25px; + right: 25px; + } + } + } + } +} + +@media (max-width: 576px) { + .modal-backdrop.signup { + background-color: #FFF; + &.show { + opacity: 1; + transition: none; + } + } + + + [parasails-component='signup-modal'] { + max-width: 100vw; + -webkit-overflow-scrolling: touch;//« makes this actually scrollable on certain phones + [purpose='signup-modal'] { + margin: auto; + width: 100%; + } + [purpose='modal-dialog'] { + z-index: 100; + position: relative; + max-width: 100%; + [purpose='modal-content'] { + box-shadow: none; + margin-top: 48px; + width: 100%; + max-width: 100%; + padding: 24px; + border: none; } } } diff --git a/website/assets/styles/pages/entrance/forgot-password.less b/website/assets/styles/pages/entrance/forgot-password.less index f4233d2d06..1c9f37a7cd 100644 --- a/website/assets/styles/pages/entrance/forgot-password.less +++ b/website/assets/styles/pages/entrance/forgot-password.less @@ -3,6 +3,7 @@ h1 { font-size: 28px; line-height: 38px; + margin-bottom: 48px; } a { color: @core-vibrant-blue; @@ -14,29 +15,33 @@ [purpose='customer-portal-form'] { label { + margin-bottom: 8px; + color: var(--text-text-brand, #192147); + font-family: Inter; + font-size: 14px; + font-style: normal; font-weight: 700; - margin-bottom: 4px; + line-height: 21px; /* 150% */ } input { height: 40px; - border-radius: 4px; + border-radius: 6px; } .card { border-radius: 6px; } .card-body { - padding: 2em; + padding: 24px; } } [purpose='submit-button'] { - margin-left: auto; - margin-right: auto; - border-radius: 4px; - padding-top: 10px; - padding-bottom: 10px; + border-radius: 8px; + padding-top: 16px; + padding-bottom: 16px; display: flex; + align-items: center; span { display: inline; margin-left: auto; @@ -44,7 +49,7 @@ font-size: 16px; line-height: 20px; text-align: center; - font-weight: 400; + font-weight: 700; } } diff --git a/website/assets/styles/pages/fleet-premium-trial.less b/website/assets/styles/pages/fleet-premium-trial.less index 306ca22bd9..a7d580b346 100644 --- a/website/assets/styles/pages/fleet-premium-trial.less +++ b/website/assets/styles/pages/fleet-premium-trial.less @@ -26,21 +26,19 @@ line-height: 19.2px; /* 120% */ } - [purpose='modal'] { - + p { + line-height: 24px; } + + [purpose='close-button'] { position: relative; } [purpose='modal-close-button'] { .btn-reset(); opacity: 0.6; - padding-top: 8px; - padding-bottom: 8px; - padding-left: 16px; - padding-right: 16px; - top: -100px; - right: -32px; + top: -78px; + right: -21px; font-size: 28px; line-height: 1; &:hover { @@ -57,6 +55,7 @@ position: relative; max-width: 600px; margin: 0 auto; + min-width: 0px; } [purpose='modal-content'] { width: 600px; @@ -71,7 +70,7 @@ img { width: 32px; height: auto; - margin-bottom: 40px; + margin-bottom: 24px; } } [purpose='content'] { @@ -166,6 +165,7 @@ justify-content: center; align-items: center; // gap: 16px; + height: 200px; flex: 1 0 0; align-self: stretch; border-radius: 12px; @@ -201,6 +201,7 @@ gap: 16px; [purpose='modal-button'] { padding: 24px; + height: 200px; } } [purpose='license-icon'] { @@ -240,29 +241,50 @@ position: relative; // max-width: 100%; } + [purpose='modal'] { + max-width: unset; + } + [purpose='modal-close-button'] { + top: -128px; + right: -8px; + } [purpose='modal-content'] { position: relative; box-shadow: none; border: none; margin-top: 48px; width: 100%; - // max-width: 100%; + max-width: unset; padding: 48px; } } @media (max-width: 576px) { [purpose='modal-button-links'] { flex-direction: column; + gap: 24px; } [purpose='modal-alt-button-links'] { flex-direction: column; + gap: 24px; } [purpose='modal-content'] { box-shadow: none; margin-top: 0px; width: 100%; - padding: 48px; + padding: 24px; } + [purpose='modal-close-button'] { + top: -66px; + right: -8px; + } + [purpose='content'] { + br { + display: none; + } + + } + + // Move close button further in. } diff --git a/website/views/pages/entrance/forgot-password.ejs b/website/views/pages/entrance/forgot-password.ejs index fbe4b95ea9..1569b816b7 100644 --- a/website/views/pages/entrance/forgot-password.ejs +++ b/website/views/pages/entrance/forgot-password.ejs @@ -11,7 +11,7 @@
Please enter a valid email address.
- Reset password + Reset password diff --git a/website/views/pages/fleet-premium-trial.ejs b/website/views/pages/fleet-premium-trial.ejs index 9172a95fbb..6f9ed35556 100644 --- a/website/views/pages/fleet-premium-trial.ejs +++ b/website/views/pages/fleet-premium-trial.ejs @@ -3,7 +3,7 @@ -
+
@@ -46,7 +46,7 @@

How was it?

-

Your 30-day trial expired. Get a Premium license to keep everything unlocked, or continue with the free edition.

+

Your 30-day trial expired. Get a Premium license to keep everything unlocked, or continue with the free edition.