diff --git a/dashboard/src/app/user/page.tsx b/dashboard/src/app/user/page.tsx
index e0cb1e5..dd7417e 100644
--- a/dashboard/src/app/user/page.tsx
+++ b/dashboard/src/app/user/page.tsx
@@ -2,12 +2,25 @@ import React, { Suspense } from 'react';
import { DataTableFallback } from '@/components/ui/data-table-fallback';
import { IdentityDataTable } from '@/app/user/data-table';
import { getIdentityApi } from '@/ory/sdk/server';
+import { SearchInput } from '@/components/search-input';
-export default async function UserPage() {
+export default async function UserPage(
+ {
+ searchParams,
+ }: {
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+ },
+) {
const identityApi = await getIdentityApi();
- const { data } = await identityApi.listIdentities();
+ const params = await searchParams;
+ const query = params.query ? params.query as string : '';
+
+ const data = await identityApi.listIdentities({
+ pageSize: 100,
+ previewCredentialsIdentifierSimilar: query,
+ }).then(response => response.data);
return (
@@ -16,10 +29,12 @@ export default async function UserPage() {
See and manage all identities registered with your Ory Kratos
instance
-
- }>
-
-
+
+
+ }>
+
+
+
);
}
diff --git a/dashboard/src/components/search-input.tsx b/dashboard/src/components/search-input.tsx
new file mode 100644
index 0000000..fa6be17
--- /dev/null
+++ b/dashboard/src/components/search-input.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import { Input } from '@/components/ui/input';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { ChangeEvent, HTMLInputTypeAttribute } from 'react';
+
+interface SearchInputProps {
+ placeholder: string;
+ queryParamKey: string;
+ type?: HTMLInputTypeAttribute;
+ className?: string;
+}
+
+export function SearchInput({ placeholder, queryParamKey, type, className }: SearchInputProps) {
+
+ const router = useRouter();
+ const params = useSearchParams();
+
+ const onSearchChange = (event: ChangeEvent) => {
+
+ const value = event.target.value;
+ const newParams = new URLSearchParams(params.toString());
+
+ if (value.length < 1) {
+ newParams.delete(queryParamKey);
+ } else {
+ newParams.set(queryParamKey, value);
+ }
+
+ router.replace('?' + newParams.toString());
+ };
+
+ return (
+
+ );
+}