mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 08:55:24 +00:00
Customer portal style updates (#3615)
* style changes * changes from fine art pass 2 * Update dashboard.less * Update signup.less * changes from call * Update dashboard.ejs * update padding * Update dashboard.ejs * Update forgot-password.ejs * keep full signup form visible after input * revert formrules change
This commit is contained in:
eashaw
GitHub
parent
7823bbbaba
commit
8740682a1e
@ -10,7 +10,7 @@ parasails.registerPage('new-license', {
|
||||
// > Has property set to `true` for each invalid property in `formData`.
|
||||
formErrors: { /* … */ },
|
||||
|
||||
quoteFormRules: {
|
||||
qutoeFormRules: {
|
||||
numberOfHosts: {required: true},
|
||||
},
|
||||
|
||||
@ -82,7 +82,7 @@ parasails.registerPage('new-license', {
|
||||
|
||||
clickResetForm: async function() {
|
||||
// When the "X" is clicked...
|
||||
// this.formData = {};
|
||||
this.formData.numberOfHosts = undefined;
|
||||
this.formErrors = {};
|
||||
this.showBillingForm = false;
|
||||
this.showQuotedPrice = false;
|
||||
|
||||
@ -50,6 +50,7 @@ parasails.registerPage('signup', {
|
||||
},
|
||||
|
||||
typeClearOneFormError: async function(field) {
|
||||
this.showFullForm = true;
|
||||
if(this.formErrors[field]){
|
||||
this.formErrors = _.omit(this.formErrors, field);
|
||||
}
|
||||
|
||||
@ -51,6 +51,10 @@ footer {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: @core-vibrant-red !important; //lesshint-disable-line importantRule
|
||||
}
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
#dashboard {
|
||||
padding-top: 80px;
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
h3 {
|
||||
padding-bottom: 16px;
|
||||
font-size: 24px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
@ -31,7 +34,7 @@
|
||||
border-radius: 6px;
|
||||
}
|
||||
.card-body {
|
||||
padding: 30px;
|
||||
padding: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,9 +75,10 @@
|
||||
border: 1px solid #C5C7D1;
|
||||
border-radius: 4px;
|
||||
padding: 8px 40px;
|
||||
line-height: 24px;
|
||||
line-height: 20px;
|
||||
&:hover {
|
||||
background: #fff;
|
||||
color: @core-fleet-black;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
@ -84,20 +88,22 @@
|
||||
height: 20px;
|
||||
width: auto;
|
||||
padding-right: 4px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
a {
|
||||
color: @core-fleet-black;
|
||||
text-decoration: none;
|
||||
}
|
||||
text-decoration: none;
|
||||
}
|
||||
[purpose='deploy-button'] {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
line-height: 20px;
|
||||
padding: 8px 40px;
|
||||
border-radius: 4px;
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -113,6 +119,7 @@
|
||||
padding: 16px;
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin-block-end: 0px;
|
||||
}
|
||||
a {
|
||||
font-size: 14px;
|
||||
@ -127,6 +134,22 @@
|
||||
p {
|
||||
margin-block-end: 4px;
|
||||
}
|
||||
[purpose='contact'] {
|
||||
background: #F1F0FF;
|
||||
border: 1px solid #D9D9FE;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin-block-end: 0px;
|
||||
}
|
||||
a {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-underline-offset: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -146,6 +169,7 @@
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 14px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
@ -180,16 +204,21 @@
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 991px) {
|
||||
|
||||
[purpose='details-card'] {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
[purpose='billing-card'] {
|
||||
// padding: 40px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding-top: 60px;
|
||||
|
||||
[purpose='modal-content'] {
|
||||
margin-top: 50px;
|
||||
@ -211,5 +240,15 @@
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 576px) {
|
||||
padding-top: 40px;
|
||||
[purpose='customer-portal-form'] {
|
||||
.card-body {
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
#new-license {
|
||||
padding-top: 80px;
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
a {
|
||||
color: @core-vibrant-blue;
|
||||
@ -9,12 +12,10 @@
|
||||
text-decoration: none;
|
||||
color: darken(@core-vibrant-blue, 20%);
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
|
||||
@ -30,6 +31,7 @@
|
||||
}
|
||||
|
||||
[purpose='customer-portal-form'] {
|
||||
|
||||
label {
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
@ -42,12 +44,12 @@
|
||||
border-radius: 6px;
|
||||
}
|
||||
.card-body {
|
||||
padding: 30px;
|
||||
padding: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='submit-button'] {
|
||||
width: 200px;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 4px;
|
||||
@ -67,7 +69,8 @@
|
||||
}
|
||||
|
||||
[purpose='features-list'] {
|
||||
// min-width: 254px;
|
||||
padding-left: 40px;
|
||||
font-size: 14px;
|
||||
word-wrap: overflow;
|
||||
ul {
|
||||
list-style-type: none;
|
||||
@ -85,6 +88,19 @@
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
padding-top: 40px;
|
||||
[purpose='customer-portal-form'] {
|
||||
.card-body {
|
||||
padding: 1.5em 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
#forgot-password {
|
||||
|
||||
padding-top: 80px;
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
a {
|
||||
color: @core-vibrant-blue;
|
||||
@ -27,8 +28,9 @@
|
||||
padding: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='submit-button'] {
|
||||
width: 200px;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 4px;
|
||||
@ -66,4 +68,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
padding-top: 40px;
|
||||
[purpose='customer-portal-form'] {
|
||||
.card-body {
|
||||
padding: 1.5em 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
27
website/assets/styles/pages/entrance/login.less
vendored
27
website/assets/styles/pages/entrance/login.less
vendored
@ -1,13 +1,14 @@
|
||||
#login {
|
||||
|
||||
padding-top: 80px;
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
a {
|
||||
color: @core-vibrant-blue;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
[purpose='customer-portal-form'] {
|
||||
label {
|
||||
@ -22,12 +23,11 @@
|
||||
border-radius: 6px;
|
||||
}
|
||||
.card-body {
|
||||
padding: 30px;
|
||||
padding: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='submit-button'] {
|
||||
width: 200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 4px;
|
||||
@ -47,8 +47,10 @@
|
||||
}
|
||||
|
||||
[purpose='features-list'] {
|
||||
// min-width: 254px;
|
||||
|
||||
word-wrap: overflow;
|
||||
padding-left: 40px;
|
||||
font-size: 14px;
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding-inline-start: 0px;
|
||||
@ -65,4 +67,17 @@
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
padding-top: 40px;
|
||||
[purpose='customer-portal-form'] {
|
||||
.card-body {
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
#new-password {
|
||||
padding-top: 80px;
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
a {
|
||||
color: @core-vibrant-blue;
|
||||
@ -26,7 +28,7 @@
|
||||
border-radius: 6px;
|
||||
}
|
||||
.card-body {
|
||||
padding: 30px;
|
||||
padding: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -68,5 +70,17 @@
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
padding-top: 40px;
|
||||
[purpose='customer-portal-form'] {
|
||||
.card-body {
|
||||
padding: 1.5em 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
31
website/assets/styles/pages/entrance/signup.less
vendored
31
website/assets/styles/pages/entrance/signup.less
vendored
@ -1,13 +1,12 @@
|
||||
#signup {
|
||||
padding-top: 80px;
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
a {
|
||||
color: @core-vibrant-blue;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
[purpose='customer-portal-form'] {
|
||||
label {
|
||||
@ -22,12 +21,12 @@
|
||||
border-radius: 6px;
|
||||
}
|
||||
.card-body {
|
||||
padding: 30px;
|
||||
padding: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='submit-button'] {
|
||||
width: 200px;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 4px;
|
||||
@ -47,13 +46,14 @@
|
||||
}
|
||||
|
||||
[purpose='features-list'] {
|
||||
// min-width: 254px;
|
||||
padding-left: 40px;
|
||||
font-size: 14px;
|
||||
word-wrap: overflow;
|
||||
ul {
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding-inline-start: 0px;
|
||||
}
|
||||
li {
|
||||
}
|
||||
li {
|
||||
padding-bottom: 12px;
|
||||
color: @core-fleet-black-75;
|
||||
white-space: nowrap;
|
||||
@ -66,4 +66,17 @@
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
padding-top: 40px;
|
||||
[purpose='customer-portal-form'] {
|
||||
.card-body {
|
||||
padding: 1.5em 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
72
website/views/pages/customers/dashboard.ejs
vendored
72
website/views/pages/customers/dashboard.ejs
vendored
@ -1,22 +1,22 @@
|
||||
<div id="dashboard" v-cloak>
|
||||
<div style="padding-top: 80px;" class="container pb-5 px-xl-0">
|
||||
<div class="container pb-5 px-3 px-xl-0">
|
||||
<div class="pb-4">
|
||||
<h3>Your license</h3>
|
||||
<div purpose="license-card" class="card card-body">
|
||||
<div class="row">
|
||||
<div class="col-6 col-lg-2">
|
||||
<div class="col-12 col-md-6 col-lg-2">
|
||||
<strong>Item</strong>
|
||||
<p>Fleet Premium</p>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2">
|
||||
<div class="col-12 col-md-6 col-lg-2 pt-3 pt-md-0">
|
||||
<strong>Cost</strong>
|
||||
<p>${{thisSubscription.subscriptionPrice}}.00/year</p>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 pt-3 pt-lg-0">
|
||||
<div class="col-12 col-md-6 col-lg-2 pt-3 pt-lg-0">
|
||||
<strong>No. of devices</strong>
|
||||
<p>{{thisSubscription.numberOfHosts}}</p>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 pt-3 pt-lg-0">
|
||||
<div class="col-12 col-md-6 col-lg-2 pt-3 pt-lg-0">
|
||||
<strong>Expires</strong>
|
||||
<p><js-timestamp :at="thisSubscription.nextBillingAt" always-show-year format="billing"></js-timestamp></p>
|
||||
</div>
|
||||
@ -28,52 +28,52 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row pt-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<h3 class="pb-4 pb-xl-3">Your details</h3>
|
||||
<div class="row pb-4">
|
||||
<div class="col-12 col-lg-6 pb-4 pb-lg-0">
|
||||
<h3 class="pt-2 pt-sm-3">Your details</h3>
|
||||
<div purpose="details-card" class="card card-body justify-content-top">
|
||||
<div class="row">
|
||||
<div class="col-sm-4 col-12 ">Organization:</div>
|
||||
<div class="col-sm-8 col-12 text-right">
|
||||
<div class="col-sm-4 col-12 pb-2 pb-sm-0">Organization:</div>
|
||||
<div class="col-sm-8 col-12 text-left text-sm-right">
|
||||
<strong>{{me.organization}}</strong><img purpose="edit-button" src="/images/icon-pencil-24x24@2x.png" alt="A pencil icon indicating that this information can be editted" @click="clickEditButton()">
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="row">
|
||||
<div class="col-sm-3 col-12 ">Name:</div>
|
||||
<div class="col-sm-9 col-12 text-right">
|
||||
<div class="col-sm-3 col-12 pb-2 pb-sm-0">Name:</div>
|
||||
<div class="col-sm-9 col-12 text-left text-sm-right">
|
||||
<strong>{{me.firstName}} {{me.lastName}}</strong><img purpose="edit-button" src="/images/icon-pencil-24x24@2x.png" alt="A pencil icon indicating that this information can be editted" @click="clickEditButton()">
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="row">
|
||||
<div class="col-sm-3 col-12 ">Email:</div>
|
||||
<div class="col-sm-9 col-12 text-right">
|
||||
<div class="col-sm-3 col-12 pb-2 pb-sm-0">Email:</div>
|
||||
<div class="col-sm-9 col-12 text-left text-sm-right">
|
||||
<strong :class="[me.emailStatus === 'unconfirmed' || me.emailStatus === 'change-requested' ? 'text-muted' : '']">{{me.emailChangeCandidate ? me.emailChangeCandidate : me.emailAddress}}</strong><img purpose="edit-button" src="/images/icon-pencil-24x24@2x.png" alt="A pencil icon indicating that this information can be editted" @click="clickEditButton()">
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="row">
|
||||
<div class="col-sm-3 col-12 ">Password:</div>
|
||||
<div class="col-sm-9 col-12 text-right">
|
||||
<div class="col-sm-4 col-12 pb-2 pb-sm-0">Password:</div>
|
||||
<div class="col-sm-8 col-12 text-left text-sm-right">
|
||||
<strong>••••••••</strong><img purpose="edit-button" src="/images/icon-pencil-24x24@2x.png" alt="A pencil icon indicating that this information can be editted" @click="clickChangePassword()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6 pt-4 pt-lg-0">
|
||||
<h3 class="pb-4 pb-xl-3">Billing and payment</h3>
|
||||
<div class="col-12 col-lg-6">
|
||||
<h3 class="pt-2 pt-sm-3">Billing and payment</h3>
|
||||
<div purpose="billing-card" class="card card-body justify-content-center">
|
||||
<div class="row pb-3">
|
||||
<div class="col-1"><img style="margin-top: 5px; height: 12px; width: 16px;" src="/images/icon-card-32x24@2x.png" alt="A small credit card"></div>
|
||||
<div class="col">
|
||||
<div class="row pb-3 mx-0">
|
||||
<div style="max-width: 16px;" class="col-1 px-0"><img style="margin-top: 5px; height: 12px; width: 16px;" src="/images/icon-card-32x24@2x.png" alt="A credit card Icon"></div>
|
||||
<div class="col pl-3">
|
||||
<p>{{me.billingCardBrand}} ending in <strong>{{me.billingCardLast4}}</strong><img purpose="edit-button" src="/images/icon-pencil-24x24@2x.png" alt="A pencil icon indicating that this information can be editted" @click="clickUpdateBillingCardButton()"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pb-3">
|
||||
<div class="col-1"><img style="margin-top: 5px; height: 16px; width: 16px;" src="/images/icon-calendar-32x32@2x.png" alt="A small credit card"></div>
|
||||
<div class="col">
|
||||
<div class="row pb-3 mx-0">
|
||||
<div style="max-width: 16px;" class="col-1 px-0"><img style="margin-top: 5px; height: 16px; width: 16px;" src="/images/icon-calendar-32x32@2x.png" alt="A calendar icon"></div>
|
||||
<div class="col pl-3">
|
||||
<p>{{thisSubscription.numberOfHosts}} devices @ $1.00/device/month</p>
|
||||
<p>Billed anually at ${{thisSubscription.subscriptionPrice}}.00/yr</p>
|
||||
<p>Next payment on <js-timestamp :at="thisSubscription.nextBillingAt" always-show-year format="billing"></js-timestamp></p>
|
||||
@ -82,10 +82,10 @@
|
||||
<div purpose="contact">
|
||||
<div class="row">
|
||||
<div style="max-width: 32px;" class="col-1 pr-0">
|
||||
<img style="display: inline-block; height: 16px; width: 16px; margin-top: 3px;" src="/images/info-16x16@2x.png" alt="An icon indicating that this section has important information">
|
||||
<img style="display: inline-block; height: 16px; width: 16px; margin-top: -3px;" src="/images/info-16x16@2x.png" alt="An icon indicating that this section has important information">
|
||||
</div>
|
||||
<div class="col ml-1 pl-1">
|
||||
<p><a href="/contact" target="_blank">Contact us</a> to change your number of devices, or to <strong>cancel</strong> your subscription.</p>
|
||||
<div class="col ml-1 pl-1 small">
|
||||
<p class="small"><a href="/contact" target="_blank">Contact us</a> to change your number of devices, or to <strong>cancel</strong> your subscription.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -93,18 +93,14 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="pt-4 d-block">
|
||||
<div class="btn btn-info btn-sm mr-md-3 mb-3 mb-md-0" purpose="deploy-button">
|
||||
<a href="/docs/deploying/introduction">
|
||||
<div class="d-flex flex-md-row flex-column pt-3">
|
||||
<a class="btn btn-info btn-sm btn-md-block mr-md-3 mb-3 mb-md-0" purpose="deploy-button" href="/docs/deploying/introduction">
|
||||
How to deploy Fleet
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn btn-outline-secondary btn-sm" purpose="slack-button">
|
||||
<a href="https://osquery.slack.com/join/shared_invite/zt-h29zm0gk-s2DBtGUTW4CFel0f0IjTEw#/" target="_blank">
|
||||
<a class="btn btn-outline-secondary btn-sm btn-md-block" purpose="slack-button" href="https://osquery.slack.com/join/shared_invite/zt-h29zm0gk-s2DBtGUTW4CFel0f0IjTEw#/" target="_blank">
|
||||
<img alt="Slack logo" src="/images/logo-slack-24x24@2x.png"/>
|
||||
Ask for help on Slack
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -144,7 +140,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-0 justify-content-center">
|
||||
<ajax-button spinner="true" type="submit" :syncing="syncing" class="btn btn-sm btn-block btn-info" focus-first>Save</ajax-button>
|
||||
<ajax-button purpose="submit-button" spinner="true" type="submit" :syncing="syncing" class="btn btn-sm btn-block btn-info" focus-first>Save</ajax-button>
|
||||
</div>
|
||||
</ajax-form>
|
||||
</div>
|
||||
@ -173,7 +169,7 @@
|
||||
<cloud-error v-else-if="cloudError"></cloud-error>
|
||||
</div>
|
||||
<div class="border-0 justify-content-center">
|
||||
<ajax-button spinner="true" type="submit" :syncing="syncing" class="btn btn-sm btn-block btn-info" focus-first>Save</ajax-button>
|
||||
<ajax-button purpose="submit-button" spinner="true" type="submit" :syncing="syncing" class="btn btn-sm btn-block btn-info" focus-first>Save</ajax-button>
|
||||
</div>
|
||||
</ajax-form>
|
||||
</div>
|
||||
@ -191,7 +187,7 @@
|
||||
<cloud-error v-if="cloudError"></cloud-error>
|
||||
</div>
|
||||
<div class="pt-3">
|
||||
<ajax-button spinner="true" :syncing="syncing" class="btn btn-sm btn-block btn-info" focus-first>Save card</ajax-button>
|
||||
<ajax-button purpose="submit-button" spinner="true" :syncing="syncing" class="btn btn-sm btn-block btn-info" focus-first>Save card</ajax-button>
|
||||
</div>
|
||||
</ajax-form>
|
||||
</div>
|
||||
@ -207,7 +203,7 @@
|
||||
<cloud-error v-if="cloudError"></cloud-error>
|
||||
</div>
|
||||
<div class="border-0 justify-content-center">
|
||||
<ajax-button spinner="true" type="submit" :syncing="syncing" class="btn btn-sm btn-block btn-primary">Remove</ajax-button>
|
||||
<ajax-button purpose="submit-button" spinner="true" type="submit" :syncing="syncing" class="btn btn-sm btn-block btn-primary">Remove</ajax-button>
|
||||
</div>
|
||||
</ajax-form>
|
||||
</div>
|
||||
|
||||
24
website/views/pages/customers/new-license.ejs
vendored
24
website/views/pages/customers/new-license.ejs
vendored
@ -1,25 +1,27 @@
|
||||
|
||||
<div id="new-license" v-cloak>
|
||||
<div style="max-width: 890px; padding-top: 80px;" class="container-fluid pb-5 px-lg-0 px-5" v-if="!showSuccessMessage">
|
||||
<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">
|
||||
<div class="d-flex flex-row justify-content-between mx-auto">
|
||||
|
||||
<div purpose="customer-portal-form" class="order-first flex-grow-1 pr-md-4">
|
||||
<div purpose="customer-portal-form" class="order-first flex-grow-1">
|
||||
<div class="card card-body">
|
||||
<ajax-form action="createQuote" :class="[showBillingForm ? 'pb-2' : '' ]" :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-row">
|
||||
<div class="form-group flex-grow-1 col-6 order-first pl-0">
|
||||
<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="!showQuotedPrice">
|
||||
<span style="position: relative; cursor: text;" class="form-control" @click="clickResetForm()" v-else>{{formData.numberOfHosts}}<span style="position: absolute; bottom: 10px; right: 5px;" class="text-muted fa fa-times-circle pl-2"></span></span>
|
||||
<div class="invalid-feedback" v-if="formErrors.numberOfHosts">Please enter a number of hosts</div>
|
||||
<span style="position: relative; cursor: text;" class="form-control" @click="clickResetForm()" v-if="showQuotedPrice">{{formData.numberOfHosts}}<span style="position: absolute; bottom: 10px; right: 16px;" class="text-muted fa fa-times-circle pl-2"></span></span>
|
||||
</div>
|
||||
<div style="color: #515774;" class="order-last text-right col-6 pr-0 pl-md-4 pl-1 pt-4">
|
||||
<p>
|
||||
|
||||
<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">$1.00</strong>/month/device<br>(Billed annually at $12/device)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<cloud-error purpose="cloud-error" v-if="cloudError && !showBillingForm"></cloud-error>
|
||||
<ajax-button style="height: 40px;" purpose="submit-button" spinner="true" type="submit" :syncing="syncing" class="btn btn-block btn-lg btn-info" v-if="!showBillingForm && !showQuotedPrice">Continue</ajax-button>
|
||||
@ -64,10 +66,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="max-width: 650px; padding-top: 80px;" class="container-fluid pb-5 text-center" v-else>
|
||||
<div style="max-width: 650px;" class="container-fluid pb-5 text-center" v-else>
|
||||
<h1>Thank you, your order is complete.</h1>
|
||||
<p>Welcome to your admin dashboard.</p>
|
||||
<p>From here you can access your license key, change your details and update your payment method, and find to help you deploy Fleet.</p>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
31
website/views/pages/entrance/forgot-password.ejs
vendored
31
website/views/pages/entrance/forgot-password.ejs
vendored
@ -1,23 +1,24 @@
|
||||
<div id="forgot-password" v-cloak>
|
||||
<div style="max-width: 480px;" class="container-fluid pt-5 pb-5">
|
||||
<div style="max-width: 480px;" class="container-fluid px-3 px-xl-0 pb-5">
|
||||
<div v-if="!cloudSuccess">
|
||||
<h1 class="text-left pb-3">Forgot your password?</h1>
|
||||
<div purpose="customer-portal-form" class="card card-body mx-auto">
|
||||
<ajax-form action="sendPasswordRecoveryEmail" :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-address">Email</label>
|
||||
<span style="float: right" class="text-right"><a href="/customers/login">I have an account</a></span>
|
||||
<input type="email" name="email-address" class="form-control" placeholder="example@email.com" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" autocomplete="email" focus-first>
|
||||
<div class="invalid-feedback" v-if="formErrors.emailAddress">Please enter a valid email address.</div>
|
||||
</div>
|
||||
<cloud-error v-if="cloudError"></cloud-error>
|
||||
<ajax-button purpose="submit-button" type="submit" :syncing="syncing" class="btn-info btn-lg btn-block">Reset password</ajax-button>
|
||||
</ajax-form>
|
||||
<h1 class="text-left">Forgot your password?</h1>
|
||||
<div purpose="customer-portal-form">
|
||||
<div class="card card-body mx-auto">
|
||||
<ajax-form action="sendPasswordRecoveryEmail" :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-address">Email</label>
|
||||
<input type="email" name="email-address" class="form-control" placeholder="example@email.com" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" autocomplete="email" focus-first>
|
||||
<div class="invalid-feedback" v-if="formErrors.emailAddress">Please enter a valid email address.</div>
|
||||
</div>
|
||||
<cloud-error v-if="cloudError"></cloud-error>
|
||||
<ajax-button purpose="submit-button" type="submit" :syncing="syncing" class="btn-info btn-lg btn-block">Reset password</ajax-button>
|
||||
</ajax-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="max-width: 480px;" class="mx-auto text-center" v-else>
|
||||
<h1 class="text-center pb-3">Password recovery sent</h1>
|
||||
<p>We've sent you a link to update your password.</p>
|
||||
<h1 class="text-center">Password recovery sent</h1>
|
||||
<p><strong>We've sent you a link to update your password.</strong></p>
|
||||
<p>
|
||||
If the email you entered is associated with a Fleet account, you should receive a recovery email shortly. If the email doesn’t arrive, please try again, or <a href="/contact">contact support</a>.
|
||||
</p>
|
||||
|
||||
15
website/views/pages/entrance/login.ejs
vendored
15
website/views/pages/entrance/login.ejs
vendored
@ -1,15 +1,14 @@
|
||||
<div id="login" v-cloak>
|
||||
<div style="max-width: 890px; padding-top: 80px;" class="container-fluid pb-5 px-lg-0 px-5">
|
||||
<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">Sign in to view your Fleet Premium dashboard.</p>
|
||||
<div purpose="customer-portal-form" class="d-flex flex-row justify-content-between">
|
||||
|
||||
<div class="order-first flex-grow-1 pr-md-4">
|
||||
<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="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"><a href="/customers/register">Create an account</a></span>
|
||||
<span style="float: right" class="text-right small"><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>
|
||||
@ -18,13 +17,13 @@
|
||||
<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==='badCombo'">Something’s not quite right with your email or password.</cloud-error>
|
||||
<cloud-error v-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="form-group">
|
||||
<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"><a href="/customers/forgot-password">Forgot your password?</a></span>
|
||||
<span class="text-center small"><a href="/customers/forgot-password">Forgot your password?</a></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
12
website/views/pages/entrance/signup.ejs
vendored
12
website/views/pages/entrance/signup.ejs
vendored
@ -1,15 +1,15 @@
|
||||
<div id="signup" v-cloak>
|
||||
<div style="max-width: 890px; padding-top: 80px;" class="container-fluid pb-5 px-lg-0 px-5">
|
||||
<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 pr-md-4">
|
||||
<div class="order-first flex-grow-1">
|
||||
<div class="card card-body">
|
||||
<ajax-form action="signup" :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"><a href="/customers/login">I have an account</a></span>
|
||||
<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>
|
||||
@ -27,14 +27,14 @@
|
||||
<div class="invalid-feedback" v-if="formErrors.organization">Please enter the name of your organization.</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<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-6">
|
||||
<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')">
|
||||
@ -47,7 +47,7 @@
|
||||
<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>By signing up you agree to our <a href="/legal/privacy">Privacy Policy</a> and <a href="/terms">Terms of Service</a>.</p>
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user