Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion GraphSpy/static/js/functions.js
Original file line number Diff line number Diff line change
Expand Up @@ -306,9 +306,10 @@ function bootstrapAlert(message, type) {
$('#alert_placeholder').append(dom);
}

function bootstrapToast(title, message) {
function bootstrapToast(title, message, type) {
// Wrapper for new Toast Message
var toast_wrapper = $('<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"></div>');
toast_wrapper.addClass(type);
// Toast header
var toast_header = $('<div class="toast-header"><small>Just now</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div>');
var toast_title = $('<strong class="me-auto"></strong>');
Expand Down
65 changes: 57 additions & 8 deletions GraphSpy/templates/device_codes.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ <h1>Generate Device Code</h1>
<form class="row g-3">
<div>
<label for="resource" class="form-label">Resource *</label>
<input list="resource_list" id="resource" class="form-control" required placeholder="https://graph.microsoft.com">
<input list="resource_list" id="resource" class="form-control" required
placeholder="https://graph.microsoft.com">
<datalist id="resource_list">
<option value="https://graph.microsoft.com">MSGraph</option>
<option value="https://graph.windows.net/">AAD Graph</option>
Expand All @@ -19,7 +20,8 @@ <h1>Generate Device Code</h1>
</div>
<div>
<label for="client_id" class="form-label">Client ID *</label>
<input list="client_id_list" id="client_id" class="form-control" required placeholder="d3590ed6-52b3-4102-aeff-aad2292ab01c">
<input list="client_id_list" id="client_id" class="form-control" required
placeholder="d3590ed6-52b3-4102-aeff-aad2292ab01c">
<datalist id="client_id_list">
<option value="d3590ed6-52b3-4102-aeff-aad2292ab01c">Microsoft Office</option>
<option value="1fec8e78-bce4-4aaf-ab1b-5451cc387264">Microsoft Teams</option>
Expand All @@ -32,7 +34,8 @@ <h1>Generate Device Code</h1>
</datalist>
</div>
<div>
<button type="button" class="btn btn-primary" onclick="generateDeviceCode(this.closest('form').resource.value,this.closest('form').client_id.value);">Submit</button>
<button type="button" class="btn btn-primary"
onclick="generateDeviceCode(this.closest('form').resource.value,this.closest('form').client_id.value);">Submit</button>
</div>
</form>
</div>
Expand All @@ -58,6 +61,8 @@ <h1>Device Code List</h1>
</table>
</div>
<script type="text/javascript" class="init">
let notifiedDeviceCodes = JSON.parse(localStorage.getItem('notifiedDeviceCodes')) || [];
let deviceStatuses = JSON.parse(localStorage.getItem('deviceStatuses')) || {};
// Populate the device_codes table
let myTable = new DataTable('#device_codes', {
ajax: {
Expand Down Expand Up @@ -93,7 +98,26 @@ <h1>Device Code List</h1>
{ data: 'client_id', 'width': '310px' },
{ data: 'status' }
],
order: [[3, 'desc']]
order: [[3, 'desc']],
createdRow: function (row, data, dataIndex) {
let currentTheme = document.documentElement.getAttribute('data-bs-theme');

let colorScheme = {
SUCCESS: {
light: '#d4edda', // Light green for success in light mode
dark: '#14532d' // Darker green for success in dark mode
},
EXPIRED: {
light: '#f8d7da', // Light red for expired in light mode
dark: '#721c24' // Darker red for expired in dark mode
},
};
let isDarkMode = currentTheme === 'dark';
if (data.status in colorScheme) {
let color = isDarkMode ? colorScheme[data.status].dark : colorScheme[data.status].light;
$(row).css('background-color', color);
}
}
})

myTable.on('click', 'td.dt-control', function (e) {
Expand Down Expand Up @@ -143,9 +167,34 @@ <h1>Device Code List</h1>
});
$('#device_codes').DataTable().ajax.reload(null, false);
}
// Auto refresh the table every 5 seconds
setInterval(function () {
$('#device_codes').DataTable().ajax.reload(null, false)
}, 5000);

function checkDeviceCodeStatus() {
myTable.ajax.reload(function (json) {
json.forEach(device => {

let notificationKey = `${device.id}-${device.status}`;
if (device.status === "SUCCESS" && !notifiedDeviceCodes.includes(notificationKey)) {
bootstrapToast("Device Code Auth Success", `[Success] Device code ${device.id} authenticated successfully.`, "bg-success");
notifiedDeviceCodes.push(notificationKey);
}
if (device.status === "EXPIRED" && !notifiedDeviceCodes.includes(notificationKey)) {
bootstrapToast("Device Code Auth Warning", `[Warning] Device code ${device.id} has expired.`, "bg-warning");
notifiedDeviceCodes.push(notificationKey);
}
deviceStatuses[device.id] = device.status;
});

localStorage.setItem('notifiedDeviceCodes', JSON.stringify(notifiedDeviceCodes));
localStorage.setItem('deviceStatuses', JSON.stringify(deviceStatuses));

}, false);
}

// Check at page load...
checkDeviceCodeStatus();

// ...then check periodically every 5 seconds
setInterval(checkDeviceCodeStatus, 5000);

</script>
{%endblock content%}