Spaces:
Runtime error
Runtime error
File size: 7,258 Bytes
97dab2a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OAuth PoC</title>
<meta name="author" content="Bibhu Mishra">
<meta name="description" content="">
<!-- Tailwind -->
<link href="/css/output.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
.font-family-karla { font-family: karla; }
.bg-sidebar { background: #3d68ff; }
.cta-btn { color: #3d68ff; }
.upgrade-btn { background: #1947ee; }
.upgrade-btn:hover { background: #0038fd; }
.active-nav-link { background: #1947ee; }
.nav-item:hover { background: #1947ee; }
.account-link:hover { background: #3d68ff; }
.submenu { display: none; }
.submenu-active { display: block; }
.nav-item-active { background-color: rgba(255, 255, 255, 0.2); }
pre {
background-color: #f4f4f4;
padding: 10px;
border-radius: 5px;
white-space: pre-wrap; /* To wrap long lines */
word-wrap: break-word; /* To break long words */
}
.info-bar {
position: fixed;
bottom: 20px;
right: 20px;
background: #3d68ff;
color: white;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
z-index: 1000;
display: flex;
align-items: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.info-bar button {
background: white;
color: #3d68ff;
border: none;
padding: 5px 10px;
border-radius: 5px;
margin-left: 10px;
cursor: pointer;
}
.modal {
display: none;
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: white;
box-shadow: -2px 0 5px rgba(0,0,0,0.5);
z-index: 1000;
}
@media (min-width: 768px) {
.modal {
width: 25%;
height: 100%;
}
}
.modal-header {
background: #3d68ff;
color: white;
padding: 10px;
}
.modal-content {
padding: 0;
height: calc(100% - 40px); /* Adjust height to fill the modal */
}
.close-btn {
float: right;
cursor: pointer;
}
.modal-content iframe {
width: 100%;
height: 100%;
border: none;
}
.close-btn svg {
width: 24px;
height: 24px;
fill: currentColor;
}
</style>
</head>
<body class="bg-gray-100 font-family-karla flex">
<%- include('../_partials/leftnav') %>
<div class="w-full flex flex-col h-screen overflow-y-hidden">
<%- include('../_partials/header') %>
<div class="w-full overflow-x-hidden border-t flex flex-col items-center">
<main class="w-full max-w-6xl flex-grow p-6 mx-auto">
<%- body %>
</main>
<%- include('../_partials/footer') %>
</div>
</div>
<!-- Information Bar -->
<div class="info-bar" onclick="toggleModal()">
AI Powered Technology Assistance
<button>Open</button>
</div>
<!-- Modal Popup -->
<div class="modal" id="infoModal">
<div class="modal-header">
<span class="close-btn" onclick="toggleModal()">×</span>
Information
</div>
<div class="modal-content">
<iframe src="https://copilotstudio.microsoft.com/environments/Default-95595fde-7f04-4030-ace9-d08cf1e81bdc/bots/crb00_copilot/webchat?__version__=2"></iframe>
</div>
</div>
<!-- AlpineJS -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
<!-- Font Awesome -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
<!-- ChartJS -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script> -->
<script>
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
function isTokenExpired(token) {
if (!token) return false; //if token is not existing, do nothing
const payload = JSON.parse(atob(token.split('.')[1]));
const now = Math.floor(Date.now() / 1000);
return payload.exp < now;
//return true;
}
async function refreshTokenRequest() {
try {
const refreshToken = getCookie('refreshToken'); // Assuming getCookie is a function that retrieves the refresh token from cookies
console.log("test ur rrefresh token: " + refreshToken);
if (!refreshToken) {
console.error('No refresh token found.');
return;
}
const response = await fetch('/auth/refresh-token', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ refreshToken }) // Send the refresh token in the body
});
const data = await response.json();
if (response.ok && data.success) {
console.log('Token refreshed successfully.');
location.reload();
} else {
console.error('Failed to refresh token.', data.message);
}
} catch (error) {
console.error('Error refreshing token:', error);
}
}
function checkAndRefreshToken() {
const accessToken = getCookie('accessToken');
const refreshToken = getCookie('refreshToken');
console.log('Access Token:', accessToken);
console.log('Refresh Token:', refreshToken);
if (isTokenExpired(accessToken)) {
if (confirm('Your session is about to expire. Would you like to refresh your session?')) {
refreshTokenRequest();
}
}
}
//checkAndRefreshToken();
// Interval in milliseconds (15 minutes)
const interval = 15 * 60 * 1000;
// Set up the interval
//**setInterval(checkAndRefreshToken, interval);
function toggleModal() {
const modal = document.getElementById('infoModal');
modal.style.display = modal.style.display === 'block' ? 'none' : 'block';
}
</script>
</body>
</html> |