WilliamsSonoma sub navigation changes.
This commit is contained in:
Norm Rasmussen
407
Custom_Templates/customer_templates/Skuid/sign_up.html.liquid
Normal file
407
Custom_Templates/customer_templates/Skuid/sign_up.html.liquid
Normal file
@ -0,0 +1,407 @@
|
||||
{% if current_person.signed_in? %}
|
||||
<script>
|
||||
window.location.replace('/app')
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
<body>
|
||||
{% include "header" %}
|
||||
{% include "messages" %}
|
||||
<main class="np-main np-box-container">
|
||||
<div class="np-box">
|
||||
<img class="hero-image-left-desktop" src="https://s3.amazonaws.com/static.northpass.com/Skuid/images/SkuidSkool-RegisterHero.svg">
|
||||
<img class="hero-image-left-mobile" src="https://s3.amazonaws.com/static.northpass.com/Skuid/images/skuid+skool+V3.svg">
|
||||
<div class="np-box-content-container">
|
||||
<form id="register-form" class="np-form np-box-content" action="{% route sign_up %}" method="post" novalidate>
|
||||
<div class="np-form-title"> Welcome to Skuid Skool </div>
|
||||
<div class="np-form-subtitle"> Complete your profile below </div>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_first_name">
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="learner[first_name]"
|
||||
id="learner_first_name"
|
||||
placeholder="First Name"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_last_name">
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="learner[last_name]"
|
||||
id="learner_last_name"
|
||||
placeholder="Last Name"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_email">
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="email"
|
||||
name="learner[email]"
|
||||
id="learner_email"
|
||||
placeholder="Email"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<p style="display: none; color: salmon;" id="skuid-domain-alert">Skuid team members please login to <a href="https://www.skuadskool.com/" style="text-decoration: none;">skuadskool.com</a></p>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_password">
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="password"
|
||||
name="learner[password]"
|
||||
id="learner_password"
|
||||
placeholder="Password"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<p style="display: none;" id="password-too-short-alert">Password must be minimum 8 characters and contain at least 1 uppercase letter, 1 number, and 1 special character</p>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_second_password">
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="password"
|
||||
name="learner[second-password]"
|
||||
id="learner_second_password"
|
||||
placeholder="Verify Password"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="np-form-field checkbox-field">
|
||||
<label class="checkbox-container">
|
||||
<input type="checkbox" id="attestationCheckbox">
|
||||
I have read and agree to the <a href="http://www.skuid.com/legal/privacy-policy">privacy policy</a> and <a
|
||||
href="http://www.skuid.com/legal/terms-of-use">terms of use</a>.
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
</div>
|
||||
{%- comment -%} <div class="np-form-field">
|
||||
<label class="np-input-label" for="hear_about">
|
||||
</label>
|
||||
<select
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="how_did_you_hear"
|
||||
id="how_did_you_hear"
|
||||
style="text-align-last: left;"
|
||||
required
|
||||
>
|
||||
<option value="" selected disabled>How did you Hear about Skuid Skool?</option>
|
||||
<option value="Colleague or Team Member">Colleague or Team Member</option>
|
||||
<option value="Skuid Team Member/Employee">Skuid Team Member/Employee</option>
|
||||
<option value="Skuid newsletter, email, social media or other form of Skuid communication">Skuid newsletter, email, social media or other form of Skuid communication</option>
|
||||
<option value="Internet Search">Internet Search</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div> {%- endcomment -%}
|
||||
|
||||
{% comment %}<div class="np-form-field">
|
||||
<label class="np-input-label" for="hear_about">
|
||||
</label>
|
||||
<select
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="how_did_you_hear"
|
||||
id="how_did_you_hear"
|
||||
required
|
||||
>
|
||||
<option value="" selected>How did you Hear about Skuid Skool?</option>
|
||||
<option value="Colleague or Team Member">Colleague or Team Member</option>
|
||||
<option value="Skuid Team Member/Employee">Skuid Team Member/Employee</option>
|
||||
<option value="Skuid newsletter, email, social media or other form of Skuid communication">Skuid newsletter, email, social media or other form of Skuid communication</option>
|
||||
<option value="Internet Search">Internet Search</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div>{% endcomment %}
|
||||
<p style="display: none;" id="passwords-dont-match-alert">Passwords don't match</p>
|
||||
<button type="submit" id="send_button" class="np-button np-button-big np-button-large-font np-form-action" style="border-radius: 56px;" onclick="googleReport(event)">
|
||||
Register
|
||||
</button>
|
||||
<div class="err-required" style="display:none;">Please complete all required fields.</div>
|
||||
</form>
|
||||
{% comment %} <span class="np-form-terms">
|
||||
By submitting this form you agree to the
|
||||
|
||||
<a
|
||||
class="np-form-link np-button-color"
|
||||
target="_blank"
|
||||
href="{{ current_school.terms_of_service_url }}"
|
||||
>
|
||||
Northpass
|
||||
</a>
|
||||
and
|
||||
|
||||
<a
|
||||
class="np-form-link np-button-color"
|
||||
target="_blank"
|
||||
href="/app/eula"
|
||||
>
|
||||
Skuid
|
||||
</a>
|
||||
Terms of Use
|
||||
</span> {% endcomment %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
</body>
|
||||
|
||||
<style>
|
||||
#password-too-short-alert {
|
||||
color: salmon;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#passwords-dont-match-alert {
|
||||
color: salmon;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (min-width: 426px) and (max-width: 768px) {
|
||||
.np-box-content-container {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 376px) and (max-width: 425px) {
|
||||
.np-input {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 326px) and (max-width: 375px) {
|
||||
.np-input {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 325px) {
|
||||
.np-input {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.np-main {
|
||||
margin: 25px 0;
|
||||
}
|
||||
.np-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: unset !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
.np-box-container {
|
||||
height: unset !important;
|
||||
}
|
||||
.hero-image-left-desktop {
|
||||
width: 60%;
|
||||
}
|
||||
.hero-image-left-mobile {
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
.np-box-content-container {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 2rem 0 2rem 2.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.np-form-title {
|
||||
font-weight: 600;
|
||||
color: #1B1C1D;
|
||||
font-size: 28px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.np-form-subtitle {
|
||||
color: #1B1C1D;
|
||||
font-size: 16px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.np-input {
|
||||
background-color: #FFF6F0;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.np-input::placeholder {
|
||||
color: #6F7277;
|
||||
font-size: 16px;
|
||||
}
|
||||
#default-option {
|
||||
color: #6F7277;
|
||||
font-size: 16px;
|
||||
}
|
||||
.selection-option {
|
||||
font-family: Inter;
|
||||
}
|
||||
.body {
|
||||
height: 100%;
|
||||
}
|
||||
#learner_role {
|
||||
color: #1B1C1D;
|
||||
text-align: left;
|
||||
text-align-last: left;
|
||||
}
|
||||
@media only screen and (min-width: 1190px) {
|
||||
.hero-image-left-desktop {
|
||||
min-width: 60%;
|
||||
}
|
||||
.np-box-content-container {
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.np-box-content-container {
|
||||
padding: 2rem 2rem 2.25rem;
|
||||
}
|
||||
.hero-image-left-desktop {
|
||||
display: none;
|
||||
}
|
||||
.hero-image-left-mobile {
|
||||
display: block;
|
||||
}
|
||||
.np-box {
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
}
|
||||
.np-main {
|
||||
margin: 0;
|
||||
}
|
||||
.np-box-content-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
#send_button {
|
||||
pointer-events: none;
|
||||
background-color: #6F7277;
|
||||
}
|
||||
|
||||
.loader {
|
||||
border: 16px solid #f3f3f3;
|
||||
border-radius: 50%;
|
||||
border-top: 16px solid #00bf8f;
|
||||
border-bottom: 16px solid #00bf8f;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
animation: spin 2s linear infinite;
|
||||
|
||||
|
||||
position: absolute;
|
||||
top:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
.eula-info-box {
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding: 30px;
|
||||
background-color: white;
|
||||
opacity: 0.7;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#eula-info:hover .eula-info-box {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.getElementById("header").scrollIntoView();
|
||||
|
||||
function checkIfInputsExist (){
|
||||
window.setTimeout(function(){
|
||||
if ($("#learner_email")[0].value.length >0){
|
||||
if ($("#learner_email")[0].value.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/) && $("#learner_email")[0].value.includes('@skuid') == false){
|
||||
$("#skuid-domain-alert").css("display", "none");
|
||||
$("#learner_email").css("background-color", "#FFF6F0");
|
||||
if ($("#learner_password")[0].value.length > 0){
|
||||
if (!$("#learner_password")[0].value.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&.#^+-/()=<>~`:;'",])[A-Za-z\d@$!%*?&.#^+-/()=<>~`:;'",]{8,}$/)) {
|
||||
$("#password-too-short-alert").css("display", "block");
|
||||
$("#learner_password").css("background-color", "salmon");
|
||||
$("#send_button").css("background-color","#6F7277");
|
||||
$("#send_button").css("pointer-events","none");
|
||||
}
|
||||
else {
|
||||
$("#password-too-short-alert").css("display", "none");
|
||||
$("#learner_password").css("background-color", "#FFF6F0");
|
||||
if ($("#learner_password")[0].value == $("#learner_second_password")[0].value){
|
||||
$("#passwords-dont-match-alert").css("display", "none");
|
||||
$("#learner_second_password").css("background-color", "#FFF6F0");
|
||||
if ($("#learner_first_name")[0].value.length * $("#learner_last_name")[0].value.length * $("#learner_email")[0].value.length * $("#learner_password")[0].value.length) {
|
||||
$("#send_button").css("background-color","#005cb9");
|
||||
$("#send_button").css("pointer-events","auto");
|
||||
}
|
||||
else {
|
||||
$("#send_button").css("background-color","#6F7277");
|
||||
$("#send_button").css("pointer-events","none");
|
||||
}
|
||||
}
|
||||
else {
|
||||
$("#passwords-dont-match-alert").css("display", "block");
|
||||
$("#learner_second_password").css("background-color", "salmon")
|
||||
$("#send_button").css("background-color","#6F7277");
|
||||
$("#send_button").css("pointer-events","none");
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
$("#send_button").css("background-color","#6F7277");
|
||||
$("#send_button").css("pointer-events","none");
|
||||
}
|
||||
}
|
||||
else {
|
||||
$("#learner_email")[0].value.includes('@skuid') ? $("#skuid-domain-alert").css("display", "block") : $("#skuid-domain-alert").css("display", "none");
|
||||
$("#learner_email").css("background-color", "salmon")
|
||||
$("#send_button").css("background-color","#6F7277");
|
||||
$("#send_button").css("pointer-events","none");
|
||||
}
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
document.addEventListener('keydown', checkIfInputsExist);
|
||||
$("#learner_email")[0].addEventListener('change', checkIfInputsExist);
|
||||
</script>
|
||||
<script>
|
||||
//validate the checkbox is selected
|
||||
|
||||
$('.np-form-action').click(function(e) {
|
||||
e.preventDefault()
|
||||
console.log("clicked")
|
||||
|
||||
if($("#attestationCheckbox").is(":checked")) {
|
||||
$('.np-form').submit()
|
||||
} else {
|
||||
console.log("Checkbox is not checked")
|
||||
$('.checkbox-field').addClass('has-err')
|
||||
$('.err-required').show();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user