mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 01:18:42 +00:00
Website: Update Fleet Premium license dispenser text and styles (#13638)
Closes: #13515 Changes: - Updated the text in the license dispenser on fleetdm.com to be clear that the customer is purchasing a self-hosted license. - Removed the bullet point feature checklists on license dispenser pages. - Updated styles to match latest wireframes --------- Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
This commit is contained in:
Eric
GitHub
parent
8565fdd485
commit
59ad56393b
8 changed files with 230 additions and 221 deletions
|
|
@ -155,7 +155,7 @@
|
|||
|
||||
[purpose='billing-card'] {
|
||||
padding: 40px;
|
||||
min-height: 312px;
|
||||
min-height: 332px;
|
||||
p {
|
||||
margin-block-end: 4px;
|
||||
}
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
|
||||
[purpose='details-card'] {
|
||||
padding: 40px;
|
||||
min-height: 312px;
|
||||
min-height: 332px;
|
||||
hr {
|
||||
color: #E2E4EA;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,19 +32,23 @@
|
|||
[purpose='cloud-error'] {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
[purpose='page-heading'] {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
[purpose='customer-portal-form'] {
|
||||
max-width: 560px;
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
label {
|
||||
font-weight: 400;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.form-control {
|
||||
height: 40px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.card {
|
||||
border-radius: 6px;
|
||||
}
|
||||
.card-body {
|
||||
padding: 2em;
|
||||
}
|
||||
|
|
@ -54,10 +58,12 @@
|
|||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 4px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-radius: 8px;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
display: inline;
|
||||
margin-left: auto;
|
||||
|
|
@ -65,9 +71,11 @@
|
|||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
}
|
||||
[purpose='order-form-line-break'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[purpose='features-list'] {
|
||||
|
|
@ -92,16 +100,31 @@
|
|||
|
||||
@media (max-width: 768px) {
|
||||
padding-top: 60px;
|
||||
[purpose='customer-portal-form'] {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
padding-top: 40px;
|
||||
[purpose='quote-input'] {
|
||||
max-width: unset;
|
||||
}
|
||||
[purpose='page-heading'] {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
[purpose='customer-portal-form'] {
|
||||
.card-body {
|
||||
padding: 1.5em 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
[purpose='order-form-line-break'] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
36
website/assets/styles/pages/entrance/login.less
vendored
36
website/assets/styles/pages/entrance/login.less
vendored
|
|
@ -10,15 +10,23 @@
|
|||
color: @core-vibrant-blue;
|
||||
}
|
||||
[purpose='customer-login-container'] {
|
||||
max-width: 800px;
|
||||
max-width: 560px;
|
||||
}
|
||||
[purpose='login-container'] {
|
||||
max-width: 600px;
|
||||
max-width: 560px;
|
||||
[purpose='customer-portal-form'] {
|
||||
max-width: 480px;
|
||||
max-width: 560px;
|
||||
}
|
||||
}
|
||||
[purpose='page-heading'] {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
[purpose='customer-portal-form'] {
|
||||
max-width: 560px;
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
label {
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
|
|
@ -27,21 +35,21 @@
|
|||
height: 40px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.card {
|
||||
border-radius: 6px;
|
||||
}
|
||||
.card-body {
|
||||
padding: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
[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;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
display: inline;
|
||||
margin-left: auto;
|
||||
|
|
@ -49,9 +57,8 @@
|
|||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
[purpose='features-list'] {
|
||||
|
|
@ -77,10 +84,17 @@
|
|||
|
||||
@media (max-width: 768px) {
|
||||
padding-top: 60px;
|
||||
[purpose='customer-portal-form'] {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
padding-top: 40px;
|
||||
[purpose='page-heading'] {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
[purpose='customer-portal-form'] {
|
||||
.card-body {
|
||||
padding: 1em;
|
||||
|
|
|
|||
28
website/assets/styles/pages/entrance/signup.less
vendored
28
website/assets/styles/pages/entrance/signup.less
vendored
|
|
@ -7,8 +7,15 @@
|
|||
a {
|
||||
color: @core-vibrant-blue;
|
||||
}
|
||||
[purpose='page-heading'] {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
[purpose='customer-portal-form'] {
|
||||
max-width: 560px;
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
label {
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
|
|
@ -17,9 +24,6 @@
|
|||
height: 40px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.card {
|
||||
border-radius: 6px;
|
||||
}
|
||||
.card-body {
|
||||
padding: 2em;
|
||||
}
|
||||
|
|
@ -29,10 +33,12 @@
|
|||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 4px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-radius: 8px;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
display: inline;
|
||||
margin-left: auto;
|
||||
|
|
@ -40,9 +46,8 @@
|
|||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
[purpose='features-list'] {
|
||||
|
|
@ -68,10 +73,17 @@
|
|||
|
||||
@media (max-width: 768px) {
|
||||
padding-top: 60px;
|
||||
[purpose='customer-portal-form'] {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
padding-top: 40px;
|
||||
[purpose='page-heading'] {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
[purpose='customer-portal-form'] {
|
||||
.card-body {
|
||||
padding: 1.5em 1em;
|
||||
|
|
|
|||
2
website/views/pages/customers/dashboard.ejs
vendored
2
website/views/pages/customers/dashboard.ejs
vendored
|
|
@ -27,7 +27,7 @@
|
|||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-2">
|
||||
<strong>Item</strong>
|
||||
<p>Fleet Premium</p>
|
||||
<p>Fleet Premium (self-hosted)</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-2 pt-3 pt-md-0">
|
||||
<strong>Cost</strong>
|
||||
|
|
|
|||
168
website/views/pages/customers/new-license.ejs
vendored
168
website/views/pages/customers/new-license.ejs
vendored
|
|
@ -1,100 +1,90 @@
|
|||
|
||||
<div id="new-license" v-cloak>
|
||||
<div style="max-width: 800px;" class="container-fluid pb-5 px-lg-0 px-3" v-if="!showSuccessMessage">
|
||||
<h1>Welcome to Fleet Premium</h1>
|
||||
<p class="pb-2">We just need a few details in order to get you a Fleet Premium license key.</p>
|
||||
<div class="d-flex flex-row justify-content-between mx-auto">
|
||||
<div style="max-width: 560px;" class="container-fluid pb-5 px-lg-0 px-3" v-if="!showSuccessMessage">
|
||||
<div purpose="page-heading">
|
||||
<h1>Welcome to Fleet Premium</h1>
|
||||
<p class="pb-2">We just need a few details in order to get you a self-hosted Fleet Premium license key.</p>
|
||||
</div>
|
||||
<div purpose="customer-portal-form" class="card card-body">
|
||||
<ajax-form action="createQuote" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="quoteFormRules" @submitted="submittedQuoteForm($event)">
|
||||
<div class="d-flex flex-column flex-sm-row">
|
||||
<div class="form-group flex-grow-1 col-12 col-sm-6 order-first px-0 mb-3 mb-sm-5">
|
||||
<label for="numberOfHosts">Total number of devices</label>
|
||||
<input class="form-control" min="1" purpose="quote-input" id="numberOfHosts" type="number" :class="[formErrors.numberOfHosts ? 'is-invalid' : formErrors.numberOfHosts < 1 ]" focus-first v-model.trim="formData.numberOfHosts" v-if="!numberOfHostsQuoted">
|
||||
<div class="invalid-feedback" v-if="formErrors.numberOfHosts">Please enter a number of hosts</div>
|
||||
<span purpose="quote-input" style="position: relative; cursor: text; padding: 6px 16px 8px 16px;" class="form-control" @click="clickResetForm()" v-if="numberOfHostsQuoted">{{formData.numberOfHosts}}<span style="position: absolute; cursor: pointer; bottom: 10px; right: 16px;" class="text-muted fa fa-times-circle pl-2"></span></span>
|
||||
</div>
|
||||
|
||||
<div purpose="customer-portal-form" class="order-first flex-grow-1">
|
||||
<div class="card card-body">
|
||||
<ajax-form action="createQuote" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="quoteFormRules" @submitted="submittedQuoteForm($event)">
|
||||
<div class="d-flex flex-column flex-sm-row">
|
||||
<div class="form-group flex-grow-1 col-12 col-sm-6 order-first px-0 mb-3 mb-sm-5">
|
||||
<label for="numberOfHosts">Total number of devices</label>
|
||||
<input class="form-control" min="1" purpose="quote-input" id="numberOfHosts" type="number" :class="[formErrors.numberOfHosts ? 'is-invalid' : formErrors.numberOfHosts < 1 ]" focus-first v-model.trim="formData.numberOfHosts" v-if="!numberOfHostsQuoted">
|
||||
<div class="invalid-feedback" v-if="formErrors.numberOfHosts">Please enter a number of hosts</div>
|
||||
<span purpose="quote-input" style="position: relative; cursor: text; padding: 6px 16px 8px 16px;" class="form-control" @click="clickResetForm()" v-if="numberOfHostsQuoted">{{formData.numberOfHosts}}<span style="position: absolute; cursor: pointer; bottom: 10px; right: 16px;" class="text-muted fa fa-times-circle pl-2"></span></span>
|
||||
</div>
|
||||
<div style="color: #515774;" class="order-last text-left text-sm-right col-12 col-sm-6 pr-0 pl-sm-4 pl-0 pt-sm-4">
|
||||
<p class="small">
|
||||
<strong class="pr-1" style="font-size: 18px; color: #192147">$7.00</strong>/month/device<br>(Billed annually at $84/device)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="color: #515774;" class="order-last text-left text-sm-right col-12 col-sm-6 pr-0 pl-sm-4 pl-0 pt-sm-4">
|
||||
<p class="small">
|
||||
<strong class="pr-1" style="font-size: 18px; color: #192147">$7.00</strong>/month/device<br>(Billed annually at $84/device)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<cloud-error purpose="cloud-error" v-if="cloudError && !showBillingForm"></cloud-error>
|
||||
<div class="mt-2 pt-3 pb-3 border-top d-flex flex-row" v-if="showQuotedPrice">
|
||||
<div class="order-first">
|
||||
<strong>Order total</strong>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<strong>${{(!showQuotedPrice || _.isNaN(formData.numberOfHosts * 7.00 * 12)) ? quotedPrice : formData.numberOfHosts * 7.00 * 12}}.00 /year</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="[showBillingForm ? 'pt-2' : '' ]" v-if="!showBillingForm">
|
||||
<ajax-button style="height: 40px;" purpose="submit-button" spinner="true" type="submit" :syncing="syncing" class="btn btn-block btn-lg btn-info" v-if="!numberOfHostsQuoted">Continue</ajax-button>
|
||||
<ajax-button style="height: 40px;" spinner="true" purpose="submit-button" :syncing="syncing" class="btn btn-block btn-lg btn-info" @click="clickScheduleDemo" v-if=" showQuotedPrice && numberOfHostsQuoted > 1000">Talk to an expert</ajax-button>
|
||||
<ajax-button style="height: 40px;" spinner="true" purpose="submit-button" :syncing="syncing" class="btn btn-block btn-lg btn-info" v-if="showQuotedPrice && numberOfHostsQuoted <= 1000">Continue</ajax-button>
|
||||
</div>
|
||||
</ajax-form>
|
||||
</div>
|
||||
<div class="card card-body mt-3" v-if="showBillingForm">
|
||||
<h3 class="pb-3">Billing information</h3>
|
||||
<ajax-form action="saveBillingInfoAndSubscribe" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="billingFormRules" @submitted="submittedPaymentForm()" v-if="!cloudError || cloudError === 'couldNotSaveBillingInfo' || cloudError === 'cardVerificationRequired'">
|
||||
<div class="form-group">
|
||||
<label for="card">Billing Card</label>
|
||||
<stripe-card-element class="mb-3" id="card" busy.sync="syncing" :is-errored.sync="formErrors.paymentSource" :stripe-publishable-key="stripePublishableKey"
|
||||
v-model="formData.paymentSource" key="billing-card" ref="paymentcardref"></stripe-card-element>
|
||||
</div>
|
||||
<div v-if="showAdditionalBillingFormInputs">
|
||||
<cloud-error purpose="cloud-error" v-if="cloudError && !showBillingForm"></cloud-error>
|
||||
<div class="mt-2 pt-3 pb-3 border-top d-flex flex-column" v-if="showQuotedPrice && formData.numberOfHosts">
|
||||
<div class="pb-2">
|
||||
<strong>Order total</strong>
|
||||
</div>
|
||||
<div class="d-flex flex-row justify-content-between">
|
||||
<p class="mb-0">Fleet Premium <br purpose="order-form-line-break">(self-hosted)</p>
|
||||
<div class="ml-auto text-right">
|
||||
<strong>${{(!showQuotedPrice || _.isNaN(formData.numberOfHosts * 7.00 * 12)) ? quotedPrice : formData.numberOfHosts * 7.00 * 12}}.00 <br purpose="order-form-line-break">/year</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="[showBillingForm ? 'pt-2' : '' ]" v-if="!showBillingForm">
|
||||
<ajax-button purpose="submit-button" spinner="true" type="submit" :syncing="syncing" class="btn btn-block btn-lg btn-primary" v-if="!numberOfHostsQuoted">Continue</ajax-button>
|
||||
<ajax-button spinner="true" purpose="submit-button" :syncing="syncing" class="btn btn-block btn-lg btn-primary" @click="clickScheduleDemo" v-if=" showQuotedPrice && numberOfHostsQuoted > 1000">Talk to an expert</ajax-button>
|
||||
<ajax-button spinner="true" purpose="submit-button" :syncing="syncing" class="btn btn-block btn-lg btn-primary" v-if="showQuotedPrice && numberOfHostsQuoted <= 1000">Continue</ajax-button>
|
||||
</div>
|
||||
</ajax-form>
|
||||
</div>
|
||||
<div class="card card-body mt-3" v-if="showBillingForm">
|
||||
<h3 class="pb-3">Billing information</h3>
|
||||
<ajax-form action="saveBillingInfoAndSubscribe" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="billingFormRules" @submitted="submittedPaymentForm()" v-if="!cloudError || cloudError === 'couldNotSaveBillingInfo' || cloudError === 'cardVerificationRequired'">
|
||||
<div class="form-group">
|
||||
<label for="card">Billing Card</label>
|
||||
<stripe-card-element class="mb-3" id="card" busy.sync="syncing" :is-errored.sync="formErrors.paymentSource" :stripe-publishable-key="stripePublishableKey"
|
||||
v-model="formData.paymentSource" key="billing-card" ref="paymentcardref"></stripe-card-element>
|
||||
</div>
|
||||
<div v-if="showAdditionalBillingFormInputs">
|
||||
<div class="form-group">
|
||||
<label for="organization">Organization</label>
|
||||
<input class="form-control" id="organization" type="text" :class="[formErrors.organization ? 'is-invalid' : formErrors.organization === '' ]" v-model.trim="formData.organization">
|
||||
<div class="invalid-feedback" v-if="formErrors.organization">Please enter the name of your organization.</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 pr-sm-2">
|
||||
<div class="form-group">
|
||||
<label for="organization">Organization</label>
|
||||
<input class="form-control" id="organization" type="text" :class="[formErrors.organization ? 'is-invalid' : formErrors.organization === '' ]" v-model.trim="formData.organization">
|
||||
<div class="invalid-feedback" v-if="formErrors.organization">Please enter the name of your organization.</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 pr-sm-2">
|
||||
<div class="form-group">
|
||||
<label for="first-name">First name</label>
|
||||
<input class="form-control" id="first-name" type="text" :class="[formErrors.firstName ? 'is-invalid' : '']" v-model.trim="formData.firstName" autocomplete="first-name">
|
||||
<div class="invalid-feedback" v-if="formErrors.firstName">Please enter your first name.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 pl-sm-2">
|
||||
<div class="form-group">
|
||||
<label for="last-name">Last name</label>
|
||||
<input class="form-control" id="last-name" type="text" :class="[formErrors.lastName ? 'is-invalid' : '']" v-model.trim="formData.lastName" autocomplete="last-name">
|
||||
<div class="invalid-feedback" v-if="formErrors.lastName">Please enter your last name.</div>
|
||||
</div>
|
||||
</div>
|
||||
<label for="first-name">First name</label>
|
||||
<input class="form-control" id="first-name" type="text" :class="[formErrors.firstName ? 'is-invalid' : '']" v-model.trim="formData.firstName" autocomplete="first-name">
|
||||
<div class="invalid-feedback" v-if="formErrors.firstName">Please enter your first name.</div>
|
||||
</div>
|
||||
</div>
|
||||
<cloud-error purpose="cloud-error" v-if="cloudError === 'couldNotSaveBillingInfo'">
|
||||
<p>The billing card provided could not be used. Please use another card or <a href="/contact" target="_blank">contact support</a>.</p>
|
||||
</cloud-error>
|
||||
<cloud-error purpose="cloud-error" v-else-if="cloudError === 'cardVerificationRequired'">
|
||||
<p>The billing card provided could not be used without additional verification. Please use another card or <a href="/contact" target="_blank">contact support</a> to complete your order.</p>
|
||||
</cloud-error>
|
||||
<ajax-button style="height: 40px;" purpose="submit-button" spinner="true" :syncing="syncing" class="btn btn-block btn-lg btn-info mt-4">Get license key</ajax-button>
|
||||
</ajax-form>
|
||||
<cloud-error purpose="cloud-error" v-else-if="cloudError">
|
||||
<p class="mb-3 text-bold text-strong">An error has occurred while processing your request.</p>
|
||||
<p class="mb-2">We're sorry that this happened. A human has been informed of this error and is looking into it.</p>
|
||||
<p>Feel free to <a href="/customers/new-license">reload the page</a> and try again. A team member at Fleet will investigate and correct duplicate charges, if any occurred.</p>
|
||||
</cloud-error>
|
||||
<div class="col-12 col-sm-6 pl-sm-2">
|
||||
<div class="form-group">
|
||||
<label for="last-name">Last name</label>
|
||||
<input class="form-control" id="last-name" type="text" :class="[formErrors.lastName ? 'is-invalid' : '']" v-model.trim="formData.lastName" autocomplete="last-name">
|
||||
<div class="invalid-feedback" v-if="formErrors.lastName">Please enter your last name.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div purpose="features-list" class="order-last d-none d-md-block">
|
||||
<p><strong>Fleet Premium includes:</strong></p>
|
||||
<ul>
|
||||
<li><img alt="A checkmark" src="/images/check-16x16@2x.png">Everything in Fleet Free</li>
|
||||
<li><img alt="A checkmark" src="/images/check-16x16@2x.png">Multiple teams (RBAC)</li>
|
||||
<li><img alt="A checkmark" src="/images/check-16x16@2x.png">Self-hosted agent auto-updates</li>
|
||||
<li><img alt="A checkmark" src="/images/check-16x16@2x.png">Enterprise support</li>
|
||||
</ul>
|
||||
</div>
|
||||
<cloud-error purpose="cloud-error" v-if="cloudError === 'couldNotSaveBillingInfo'">
|
||||
<p>The billing card provided could not be used. Please use another card or <a href="/contact" target="_blank">contact support</a>.</p>
|
||||
</cloud-error>
|
||||
<cloud-error purpose="cloud-error" v-else-if="cloudError === 'cardVerificationRequired'">
|
||||
<p>The billing card provided could not be used without additional verification. Please use another card or <a href="/contact" target="_blank">contact support</a> to complete your order.</p>
|
||||
</cloud-error>
|
||||
<ajax-button style="height: 40px;" purpose="submit-button" spinner="true" :syncing="syncing" class="btn btn-block btn-lg btn-primary mt-4">Get license key</ajax-button>
|
||||
</ajax-form>
|
||||
<cloud-error purpose="cloud-error" v-else-if="cloudError">
|
||||
<p class="mb-3 text-bold text-strong">An error has occurred while processing your request.</p>
|
||||
<p class="mb-2">We're sorry that this happened. A human has been informed of this error and is looking into it.</p>
|
||||
<p>Feel free to <a href="/customers/new-license">reload the page</a> and try again. A team member at Fleet will investigate and correct duplicate charges, if any occurred.</p>
|
||||
</cloud-error>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -102,7 +92,7 @@
|
|||
<h1>Thank you, your order is complete.</h1>
|
||||
<p class="mb-4 font-weight-bold">Welcome to your admin dashboard.</p>
|
||||
<p>From here you can access your license key, change your details and update your payment method.</p>
|
||||
<ajax-button style="height: 40px; font-size: 14px; line-height: 24px; width: 200px" type="submit" purpose="submit-button" :syncing="syncing" spinner="true" class="btn btn-block btn-lg btn-info mx-auto" @click="clickGoToDashboard()">Contine to dashboard</ajax-button>
|
||||
<ajax-button style="height: 40px; font-size: 14px; line-height: 24px; width: 200px" type="submit" purpose="submit-button" :syncing="syncing" spinner="true" class="btn btn-block btn-lg btn-primary mx-auto" @click="clickGoToDashboard()">Contine to dashboard</ajax-button>
|
||||
</div>
|
||||
</div>
|
||||
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
|
||||
|
|
|
|||
61
website/views/pages/entrance/login.ejs
vendored
61
website/views/pages/entrance/login.ejs
vendored
|
|
@ -1,49 +1,34 @@
|
|||
<div id="login" v-cloak>
|
||||
<div :purpose="[showCustomerLogin ? 'customer-login-container' : 'login-container']" class="container-fluid pb-5 px-lg-0 px-3">
|
||||
<div v-if="showCustomerLogin">
|
||||
<h1>Welcome to Fleet Premium</h1>
|
||||
<div purpose="page-heading" v-if="showCustomerLogin">
|
||||
<h1>Welcome to Premium</h1>
|
||||
<p class="pb-2">Sign in to manage your Fleet Premium subscription.</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div purpose="page-heading" v-else>
|
||||
<h1>Welcome to Fleet</h1>
|
||||
<p class="pb-2">Sign in to your Fleet account.</p>
|
||||
</div>
|
||||
<div purpose="customer-portal-form" class="d-flex flex-row justify-content-between">
|
||||
<div class="order-first flex-grow-1">
|
||||
<div class="card card-body">
|
||||
<ajax-form class="customers-login" action="login" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-data="formData" :form-rules="formRules" :form-errors.sync="formErrors" @submitted="submittedForm()">
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<span style="float: right" class="text-right small" v-if="showCustomerLogin"><a href="/customers/register">Create an account</a></span>
|
||||
<input type="email" class="form-control" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" autocomplete="email" focus-first>
|
||||
<div class="invalid-feedback" v-if="formErrors.emailAddress">Please provide a valid email address.</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>
|
||||
<cloud-error v-if="cloudError === 'noUser'">The email address provided doesn't match an existing account. Create an account <a href="/customers/register">here</a>.</cloud-error>
|
||||
<cloud-error v-else-if="cloudError === 'badCombo'">Something’s not quite right with your email or password.</cloud-error>
|
||||
<cloud-error v-else-if="cloudError"></cloud-error>
|
||||
<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>
|
||||
<span class="text-center small"><a href="/customers/forgot-password">Forgot your password?</a></span>
|
||||
<div purpose="customer-portal-form" class="card card-body">
|
||||
<ajax-form class="customers-login" action="login" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-data="formData" :form-rules="formRules" :form-errors.sync="formErrors" @submitted="submittedForm()">
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<span style="float: right" class="text-right small" v-if="showCustomerLogin"><a href="/customers/register">Create an account</a></span>
|
||||
<input type="email" class="form-control" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" autocomplete="email" focus-first>
|
||||
<div class="invalid-feedback" v-if="formErrors.emailAddress">Please provide a valid email address.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-last d-none d-md-block" purpose="features-list" v-if="showCustomerLogin">
|
||||
<p><strong>Fleet Premium includes:</strong></p>
|
||||
<ul>
|
||||
<li><img alt="A checkmark" src="/images/check-16x16@2x.png">Everything in Fleet Free</li>
|
||||
<li><img alt="A checkmark" src="/images/check-16x16@2x.png">Multiple teams (RBAC)</li>
|
||||
<li><img alt="A checkmark" src="/images/check-16x16@2x.png">Self-hosted agent auto-updates</li>
|
||||
<li><img alt="A checkmark" src="/images/check-16x16@2x.png">Enterprise support</li>
|
||||
</ul>
|
||||
</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>
|
||||
<cloud-error v-if="cloudError === 'noUser'">The email address provided doesn't match an existing account. Create an account <a href="/customers/register">here</a>.</cloud-error>
|
||||
<cloud-error v-else-if="cloudError === 'badCombo'">Something’s not quite right with your email or password.</cloud-error>
|
||||
<cloud-error v-else-if="cloudError"></cloud-error>
|
||||
<div class="pb-3">
|
||||
<ajax-button :syncing="syncing" spinner="true" purpose="submit-button" class="btn-primary mt-4 btn-lg btn-block">Sign in</ajax-button>
|
||||
</div>
|
||||
</ajax-form>
|
||||
<span class="text-center small"><a href="/customers/forgot-password">Forgot your password?</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
109
website/views/pages/entrance/signup.ejs
vendored
109
website/views/pages/entrance/signup.ejs
vendored
|
|
@ -1,72 +1,57 @@
|
|||
<div id="signup" v-cloak>
|
||||
<div style="max-width: 800px;" class="container-fluid pb-5 px-lg-0 px-3">
|
||||
<h1>Welcome to Fleet Premium</h1>
|
||||
<p class="pb-2">We just need a few details in order to get you a Fleet Premium license key.</p>
|
||||
<div class="mx-auto">
|
||||
<div purpose="customer-portal-form" class="d-flex flex-row justify-content-between">
|
||||
<div class="order-first flex-grow-1">
|
||||
<div class="card card-body">
|
||||
<ajax-form action="signup" class="self-service-register" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="formRules" @submitted="submittedSignUpForm()">
|
||||
<div style="max-width: 560px;" class="container-fluid pb-5 px-lg-0 px-3">
|
||||
<div purpose="page-heading">
|
||||
<h1 class="text-center">Welcome to Premium</h1>
|
||||
<p class="text-center pb-2">We just need a few details in order to get you a self-hosted Fleet Premium license key.</p>
|
||||
</div>
|
||||
<div purpose="customer-portal-form" class="card card-body">
|
||||
<ajax-form action="signup" class="self-service-register" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="formRules" @submitted="submittedSignUpForm()">
|
||||
<div class="form-group">
|
||||
<label for="email-address">Email</label>
|
||||
<span style="float: right" class="text-right small"><a href="/customers/login">I have an account</a></span>
|
||||
<input class="form-control" id="email-address" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" @input="typeClearOneFormError('emailAddress')">
|
||||
<div class="invalid-feedback" v-if="formErrors.emailAddress" focus-first>This doesn’t appear to be a valid email address</div>
|
||||
</div>
|
||||
<div v-show="formData.emailAddress || showFullForm">
|
||||
<div class="form-group">
|
||||
<label for="password">Choose a password</label>
|
||||
<input class="form-control" id="password" type="password" :class="[formErrors.password ? 'is-invalid' : '']" v-model.trim="formData.password" autocomplete="new-password" @input="typeClearOneFormError('password')">
|
||||
<div class="invalid-feedback" v-if="formErrors.password === 'minLength'">Password too short.</div>
|
||||
<div class="invalid-feedback" v-if="formErrors.password === 'required'">Please enter a password.</div>
|
||||
<p class="mt-2"> Minimum length is 8 characters</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="organization">Organization</label>
|
||||
<input class="form-control" id="organization" type="text" :class="[formErrors.organization ? 'is-invalid' : '']" v-model.trim="formData.organization" @input="typeClearOneFormError('organization')">
|
||||
<div class="invalid-feedback" v-if="formErrors.organization">Please enter the name of your organization.</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 pr-sm-2">
|
||||
<div class="form-group">
|
||||
<label for="email-address">Email</label>
|
||||
<span style="float: right" class="text-right small"><a href="/customers/login">I have an account</a></span>
|
||||
<input class="form-control" id="email-address" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" @input="typeClearOneFormError('emailAddress')">
|
||||
<div class="invalid-feedback" v-if="formErrors.emailAddress" focus-first>This doesn’t appear to be a valid email address</div>
|
||||
<label for="first-name">First name</label>
|
||||
<input class="form-control" id="first-name" type="text" :class="[formErrors.firstName ? 'is-invalid' : '']" v-model.trim="formData.firstName" autocomplete="first-name" @input="typeClearOneFormError('firstName')">
|
||||
<div class="invalid-feedback" v-if="formErrors.firstName">Please enter your first name.</div>
|
||||
</div>
|
||||
<div v-show="formData.emailAddress || showFullForm">
|
||||
<div class="form-group">
|
||||
<label for="password">Choose a password</label>
|
||||
<input class="form-control" id="password" type="password" :class="[formErrors.password ? 'is-invalid' : '']" v-model.trim="formData.password" autocomplete="new-password" @input="typeClearOneFormError('password')">
|
||||
<div class="invalid-feedback" v-if="formErrors.password === 'minLength'">Password too short.</div>
|
||||
<div class="invalid-feedback" v-if="formErrors.password === 'required'">Please enter a password.</div>
|
||||
<p class="mt-2"> Minimum length is 8 characters</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="organization">Organization</label>
|
||||
<input class="form-control" id="organization" type="text" :class="[formErrors.organization ? 'is-invalid' : '']" v-model.trim="formData.organization" @input="typeClearOneFormError('organization')">
|
||||
<div class="invalid-feedback" v-if="formErrors.organization">Please enter the name of your organization.</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 pr-sm-2">
|
||||
<div class="form-group">
|
||||
<label for="first-name">First name</label>
|
||||
<input class="form-control" id="first-name" type="text" :class="[formErrors.firstName ? 'is-invalid' : '']" v-model.trim="formData.firstName" autocomplete="first-name" @input="typeClearOneFormError('firstName')">
|
||||
<div class="invalid-feedback" v-if="formErrors.firstName">Please enter your first name.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 pl-sm-2">
|
||||
<div class="form-group">
|
||||
<label for="last-name">Last name</label>
|
||||
<input class="form-control" id="last-name" type="text" :class="[formErrors.lastName ? 'is-invalid' : '']" v-model.trim="formData.lastName" autocomplete="last-name" @input="typeClearOneFormError('lastName')">
|
||||
<div class="invalid-feedback" v-if="formErrors.lastName">Please enter your last name.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 pl-sm-2">
|
||||
<div class="form-group">
|
||||
<label for="last-name">Last name</label>
|
||||
<input class="form-control" id="last-name" type="text" :class="[formErrors.lastName ? 'is-invalid' : '']" v-model.trim="formData.lastName" autocomplete="last-name" @input="typeClearOneFormError('lastName')">
|
||||
<div class="invalid-feedback" v-if="formErrors.lastName">Please enter your last name.</div>
|
||||
</div>
|
||||
<cloud-error v-if="cloudError==='emailAlreadyInUse'">
|
||||
<p>This email is already linked to a Fleet account.<br> Please <a href="/customers/login">sign in</a> with your email and password.</p>
|
||||
</cloud-error>
|
||||
<cloud-error purpose="cloud-error" v-else-if="cloudError"></cloud-error>
|
||||
<p class="small">By signing up you agree to our <a href="/legal/privacy">Privacy Policy</a> and <a href="/terms">Terms of Service</a>.</p>
|
||||
<ajax-button style="height: 40px;" purpose="submit-button" spinner="true" type="submit" :syncing="syncing" class="btn btn-block btn-lg btn-info mt-4" v-if="!cloudError">Agree and continue</ajax-button>
|
||||
<ajax-button style="height: 40px;" purpose="submit-button" type="button" :syncing="syncing" class="btn btn-block btn-lg btn-info mt-4" v-if="cloudError" @click="clickClearFormFields()">Reset form and try again</ajax-button>
|
||||
</ajax-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-last d-none d-md-block" purpose="features-list">
|
||||
<p><strong>Fleet Premium includes:</strong></p>
|
||||
<ul>
|
||||
<li><img alt="A checkmark" src="/images/check-16x16@2x.png">Everything in Fleet Free</li>
|
||||
<li><img alt="A checkmark" src="/images/check-16x16@2x.png">Multiple teams (RBAC)</li>
|
||||
<li><img alt="A checkmark" src="/images/check-16x16@2x.png">Self-hosted agent auto-updates</li>
|
||||
<li><img alt="A checkmark" src="/images/check-16x16@2x.png">Enterprise support</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<cloud-error v-if="cloudError==='emailAlreadyInUse'">
|
||||
<p>This email is already linked to a Fleet account.<br> Please <a href="/customers/login">sign in</a> with your email and password.</p>
|
||||
</cloud-error>
|
||||
<cloud-error purpose="cloud-error" v-else-if="cloudError"></cloud-error>
|
||||
<p class="small">By signing up you agree to our <a href="/legal/privacy">privacy policy</a> and <a href="/terms">terms of service</a>.</p>
|
||||
<ajax-button purpose="submit-button" spinner="true" type="submit" :syncing="syncing" class="btn btn-block btn-lg btn-primary mt-4" v-if="!cloudError">Agree and continue</ajax-button>
|
||||
<ajax-button purpose="submit-button" type="button" :syncing="syncing" class="btn btn-block btn-lg btn-primary mt-4" v-if="cloudError" @click="clickClearFormFields()">Reset form and try again</ajax-button>
|
||||
</ajax-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>
|
||||
|
|
|
|||
Loading…
Reference in a new issue