138 lines
4.5 KiB
HTML
138 lines
4.5 KiB
HTML
{{define "register"}}<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
{{template "meta_tags" "Register"}}
|
|
{{template "user_style" .}}
|
|
<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
|
|
<script src='https://www.google.com/recaptcha/api.js'></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id='body' class="body">
|
|
{{template "menu" .}}
|
|
|
|
<h1>Register a new Pixeldrain account</h1>
|
|
<div id="submit_result"></div>
|
|
<form onSubmit="return submitForm();" class="highlight_dark border_top border_bottom">
|
|
<table style="margin-left: auto; margin-right: auto; text-align: left; max-width: 30em;">
|
|
<tr class="form">
|
|
<td>Username</td>
|
|
<td><input id="register_username" type="text" autocomplete="username" class="form_input"/></td>
|
|
</tr>
|
|
<tr class="form"><td colspan="2">used for logging into your account<br/><hr/></td></tr>
|
|
<tr class="form">
|
|
<td>E-mail address</td>
|
|
<td><input id="register_email" type="text" autocomplete="email" class="form_input"/></td>
|
|
</tr>
|
|
<tr class="form"><td colspan="2">
|
|
not required. your e-mail address will only be used for
|
|
password resets and important account notifications<br/>
|
|
<hr/>
|
|
</td></tr>
|
|
<tr class="form">
|
|
<td>Password</td>
|
|
<td><input id="register_password1" type="password" autocomplete="new-password" class="form_input"/></td>
|
|
</tr>
|
|
<tr class="form">
|
|
<td>Password verification</td>
|
|
<td><input id="register_password2" type="password" autocomplete="new-password" class="form_input"/></td>
|
|
</tr>
|
|
<tr class="form">
|
|
<td colspan="2">
|
|
you need to enter your password twice so we can
|
|
verify that you have not made any typing errors<br/>
|
|
<hr/>
|
|
</td>
|
|
</tr>
|
|
{{if ne .Other "none"}}<tr class="form">
|
|
<td>
|
|
Turing test<br/>
|
|
(Click the white box)
|
|
</td>
|
|
<td style="text-align: center;">
|
|
<div class="g-recaptcha" data-theme="dark" data-sitekey="{{.Other}}"></div>
|
|
</td>
|
|
</tr>
|
|
<tr class="form">
|
|
<td colspan="2">
|
|
the reCaptcha turing test verifies that you are not
|
|
an evil robot that is trying to flood the website
|
|
with fake accounts<br/><hr/>
|
|
</td>
|
|
</tr>{{end}}
|
|
<tr class="form">
|
|
<td colspan="2" style="text-align: right;">
|
|
<input type="submit" value="Register" class="button_highlight"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
<br/>
|
|
Welcome to the club!<br/>
|
|
{{template "footer"}}
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
function submitForm(){
|
|
var uname = document.getElementById("register_username").value;
|
|
var email = document.getElementById("register_email").value;
|
|
var passwd1 = document.getElementById("register_password1").value;
|
|
var passwd2 = document.getElementById("register_password2").value;
|
|
var capt;
|
|
try {
|
|
capt = grecaptcha.getResponse();
|
|
} catch (err) {
|
|
console.log("Error occurred while reading captcha: "+err);
|
|
}
|
|
|
|
if (passwd1 !== passwd2) {
|
|
alert("Passwords do not match! Good thing we checked.");
|
|
return false;
|
|
}
|
|
|
|
var req = new XMLHttpRequest();
|
|
req.onreadystatechange = function(){
|
|
if (this.readyState === 4) {
|
|
var response = JSON.parse(req.responseText);
|
|
var resultDiv = document.getElementById("submit_result");
|
|
if (response.success) {
|
|
resultDiv.className = "border_top border_bottom highlight_green";
|
|
resultDiv.innerHTML = 'Registration completed! You can now <a href="/login">log in to your account</a>.<br/>'
|
|
+ "We're glad to have you on board, have fun sharing!";
|
|
} else {
|
|
resultDiv.className = "border_top border_bottom highlight_red";
|
|
var resultHtml = "Something went wrong, please correct these problems and try again:<br/><ul>";
|
|
for (err in response.errors) {
|
|
resultHtml += "<li>"+ response.errors[err].message +"</li>";
|
|
}
|
|
resultHtml += "</ul>";
|
|
resultDiv.innerHTML = resultHtml;
|
|
}
|
|
|
|
// On small screens the whole form won't fit on the screen,
|
|
// so we need to scroll up to show the user the result of
|
|
// the form submission
|
|
window.scrollTo(0, 0);
|
|
|
|
console.log(response);
|
|
}
|
|
}
|
|
|
|
req.open("POST", apiEndpoint+"/user/register", true);
|
|
|
|
var data = new FormData();
|
|
data.append("username", uname);
|
|
data.append("email", email);
|
|
data.append("password", passwd1);
|
|
data.append("recaptcha_response", capt);
|
|
req.send(data);
|
|
|
|
return false;
|
|
}
|
|
</script>
|
|
|
|
{{template "analytics"}}
|
|
</body>
|
|
</html>
|
|
{{end}}
|