fleet/website/views/pages/entrance/signup.ejs
eashaw 8740682a1e
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
2022-01-07 19:52:55 -06:00

73 lines
5.2 KiB
Plaintext
Vendored
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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" :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 doesnt 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="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>
<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 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>
</div>
</div>
</div>
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>