mirror of
https://mau.dev/maunium/synapse.git
synced 2024-08-25 03:35:28 +00:00
![Richard van der Hoff](/assets/img/avatar_default.png)
There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
77 lines
2.4 KiB
JavaScript
77 lines
2.4 KiB
JavaScript
const usernameField = document.getElementById("field-username");
|
|
|
|
function throttle(fn, wait) {
|
|
let timeout;
|
|
return function() {
|
|
const args = Array.from(arguments);
|
|
if (timeout) {
|
|
clearTimeout(timeout);
|
|
}
|
|
timeout = setTimeout(fn.bind.apply(fn, [null].concat(args)), wait);
|
|
}
|
|
}
|
|
|
|
function checkUsernameAvailable(username) {
|
|
let check_uri = 'check?username=' + encodeURIComponent(username);
|
|
return fetch(check_uri, {
|
|
// include the cookie
|
|
"credentials": "same-origin",
|
|
}).then((response) => {
|
|
if(!response.ok) {
|
|
// for non-200 responses, raise the body of the response as an exception
|
|
return response.text().then((text) => { throw new Error(text); });
|
|
} else {
|
|
return response.json();
|
|
}
|
|
}).then((json) => {
|
|
if(json.error) {
|
|
return {message: json.error};
|
|
} else if(json.available) {
|
|
return {available: true};
|
|
} else {
|
|
return {message: username + " is not available, please choose another."};
|
|
}
|
|
});
|
|
}
|
|
|
|
function validateUsername(username) {
|
|
usernameField.setCustomValidity("");
|
|
if (usernameField.validity.valueMissing) {
|
|
usernameField.setCustomValidity("Please provide a username");
|
|
return;
|
|
}
|
|
if (usernameField.validity.patternMismatch) {
|
|
usernameField.setCustomValidity("Invalid username, please only use " + allowedCharactersString);
|
|
return;
|
|
}
|
|
usernameField.setCustomValidity("Checking if username is available …");
|
|
throttledCheckUsernameAvailable(username);
|
|
}
|
|
|
|
const throttledCheckUsernameAvailable = throttle(function(username) {
|
|
const handleError = function(err) {
|
|
// don't prevent form submission on error
|
|
usernameField.setCustomValidity("");
|
|
console.log(err.message);
|
|
};
|
|
try {
|
|
checkUsernameAvailable(username).then(function(result) {
|
|
if (!result.available) {
|
|
usernameField.setCustomValidity(result.message);
|
|
usernameField.reportValidity();
|
|
} else {
|
|
usernameField.setCustomValidity("");
|
|
}
|
|
}, handleError);
|
|
} catch (err) {
|
|
handleError(err);
|
|
}
|
|
}, 500);
|
|
|
|
usernameField.addEventListener("input", function(evt) {
|
|
validateUsername(usernameField.value);
|
|
});
|
|
usernameField.addEventListener("change", function(evt) {
|
|
validateUsername(usernameField.value);
|
|
});
|