feat: Dodanie Api

Dodanie Api i przeniesienie kodu javascriptowego do osobnego pliku

API
This commit is contained in:
Arek 2022-05-30 19:05:46 +02:00
parent 22097a3b5a
commit 54b4b03d89
3 changed files with 277 additions and 66 deletions

148
frontend/rejestracja/api.js Normal file
View File

@ -0,0 +1,148 @@
var token = "";
document.getElementById("loginButton").addEventListener("click", function () {
document.getElementById("login").style.display = "block";
});
document.getElementById("regButton").addEventListener("click", function () {
document.getElementById("reg").style.display = "block";
});
document.getElementById("registrationButton").addEventListener("click", function () {
document.getElementById("registration").style.display = "block";
});
document.getElementById("checkPaymentButton").addEventListener("click", function () {
document.getElementById("checkStatus").style.display = "block";
});
var registartions = [];
document.getElementById("getRegistartionsButton").addEventListener("click", function () {
document.getElementById("getRegistartions").style.display = "block";
});
document.getElementById("getUserDataButton").addEventListener("click", function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var json = JSON.parse(this.response);
document.getElementById("getUserDataid").innerText = json.id;
document.getElementById("getUserDataname").innerText = json.name;
document.getElementById("getUserDatasurname").innerText = json.surname;
document.getElementById("getUserDatarole").innerText = json.role;
document.getElementById("getUserDatalogin").innerText = json.login;
document.getElementById("getUserDataphone").innerText = json.phone;
document.getElementById("getUserDatamail").innerText = json.mail;
document.getElementById("getUserData").style.display = "block";
} else if (this.readyState == 4) {
alert("something not work :( " + this.status);
}
}
xhttp.open("GET", "/inz/user");
xhttp.setRequestHeader("Authorization", "Bearer " + token);
xhttp.send();
});
document.getElementById("updateUserDataButton").addEventListener("click", function () {
document.getElementById("updateUserData").style.display = "block";
});
document.getElementById("regsubmit").addEventListener("click", function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
alert("200 now you can login");
} else if (this.readyState == 4) {
alert("something not work :( " + this.status);
}
}
xhttp.open("PUT", "dragonmaster.pl/inz/user/create");
xhttp.send('{"username":"' + document.getElementById("regusername").value + '","name":"' + document.getElementById("regname").value + '","surname":"' + document.getElementById("regsurname").value + '","password":"' + document.getElementById("regpassword").value + '","mail":"' + document.getElementById("regmail").value + '","phone":"' + document.getElementById("regphone").value + '"}');
});
document.getElementById("loginsubmit").addEventListener("click", function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
alert("logged in");
token = JSON.parse(this.response).token;
document.getElementById("loginarea").style.display = "none";
document.getElementById("other").style.display = "block";
} else if (this.readyState == 4) {
alert("something not work :( " + this.status);
}
}
xhttp.open("POST", "/inz/user/login");
xhttp.send('{"username":"' + document.getElementById("loginusername").value + '","password":"' + document.getElementById("loginpassword").value + '"}');
});
document.getElementById("registrationsubmit").addEventListener("click", function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("registrationretu").innerText = JSON.parse(this.response).id;
if (document.getElementById("registrationpaymentmethod").value == "btc") {
var splited = JSON.parse(this.response).url.split("/");
window.btcpay.showInvoice(splited[splited.length - 1]);
}
} else if (this.readyState == 4) {
alert("something not work :( " + this.status);
}
}
xhttp.open("PUT", "/inz/registration");
xhttp.setRequestHeader("Authorization", "Bearer " + token);
xhttp.send('{"paymentmethod":"' + document.getElementById("registrationpaymentmethod").value + '","tournament":"' + document.getElementById("registrationtournament").value + '","partner":"' + document.getElementById("registrationpartner").value + '"}');
});
document.getElementById("checkStatussubmit").addEventListener("click", function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("checkStatusretu").innerText = JSON.parse(this.response).status;
} else if (this.readyState == 4) {
alert("something not work :( " + this.status);
}
}
xhttp.open("GET", "/inz/registration/paymentstatus?id=" + document.getElementById("checkStatusid").value);
xhttp.setRequestHeader("Authorization", "Bearer " + token);
xhttp.send();
});
document.getElementById("getRegistartionsSubmit").addEventListener("click", function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
registartions = JSON.parse(this.response);
document.getElementById("getRegistartionsid").innerText = registartions[0].id;
document.getElementById("getRegistartionsuserid").innerText = registartions[0].userid;
document.getElementById("getRegistartionstournamentid").innerText = registartions[0].tournamentid;
document.getElementById("getRegistartionspaymenttype").innerText = registartions[0].paymenttype;
document.getElementById("getRegistartionspaymentstatus").innerText = registartions[0].paymentstatus;
document.getElementById("getRegistartionsapprovals").innerText = registartions[0].approval;
} else if (this.readyState == 4) {
alert("something not work :( " + this.status);
}
}
xhttp.open("GET", "/inz/registrations?id=" + document.getElementById("getRegistartionsiid").value);
xhttp.setRequestHeader("Authorization", "Bearer " + token);
xhttp.send();
cur = 0;
});
var cur = 0;
document.getElementById("getRegistartionsNext").addEventListener("click", function () {
cur = cur + 1;
document.getElementById("getRegistartionsid").innerText = registartions[cur].id;
document.getElementById("getRegistartionsuserid").innerText = registartions[cur].userid;
document.getElementById("getRegistartionstournamentid").innerText = registartions[cur].tournamentid;
document.getElementById("getRegistartionspaymenttype").innerText = registartions[cur].paymenttype;
document.getElementById("getRegistartionspaymentstatus").innerText = registartions[cur].paymentstatus;
document.getElementById("getRegistartionsapprovals").innerText = registartions[cur].approval;
});
document.getElementById("updatesubmit").addEventListener("click", function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
alert("200 updated");
} else if (this.readyState == 4) {
alert("something not work :( " + this.status);
}
}
xhttp.open("POST", "/inz/user");
xhttp.setRequestHeader("Authorization", "Bearer " + token);
xhttp.send('{"name":"' + document.getElementById("updatename").value + '","surname":"' + document.getElementById("updatesurname").value + '","password":"' + document.getElementById("updatepassword").value + '","mail":"' + document.getElementById("updatemail").value + '","phone":"' + document.getElementById("updatephone").value + '"}');
});

