Skip to content
Snippets Groups Projects
Verified Commit c0805f2d authored by Jakob Görgen's avatar Jakob Görgen
Browse files

created utils.js and form for reuse

parent 1e29104d
No related branches found
No related tags found
1 merge request!3Coder integration
Hide whitespace changes
Inline Side-by-side
_config.yml
+ 9
− 3
View file @ c0805f2d
...@@ -5,11 +5,17 @@ title: "SimBricks" ...@@ -5,11 +5,17 @@ title: "SimBricks"
logo: "https://www.simbricks.io/assets/images/simbricks_logo.svg" logo: "https://www.simbricks.io/assets/images/simbricks_logo.svg"
logo_png: "https://www.simbricks.io/assets/images/simbricks_logo.png" logo_png: "https://www.simbricks.io/assets/images/simbricks_logo.png"
newsletter: gateway:
endpoint: "https://www.simbricks.io/api/subscribe" base-url: "https://www.simbricks.io/api"
privacy-policy: https://data-protection.mpi-klsb.mpg.de/sws/simbricks.io newsletter: "/subscribe/newsletter"
coder: "/subscribe/coder"
friendly-captcha:
puzzle-endpoint: https://www.simbricks.io/api/captcha/puzzle puzzle-endpoint: https://www.simbricks.io/api/captcha/puzzle
mpi:
privacy-policy: https://data-protection.mpi-klsb.mpg.de/sws/simbricks.io
include: include:
- _pages - _pages
- _posts/index.html - _posts/index.html
......
_layouts/base.html
+ 1
− 0
View file @ c0805f2d
...@@ -67,6 +67,7 @@ ...@@ -67,6 +67,7 @@
<script data-goatcounter="https://os-services.mpi-sws.org/simbricks/goatcounter/count" <script data-goatcounter="https://os-services.mpi-sws.org/simbricks/goatcounter/count"
async src="https://os-services.mpi-sws.org/simbricks/goatcounter/count.js"></script> async src="https://os-services.mpi-sws.org/simbricks/goatcounter/count.js"></script>
<script type ="text/javascript" src="../scripts/fc-widget-module.js"></script> <script type ="text/javascript" src="../scripts/fc-widget-module.js"></script>
<script type ="text/javascript" src="../scripts/utils.js"></script>
</head> </head>
<body <body
{%- if layout.body_class %} {%- if layout.body_class %}
......
_pages/newsletter.html
+ 8
− 36
View file @ c0805f2d
...@@ -10,7 +10,7 @@ permalink: /newsletter/ ...@@ -10,7 +10,7 @@ permalink: /newsletter/
<div class="form-card"> <div class="form-card">
<h1>Keep me updated!</h1> <h1>Keep me updated!</h1>
<form id="newsletter-form"> <form id="form-wrapper">
<div class="form-container"> <div class="form-container">
<input type="text" class="form-control" id="firstName" name="firstName" required="" maxlength="80" <input type="text" class="form-control" id="firstName" name="firstName" required="" maxlength="80"
placeholder=""> placeholder="">
...@@ -43,24 +43,22 @@ permalink: /newsletter/ ...@@ -43,24 +43,22 @@ permalink: /newsletter/
<input type="checkbox" required class="privacy-policy-checkbox" id="privacyPolicy" name="privacyPolicy" <input type="checkbox" required class="privacy-policy-checkbox" id="privacyPolicy" name="privacyPolicy"
required=""> required="">
<label class="form-check-label" for="privacyPolicy">I accept the <a <label class="form-check-label" for="privacyPolicy">I accept the <a
href="{{ site.newsletter.privacy-policy }}">privacy policy</a> *.</label> href="{{ site.mpi.privacy-policy }}">privacy policy</a> *.</label>
</div> </div>
<div class="form-container full-row"> <div class="form-container full-row">
<div id="frc-captcha" class="frc-captcha" data-sitekey="dummy" <div id="frc-captcha" class="frc-captcha" data-sitekey="dummy"
data-solution-field-name="frc-captcha-solution" data-solution-field-name="frc-captcha-solution"
data-puzzle-endpoint="{{ site.newsletter.puzzle-endpoint }}" data-start="auto" data-puzzle-endpoint="{{ site.friendly-captcha.puzzle-endpoint }}" data-start="auto"
data-callback=captchaCallback></div> data-callback=captchaCallback></div>
</div> </div>
<div class="form-container full-row"> <div class="form-container full-row">
<button disabled type="submit" id="newsletter-form-submit-button">Submit</button> <button type="submit" id="form-submit-button">Submit</button>
</div> </div>
</form> </form>
<div id="subscribe-success-banner"> <div id="banner"></div>
<p></p>
</div>
<div class="newsletter-form-footer"> <div class="newsletter-form-footer">
<div class="newsletter-mail-info"> <div class="newsletter-mail-info">
...@@ -77,29 +75,10 @@ permalink: /newsletter/ ...@@ -77,29 +75,10 @@ permalink: /newsletter/
<script type="text/javascript"> <script type="text/javascript">
function captchaCallback(solution) { function captchaCallback(solution) {
$("#newsletter-form-submit-button").prop("disabled", false); $("#form-submit-button").prop("disabled", false);
} }
$(document).ready(function () { $(document).ready(function () {
function checkValid() {
let isValid = function (id) {
let input = document.getElementById(id);
if (input.checkValidity()) {
return true;
}
return false;
}
if (isValid("firstName")
&& isValid("lastName")
&& isValid("email")
&& isValid("privacyPolicy")
&& isValid("company")
&& isValid("role")) {
return true;
}
return false;
}
function getFormValue(ident) { function getFormValue(ident) {
let input = document.getElementById(id); let input = document.getElementById(id);
return input.nodeValue(); return input.nodeValue();
...@@ -124,15 +103,8 @@ permalink: /newsletter/ ...@@ -124,15 +103,8 @@ permalink: /newsletter/
return JSON.stringify(json); return JSON.stringify(json);
} }
function showBanner(text, success) {
$('#subscribe-success-banner').css('background-color', success ? 'green' : 'red');
$('#subscribe-success-banner p').text(text);
$('#subscribe-success-banner').fadeIn('slow');
$('#subscribe-success-banner').delay(2000).fadeOut('slow');
}
function handelSubmit(event) { function handelSubmit(event) {
if (!checkValid()) { if (!allInputsValid(["firstName", "lastName", "email", "privacyPolicy", "company", "role"])) {
return; return;
} }
...@@ -141,7 +113,7 @@ permalink: /newsletter/ ...@@ -141,7 +113,7 @@ permalink: /newsletter/
let formData = convertFormToJSON(event.target); let formData = convertFormToJSON(event.target);
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: "{{ site.newsletter.endpoint }}", url: "{{ site.gateway.base-url }}{{ site.gateway.newsletter }}",
contentType: "application/json;charset=UTF-8", contentType: "application/json;charset=UTF-8",
data: formData, data: formData,
timeout: 30000, timeout: 30000,
......
_sass/newsletter.scss → _sass/base-form.scss
+ 7
− 8
View file @ c0805f2d
...@@ -9,7 +9,7 @@ $border-radius: 0.3em; ...@@ -9,7 +9,7 @@ $border-radius: 0.3em;
padding: 20px; padding: 20px;
} }
#newsletter-form { #form-wrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
...@@ -58,7 +58,7 @@ $border-radius: 0.3em; ...@@ -58,7 +58,7 @@ $border-radius: 0.3em;
font-size: $info-input-text-size - 4; font-size: $info-input-text-size - 4;
} }
#newsletter-form-submit-button { #form-submit-button {
padding: 0.5em; padding: 0.5em;
font-family: $font-title + 4; font-family: $font-title + 4;
width: 100px; width: 100px;
...@@ -69,7 +69,7 @@ $border-radius: 0.3em; ...@@ -69,7 +69,7 @@ $border-radius: 0.3em;
background-color: $col-sb-org-l1; background-color: $col-sb-org-l1;
} }
#newsletter-form-submit-button:hover { #form-submit-button:hover {
background-color: $col-sb-org; background-color: $col-sb-org;
} }
} }
...@@ -87,7 +87,7 @@ $border-radius: 0.3em; ...@@ -87,7 +87,7 @@ $border-radius: 0.3em;
} }
} }
#subscribe-success-banner { #banner {
display: none; display: none;
width: 100%; width: 100%;
color: white; color: white;
...@@ -95,16 +95,15 @@ $border-radius: 0.3em; ...@@ -95,16 +95,15 @@ $border-radius: 0.3em;
border: 1px solid lightgray; border: 1px solid lightgray;
border-radius: $border-radius; border-radius: $border-radius;
text-align: center; text-align: center;
margin: 1em 0em 1em 0.5em;
} }
.newsletter-form-footer { .form-footer {
.newsletter-mail-info { .mail-info {
font-size: $info-input-text-size; font-size: $info-input-text-size;
margin: 1em 0em 1em 0.5em; margin: 1em 0em 1em 0.5em;
} }
.newsletter-required-info { .required-info {
font-size: $info-input-text-size - 4; font-size: $info-input-text-size - 4;
margin: 1em 0em 1em 0.5em; margin: 1em 0em 1em 0.5em;
} }
......
scripts/utils.js 0 → 100644
+ 24
− 0
View file @ c0805f2d
function showBanner(text, success) {
let banner = $("#banner");
banner.html(`<p>${text}</p>`);
banner.css('background-color', success ? 'green' : 'red');
banner.fadeIn('slow');
banner.delay(2000).fadeOut('slow');
}
function checkInputValidity(input_id) {
let input = $(`input[id^=${input_id}]`)[0];
return input.checkValidity();
}
function allInputsValid(input_ids) {
console.log(input_ids);
let valid = true;
input_ids.forEach(id => {
if (!checkInputValidity(id)) {
valid = false;
}
});
return valid;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment