Schafkopf-Server/Public/register.html

76 lines
2.9 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Schafkopf</title>
<meta name='viewport' content='width=device-width, initial-scale=1'/>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'/>
<link rel='stylesheet' type='text/css' href='login.css'/>
<script src='api.js'></script>
<script src='storage.js'></script>
<script src='login.js'></script>
</head>
<body id="login-window">
<div id="login-window-vertical-center">
<div id="login-window-inner">
<div id="sheephead-logo">\_______/<br>\ - - /<br>\ | /<br>\_/<br><br>Sheephead</div>
<label for="usrname">Username<span id="field-note">Required</span><a href="login.html">Log in instead</a></label>
<input type="text" id="user-name" name="usrname" required autofocus/>
<label for="psw">Password<span id="field-note">Required</span></label>
<input type="password" id="user-pwd" name="psw" required/>
<label for="email">Email<span id="field-note">Optional, for password reset</span></label>
<input type="email" id="user-email" name="email"/>
<button class="login-buttons standard-button" onclick="registerUser()">Create account</button>
<div id="user-hint"></div>
</div>
</div>
<script>
// Email address validation regex
const mailformat = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
/*
* Register a new account.
*
* The function extracts the fields from the form, and attempts to create the account.
* Invalid emails are checked using basic validation.
*
* In case the registration fails, then we show an error to the user.
*/
function registerUser() {
const username = getLoginName();
if (username == "") {
setTextHint("Please enter your user name");
return;
}
const password = getLoginPassword();
if (password == "") {
setTextHint("Please enter a password");
return;
}
const email = getLoginEmail();
if (email != "" && !email.match(mailformat)) {
setTextHint("Invalid email address");
return;
}
performRegisterPlayerRequest(username, password, email)
.then(function(token) {
storePlayerNameAndToken(username, token);
window.location.href = "list.html";
}).catch(function(error) {
// TODO: Show better error messages to user
console.log("Registration failed.");
console.log(error);
setTextHint(error);
})
}
loadExistingSession();
</script>
</body>
</html>