Zenjob Notes, and new Templates
This commit is contained in:
Norm Rasmussen
362
Custom_Templates/customer_templates/Skuid/sign_up.html.liquid
Normal file
362
Custom_Templates/customer_templates/Skuid/sign_up.html.liquid
Normal file
@ -0,0 +1,362 @@
|
||||
{% 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>
|
||||
Reference in New Issue
Block a user