302 lines
7.6 KiB
Plaintext
302 lines
7.6 KiB
Plaintext
{% for group in current_person.groups %}
|
|
{% if group.id == "29ae12e6-f740-4190-a5c2-a7e12e87926f" or group.id == "aa36069f-e354-4dbe-9972-9ce70ad146d7" or group.id == "8cd6ec9c-101e-4b1a-82c7-77dac583a1f5" %}
|
|
<script>
|
|
window.location.replace('/app');
|
|
</script>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<body>
|
|
{% include "header" %}
|
|
<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" novalidate>
|
|
<div class="np-form-title"> Welcome to Skuid Skool </div>
|
|
<div class="np-form-subtitle"> We need a little more information to tailor the best courses to your role </div>
|
|
{% form_authenticity_token %}
|
|
<div class="np-form-field">
|
|
<label class="np-input-label" for="learner_company">
|
|
</label>
|
|
<input
|
|
class="np-input"
|
|
type="text"
|
|
name="learner[company]"
|
|
id="learner_company"
|
|
placeholder="Company"
|
|
required
|
|
>
|
|
</div>
|
|
<div class="np-form-field">
|
|
<label class="np-input-label" for="learner_title">
|
|
</label>
|
|
<input
|
|
class="np-input"
|
|
type="text"
|
|
name="learner[title]"
|
|
id="learner_title"
|
|
placeholder="Job Title"
|
|
required
|
|
>
|
|
</div>
|
|
<div class="np-form-field">
|
|
<label class="np-input-label" for="learner_role">
|
|
</label>
|
|
<select
|
|
class="np-input"
|
|
name="learner[role]"
|
|
id="learner_role"
|
|
required
|
|
>
|
|
<option class="default-option" disabled selected id="default-option">Your Skuid Builder Role</option>
|
|
<option class="selection-option" value="developer">Developer</option>
|
|
<option class="selection-option" value="salesforce-administrator">Salesforce Administrator</option>
|
|
<option class="selection-option" value="other">Other</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
<button id="send_button" onclick="SendInfos()" class="np-button np-button-big np-button-large-font np-form-action" style="border-radius: 56px;">
|
|
Update Information
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{% include "footer" %}
|
|
</body>
|
|
|
|
<style>
|
|
@media (min-width: 1440px) {
|
|
#password-too-short-alert {
|
|
position: absolute;
|
|
right: 25.5%;
|
|
bottom: 23%;
|
|
color: salmon;
|
|
font-size: 13px;
|
|
}
|
|
|
|
#passwords-dont-match-alert {
|
|
position: absolute;
|
|
right: 23%;
|
|
bottom: 14.5%;
|
|
color: salmon;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
#password-too-short-alert {
|
|
position: absolute;
|
|
right: 24%;
|
|
bottom: 23%;
|
|
color: salmon;
|
|
font-size: 13px;
|
|
}
|
|
|
|
#passwords-dont-match-alert {
|
|
position: absolute;
|
|
right: 21.5%;
|
|
bottom: 14.5%;
|
|
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;
|
|
background: none;
|
|
}
|
|
.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); }
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.getElementById("header").scrollIntoView();
|
|
|
|
function checkIfInputsExist (){
|
|
window.setTimeout(function(){
|
|
if ($("#learner_company")[0].value.length * $("#learner_title")[0].value.length && $("#learner_role")[0].value != "Your Skuid Builder Role") {
|
|
$("#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");
|
|
}
|
|
}, 500)
|
|
}
|
|
document.addEventListener('keydown', checkIfInputsExist);
|
|
document.getElementById("learner_role").addEventListener('change', checkIfInputsExist);
|
|
|
|
function SendInfos() {
|
|
var xhr = new XMLHttpRequest();
|
|
url = "https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/user_registration"
|
|
xhr.addEventListener("load", e => {
|
|
var a = new URLSearchParams(window.location.search);
|
|
var b = a.get('redirect_uri');
|
|
new_url = '/app/waiting-room'.concat('?redirect_uri=', b);
|
|
window.location.replace(new_url);
|
|
});
|
|
xhr.open("POST", url, true);
|
|
xhr.send(JSON.stringify({
|
|
user_id: '{{ current_person.id }}',
|
|
company: $("#learner_company")[0].value,
|
|
title: $("#learner_title")[0].value,
|
|
role: $("#learner_role")[0].value
|
|
}));
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.np-box-container {
|
|
background: none;
|
|
}
|
|
</style> |