View File

@ -9,86 +9,77 @@
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<div class="form">
<div class="register">
<h2>Rejestracja</h2>
<div class="container">
<div class="form">
<div class="register">
<h2>Rejestracja</h2>
<input placeholder="Imię">
<span class="icon-dice"></span>
<input placeholder="Nazwisko">
<br>
<input placeholder="Imię" id="regname">
<span class="icon-dice"></span>
<input placeholder="Nazwisko" id="regsurname">
<br>
<svg class="svg-icon">
<path d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z"></path>
</svg>
<svg class="svg-icon">
<path
d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z">
</path>
</svg>
<input placeholder="Login">
<br>
<input placeholder="Login" id="regusername">
<br>
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M17.388,4.751H2.613c-0.213,0-0.389,0.175-0.389,0.389v9.72c0,0.216,0.175,0.389,0.389,0.389h14.775c0.214,0,0.389-0.173,0.389-0.389v-9.72C17.776,4.926,17.602,4.751,17.388,4.751 M16.448,5.53L10,11.984L3.552,5.53H16.448zM3.002,6.081l3.921,3.925l-3.921,3.925V6.081z M3.56,14.471l3.914-3.916l2.253,2.253c0.153,0.153,0.395,0.153,0.548,0l2.253-2.253l3.913,3.916H3.56z M16.999,13.931l-3.921-3.925l3.921-3.925V13.931z"></path>
</svg>
<input placeholder="Email">
<br>
<svg class="svg-icon" viewBox="0 0 20 20">
<path
d="M17.388,4.751H2.613c-0.213,0-0.389,0.175-0.389,0.389v9.72c0,0.216,0.175,0.389,0.389,0.389h14.775c0.214,0,0.389-0.173,0.389-0.389v-9.72C17.776,4.926,17.602,4.751,17.388,4.751 M16.448,5.53L10,11.984L3.552,5.53H16.448zM3.002,6.081l3.921,3.925l-3.921,3.925V6.081z M3.56,14.471l3.914-3.916l2.253,2.253c0.153,0.153,0.395,0.153,0.548,0l2.253-2.253l3.913,3.916H3.56z M16.999,13.931l-3.921-3.925l3.921-3.925V13.931z">
</path>
</svg>
<input placeholder="Email" id="regmail">
<br>
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M13.372,1.781H6.628c-0.696,0-1.265,0.569-1.265,1.265v13.91c0,0.695,0.569,1.265,1.265,1.265h6.744c0.695,0,1.265-0.569,1.265-1.265V3.045C14.637,2.35,14.067,1.781,13.372,1.781 M13.794,16.955c0,0.228-0.194,0.421-0.422,0.421H6.628c-0.228,0-0.421-0.193-0.421-0.421v-0.843h7.587V16.955z M13.794,15.269H6.207V4.731h7.587V15.269z M13.794,3.888H6.207V3.045c0-0.228,0.194-0.421,0.421-0.421h6.744c0.228,0,0.422,0.194,0.422,0.421V3.888z"></path>
</svg>
<input placeholder="Telefon">
<br>
<svg class="svg-icon" viewBox="0 0 20 20">
<path
d="M13.372,1.781H6.628c-0.696,0-1.265,0.569-1.265,1.265v13.91c0,0.695,0.569,1.265,1.265,1.265h6.744c0.695,0,1.265-0.569,1.265-1.265V3.045C14.637,2.35,14.067,1.781,13.372,1.781 M13.794,16.955c0,0.228-0.194,0.421-0.422,0.421H6.628c-0.228,0-0.421-0.193-0.421-0.421v-0.843h7.587V16.955z M13.794,15.269H6.207V4.731h7.587V15.269z M13.794,3.888H6.207V3.045c0-0.228,0.194-0.421,0.421-0.421h6.744c0.228,0,0.422,0.194,0.422,0.421V3.888z">
</path>
</svg>
<input placeholder="Telefon" id="regphone">
<br>
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M17.308,7.564h-1.993c0-2.929-2.385-5.314-5.314-5.314S4.686,4.635,4.686,7.564H2.693c-0.244,0-0.443,0.2-0.443,0.443v9.3c0,0.243,0.199,0.442,0.443,0.442h14.615c0.243,0,0.442-0.199,0.442-0.442v-9.3C17.75,7.764,17.551,7.564,17.308,7.564 M10,3.136c2.442,0,4.43,1.986,4.43,4.428H5.571C5.571,5.122,7.558,3.136,10,3.136 M16.865,16.864H3.136V8.45h13.729V16.864z M10,10.664c-0.854,0-1.55,0.696-1.55,1.551c0,0.699,0.467,1.292,1.107,1.485v0.95c0,0.243,0.2,0.442,0.443,0.442s0.443-0.199,0.443-0.442V13.7c0.64-0.193,1.106-0.786,1.106-1.485C11.55,11.36,10.854,10.664,10,10.664 M10,12.878c-0.366,0-0.664-0.298-0.664-0.663c0-0.366,0.298-0.665,0.664-0.665c0.365,0,0.664,0.299,0.664,0.665C10.664,12.58,10.365,12.878,10,12.878"></path>
</svg>
<input placeholder="Hasło" type="password" id="password" name="password">
<i class="bi bi-eye-slash" id="togglePassword"></i>
<br>
<svg class="svg-icon" viewBox="0 0 20 20">
<path
d="M17.308,7.564h-1.993c0-2.929-2.385-5.314-5.314-5.314S4.686,4.635,4.686,7.564H2.693c-0.244,0-0.443,0.2-0.443,0.443v9.3c0,0.243,0.199,0.442,0.443,0.442h14.615c0.243,0,0.442-0.199,0.442-0.442v-9.3C17.75,7.764,17.551,7.564,17.308,7.564 M10,3.136c2.442,0,4.43,1.986,4.43,4.428H5.571C5.571,5.122,7.558,3.136,10,3.136 M16.865,16.864H3.136V8.45h13.729V16.864z M10,10.664c-0.854,0-1.55,0.696-1.55,1.551c0,0.699,0.467,1.292,1.107,1.485v0.95c0,0.243,0.2,0.442,0.443,0.442s0.443-0.199,0.443-0.442V13.7c0.64-0.193,1.106-0.786,1.106-1.485C11.55,11.36,10.854,10.664,10,10.664 M10,12.878c-0.366,0-0.664-0.298-0.664-0.663c0-0.366,0.298-0.665,0.664-0.665c0.365,0,0.664,0.299,0.664,0.665C10.664,12.58,10.365,12.878,10,12.878">
</path>
</svg>
<input placeholder="Hasło" type="password" id="regpassword" name="password">
<i class="bi bi-eye-slash" id="togglePassword"></i>
<br>
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M17.308,7.564h-1.993c0-2.929-2.385-5.314-5.314-5.314S4.686,4.635,4.686,7.564H2.693c-0.244,0-0.443,0.2-0.443,0.443v9.3c0,0.243,0.199,0.442,0.443,0.442h14.615c0.243,0,0.442-0.199,0.442-0.442v-9.3C17.75,7.764,17.551,7.564,17.308,7.564 M10,3.136c2.442,0,4.43,1.986,4.43,4.428H5.571C5.571,5.122,7.558,3.136,10,3.136 M16.865,16.864H3.136V8.45h13.729V16.864z M10,10.664c-0.854,0-1.55,0.696-1.55,1.551c0,0.699,0.467,1.292,1.107,1.485v0.95c0,0.243,0.2,0.442,0.443,0.442s0.443-0.199,0.443-0.442V13.7c0.64-0.193,1.106-0.786,1.106-1.485C11.55,11.36,10.854,10.664,10,10.664 M10,12.878c-0.366,0-0.664-0.298-0.664-0.663c0-0.366,0.298-0.665,0.664-0.665c0.365,0,0.664,0.299,0.664,0.665C10.664,12.58,10.365,12.878,10,12.878"></path>
</svg>
<input placeholder="Potwierdź hasło" type="password" id="password2" name="password">
<i class="bi bi-eye-slash" id="togglePassword2"></i>
<svg class="svg-icon" viewBox="0 0 20 20">
<path
d="M17.308,7.564h-1.993c0-2.929-2.385-5.314-5.314-5.314S4.686,4.635,4.686,7.564H2.693c-0.244,0-0.443,0.2-0.443,0.443v9.3c0,0.243,0.199,0.442,0.443,0.442h14.615c0.243,0,0.442-0.199,0.442-0.442v-9.3C17.75,7.764,17.551,7.564,17.308,7.564 M10,3.136c2.442,0,4.43,1.986,4.43,4.428H5.571C5.571,5.122,7.558,3.136,10,3.136 M16.865,16.864H3.136V8.45h13.729V16.864z M10,10.664c-0.854,0-1.55,0.696-1.55,1.551c0,0.699,0.467,1.292,1.107,1.485v0.95c0,0.243,0.2,0.442,0.443,0.442s0.443-0.199,0.443-0.442V13.7c0.64-0.193,1.106-0.786,1.106-1.485C11.55,11.36,10.854,10.664,10,10.664 M10,12.878c-0.366,0-0.664-0.298-0.664-0.663c0-0.366,0.298-0.665,0.664-0.665c0.365,0,0.664,0.299,0.664,0.665C10.664,12.58,10.365,12.878,10,12.878">
</path>
</svg>
<input placeholder="Potwierdź hasło" type="password" id="password2" name="password">
<i class="bi bi-eye-slash" id="togglePassword2"></i>
<center>
<form action="#">
<input class="myButton" type="submit" value="Zarejestruj" />
</form>
</center>
<br>
<a href="#">Zapomniałeś hasła?</a>
<br>
<span> Masz już konto? <a href="../logowanie/index.html">Zaloguj się</a></span>
<center>
<form action="#">
<input class="myButton" type="submit" value="Zarejestruj" id="regsubmit" />
</form>
</center>
<br>
<a href="#">Zapomniałeś hasła?</a>
<br>
<span> Masz już konto? <a href="../logowanie/index.html">Zaloguj się</a></span>
</div>
</div>
</div>
</div>
<script>
const togglePassword = document.querySelector("#togglePassword");
const password = document.querySelector("#password");
togglePassword.addEventListener("click", function () {
// toggle the type attribute
const type = password.getAttribute("type") === "password" ? "text" : "password";
password.setAttribute("type", type);
// toggle the icon
this.classList.toggle("bi-eye");
});
// prevent form submit
const form = document.querySelector("form");
form.addEventListener('submit', function (e) {
e.preventDefault();
});
</script>
<script type="text/javascript" src="myscript.js"></script>
</body>

