Fix bugs and add optimizations
This commit is contained in:
parent
020fab482e
commit
d32bf80516
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
|
@ -11,6 +12,7 @@
|
|||
|
||||
<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>
|
||||
|
|
@ -18,25 +20,38 @@
|
|||
|
||||
<button class="style" id="login">Login</button>
|
||||
|
||||
<div id="loading" style="display:none"></div>
|
||||
|
||||
<form id="myForm" class="form-style" style="display:none">
|
||||
<ul>
|
||||
<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>
|
||||
</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>
|
||||
</li>
|
||||
<li>
|
||||
<input type="submit" value="Save"/>
|
||||
<input type="submit" value="Delete"/>
|
||||
<input type="submit" value="Save" />
|
||||
<input type="submit" value="Delete" />
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
<br><br>
|
||||
<table id="table" align="center" border="1px"></table>
|
||||
|
|
@ -51,44 +66,50 @@
|
|||
};
|
||||
|
||||
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) {
|
||||
tokenPromise = get_token()
|
||||
var aux = tokenPromise.then(function (result) {
|
||||
if (result) {
|
||||
token = result["access_token"]
|
||||
localStorage.setItem('token', token);
|
||||
console.log(token)
|
||||
username = get_user(token)
|
||||
userPromise = get_user(token)
|
||||
|
||||
var prom = username.then(function(result) {
|
||||
var prom = userPromise.then(function (result) {
|
||||
username = result["username"]
|
||||
localStorage.setItem('username', token);
|
||||
console.log(username)
|
||||
$("#loading").hide();
|
||||
$("#myForm").show();
|
||||
$("#tableBtn").show();
|
||||
localStorage.setItem('username', username);
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$("#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();
|
||||
if (result.hasOwnProperty('error')){
|
||||
if (result.hasOwnProperty('error')) {
|
||||
$("#myForm").hide();
|
||||
$("#tableBtn").hide();
|
||||
$("#login").show();
|
||||
localStorage.removeItem('token')
|
||||
alert("Token expired. Log in again!")
|
||||
} else {
|
||||
username = result["username"]
|
||||
$("#myForm").show();
|
||||
$("#tableBtn").show();
|
||||
$("#login").hide();
|
||||
|
||||
username = result["username"]
|
||||
localStorage.setItem('username', token);
|
||||
console.log(username)
|
||||
localStorage.setItem('username', username);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -178,15 +199,17 @@
|
|||
return undefined
|
||||
}
|
||||
|
||||
$("#myForm").show();
|
||||
$("#tableBtn").show();
|
||||
var url = window.location.href.split("?")[0];
|
||||
window.history.replaceState({}, document.title, url);
|
||||
|
||||
$("#login").hide();
|
||||
$("#loading").show();
|
||||
|
||||
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,
|
||||
|
|
@ -203,7 +226,7 @@
|
|||
const response = await fetch('https://santilococo.auth.us-east-1.amazoncognito.com/oauth2/userInfo', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
"Authorization" : str
|
||||
"Authorization": str
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -212,16 +235,6 @@
|
|||
</script>
|
||||
|
||||
<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 {
|
||||
background: linear-gradient(-45deg, #ee7752, #df6493, #23a6d5, #23d5ab);
|
||||
background-size: 400% 400%;
|
||||
|
|
@ -424,4 +437,178 @@
|
|||
table tbody tr:nth-child(odd) {
|
||||
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>
|
||||
Loading…
Reference in New Issue