76 lines
2.9 KiB
HTML
76 lines
2.9 KiB
HTML
|
<!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>
|