Fix bugs and add optimizations
This commit is contained in:
parent
020fab482e
commit
d32bf80516
|
|
@ -1,5 +1,6 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
|
|
@ -11,6 +12,7 @@
|
||||||
|
|
||||||
<div class="d-flex flex-column justify-content-center w-100 h-100">
|
<div class="d-flex flex-column justify-content-center w-100 h-100">
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<body bgcolor="#FFFFFF" text="Black">
|
<body bgcolor="#FFFFFF" text="Black">
|
||||||
<header>
|
<header>
|
||||||
<h1><span id="replace">BSMSapp</span></h1>
|
<h1><span id="replace">BSMSapp</span></h1>
|
||||||
|
|
@ -18,25 +20,38 @@
|
||||||
|
|
||||||
<button class="style" id="login">Login</button>
|
<button class="style" id="login">Login</button>
|
||||||
|
|
||||||
<div id="loading" style="display:none"></div>
|
|
||||||
|
|
||||||
<form id="myForm" class="form-style" style="display:none">
|
<form id="myForm" class="form-style" style="display:none">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<input value="0" name="id" type="number" min="0"/>
|
<input value="0" name="id" type="number" min="0" />
|
||||||
<span>Enter the product identifier.</span>
|
<span>Enter the product identifier.</span>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<input value="0" name="stock" type="number" min="0"/>
|
<input value="0" name="stock" type="number" min="0" />
|
||||||
<span>Enter the new stock number.</span>
|
<span>Enter the new stock number.</span>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<input type="submit" value="Save"/>
|
<input type="submit" value="Save" />
|
||||||
<input type="submit" value="Delete"/>
|
<input type="submit" value="Delete" />
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
<div class="sk-fading-circle" id="loading" style="display:none">
|
||||||
|
<div class="sk-circle1 sk-circle"></div>
|
||||||
|
<div class="sk-circle2 sk-circle"></div>
|
||||||
|
<div class="sk-circle3 sk-circle"></div>
|
||||||
|
<div class="sk-circle4 sk-circle"></div>
|
||||||
|
<div class="sk-circle5 sk-circle"></div>
|
||||||
|
<div class="sk-circle6 sk-circle"></div>
|
||||||
|
<div class="sk-circle7 sk-circle"></div>
|
||||||
|
<div class="sk-circle8 sk-circle"></div>
|
||||||
|
<div class="sk-circle9 sk-circle"></div>
|
||||||
|
<div class="sk-circle10 sk-circle"></div>
|
||||||
|
<div class="sk-circle11 sk-circle"></div>
|
||||||
|
<div class="sk-circle12 sk-circle"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button class="style" onclick="get_table()" style="display:none" id="tableBtn">Get table</button>
|
<button class="style" onclick="get_table()" style="display:none" id="tableBtn">Get table</button>
|
||||||
<br><br>
|
<br><br>
|
||||||
<table id="table" align="center" border="1px"></table>
|
<table id="table" align="center" border="1px"></table>
|
||||||
|
|
@ -51,44 +66,50 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
var token = localStorage.getItem('token') || undefined;
|
var token = localStorage.getItem('token') || undefined;
|
||||||
console.log(token)
|
|
||||||
|
|
||||||
if (typeof token === 'undefined' || token === null) {
|
if (typeof token === 'undefined' || token === null) {
|
||||||
console.log('no hay token guardado')
|
tokenPromise = get_token()
|
||||||
aux = get_token()
|
var aux = tokenPromise.then(function (result) {
|
||||||
var promiseB = aux.then(function(result) {
|
|
||||||
if (result) {
|
if (result) {
|
||||||
token = result["access_token"]
|
token = result["access_token"]
|
||||||
localStorage.setItem('token', token);
|
localStorage.setItem('token', token);
|
||||||
console.log(token)
|
userPromise = get_user(token)
|
||||||
username = get_user(token)
|
|
||||||
|
|
||||||
var prom = username.then(function(result) {
|
var prom = userPromise.then(function (result) {
|
||||||
username = result["username"]
|
username = result["username"]
|
||||||
localStorage.setItem('username', token);
|
$("#loading").hide();
|
||||||
console.log(username)
|
$("#myForm").show();
|
||||||
|
$("#tableBtn").show();
|
||||||
|
localStorage.setItem('username', username);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
$("#login").hide();
|
$("#login").hide();
|
||||||
$("#loading").show();
|
|
||||||
|
|
||||||
username = get_user(token)
|
username = localStorage.getItem('username') || undefined;
|
||||||
|
|
||||||
var prom = username.then(function(result) {
|
if (typeof username === 'undefined' || username === null) {
|
||||||
|
$("#loading").show();
|
||||||
|
} else {
|
||||||
|
$("#myForm").show();
|
||||||
|
$("#tableBtn").show();
|
||||||
|
}
|
||||||
|
|
||||||
|
userPromise = get_user(token)
|
||||||
|
var aux = userPromise.then(function (result) {
|
||||||
$("#loading").hide();
|
$("#loading").hide();
|
||||||
if (result.hasOwnProperty('error')){
|
if (result.hasOwnProperty('error')) {
|
||||||
|
$("#myForm").hide();
|
||||||
|
$("#tableBtn").hide();
|
||||||
$("#login").show();
|
$("#login").show();
|
||||||
localStorage.removeItem('token')
|
localStorage.removeItem('token')
|
||||||
|
alert("Token expired. Log in again!")
|
||||||
} else {
|
} else {
|
||||||
|
username = result["username"]
|
||||||
$("#myForm").show();
|
$("#myForm").show();
|
||||||
$("#tableBtn").show();
|
$("#tableBtn").show();
|
||||||
$("#login").hide();
|
localStorage.setItem('username', username);
|
||||||
|
|
||||||
username = result["username"]
|
|
||||||
localStorage.setItem('username', token);
|
|
||||||
console.log(username)
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -178,15 +199,17 @@
|
||||||
return undefined
|
return undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
$("#myForm").show();
|
var url = window.location.href.split("?")[0];
|
||||||
$("#tableBtn").show();
|
window.history.replaceState({}, document.title, url);
|
||||||
|
|
||||||
$("#login").hide();
|
$("#login").hide();
|
||||||
|
$("#loading").show();
|
||||||
|
|
||||||
const response = await fetch('https://santilococo.auth.us-east-1.amazoncognito.com/oauth2/token', {
|
const response = await fetch('https://santilococo.auth.us-east-1.amazoncognito.com/oauth2/token', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/x-www-form-urlencoded'
|
'Content-Type': 'application/x-www-form-urlencoded'
|
||||||
},
|
},
|
||||||
body: new URLSearchParams({
|
body: new URLSearchParams({
|
||||||
'grant_type': 'authorization_code',
|
'grant_type': 'authorization_code',
|
||||||
'code': code,
|
'code': code,
|
||||||
|
|
@ -203,7 +226,7 @@
|
||||||
const response = await fetch('https://santilococo.auth.us-east-1.amazoncognito.com/oauth2/userInfo', {
|
const response = await fetch('https://santilococo.auth.us-east-1.amazoncognito.com/oauth2/userInfo', {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
headers: {
|
headers: {
|
||||||
"Authorization" : str
|
"Authorization": str
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -212,16 +235,6 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
#loading {
|
|
||||||
background: url('loading.gif') no-repeat center center;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 9999999;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: linear-gradient(-45deg, #ee7752, #df6493, #23a6d5, #23d5ab);
|
background: linear-gradient(-45deg, #ee7752, #df6493, #23a6d5, #23d5ab);
|
||||||
background-size: 400% 400%;
|
background-size: 400% 400%;
|
||||||
|
|
@ -424,4 +437,178 @@
|
||||||
table tbody tr:nth-child(odd) {
|
table tbody tr:nth-child(odd) {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle {
|
||||||
|
margin: 100px auto;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle:before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 15%;
|
||||||
|
height: 15%;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
border-radius: 100%;
|
||||||
|
-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
|
||||||
|
animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle2 {
|
||||||
|
-webkit-transform: rotate(30deg);
|
||||||
|
-ms-transform: rotate(30deg);
|
||||||
|
transform: rotate(30deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle3 {
|
||||||
|
-webkit-transform: rotate(60deg);
|
||||||
|
-ms-transform: rotate(60deg);
|
||||||
|
transform: rotate(60deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle4 {
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
-ms-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle5 {
|
||||||
|
-webkit-transform: rotate(120deg);
|
||||||
|
-ms-transform: rotate(120deg);
|
||||||
|
transform: rotate(120deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle6 {
|
||||||
|
-webkit-transform: rotate(150deg);
|
||||||
|
-ms-transform: rotate(150deg);
|
||||||
|
transform: rotate(150deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle7 {
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
-ms-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle8 {
|
||||||
|
-webkit-transform: rotate(210deg);
|
||||||
|
-ms-transform: rotate(210deg);
|
||||||
|
transform: rotate(210deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle9 {
|
||||||
|
-webkit-transform: rotate(240deg);
|
||||||
|
-ms-transform: rotate(240deg);
|
||||||
|
transform: rotate(240deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle10 {
|
||||||
|
-webkit-transform: rotate(270deg);
|
||||||
|
-ms-transform: rotate(270deg);
|
||||||
|
transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle11 {
|
||||||
|
-webkit-transform: rotate(300deg);
|
||||||
|
-ms-transform: rotate(300deg);
|
||||||
|
transform: rotate(300deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle12 {
|
||||||
|
-webkit-transform: rotate(330deg);
|
||||||
|
-ms-transform: rotate(330deg);
|
||||||
|
transform: rotate(330deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle2:before {
|
||||||
|
-webkit-animation-delay: -1.1s;
|
||||||
|
animation-delay: -1.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle3:before {
|
||||||
|
-webkit-animation-delay: -1s;
|
||||||
|
animation-delay: -1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle4:before {
|
||||||
|
-webkit-animation-delay: -0.9s;
|
||||||
|
animation-delay: -0.9s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle5:before {
|
||||||
|
-webkit-animation-delay: -0.8s;
|
||||||
|
animation-delay: -0.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle6:before {
|
||||||
|
-webkit-animation-delay: -0.7s;
|
||||||
|
animation-delay: -0.7s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle7:before {
|
||||||
|
-webkit-animation-delay: -0.6s;
|
||||||
|
animation-delay: -0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle8:before {
|
||||||
|
-webkit-animation-delay: -0.5s;
|
||||||
|
animation-delay: -0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle9:before {
|
||||||
|
-webkit-animation-delay: -0.4s;
|
||||||
|
animation-delay: -0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle10:before {
|
||||||
|
-webkit-animation-delay: -0.3s;
|
||||||
|
animation-delay: -0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle11:before {
|
||||||
|
-webkit-animation-delay: -0.2s;
|
||||||
|
animation-delay: -0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-fading-circle .sk-circle12:before {
|
||||||
|
-webkit-animation-delay: -0.1s;
|
||||||
|
animation-delay: -0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes sk-circleFadeDelay {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
39%,
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sk-circleFadeDelay {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
39%,
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue