Assclaw/jfa-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use typescript for form.html in separate file, allow customization of

Browse Source 
requirement strings

Password requirement text is now loaded by the typescript, and can be
customized by changing the validationStrings variable. See wiki for more
info.
This commit is contained in:
Harvey Tindall
2020-10-20 23:00:30 +01:00
parent 2f9965bcda
commit 9abb177427
6 changed files with 220 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
data/templates/form.html
+25 -102
View File
@@ -102,8 +102,8 @@
<div class="card-body">
<ul class="list-group">
{{ range $key, $value := .requirements }}
<li id="{{ $key }}" class="list-group-item list-group-item-danger">
<div> {{ $value }}</div>
<li id="{{ $key }}" min="{{ $value }}" class="list-group-item list-group-item-danger">
<div></div>
</li>
{{ end }}
</ul>
@@ -116,107 +116,30 @@
</div>
<script src="serialize.js"></script>
<script>
{{ if .bs5 }}
var bsVersion = 5;
{{ else }}
var bsVersion = 4;
{{ end }}
if (bsVersion == 5) {
var successBox = new bootstrap.Modal(document.getElementById('successBox'));
} else if (bsVersion == 4) {
var successBox = {
show : function() {
return $('#successBox').modal('show');
},
hide : function() {
return $('#successBox').modal('hide');
}
};
};
var code = window.location.href.split('/').pop();
function toggleSpinner () {
var submitButton = document.getElementById('submitButton');
var oldSpan = document.getElementById('createAccount');
var newSpan = document.createElement('span');
newSpan.id = 'createAccount';
if (document.getElementById('createAccountSpinner')) {
newSpan.appendChild(document.createTextNode('Create Account'));
submitButton.disabled = false;
} else {
var spinner = document.createElement('span');
spinner.id = 'createAccountSpinner';
spinner.classList.add('spinner-border', 'spinner-border-sm');
spinner.setAttribute('role', 'status');
spinner.setAttribute('aria-hidden', 'true');
var text = document.createTextNode(' Creating...');
newSpan.appendChild(spinner);
newSpan.appendChild(text);
submitButton.disabled = true;
var usernameEnabled = {{ .username }}
var validationStrings = {
"length": {
"singular": "Must have at least {n} character",
"plural": "Must have a least {n} characters"
},
"uppercase": {
"singular": "Must have at least {n} uppercase character",
"plural": "Must have at least {n} uppercase characters"
},
"lowercase": {
"singular": "Must have at least {n} lowercase character",
"plural": "Must have at least {n} lowercase characters"
},
"number": {
"singular": "Must have at least {n} number",
"plural": "Must have at least {n} numbers"
},
"special": {
"singular": "Must have at least {n} special character",
"plural": "Must have at least {n} special characters"
}
submitButton.replaceChild(newSpan, oldSpan);
};
document.getElementById('accountForm').onsubmit = function() {
if (document.getElementById('errorMessage')) {
document.getElementById('errorMessage').remove();
}
toggleSpinner();
var send = serializeForm('accountForm');
send['code'] = code;
{{ if not .username }}
send['email'] = send['username'];
{{ end }}
send = JSON.stringify(send);
var req = new XMLHttpRequest();
req.open("POST", "/newUser", true);
req.responseType = 'json';
req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
req.onreadystatechange = function() {
if (this.readyState == 4) {
toggleSpinner();
var data = this.response;
if ('error' in data || data['success'] == false) {
if (typeof(data['error']) != 'undefined') {
var errorMessage = data['error'];
} else {
var errorMessage = 'Unknown Error';
}
var text = document.createTextNode(errorMessage);
var error = document.createElement('button');
error.classList.add('btn', 'btn-outline-danger');
error.setAttribute('disabled', '');
error.appendChild(text);
error.id = 'errorMessage';
document.getElementById('errorBox').appendChild(error);
} else {
var valid = true
for (var key in data) {
if (data.hasOwnProperty(key)) {
var criterion = document.getElementById(key);
if (criterion) {
if (data[key] == false) {
valid = false;
if (criterion.classList.contains('list-group-item-success')) {
criterion.classList.remove('list-group-item-success');
criterion.classList.add('list-group-item-danger');
};
} else {
if (criterion.classList.contains('list-group-item-danger')) {
criterion.classList.remove('list-group-item-danger');
criterion.classList.add('list-group-item-success');
};
};
};
};
};
if (valid == true) {
successBox.show();
};
};
};
};
req.send(send);
return false;
};
}
</script>
<script src="form.js"></script>
</body>
</html>