STRLCPY/GraphSpy

Add refresh token modal in token side bar
RedByte1337 committed 1 month ago

9ac00755

1 parent 58d615b5

■ ■ ■ ■ ■ ■

GraphSpy/templates/access_token_modal.html

		skipped 112 lines
113	113		let row = accessTokenModalTable.row(tr);
114	114		if (!confirm("Are you sure you want to delete access token with ID " + row.data().id + "?")) { return }
115	115		deleteAccessToken(row.data().id);
116		-	$('#access_tokens').DataTable().ajax.reload(null, false);
	116	+	$('#access_token_modal_table').DataTable().ajax.reload(null, false);
117	117		});
118	118
119	119		function formatAccessToken(d) {
		skipped 24 lines

■ ■ ■ ■ ■ ■

GraphSpy/templates/layout.html

		skipped 171 lines
172	172		<form id="side_menu_refresh_token_form" class="row row-cols-auto">
173	173		<div class="input-group">
174	174		<input type="text" id="refresh_token_id_side" class="form-control" size="1" required>
175		-	<button type="Button" class="btn btn-outline-primary" onclick="setActiveRefreshToken(refresh_token_id_side.value);obtainRefreshTokenInfo()">Set active refresh token</button>
	175	+	<button class="btn btn-outline-primary" type="button" data-bs-toggle="modal" data-bs-target="#refresh_token_modal" onclick="$('#refresh_token_modal_table').DataTable().ajax.reload(null, false)">Select...</button>
176	176		</div>
177	177		</form>
178	178		<div class="card text-bg-secondary mb-3 mt-3" id="refresh_token_card">
		skipped 87 lines
266	266		obtainAccessTokenInfo();
267	267		obtainRefreshTokenInfo();
268	268		</script>
269		-	<!-- Access Token Modal -->
	269	+	<!-- Modals -->
270	270		{% include 'access_token_modal.html' %}
	271	+	{% include 'refresh_token_modal.html' %}
271	272		<!-- Template Content -->
272	273		<div class="container-fluid">
273	274		{%block content%}
		skipped 15 lines

■ ■ ■ ■ ■ ■

GraphSpy/templates/refresh_token_modal.html

1	+	<div class="modal fade" id="refresh_token_modal" tabindex="-1" aria-labelledby="refresh_token_modal_label" aria-hidden="true">
2	+	<div class="modal-dialog modal-xl">
3	+	<div class="modal-content">
4	+	<div class="modal-header">
5	+	<h1 class="modal-title fs-5" id="refresh_token_modal_label">Refresh Tokens</h1>
6	+	<div style="float: right">
7	+	<i class="fi fi-br-expand px-3" id="expand-icon" style="cursor: pointer; float: left; opacity: 0.5"></i>
8	+	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
9	+	</div>
10	+	</div>
11	+	<div class="modal-body">
12	+	<div id="dTable" class="box-body table-responsive" style="padding:20px;">
13	+	<table id="refresh_token_modal_table" class="display" style="width:100%">
14	+	<thead>
15	+	<tr>
16	+	<th></th>
17	+	<th></th>
18	+	<th></th>
19	+	<th></th>
20	+	<th>ID</th>
21	+	<th>Stored At</th>
22	+	<th>User</th>
23	+	<th>Tenant ID</th>
24	+	<th>Resource</th>
25	+	<th>Foci</th>
26	+	<th>Description</th>
27	+	</tr>
28	+	</thead>
29	+	</table>
30	+	</div>
31	+	</div>
32	+	<div class="modal-footer">
33	+	<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
34	+	</div>
35	+	</div>
36	+	</div>
37	+	</div>
38	+	<script type="text/javascript" class="init">
39	+	// Populate the refresh_token_modal_table table
40	+	let refreshTokenModalTable = new DataTable('#refresh_token_modal_table', {
41	+	ajax: {
42	+	url: '/api/list_refresh_tokens', dataSrc: ""
43	+	},
44	+	columns: [
45	+	{
46	+	className: 'dt-control',
47	+	orderable: false,
48	+	data: null,
49	+	defaultContent: '',
50	+	'width': '20px'
51	+	},
52	+	{
53	+	className: 'active-control',
54	+	orderable: false,
55	+	data: null,
56	+	defaultContent: '<i class="fi fi-br-check" style="cursor: pointer"></i>',
57	+	'width': '20px'
58	+	},
59	+	{
60	+	className: 'copy-control',
61	+	orderable: false,
62	+	data: null,
63	+	defaultContent: '<i class="fi fi-rr-copy-alt" style="cursor: pointer"></i>',
64	+	'width': '20px'
65	+	},
66	+	{
67	+	className: 'delete-control',
68	+	orderable: false,
69	+	data: null,
70	+	defaultContent: '<i class="fi fi-rr-trash" style="cursor: pointer"></i>',
71	+	'width': '20px'
72	+	},
73	+	{ data: 'id', 'width': '30px' },
74	+	{ data: 'stored_at', 'width': '150px' },
75	+	{ data: 'user', 'width': '300px' },
76	+	{ data: 'tenant_id', 'width': '300px' },
77	+	{ data: 'resource', 'width': '300px' },
78	+	{ data: 'foci', 'width': '30px' },
79	+	{ data: 'description' }
80	+	],
81	+	order: [[4, 'desc']],
82	+	autoWidth: false
83	+	})
84	+
85	+	refreshTokenModalTable.on('click', 'td.dt-control', function (e) {
86	+	let tr = e.target.closest('tr');
87	+	let row = refreshTokenModalTable.row(tr);
88	+
89	+	if (row.child.isShown()) {
90	+	// This row is already open - close it
91	+	row.child.hide();
92	+	}
93	+	else {
94	+	// Open this row
95	+	row.child(formatRefreshToken(row.data())).show();
96	+	}
97	+	});
98	+
99	+	refreshTokenModalTable.on('click', 'td.active-control', function (e) {
100	+	let tr = e.target.closest('tr');
101	+	let row = refreshTokenModalTable.row(tr);
102	+	setActiveRefreshToken(row.data().id);
103	+	$('#refresh_token_modal').modal('hide');
104	+	});
105	+
106	+	refreshTokenModalTable.on('click', 'td.copy-control', function (e) {
107	+	let tr = e.target.closest('tr');
108	+	let row = refreshTokenModalTable.row(tr);
109	+	copyToClipboard(row.data().refreshtoken);
110	+	});
111	+
112	+	refreshTokenModalTable.on('click', 'td.delete-control', function (e) {
113	+	let tr = e.target.closest('tr');
114	+	let row = refreshTokenModalTable.row(tr);
115	+	if (!confirm("Are you sure you want to delete refresh token with ID " + row.data().id + "?")) { return }
116	+	deleteRefreshToken(row.data().id);
117	+	$('#refresh_token_modal_table').DataTable().ajax.reload(null, false);
118	+	});
119	+
120	+	function formatRefreshToken(d) {
121	+	// `d` is the original data object for the row
122	+	var formatWrapper = $(
123	+	'<dl style="word-wrap: break-word; word-break: break-all; max-width:100%">' +
124	+	'<dt>Raw Token:</dt>' +
125	+	'</dl>'
126	+	);
127	+	var formatCode = $('<code></code>').text(d.refreshtoken);
128	+	formatWrapper.append($('<dd></dd>').append(formatCode));
129	+	return formatWrapper;
130	+	}
131	+
132	+	$("#refresh_token_modal").on('click', 'i#expand-icon', function (e) {
133	+	$("#refresh_token_modal .modal-dialog").toggleClass('modal-xl').toggleClass('modal-fullscreen')
134	+	$("#refresh_token_modal i#expand-icon").toggleClass('fi-br-expand').toggleClass('fi-br-compress')
135	+	})
136	+	</script>

Add refresh token modal in token side bar