Update package version, updated Logout function to delete cookies, Cleaned Logs, Added Breadcrumbs, Added Pagination to sources, Cleaned Styles, and improve code structure

Sveltekit-App/src/lib/Utils.ts

@@ -6,7 +6,7 @@ export function formatDate(date: string | null | undefined) {
 }
 
 export function getLimit(url: URL) {
-	return url.searchParams.get('limit') || '10';
+	return url.searchParams.get('limit') || '250';
 }
 
 export function getFilters(url: URL) {

Sveltekit-App/src/routes/+page.server.ts

@@ -17,14 +17,14 @@ export const actions = {
 		const sessionString = cookies.get('idnSession');
 
 		if (sessionString) {
-			console.log('sessionString', sessionString);
+			// console.log('sessionString', sessionString);
 
 			const session = JSON.parse(sessionString);
 			if (session.org == tenant) {
-				console.debug('Credential Cache Hit');
+				// console.debug('Credential Cache Hit');
 				throw redirect(302, '/home');
 			} else {
-				console.debug('Credential Cache Miss');
+				// console.debug('Credential Cache Miss');
 			}
 		}
 

Sveltekit-App/src/routes/callback/+page.server.ts

@@ -41,7 +41,7 @@ export const load: PageServerLoad = async ({ url, cookies }) => {
 		});
 
 	const idnSession: IdnSession = response.data as IdnSession;
-	console.log(idnSession);
+	// console.log(idnSession);
 	cookies.set('idnSession', JSON.stringify(idnSession));
 
 	return { idnSession, counterList };

Sveltekit-App/src/routes/home/+layout.svelte

@@ -1,6 +1,25 @@
-<script>
+<script lang="ts">
+	import { page } from '$app/stores';
 	import LeftSidebar from '$lib/sidebar/LeftSidebar.svelte';
-	import { AppBar, AppShell, LightSwitch } from '@skeletonlabs/skeleton';
+	import { AppBar, AppShell, Avatar, LightSwitch } from '@skeletonlabs/skeleton';
+
+	let crumbs: Array<{ label: string; href: string }> = [];
+
+	$: {
+		// Remove zero-length tokens.
+		const tokens = $page.url.pathname.split('/').filter((t) => t !== '');
+
+		// Create { label, href } pairs for each token.
+		let tokenPath = '';
+		crumbs = tokens.map((t) => {
+			tokenPath += '/' + t;
+			t = t.charAt(0).toUpperCase() + t.slice(1);
+			return { label: t, href: tokenPath };
+		});
+
+		// Add a way to get home too.
+		// crumbs.unshift({ label: 'Home', href: '/' });
+	}
 </script>
 
 <AppShell>
@@ -12,7 +31,8 @@
 			<p class="text-xl">IdentityNow Admin Console</p>
 			<svelte:fragment slot="trail">
 				<LightSwitch />
-				<a href="/logout" class="btn variant-filled-primary !text-white text-lg">Logout</a>
+				<Avatar width="w-10" />
+				<a href="/logout" class="btn variant-filled-primary !text-white text-xs">Logout</a>
 			</svelte:fragment>
 		</AppBar>
 	</svelte:fragment>
@@ -22,9 +42,24 @@
 	<!-- <svelte:fragment slot="sidebarRight">Sidebar Right</svelte:fragment> -->
 	<!-- <svelte:fragment slot="pageHeader">Page Header</svelte:fragment> -->
 	<!-- Router Slot -->
-	<div class="h-full">
+	<div class="max-h-screen">
+		<div class="pl-2 pt-2 pr-2">
+			<ol class="breadcrumb card p-2">
+				{#each crumbs as crumb, i}
+					<!-- If crumb index is less than the breadcrumb length minus 1 -->
+					{#if i < crumbs.length - 1}
+						<li class="crumb"><a class="anchor" href={crumb.href}>{crumb.label}</a></li>
+						<li class="crumb-separator" aria-hidden>&rsaquo;</li>
+					{:else}
+						<li class="crumb">{crumb.label}</li>
+					{/if}
+				{/each}
+			</ol>
+		</div>
+		<div class="p-2">
 			<slot />
 		</div>
+	</div>
 	<!-- ---- / ---- -->
 	<!-- <svelte:fragment slot="pageFooter">Page Footer</svelte:fragment> -->
 	<!-- <svelte:fragment slot="footer">Footer</svelte:fragment> -->

Sveltekit-App/src/routes/home/+page.svelte

@@ -2,7 +2,7 @@
 	import { reports } from '$lib/sidebar/reports';
 </script>
 
-<div class="flex flex-row flex-wrap gap-4 p-4 justify-center">
+<div class="flex flex-row flex-wrap gap-4 justify-center">
 	{#each reports as report (report.url)}
 		<a
 			class="card card-hover overflow-hidden w-modal-slim"

Sveltekit-App/src/routes/home/identities/+page.svelte

@@ -38,7 +38,6 @@
 	let sorters = '';
 </script>
 
-<div class="p-4">
 <div class="card flex justify-center flex-col align-middle">
 	<div class=" p-4 flex flex-row justify-between gap-4 flex-wrap">
 		<div class="flex flex-row gap-1">
@@ -60,6 +59,7 @@
 			/>
 			<button on:click={onGo} class="btn variant-filled-primary text-white"> Go </button>
 		</div>
+		<p class="my-auto">Total Count: {data.totalCount}</p>
 		<Paginator
 			bind:settings
 			on:page={onPageChange}
@@ -140,6 +140,7 @@
 			/>
 			<button on:click={onGo} class="btn variant-filled-primary text-white"> Go </button>
 		</div>
+		<p class="my-auto">Total Count: {data.totalCount}</p>
 		<Paginator
 			bind:settings
 			on:page={onPageChange}
@@ -151,4 +152,3 @@
 		/>
 	</div>
 </div>
-</div>

Sveltekit-App/src/routes/home/sources/+page.server.ts

@@ -25,8 +25,6 @@ export const load = async ({ cookies, url }) => {
 
 	const apiResponse = await api.listSources(requestParams);
 
-	console.log(apiResponse);
-
 	return {
 		totalCount: apiResponse.headers['x-total-count'],
 		sources: apiResponse.data,

Sveltekit-App/src/routes/home/sources/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import type { ModalSettings } from '@skeletonlabs/skeleton';
-	import { getModalStore } from '@skeletonlabs/skeleton';
+	import { createOnAmountChange, createOnGo, createOnPageChange } from '$lib/Utils.js';
+	import type { ModalSettings, PaginationSettings } from '@skeletonlabs/skeleton';
+	import { Paginator, getModalStore } from '@skeletonlabs/skeleton';
 
 	const modalStore = getModalStore();
 
@@ -18,10 +19,57 @@
 
 		modalStore.trigger(modal);
 	}
+
+	$: onPageChange = createOnPageChange({ ...data.params, filters, sorters }, '/home/identities');
+	$: onAmountChange = createOnAmountChange(
+		{ ...data.params, filters, sorters },
+		'/home/identities'
+	);
+	$: onGo = createOnGo({ ...data.params, filters, sorters }, '/home/identities');
+
+	let settings = {
+		page: Number(data.params.page),
+		limit: Number(data.params.limit),
+		size: data.totalCount,
+		amounts: [10, 50, 100, 250]
+	} satisfies PaginationSettings;
+
+	let filters = '';
+	let sorters = '';
 </script>
 
-<div class="p-4">
-	<div class="flex justify-center flex-col align-middle">
+<div class="card flex justify-center flex-col align-middle">
+	<div class=" p-4 flex flex-row justify-between gap-4 flex-wrap">
+		<div class="flex flex-row gap-1">
+			<input
+				on:keydown={onGo}
+				bind:value={filters}
+				class="input"
+				title="Filter"
+				type="text"
+				placeholder="Filter"
+			/>
+			<input
+				on:keydown={onGo}
+				bind:value={sorters}
+				class="input"
+				title="Sorter"
+				type="text"
+				placeholder="Sorter"
+			/>
+			<button on:click={onGo} class="btn variant-filled-primary text-white"> Go </button>
+		</div>
+		<p class="my-auto">Total Count: {data.totalCount}</p>
+		<Paginator
+			bind:settings
+			on:page={onPageChange}
+			on:amount={onAmountChange}
+			showNumerals={true}
+			maxNumerals={1}
+			showFirstLastButtons={true}
+			showPreviousNextButtons={true}
+		/>
+	</div>
 	<table class="table">
 		<thead>
 			<th>ID</th>
@@ -74,5 +122,35 @@
 			{/each}
 		</tbody>
 	</table>
+	<div class=" p-4 flex flex-row justify-between gap-4 flex-wrap">
+		<div class="flex flex-row gap-1">
+			<input
+				on:keydown={onGo}
+				bind:value={filters}
+				class="input"
+				title="Filter"
+				type="text"
+				placeholder="Filter"
+			/>
+			<input
+				on:keydown={onGo}
+				bind:value={sorters}
+				class="input"
+				title="Sorter"
+				type="text"
+				placeholder="Sorter"
+			/>
+			<button on:click={onGo} class="btn variant-filled-primary text-white"> Go </button>
+		</div>
+		<p class="my-auto">Total Count: {data.totalCount}</p>
+		<Paginator
+			bind:settings
+			on:page={onPageChange}
+			on:amount={onAmountChange}
+			showNumerals={true}
+			maxNumerals={1}
+			showFirstLastButtons={true}
+			showPreviousNextButtons={true}
+		/>
 	</div>
 </div>

Sveltekit-App/src/routes/logout/+page.server.ts

@@ -1,5 +1,6 @@
 export const load = async ({ cookies }) => {
 	cookies.delete('session');
+	cookies.delete('idnSession');
 
 	return { sessionLoggedOut: true };
 };

package.json

@@ -1,7 +1,7 @@
 {
   "name": "idn-admin-console",
   "description": "A troubleshooting and administration app for IdentityNow",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": true,
   "author": {
     "name": "Luke Hagar",