<title>Página de registro do FreeSO Brasil</title>
<link rel="stylesheet" href="style.css">
<div class="detail">
<p style="text-align: center; font-size: 32px;">Página de registro do FreeSO Brasil<p>
<script type="text/javascript">
         var fsoErrors = {
            user_short: "Username is too short. (must be >2 characters)",
            user_long: "Username is too long. (must be <25 characters)",
            user_invalid: "Username may only contain letters and numbers.",
            pass_required: "Please enter a password.",
            registrations_too_frequent: "You can only register once a day.",
            user_exists: "Username already exists. Please choose another!",
            key_wrong: "You cannot register at this time without a key!",
            unknown: "An unknown error occurred."
        };

        function fsoregister() {
            var form = document.forms["fsoForm"];
            var username = form["username"].value;
            var password = form["password"].value;
            var email = form["email"].value;
            var http = new XMLHttpRequest();
            var url = "http://api.tsopt.eu/userapi/registration";
            var params = "username=" + username + "&password=" + password + "&email=" + email;
            http.open("POST", url, true);
            http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            http.onreadystatechange = function() {
                if (http.readyState == 4 && http.status == 200) {
                    var resp = JSON.parse(http.responseText);
                    if (resp.error != null) showError(resp.error_description);
                    else {
                        var errorDisp = document.getElementById("errorDiv");
                        errorDisp.innerHTML = "Registo bem sucedido! Você pode entrar no jogo.";
                        errorDisp.style.color = "#59B200";
                    }
                } else if (http.readyState == 4) {
                    showError("unknown");
                }
            };
            http.send(params);
        }
        function showError(error) {
            var errorDisp = document.getElementById("errorDiv");
            errorDisp.style.color = null;
            errorDisp.innerHTML = fsoErrors[error];
        }
        function passCheck() {
            var form = document.forms["fsoForm"];
            var password2 = form["password2"].value;
            var password = form["password"].value;
            form["submit"].disabled = (password.length == 0) || password != password2;
            if (form["submit"].disabled) {
                form["password2"].style.backgroundColor = "#FFCFBF";
                form["password"].style.backgroundColor = "#FFCFBF";
            } else {
                form["password2"].style.backgroundColor = null;
                form["password"].style.backgroundColor = null;
            }
        }
  </script>
<div style="width: 400px; margin-left: auto; margin-right: auto;">
<form name="fsoForm" onsubmit="fsoregister(); return false;">
<div class="fsoLabel">Nome de usuário<span class="required">*</span>
</div>
<input name="username" class="fsoInput" type="text">
<br>
<div class="fsoLabel">Email<span class="required">*</span>
</div>
<input name="email" class="fsoInput" type="text">
<br>
<div class="fsoLabel">Senha<span class="required">*</span>
</div>
<input name="password" class="fsoInput" onkeyup="passCheck()" type="password">
<br>
<div class="fsoLabel">Confirme a Senha<span class="required">*</span>
</div>
	<input name="password2" class="fsoInput" onkeyup="passCheck()"type="password">
      <br>
      <div class="fsoError" id="errorDiv"></div>
      <div style="text-align: left; font-family: Raleway;">
        <input class="submitBtn" name="submit" value="Registrar" disabled="disabled" type="submit" onclick="fsoregister()"></div>
	</form>
	Copyright (c) LetsRaceBwoi 2017; CC-BY-SA 2.0
  </div>
</div>