release: 0.9.0

.version

@@ -1 +1 @@
-0.8.1
+0.9.0

CHANGELOG.md

@@ -1,3 +1,16 @@
+## [](https://github.com/stonith404/pocket-id/compare/v0.8.1...v) (2024-10-18)
+
+
+### Features
+
+* add environment variable to change the caddy port in Docker ([ff06bf0](https://github.com/stonith404/pocket-id/commit/ff06bf0b34496ce472ba6d3ebd4ea249f21c0ec3))
+* use improve table for users and audit logs ([11ed661](https://github.com/stonith404/pocket-id/commit/11ed661f86a512f78f66d604a10c1d47d39f2c39))
+
+
+### Bug Fixes
+
+* allow copy to clipboard for client secret ([29748cc](https://github.com/stonith404/pocket-id/commit/29748cc6c7b7e5a6b54bfe837e0b1a98fa1ad594))
+
 ## [](https://github.com/stonith404/pocket-id/compare/v0.8.0...v) (2024-10-11)
 
 

README.md

@@ -151,15 +151,16 @@ docker compose up -d
 
 ### Environment variables
 
-| Variable               | Default Value           | Recommended to change | Description                                   |
+| Variable               | Default Value           | Recommended to change | Description                                                                                                                                                                           |
-| ---------------------- | ----------------------- | --------------------- | --------------------------------------------- |
+| ---------------------- | ----------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `PUBLIC_APP_URL`       | `http://localhost`      | yes                   | The URL where you will access the app.        |
+| `PUBLIC_APP_URL`       | `http://localhost`      | yes                   | The URL where you will access the app.                                                                                                                                                |
-| `TRUST_PROXY`          | `false`                 | yes                   | Whether the app is behind a reverse proxy.    |
+| `TRUST_PROXY`          | `false`                 | yes                   | Whether the app is behind a reverse proxy.                                                                                                                                            |
-| `DB_PATH`              | `data/pocket-id.db`     | no                    | The path to the SQLite database.              |
+| `DB_PATH`              | `data/pocket-id.db`     | no                    | The path to the SQLite database.                                                                                                                                                      |
-| `UPLOAD_PATH`          | `data/uploads`          | no                    | The path where the uploaded files are stored. |
+| `UPLOAD_PATH`          | `data/uploads`          | no                    | The path where the uploaded files are stored.                                                                                                                                         |
-| `INTERNAL_BACKEND_URL` | `http://localhost:8080` | no                    | The URL where the backend is accessible.      |
+| `INTERNAL_BACKEND_URL` | `http://localhost:8080` | no                    | The URL where the backend is accessible.                                                                                                                                              |
-| `PORT`                 | `3000`                  | no                    | The port on which the frontend should listen. |
+| `CADDY_PORT`           | `80`                    | no                    | The port on which Caddy should listen. Caddy is only active inside the Docker container. If you want to change the exposed port of the container then you sould change this variable. |
-| `BACKEND_PORT`         | `8080`                  | no                    | The port on which the backend should listen.  |
+| `PORT`                 | `3000`                  | no                    | The port on which the frontend should listen.                                                                                                                                         |
+| `BACKEND_PORT`         | `8080`                  | no                    | The port on which the backend should listen.                                                                                                                                          |
 
 ## Contribute
 

backend/internal/controller/oidc_controller.go

@@ -18,7 +18,7 @@ func NewOidcController(group *gin.RouterGroup, jwtAuthMiddleware *middleware.Jwt
 
 	group.POST("/oidc/authorize", jwtAuthMiddleware.Add(false), oc.authorizeHandler)
 	group.POST("/oidc/authorize/new-client", jwtAuthMiddleware.Add(false), oc.authorizeNewClientHandler)
-	group.POST("/oidc/token", oc.createIDTokenHandler)
+	group.POST("/oidc/token", oc.createTokensHandler)
 	group.GET("/oidc/userinfo", oc.userInfoHandler)
 
 	group.GET("/oidc/clients", jwtAuthMiddleware.Add(true), oc.listClientsHandler)
@@ -91,7 +91,7 @@ func (oc *OidcController) authorizeNewClientHandler(c *gin.Context) {
 	c.JSON(http.StatusOK, response)
 }
 
-func (oc *OidcController) createIDTokenHandler(c *gin.Context) {
+func (oc *OidcController) createTokensHandler(c *gin.Context) {
 	var input dto.OidcIdTokenDto
 
 	if err := c.ShouldBind(&input); err != nil {

frontend/src/lib/components/advanced-table.svelte

@@ -11,12 +11,14 @@
 	let {
 		items,
 		selectedIds = $bindable(),
+		withoutSearch = false,
 		fetchItems,
 		columns,
 		rows
 	}: {
 		items: Paginated<T>;
 		selectedIds?: string[];
+		withoutSearch?: boolean;
 		fetchItems: (search: string, page: number, limit: number) => Promise<Paginated<T>>;
 		columns: (string | { label: string; hidden?: boolean })[];
 		rows: Snippet<[{ item: T }]>;
@@ -65,12 +67,14 @@
 </script>
 
 <div class="w-full">
+	{#if !withoutSearch}
 	<Input
 		class="mb-4 max-w-sm"
 		placeholder={'Search...'}
 		type="text"
 		oninput={(e) => onSearch((e.target as HTMLInputElement).value)}
 	/>
+	{/if}
 	<Table.Root>
 		<Table.Header>
 			<Table.Row>

frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte

@@ -26,7 +26,7 @@
 		'OIDC Discovery URL': `https://${$page.url.hostname}/.well-known/openid-configuration`,
 		'Token URL': `https://${$page.url.hostname}/api/oidc/token`,
 		'Userinfo URL': `https://${$page.url.hostname}/api/oidc/userinfo`,
-		'Certificate URL': `https://${$page.url.hostname}/.well-known/jwks.json`,
+		'Certificate URL': `https://${$page.url.hostname}/.well-known/jwks.json`
 	};
 
 	async function updateClient(updatedClient: OidcClientCreateWithLogo) {
@@ -95,10 +95,16 @@
 			</div>
 			<div class="mb-2 mt-1 flex items-center">
 				<Label class="w-44">Client secret</Label>
-				<span class="text-muted-foreground text-sm" data-testid="client-secret"
+				{#if $clientSecretStore}
-					>{$clientSecretStore ?? '••••••••••••••••••••••••••••••••'}</span
+					<CopyToClipboard value={$clientSecretStore}>
-				>
+						<span class="text-muted-foreground text-sm" data-testid="client-secret">
-				{#if !$clientSecretStore}
+							{$clientSecretStore}
+						</span>
+					</CopyToClipboard>
+				{:else}
+					<span class="text-muted-foreground text-sm" data-testid="client-secret"
+						>••••••••••••••••••••••••••••••••</span
+					>
 					<Button
 						class="ml-2"
 						onclick={createClientSecret}

frontend/src/routes/settings/admin/users/user-list.svelte

@@ -1,16 +1,14 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import AdvancedTable from '$lib/components/advanced-table.svelte';
 	import { openConfirmDialog } from '$lib/components/confirm-dialog/';
 	import { Badge } from '$lib/components/ui/badge/index';
 	import { Button } from '$lib/components/ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
-	import { Input } from '$lib/components/ui/input';
-	import * as Pagination from '$lib/components/ui/pagination';
 	import * as Table from '$lib/components/ui/table';
 	import UserService from '$lib/services/user-service';
-	import type { Paginated, PaginationRequest } from '$lib/types/pagination.type';
+	import type { Paginated } from '$lib/types/pagination.type';
 	import type { User } from '$lib/types/user.type';
-	import { debounced } from '$lib/utils/debounce-util';
 	import { axiosErrorToast } from '$lib/utils/error-util';
 	import { LucideLink, LucidePencil, LucideTrash } from 'lucide-svelte';
 	import Ellipsis from 'lucide-svelte/icons/ellipsis';
@@ -19,23 +17,17 @@
 
 	let { users: initialUsers }: { users: Paginated<User> } = $props();
 	let users = $state<Paginated<User>>(initialUsers);
-	let oneTimeLink = $state<string | null>(null);
-
 	$effect(() => {
 		users = initialUsers;
 	});
 
+	let oneTimeLink = $state<string | null>(null);
+
 	const userService = new UserService();
 
-	let pagination = $state<PaginationRequest>({
+	function fetchItems(search: string, page: number, limit: number) {
-		page: 1,
+		return userService.list(search, { page, limit });
-		limit: 10
+	}
-	});
-	let search = $state('');
-
-	const debouncedSearch = debounced(async (searchValue: string) => {
-		users = await userService.list(searchValue, pagination);
-	}, 400);
 
 	async function deleteUser(user: User) {
 		openConfirmDialog({
@@ -47,7 +39,7 @@
 				action: async () => {
 					try {
 						await userService.remove(user.id);
-						users = await userService.list(search, pagination);
+						users = await userService.list();
 					} catch (e) {
 						axiosErrorToast(e);
 					}
@@ -67,105 +59,51 @@
 	}
 </script>
 
-<Input
+<AdvancedTable
-	type="search"
+	items={users}
-	placeholder="Search users"
+	{fetchItems}
-	bind:value={search}
+	columns={[
-	on:input={(e) => debouncedSearch((e.target as HTMLInputElement).value)}
+		'First name',
-/>
+		'Last name',
-<Table.Root>
+		'Email',
-	<Table.Header>
+		'Username',
-		<Table.Row>
+		'Role',
-			<Table.Head class="hidden md:table-cell">First name</Table.Head>
+		{ label: 'Actions', hidden: true }
-			<Table.Head class="hidden md:table-cell">Last name</Table.Head>
+	]}
-			<Table.Head>Email</Table.Head>
+	withoutSearch
-			<Table.Head>Username</Table.Head>
+>
-			<Table.Head class="hidden lg:table-cell">Role</Table.Head>
+	{#snippet rows({ item })}
-			<Table.Head>
+		<Table.Cell>{item.firstName}</Table.Cell>
-				<span class="sr-only">Actions</span>
+		<Table.Cell>{item.lastName}</Table.Cell>
-			</Table.Head>
+		<Table.Cell>{item.email}</Table.Cell>
-		</Table.Row>
+		<Table.Cell>{item.username}</Table.Cell>
-	</Table.Header>
+		<Table.Cell class="hidden lg:table-cell">
-	<Table.Body>
+			<Badge variant="outline">{item.isAdmin ? 'Admin' : 'User'}</Badge>
-		{#if users.data.length === 0}
+		</Table.Cell>
-			<Table.Row>
+		<Table.Cell>
-				<Table.Cell colspan={6} class="text-center">No users found</Table.Cell>
+			<DropdownMenu.Root>
-			</Table.Row>
+				<DropdownMenu.Trigger asChild let:builder>
-		{:else}
+					<Button aria-haspopup="true" size="icon" variant="ghost" builders={[builder]}>
-			{#each users.data as user}
+						<Ellipsis class="h-4 w-4" />
-				<Table.Row>
+						<span class="sr-only">Toggle menu</span>
-					<Table.Cell class="hidden md:table-cell">{user.firstName}</Table.Cell>
+					</Button>
-					<Table.Cell class="hidden md:table-cell">{user.lastName}</Table.Cell>
+				</DropdownMenu.Trigger>
-					<Table.Cell>{user.email}</Table.Cell>
+				<DropdownMenu.Content align="end">
-					<Table.Cell>{user.username}</Table.Cell>
+					<DropdownMenu.Item on:click={() => createOneTimeAccessToken(item.id)}
-					<Table.Cell class="hidden lg:table-cell">
+						><LucideLink class="mr-2 h-4 w-4" />One-time link</DropdownMenu.Item
-						<Badge variant="outline">{user.isAdmin ? 'Admin' : 'User'}</Badge>
+					>
-					</Table.Cell>
+					<DropdownMenu.Item href="/settings/admin/users/{item.id}"
-					<Table.Cell>
+						><LucidePencil class="mr-2 h-4 w-4" /> Edit</DropdownMenu.Item
-						<DropdownMenu.Root>
+					>
-							<DropdownMenu.Trigger asChild let:builder>
+					<DropdownMenu.Item
-								<Button aria-haspopup="true" size="icon" variant="ghost" builders={[builder]}>
+						class="text-red-500 focus:!text-red-700"
-									<Ellipsis class="h-4 w-4" />
+						on:click={() => deleteUser(item)}
-									<span class="sr-only">Toggle menu</span>
+						><LucideTrash class="mr-2 h-4 w-4" />Delete</DropdownMenu.Item
-								</Button>
+					>
-							</DropdownMenu.Trigger>
+				</DropdownMenu.Content>
-							<DropdownMenu.Content align="end">
+			</DropdownMenu.Root>
-								<DropdownMenu.Item on:click={() => createOneTimeAccessToken(user.id)}
+		</Table.Cell>
-									><LucideLink class="mr-2 h-4 w-4" />One-time link</DropdownMenu.Item
+	{/snippet}
-								>
+</AdvancedTable>
-								<DropdownMenu.Item href="/settings/admin/users/{user.id}"
-									><LucidePencil class="mr-2 h-4 w-4" /> Edit</DropdownMenu.Item
-								>
-								<DropdownMenu.Item
-									class="text-red-500 focus:!text-red-700"
-									on:click={() => deleteUser(user)}
-									><LucideTrash class="mr-2 h-4 w-4" />Delete</DropdownMenu.Item
-								>
-							</DropdownMenu.Content>
-						</DropdownMenu.Root>
-					</Table.Cell>
-				</Table.Row>
-			{/each}
-		{/if}
-	</Table.Body>
-</Table.Root>
-
-{#if users?.data?.length ?? 0 > 0}
-	<Pagination.Root
-		class="mt-5"
-		count={users.pagination.totalItems}
-		perPage={pagination.limit}
-		onPageChange={async (p) =>
-			(users = await userService.list(search, {
-				page: p,
-				limit: pagination.limit
-			}))}
-		bind:page={users.pagination.currentPage}
-		let:pages
-		let:currentPage
-	>
-		<Pagination.Content class="flex justify-end">
-			<Pagination.Item>
-				<Pagination.PrevButton />
-			</Pagination.Item>
-			{#each pages as page (page.key)}
-				{#if page.type === 'ellipsis'}
-					<Pagination.Item>
-						<Pagination.Ellipsis />
-					</Pagination.Item>
-				{:else}
-					<Pagination.Item>
-						<Pagination.Link {page} isActive={users.pagination.currentPage === page.value}>
-							{page.value}
-						</Pagination.Link>
-					</Pagination.Item>
-				{/if}
-			{/each}
-			<Pagination.Item>
-				<Pagination.NextButton />
-			</Pagination.Item>
-		</Pagination.Content>
-	</Pagination.Root>
-{/if}
 
 <OneTimeLinkModal {oneTimeLink} />

frontend/src/routes/settings/audit-log/audit-log-list.svelte

@@ -1,20 +1,22 @@
 <script lang="ts">
+	import AdvancedTable from '$lib/components/advanced-table.svelte';
 	import { Badge } from '$lib/components/ui/badge';
-	import * as Pagination from '$lib/components/ui/pagination';
 	import * as Table from '$lib/components/ui/table';
 	import AuditLogService from '$lib/services/audit-log-service';
 	import type { AuditLog } from '$lib/types/audit-log.type';
-	import type { Paginated, PaginationRequest } from '$lib/types/pagination.type';
+	import type { Paginated } from '$lib/types/pagination.type';
 
 	let { auditLogs: initialAuditLog }: { auditLogs: Paginated<AuditLog> } = $props();
 	let auditLogs = $state<Paginated<AuditLog>>(initialAuditLog);
 
 	const auditLogService = new AuditLogService();
 
-	let pagination = $state<PaginationRequest>({
+	async function fetchItems(search: string, page: number, limit: number) {
-		page: 1,
+		return await auditLogService.list({
-		limit: 15
+			page,
-	});
+			limit
+		});
+	}
 
 	function toFriendlyEventString(event: string) {
 		const words = event.split('_');
@@ -25,73 +27,22 @@
 	}
 </script>
 
-<Table.Root>
+<AdvancedTable
-	<Table.Header class="whitespace-nowrap">
+	items={auditLogs}
-		<Table.Row>
+	{fetchItems}
-			<Table.Head>Time</Table.Head>
+	columns={['Time', 'Event', 'Approximate Location', 'IP Address', 'Device', 'Client']}
-			<Table.Head>Event</Table.Head>
+	withoutSearch
-			<Table.Head>Approximate Location</Table.Head>
+>
-			<Table.Head>IP Address</Table.Head>
+	{#snippet rows({ item })}
-			<Table.Head>Device</Table.Head>
+		<Table.Cell>{new Date(item.createdAt).toLocaleString()}</Table.Cell>
-			<Table.Head>Client</Table.Head>
+		<Table.Cell>
-		</Table.Row>
+			<Badge variant="outline">{toFriendlyEventString(item.event)}</Badge>
-	</Table.Header>
+		</Table.Cell>
-	<Table.Body class="whitespace-nowrap">
+		<Table.Cell
-		{#if auditLogs.data.length === 0}
+			>{item.city && item.country ? `${item.city}, ${item.country}` : 'Unknown'}</Table.Cell
-			<Table.Row>
+		>
-				<Table.Cell colspan={6} class="text-center">No logs found</Table.Cell>
+		<Table.Cell>{item.ipAddress}</Table.Cell>
-			</Table.Row>
+		<Table.Cell>{item.device}</Table.Cell>
-		{:else}
+		<Table.Cell>{item.data.clientName}</Table.Cell>
-			{#each auditLogs.data as auditLog}
+	{/snippet}
-				<Table.Row>
+</AdvancedTable>
-					<Table.Cell>{new Date(auditLog.createdAt).toLocaleString()}</Table.Cell>
-					<Table.Cell>
-						<Badge variant="outline">{toFriendlyEventString(auditLog.event)}</Badge>
-					</Table.Cell>
-					<Table.Cell>{auditLog.city && auditLog.country ? `${auditLog.city}, ${auditLog.country}` : 'Unknown'}</Table.Cell>
-					<Table.Cell>{auditLog.ipAddress}</Table.Cell>
-					<Table.Cell>{auditLog.device}</Table.Cell>
-					<Table.Cell>{auditLog.data.clientName}</Table.Cell>
-				</Table.Row>
-			{/each}
-		{/if}
-	</Table.Body>
-</Table.Root>
-
-{#if auditLogs?.data?.length ?? 0 > 0}
-	<Pagination.Root
-		class="mt-5"
-		count={auditLogs.pagination.totalItems}
-		perPage={pagination.limit}
-		onPageChange={async (p) =>
-			(auditLogs = await auditLogService.list({
-				page: p,
-				limit: pagination.limit
-			}))}
-		bind:page={auditLogs.pagination.currentPage}
-		let:pages
-		let:currentPage
-	>
-		<Pagination.Content class="flex justify-end">
-			<Pagination.Item>
-				<Pagination.PrevButton />
-			</Pagination.Item>
-			{#each pages as page (page.key)}
-				{#if page.type === 'ellipsis'}
-					<Pagination.Item>
-						<Pagination.Ellipsis />
-					</Pagination.Item>
-				{:else}
-					<Pagination.Item>
-						<Pagination.Link {page} isActive={auditLogs.pagination.currentPage === page.value}>
-							{page.value}
-						</Pagination.Link>
-					</Pagination.Item>
-				{/if}
-			{/each}
-			<Pagination.Item>
-				<Pagination.NextButton />
-			</Pagination.Item>
-		</Pagination.Content>
-	</Pagination.Root>
-{/if}

reverse-proxy/Caddyfile

@@ -1,4 +1,4 @@
-:80 {
+:{$CADDY_PORT:80} {
 	reverse_proxy /api/* http://localhost:{$BACKEND_PORT:8080}
 	reverse_proxy /.well-known/* http://localhost:{$BACKEND_PORT:8080}
 	reverse_proxy /* http://localhost:{$PORT:3000}

reverse-proxy/Caddyfile.trust-proxy

@@ -1,4 +1,4 @@
-:80 {
+:{$CADDY_PORT:80} {
 	reverse_proxy /api/* http://localhost:{$BACKEND_PORT:8080} {
 		trusted_proxies 0.0.0.0/0
 	}