View File

@ -0,0 +1,72 @@
const togglePassword = document.querySelector("#togglePassword");
const password = document.querySelector("#regpassword");
togglePassword.addEventListener("click", function () {
// toggle the type attribute
const type = password.getAttribute("type") === "password" ? "text" : "password";
password.setAttribute("type", type);
// toggle the icon
this.classList.toggle("bi-eye");
});
// prevent form submit
const form = document.querySelector("form");
form.addEventListener('submit', function (e) {
e.preventDefault();
});
var token = "";
document.getElementById("loginButton").addEventListener("click", function () {
document.getElementById("login").style.display = "block";
});
document.getElementById("regButton").addEventListener("click", function () {
document.getElementById("reg").style.display = "block";
});
document.getElementById("registrationButton").addEventListener("click", function () {
document.getElementById("registration").style.display = "block";
});
document.getElementById("checkPaymentButton").addEventListener("click", function () {
document.getElementById("checkStatus").style.display = "block";
});
var registartions = [];
document.getElementById("getRegistartionsButton").addEventListener("click", function () {
document.getElementById("getRegistartions").style.display = "block";
});
document.getElementById("getUserDataButton").addEventListener("click", function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var json = JSON.parse(this.response);
document.getElementById("getUserDataid").innerText = json.id;
document.getElementById("getUserDataname").innerText = json.name;
document.getElementById("getUserDatasurname").innerText = json.surname;
document.getElementById("getUserDatarole").innerText = json.role;
document.getElementById("getUserDatalogin").innerText = json.login;
document.getElementById("getUserDataphone").innerText = json.phone;
document.getElementById("getUserDatamail").innerText = json.mail;
document.getElementById("getUserData").style.display = "block";
} else if (this.readyState == 4) {
alert("something not work :( " + this.status);
}
}
xhttp.open("GET", "dragonmaster.pl//inz/user");
xhttp.setRequestHeader("Authorization", "Bearer " + token);
xhttp.send();
});
document.getElementById("updateUserDataButton").addEventListener("click", function () {
document.getElementById("updateUserData").style.display = "block";
});
document.getElementById("regsubmit").addEventListener("click", function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
alert("200 now you can login");
} else if (this.readyState == 4) {
alert("something not work :( " + this.status);
}
}
xhttp.open("PUT", "dragonmaster.pl//inz/user/create");
xhttp.send('{"username":"' + document.getElementById("regusername").value + '","name":"' + document.getElementById("regname").value + '","surname":"' + document.getElementById("regsurname").value + '","password":"' + document.getElementById("regpassword").value + '","mail":"' + document.getElementById("regmail").value + '","phone":"' + document.getElementById("regphone").value + '"}');
});