105 lines
3.2 KiB
HTML
105 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Matrix Registration</title>
|
|
<style>
|
|
input:invalid {
|
|
border: 2px dashed red;
|
|
}
|
|
|
|
input:valid {
|
|
border: 2px solid black;
|
|
}
|
|
input {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<section style="display:flex;justify-content:center;align-items:center;">
|
|
<!-- make sure to adjust port here -->
|
|
<form action="localhost:5000/register" method="post">
|
|
<label for="username"> Enter your username:</label><br>
|
|
<input id="username" name="username" type="text"
|
|
required pattern="^@?[a-zA-Z_\-=\.\/0-9]+(:matrix\.org)?$"
|
|
required minlength="1" maxlength="200">
|
|
<!-- change to your homeserver -->
|
|
<br>
|
|
<label for="password">Enter your password:</label><br>
|
|
<input id="password" name="password" type="password"
|
|
required minlength="8" maxlength="128">
|
|
<br>
|
|
<label for="confirm_password">Repeat your password:</label><br>
|
|
<input id="confirm_password" name="confirm" type="password"
|
|
required>
|
|
<br>
|
|
<label for="token">Enter your invite token:</label><br>
|
|
<input id="token" name="token" type="text"
|
|
required pattern="^([A-Z][a-z]+)+$">
|
|
<br><br>
|
|
<input type="submit" value="register">
|
|
</form>
|
|
</section>
|
|
<script>
|
|
// all javascript here is optional, the registration form works fine without
|
|
|
|
// see https://stackoverflow.com/a/901144/3779427
|
|
function getParameterByName(name, url) {
|
|
if (!url) url = window.location.href;
|
|
name = name.replace(/[\[\]]/g, "\\$&");
|
|
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
|
|
results = regex.exec(url);
|
|
if (!results) return null;
|
|
if (!results[2]) return '';
|
|
return decodeURIComponent(results[2].replace(/\+/g, " "));
|
|
}
|
|
|
|
// set token input to "?token=" query parameter
|
|
document.getElementById('token').value = getParameterByName("token");
|
|
|
|
// html5 validators
|
|
var username = document.getElementById("username");
|
|
var password = document.getElementById("password");
|
|
var confirm_password = document.getElementById("confirm_password");
|
|
var token = document.getElementById("token");
|
|
|
|
username.addEventListener("input", function (event) {
|
|
if (username.validity.typeMismatch) {
|
|
username.setCustomValidity("format: @username:matrix.org");
|
|
} else {
|
|
username.setCustomValidity("");
|
|
}
|
|
});
|
|
|
|
token.addEventListener("input", function (event) {
|
|
if (token.validity.typeMismatch) {
|
|
token.setCustomValidity("case-sensitive, e.g: SardineImpactReport");
|
|
} else {
|
|
token.setCustomValidity("");
|
|
}
|
|
});
|
|
|
|
password.addEventListener("input", function (event) {
|
|
if (password.validity.typeMismatch) {
|
|
password.setCustomValidity("atleast 8 characters long");
|
|
} else {
|
|
password.setCustomValidity("");
|
|
}
|
|
});
|
|
|
|
function validatePassword(){
|
|
if(password.value != confirm_password.value) {
|
|
confirm_password.setCustomValidity("passwords don't match");
|
|
} else {
|
|
confirm_password.setCustomValidity("");
|
|
}
|
|
}
|
|
|
|
password.onchange = validatePassword;
|
|
confirm_password.onkeyup = validatePassword;
|
|
</script>
|
|
</body>
|
|
</html>
|