Commit c7921e67 authored by jbuechele's avatar jbuechele
Browse files

added fairlogin question captcha

parent e76510bd
......@@ -23,4 +23,6 @@ registerAlreadyAccountText=Sie haben bereits ein Konto?
loginTotpStep1=Installieren Sie FreeOTP oder Google Authenticator auf Ihrem Smartphone.
loginTotpStep2=\u00D6ffnen Sie die Applikation und scannen Sie den Barcode oder geben Sie den Code ein.
loginTotpStep3=Geben Sie den von der Applikation generierten One-time Code ein und klicken Sie auf Absenden.
loginTotpOneTime=One-time Code
\ No newline at end of file
loginTotpOneTime=One-time Code
errorWrongAnswer=Sie müssen eine korrekte Antwort auswählen.
correctAnswer=Gut gemacht!
\ No newline at end of file
......@@ -25,4 +25,6 @@ email=E-Mail Address
loginTotpTitle=One-time password
loginTitleShort=Login or
signUpTitle=Sign up
registerAlreadyAccountText=Already have an account?
\ No newline at end of file
registerAlreadyAccountText=Already have an account?
errorWrongAnswer=You need to select a correct answer.
correctAnswer=Well done!
\ No newline at end of file
......@@ -12,7 +12,7 @@
<div class="card-body">
<h4 class="card-title">${msg("registerTitleFairlogin")}</h4>
<#include "alert.ftl">
<form action="${url.registrationAction}" method="post">
<form action="${url.registrationAction}" method="post" onsubmit="return checkAnswer()">
<div class="form-group">
<label for="firstName" class="required">${msg("firstName")}</label>
......@@ -24,11 +24,6 @@
<input id="lastName" type="text" class="form-control" name="lastName" required>
</div>
<div class="form-group">
<label for="nickname" class="required">Nickname</label>
<input id="nickname" type="text" class="form-control" name="user.attributes.nickname" required>
</div>
<div class="form-group">
<label for="mobile">${msg("mobileNumber")}</label>
<input id="mobile" type="text" class="form-control" name="user.attributes.mobile">
......@@ -51,13 +46,22 @@
<div class="invalid-feedback">${msg("errorNotSamePassword")}</div>
</div>
<div class="form-group">
<label for="selection" id="selectionLabel" class="required"></label>
<select class="form-control" id="selection" onchange="checkAnswer()" required>
<option>-- select answer --</option>
</select>
<div class="invalid-feedback">${msg("errorWrongAnswer")}</div>
<div class="valid-feedback">${msg("correctAnswer")}</div>
</div>
<#if recaptchaRequired??>
<div class="form-group">
<div class="g-recaptcha" data-size="compact" data-sitekey="${recaptchaSiteKey}"></div>
</div>
</#if>
<div class="form-group">
<div class="form-group text-center margin-top-40">
<label>
<input id="agreeTerms" type="checkbox" name="user.attributes.agreeTerms"> I have read and agree to the <a href="${msg("termsOfServiceLink")}" class="text-muted">${msg("termsOfServiceText")}</a>
and <a href="${msg("cloudTermsLink")}" class="text-muted">${msg("cloudTermsText")}</a>.
......
......@@ -108,6 +108,10 @@ body.main-page {
margin-top: 80px;
}
.margin-top-40 {
margin-top: 40px;
}
.btn-primary {
background-color: #00187D;
border-color: #00187D;
......@@ -197,6 +201,10 @@ img {
width: 80%;
}
#agreeTerms {
margin-right: 3px;
}
@media screen and (max-width: 425px) {
.main-page .card-wrapper {
width: 90%;
......
$(function() {
$("input[type='password'][data-eye]").each(function(i) {
var $this = $(this);
$this.wrap($("<div/>", {
style: 'position:relative'
}));
$this.css({
paddingRight: 60
});
$this.after($("<div/>", {
html: 'Show',
class: 'btn btn-primary btn-sm',
id: 'passeye-toggle-'+i,
style: 'position:absolute;right:10px;top:50%;transform:translate(0,-50%);-webkit-transform:translate(0,-50%);-o-transform:translate(0,-50%);padding: 2px 7px;font-size:12px;cursor:pointer;'
}));
$this.after($("<input/>", {
type: 'hidden',
id: 'passeye-' + i
}));
$this.on("keyup paste", function() {
$("#passeye-"+i).val($(this).val());
});
$("#passeye-toggle-"+i).on("click", function() {
if($this.hasClass("show")) {
$this.attr('type', 'password');
$this.removeClass("show");
$(this).removeClass("btn-outline-primary");
}else{
$this.attr('type', 'text');
$this.val($("#passeye-"+i).val());
$this.addClass("show");
$(this).addClass("btn-outline-primary");
}
});
});
});
function removeError(event) {
if($('#' + event.target.id).hasClass("is-invalid")) {
$('#' + event.target.id).removeClass("is-invalid");
......
var config = {
"EN": {
"questions": [
{
"name": "In which European city has the climate contract been signed in 2015?",
"answers": [
"Paris",
"Oslo",
"Vienna"
],
"correctAnswer": "Paris"
},
{
"name": "Which disruptive innovation is driving cryptocurrencies?",
"answers": [
"Bicycle",
"Vegan food",
"Blockchain"
],
"correctAnswer": "Blockchain"
},
{
"name": "How are the mountains called in western Europe?",
"answers": [
"Alps",
"Chain",
"Brownies"
],
"correctAnswer": "Alps"
},
{
"name": "How do we call the area of never melting ice and snow on top of mountains?",
"answers": [
"Sugar top",
"Glacier",
"Powder"
],
"correctAnswer": "Glacier"
},
{
"name": "Who is current United Nations Secretary General?",
"answers": [
"Donald Trump",
"Kofi Annan",
"António Guterres"
],
"correctAnswer": "António Guterres"
},
{
"name": "Which of these is a theory about the creation of the universe?",
"answers": [
"Big Bong",
"Big Bang",
"Big Ben"
],
"correctAnswer": "Big Bang"
},
{
"name": "Who was anti-apartheid activist, peace nobel prize winner and former president of South Africa?",
"answers": [
"Mahatma Gandhi",
"Nelson Mandela",
"Che Guevara"
],
"correctAnswer": "Nelson Mandela"
}
]
},
"DE": {
"questions": [
{
"name": "In welcher europäischen Stadt wurde der Klimavertrag im Jahr 2015 unterzeichnet?",
"answers": [
"Paris",
"Oslo",
"Wien"
],
"correctAnswer": "Paris"
},
{
"name": "Welche Innovation treibt Kryptowährungen voran?",
"answers": [
"Fahrrad",
"Veganes Essen",
"Blockchain"
],
"correctAnswer": "Blockchain"
},
{
"name": "Wie heißt das höchste Gebirge in Westeuropa?",
"answers": [
"Alpen",
"Kette",
"Brownies"
],
"correctAnswer": "Alpen"
},
{
"name": "Wie nennt man den Bereich eines Berges, der das ganze Jahr von Schnee bedeckt ist?",
"answers": [
"Sugar top",
"Gletscher",
"Puder"
],
"correctAnswer": "Gletscher"
},
{
"name": "Wer ist derzeitiger Generalsekretär der Vereinten Nationen?",
"answers": [
"Donald Trump",
"Kofi Annan",
"António Guterres"
],
"correctAnswer": "António Guterres"
},
{
"name": "Wie heißt die Theorie über die Erschaffung des Universums?",
"answers": [
"Big Bong",
"Urknall",
"Big Ben"
],
"correctAnswer": "Urknall"
},
{
"name": "Wer war Anti-Apartheid-Aktivist, Friedensnobelpreisträger und ehemaliger Präsident von Südafrika?",
"answers": [
"Mahatma Gandhi",
"Nelson Mandela",
"Che Guevara"
],
"correctAnswer": "Nelson Mandela"
}
]
},
"ES": {
"questions": [
{
"name": "¿En qué ciudad europea se firmó el acuerdo contra el cambio climático de 2015?",
"answers": [
"Paris",
"Oslo",
"Viena"
],
"correctAnswer": "Paris"
},
{
"name": "¿En qué disruptiva innovación se basan las criptomonedas?",
"answers": [
"Bicicleta",
"Comida vegana",
"Blockchain"
],
"correctAnswer": "Blockchain"
},
{
"name": "¿Cómo se llaman las montañas de Europa Occidental?",
"answers": [
"Alpes",
"Cadena",
"Bizcocho"
],
"correctAnswer": "Alpes"
},
{
"name": "¿Cómo se llama el área de la cumbre de las montañas que está siempre cubierta de hielo y nieve?",
"answers": [
"Cobertura de azúcar",
"Glaciar",
"Polvo"
],
"correctAnswer": "Glaciar"
},
{
"name": "¿Quién es el actual Secretario General de Naciones Unidas?",
"answers": [
"Donald Trump",
"Kofi Annan",
"António Guterres"
],
"correctAnswer": "António Guterres"
},
{
"name": "¿Cuál es una teoría sobre la creación del universo?",
"answers": [
"Big Bong",
"Big Bang",
"Big Ben"
],
"correctAnswer": "Big Bang"
},
{
"name": "¿Quién fue activista contra el apartheid, ganador del premio Nobel de la Paz y ex-presidente de Sudáfrica?",
"answers": [
"Mahatma Gandhi",
"Nelson Mandela",
"Che Guevara"
],
"correctAnswer": "Nelson Mandela"
}
]
}
}
var selectedQuestion;
function checkAnswer() {
const selectionList = document.getElementById('selection');
const registerButton = document.getElementById('registerSubmit');
const selected = selectionList.options[selectionList.selectedIndex].value;
if (selected == selectedQuestion.correctAnswer) {
document.getElementById('selection').classList.remove('is-invalid')
document.getElementById('selection').classList.add('is-valid');
return true;
} else {
this.initialize();
document.getElementById('selection').classList.add('is-invalid');
return false;
}
}
function initialize() {
const selectionList = document.getElementById('selection');
const selectionLabel = document.getElementById('selectionLabel');
this.initializeQuestions();
if (selectionList != null && selectionLabel != null) {
selectionLabel.innerHTML = selectedQuestion.name;
if(selectionList.options.length > 1) {
this.removeOptions(selectionList);
}
this.createOptions(selectionList);
}
}
function initializeQuestions() {
const languagePicker = document.getElementById('language-picker-dropdown');
const id = Math.floor(Math.random() * 7);
const selectedLanguage = languagePicker.options[languagePicker.selectedIndex].text;
switch (selectedLanguage) {
case 'Deutsch':
selectedQuestion = config.DE.questions[id];
break;
case 'Español':
selectedQuestion = config.ES.questions[id];
break;
default:
selectedQuestion = config.EN.questions[id];
break;
}
}
function removeOptions(selectionList) {
for(var i = selectionList.options.length; i > 0; i--) {
selectionList.remove(i);
}
}
function createOptions(selectionList) {
for (var i = 0; i < selectedQuestion.answers.length; i++) {
var option = document.createElement("option");
option.value = selectedQuestion.answers[i];
option.text = selectedQuestion.answers[i];
selectionList.appendChild(option);
}
}
\ No newline at end of file
......@@ -24,7 +24,7 @@
</#if>
</head>
<body class="main-page">
<body class="main-page" onload="initialize()">
<#nested "form">
......
parent=base
styles=css/bootstrap.min.css css/fairlogin.css font/css/font-awesome.min.css css/bootstrap-social.css
scripts=js/jquery.min.js js/popper.min.js js/bootstrap.min.js js/fairlogin.js
scripts=js/jquery.min.js js/popper.min.js js/bootstrap.min.js js/fairlogin.js js/re-captcha.js
kcLogoLink=https://fairkom.net/
\ No newline at end of file
Supports Markdown
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