363 lines
10 KiB
Plaintext
363 lines
10 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>
|
|
<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">
|
|
<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>
|
|
</div>
|
|
<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>
|
|
</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").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 * $("#learner_second_password")[0].value.length != 0) {
|
|
$("#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").css("background-color", "salmon")
|
|
$("#send_button").css("background-color","#6F7277");
|
|
$("#send_button").css("pointer-events","none");
|
|
}
|
|
}
|
|
}, 500)
|
|
}
|
|
document.addEventListener('keydown', checkIfInputsExist);
|
|
</script>
|
|
<script>
|
|
let googleReport = (event) => {
|
|
let userData = $('#how_did_you_hear')[0].value;
|
|
console.log(userData);
|
|
}
|
|
</script>
|