407 lines
13 KiB
Plaintext
407 lines
13 KiB
Plaintext
{% 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> |