409 lines
11 KiB
HTML
409 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="UTF-8">
|
|
<html>
|
|
|
|
<head>
|
|
<title>BSMSapp</title>
|
|
<div align="center">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
</head>
|
|
|
|
<div class="d-flex flex-column justify-content-center w-100 h-100">
|
|
<br><br>
|
|
<body bgcolor="#FFFFFF" text="Black">
|
|
<header>
|
|
<h1><span id="replace">BSMSapp</span></h1>
|
|
</header>
|
|
|
|
<button class="style" id="login">Login</button>
|
|
|
|
<form id="myForm" class="form-style" style="display:none">
|
|
<ul>
|
|
<li>
|
|
<input value="0" name="id" type="number" min="0"/>
|
|
<span>Enter the product identifier.</span>
|
|
</li>
|
|
<li>
|
|
<input value="0" name="stock" type="number" min="0"/>
|
|
<span>Enter the new stock number.</span>
|
|
</li>
|
|
<li>
|
|
<input type="submit" value="Save"/>
|
|
<input type="submit" value="Delete"/>
|
|
</li>
|
|
</ul>
|
|
</form>
|
|
|
|
<button class="style" onclick="get_table()" style="display:none" id="tableBtn">Get table</button>
|
|
<br><br>
|
|
<table id="table" align="center" border="1px"></table>
|
|
</body>
|
|
</div>
|
|
|
|
</html>
|
|
|
|
<script>
|
|
document.getElementById("login").onclick = function () {
|
|
location.href = "https://santilococo.auth.us-east-1.amazoncognito.com/login?client_id=2a9hfokn5a1flh1j3hmp0c035u&response_type=code&scope=email+openid+phone&redirect_uri=https%3A%2F%2Fsantilococo.com.ar";
|
|
};
|
|
|
|
var token = localStorage.getItem('token') || undefined;
|
|
console.log(token)
|
|
|
|
if (typeof token === 'undefined' || token === null) {
|
|
console.log('no hay token guardado')
|
|
aux = get_token()
|
|
var promiseB = aux.then(function(result) {
|
|
if (result) {
|
|
token = result["access_token"]
|
|
localStorage.setItem('token', token);
|
|
console.log(token)
|
|
username = get_user(token)
|
|
|
|
var prom = username.then(function(result) {
|
|
username = result["username"]
|
|
localStorage.setItem('username', token);
|
|
console.log(username)
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
$("#myForm").show();
|
|
$("#tableBtn").show();
|
|
$("#login").hide();
|
|
|
|
username = get_user(token)
|
|
|
|
var prom = username.then(function(result) {
|
|
username = result["username"]
|
|
localStorage.setItem('username', token);
|
|
console.log(username)
|
|
});
|
|
}
|
|
|
|
const thisForm = document.getElementById('myForm');
|
|
thisForm.addEventListener('submit', async function (e) {
|
|
e.preventDefault();
|
|
var api_method
|
|
if (e.submitter.value == "Save") {
|
|
api_method = "PUT"
|
|
} else {
|
|
api_method = "DELETE"
|
|
}
|
|
formData = new FormData(thisForm)
|
|
formData.append("username", username)
|
|
formData = formData.entries()
|
|
const str = JSON.stringify(Object.fromEntries(formData))
|
|
const response = await fetch("${ENDPOINT}/products", {
|
|
method: api_method,
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: str.replace(/"([\d\.]+)"/g, "$1")
|
|
});
|
|
|
|
// const result = await response.json();
|
|
const result = await response;
|
|
});
|
|
|
|
function adjust_textarea(h) {
|
|
h.style.height = "20px";
|
|
h.style.height = (h.scrollHeight) + "px";
|
|
}
|
|
|
|
async function get_table() {
|
|
aux = username
|
|
queryParam = new URLSearchParams({
|
|
username: aux
|
|
})
|
|
const request = await fetch("${ENDPOINT}/products?" + queryParam, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
const list = await request.json();
|
|
|
|
var cols = [];
|
|
for (var i = 0; i < list.length; i++) {
|
|
for (var k in list[i]) {
|
|
if (cols.indexOf(k) === -1) {
|
|
cols.push(k);
|
|
}
|
|
}
|
|
}
|
|
|
|
var table = document.createElement("table");
|
|
var tr = table.insertRow(-1);
|
|
for (var i = 0; i < cols.length; i++) {
|
|
var theader = document.createElement("th");
|
|
theader.innerHTML = cols[i];
|
|
tr.appendChild(theader);
|
|
}
|
|
|
|
for (var i = 0; i < list.length; i++) {
|
|
trow = table.insertRow(-1);
|
|
for (var j = 0; j < cols.length; j++) {
|
|
var cell = trow.insertCell(-1);
|
|
cell.innerHTML = list[i][cols[j]];
|
|
}
|
|
}
|
|
|
|
var el = document.getElementById("table");
|
|
if (!list.length) {
|
|
el.innerHTML = "No items."
|
|
} else {
|
|
el.innerHTML = "";
|
|
}
|
|
el.appendChild(table);
|
|
}
|
|
|
|
async function get_token() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const code = urlParams.get('code');
|
|
|
|
if (!code) {
|
|
return undefined
|
|
}
|
|
|
|
$("#myForm").show();
|
|
$("#tableBtn").show();
|
|
$("#login").hide();
|
|
|
|
const response = await fetch('https://santilococo.auth.us-east-1.amazoncognito.com/oauth2/token', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
body: new URLSearchParams({
|
|
'grant_type': 'authorization_code',
|
|
'code': code,
|
|
'client_id': '2a9hfokn5a1flh1j3hmp0c035u',
|
|
'redirect_uri': 'https://santilococo.com.ar'
|
|
})
|
|
});
|
|
|
|
return await response.json()
|
|
}
|
|
|
|
async function get_user(token) {
|
|
str = 'Bearer ' + token
|
|
const response = await fetch('https://santilococo.auth.us-east-1.amazoncognito.com/oauth2/userInfo', {
|
|
method: 'GET',
|
|
headers: {
|
|
"Authorization" : str
|
|
}
|
|
});
|
|
|
|
return await response.json()
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style type="text/css">
|
|
body {
|
|
background: linear-gradient(-45deg, #ee7752, #df6493, #23a6d5, #23d5ab);
|
|
background-size: 400% 400%;
|
|
animation: gradient 15s ease infinite;
|
|
height: 100vh;
|
|
}
|
|
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 70px;
|
|
font-weight: 600;
|
|
background-image: linear-gradient(to left, #000000, #6b0bca);
|
|
color: transparent;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
}
|
|
|
|
.form-style {
|
|
max-width: 400px;
|
|
margin: 50px auto;
|
|
background: #fff;
|
|
border-radius: 2px;
|
|
padding: 20px;
|
|
font-family: Georgia, "Times New Roman", Times, serif;
|
|
}
|
|
|
|
.form-style h1 {
|
|
display: block;
|
|
text-align: center;
|
|
padding: 0;
|
|
margin: 0px 0px 20px 0px;
|
|
color: #5C5C5C;
|
|
font-size: x-large;
|
|
}
|
|
|
|
.form-style ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.form-style li {
|
|
display: block;
|
|
padding: 9px;
|
|
border: 1px solid #DDDDDD;
|
|
margin-bottom: 30px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.form-style li:last-child {
|
|
border: none;
|
|
margin-bottom: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
.form-style li>label {
|
|
display: block;
|
|
float: left;
|
|
margin-top: -19px;
|
|
background: #FFFFFF;
|
|
height: 14px;
|
|
padding: 2px 5px 2px 5px;
|
|
color: #B9B9B9;
|
|
font-size: 14px;
|
|
overflow: hidden;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.form-style input[type="text"],
|
|
.form-style input[type="date"],
|
|
.form-style input[type="datetime"],
|
|
.form-style input[type="email"],
|
|
.form-style input[type="number"],
|
|
.form-style input[type="search"],
|
|
.form-style input[type="time"],
|
|
.form-style input[type="url"],
|
|
.form-style input[type="password"],
|
|
.form-style textarea,
|
|
.form-style select {
|
|
box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
width: 100%;
|
|
display: block;
|
|
outline: none;
|
|
border: none;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
font-size: 16px;
|
|
padding: 0;
|
|
font-family: Georgia, "Times New Roman", Times, serif;
|
|
}
|
|
|
|
.form-style input[type="text"]:focus,
|
|
.form-style input[type="date"]:focus,
|
|
.form-style input[type="datetime"]:focus,
|
|
.form-style input[type="email"]:focus,
|
|
.form-style input[type="number"]:focus,
|
|
.form-style input[type="search"]:focus,
|
|
.form-style input[type="time"]:focus,
|
|
.form-style input[type="url"]:focus,
|
|
.form-style input[type="password"]:focus,
|
|
.form-style textarea:focus,
|
|
.form-style select:focus {}
|
|
|
|
.form-style li>span {
|
|
background: #F3F3F3;
|
|
display: block;
|
|
padding: 3px;
|
|
margin: 0 -9px -9px -9px;
|
|
text-align: center;
|
|
color: #838383;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.form-style textarea {
|
|
resize: none;
|
|
}
|
|
|
|
.form-style input[type="submit"],
|
|
.form-style input[type="button"] {
|
|
background: #2471FF;
|
|
border: none;
|
|
padding: 10px 20px 10px 20px;
|
|
border-bottom: 3px solid #5994FF;
|
|
border-radius: 3px;
|
|
color: #D2E2FF;
|
|
}
|
|
|
|
.style {
|
|
background: #2471FF;
|
|
border: none;
|
|
padding: 10px 20px 10px 20px;
|
|
border-bottom: 3px solid #5994FF;
|
|
border-radius: 3px;
|
|
color: #D2E2FF;
|
|
}
|
|
|
|
.style:hover {
|
|
background: #6B9FFF;
|
|
color: #fff;
|
|
}
|
|
|
|
.form-style input[type="submit"]:hover,
|
|
.form-style input[type="button"]:hover {
|
|
background: #6B9FFF;
|
|
color: #fff;
|
|
}
|
|
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
font-family: Georgia, "Times New Roman", Times, serif;
|
|
}
|
|
|
|
table td {
|
|
padding: 15px;
|
|
}
|
|
|
|
table thead td {
|
|
background-color: #54585d;
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
border: 1px solid #54585d;
|
|
}
|
|
|
|
table tbody td {
|
|
color: #636363;
|
|
border: 1px solid #dddfe1;
|
|
}
|
|
|
|
table tbody tr {
|
|
background-color: #f9fafb;
|
|
}
|
|
|
|
table tbody tr:nth-child(odd) {
|
|
background-color: #ffffff;
|
|
}
|
|
</style> |