NORY-22: add details page for identities (#37)
This commit is contained in:
Markus Thielker
GitHub
commit
9a44023b70
9 changed files with 727 additions and 19 deletions
|
|
@ -79,8 +79,8 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
|
|||
{children}
|
||||
</div>
|
||||
</SidebarInset>
|
||||
<Toaster/>
|
||||
</SidebarProvider>
|
||||
<Toaster/>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
259
dashboard/src/app/user/[id]/page.tsx
Normal file
259
dashboard/src/app/user/[id]/page.tsx
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
import React from 'react';
|
||||
import { getIdentityApi } from '@/ory/sdk/server';
|
||||
import { ErrorDisplay } from '@/components/error';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { IdentityTraitForm } from '@/components/forms/IdentityTraitForm';
|
||||
import { KratosSchema } from '@/lib/forms/identity-form';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { UAParser } from 'ua-parser-js';
|
||||
import { RecoveryIdentityAddress, VerifiableIdentityAddress } from '@ory/client';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Check, X } from 'lucide-react';
|
||||
|
||||
interface MergedAddress {
|
||||
recovery_id?: string;
|
||||
verifiable_id?: string;
|
||||
verified?: boolean;
|
||||
verified_at?: string;
|
||||
value: string;
|
||||
via: string;
|
||||
}
|
||||
|
||||
function mergeAddresses(
|
||||
recovery: RecoveryIdentityAddress[],
|
||||
verifiable: VerifiableIdentityAddress[],
|
||||
): MergedAddress[] {
|
||||
|
||||
const merged = [...recovery, ...verifiable];
|
||||
return merged.reduce((acc: MergedAddress[], curr: any) => {
|
||||
|
||||
const existingValue =
|
||||
acc.find(item => item.value && curr.value && item.value === curr.value);
|
||||
|
||||
if (!existingValue) {
|
||||
|
||||
let newEntry: MergedAddress;
|
||||
if (curr.status) {
|
||||
|
||||
// status property exists only in verifiable addresses
|
||||
// expecting verifiable address
|
||||
newEntry = {
|
||||
verifiable_id: curr.id,
|
||||
verified: curr.verified,
|
||||
verified_at: curr.verified_at,
|
||||
value: curr.value,
|
||||
via: curr.via,
|
||||
} as MergedAddress;
|
||||
|
||||
} else {
|
||||
|
||||
// expecting recovery address
|
||||
newEntry = {
|
||||
recovery_id: curr.id,
|
||||
value: curr.value,
|
||||
via: curr.via,
|
||||
} as MergedAddress;
|
||||
}
|
||||
|
||||
acc.push(newEntry);
|
||||
|
||||
} else {
|
||||
|
||||
const additionalValues = {
|
||||
recovery_id: existingValue.recovery_id,
|
||||
verifiable_id: curr.id,
|
||||
verified: curr.verified,
|
||||
verified_at: curr.verified_at,
|
||||
};
|
||||
|
||||
Object.assign(existingValue, additionalValues);
|
||||
}
|
||||
return acc;
|
||||
}, []);
|
||||
}
|
||||
|
||||
export default async function UserDetailsPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
|
||||
const identityId = (await params).id;
|
||||
|
||||
const identityApi = await getIdentityApi();
|
||||
const identity = await identityApi.getIdentity({ id: identityId })
|
||||
.then((response) => {
|
||||
console.log('identity', response.data);
|
||||
return response.data;
|
||||
})
|
||||
.catch(() => {
|
||||
console.log('Identity not found');
|
||||
});
|
||||
|
||||
const sessions = await identityApi.listIdentitySessions({ id: identityId })
|
||||
.then((response) => {
|
||||
console.log('sessions', response.data);
|
||||
return response.data;
|
||||
})
|
||||
.catch(() => {
|
||||
console.log('No sessions found');
|
||||
});
|
||||
|
||||
if (!identity) {
|
||||
return <ErrorDisplay
|
||||
title="Identity not found"
|
||||
message={`The requested identity with id ${identityId} does not exist`}/>;
|
||||
}
|
||||
|
||||
if (!identity.verifiable_addresses || !identity.verifiable_addresses[0]) {
|
||||
return <ErrorDisplay
|
||||
title="No verifiable adress"
|
||||
message="The identity you are trying to see exists but has no identifiable address"/>;
|
||||
}
|
||||
|
||||
const identitySchema = await identityApi
|
||||
.getIdentitySchema({ id: identity.schema_id })
|
||||
.then((response) => response.data as KratosSchema);
|
||||
|
||||
const addresses = mergeAddresses(
|
||||
identity.recovery_addresses ?? [],
|
||||
identity.verifiable_addresses ?? [],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-3xl font-bold leading-tight tracking-tight">{addresses[0].value}</p>
|
||||
<p className="text-lg font-light">{identity.id}</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Traits</CardTitle>
|
||||
<CardDescription>All identity properties specified in the identity schema</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<IdentityTraitForm schema={identitySchema} identity={identity}/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Addresses</CardTitle>
|
||||
<CardDescription>All linked addresses for verification and recovery</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Type</TableHead>
|
||||
<TableHead>Value</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{
|
||||
addresses.map((address) => {
|
||||
return (
|
||||
<TableRow key={address.value}>
|
||||
<TableCell>{address.value}</TableCell>
|
||||
<TableCell>{address.via}</TableCell>
|
||||
<TableCell>
|
||||
{address.verifiable_id &&
|
||||
<Badge className="m-1 space-x-1">
|
||||
<span>Verifiable</span>
|
||||
{
|
||||
address.verified ?
|
||||
<Check className="h-3 w-3"/>
|
||||
:
|
||||
<X className="h-3 w-3"/>
|
||||
}
|
||||
</Badge>
|
||||
}
|
||||
{address.recovery_id &&
|
||||
<Badge className="m-1">Recovery</Badge>
|
||||
}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Credentials</CardTitle>
|
||||
<CardDescription>All authentication mechanisms registered with this identity</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Type</TableHead>
|
||||
<TableHead>Value</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{
|
||||
Object.entries(identity.credentials!).map(([key, value]) => {
|
||||
return (
|
||||
<TableRow key={key}>
|
||||
<TableCell>{key}</TableCell>
|
||||
<TableCell>{value.identifiers![0]}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Sessions</CardTitle>
|
||||
<CardDescription>See and manage all sessions of this identity</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>OS</TableHead>
|
||||
<TableHead>Browser</TableHead>
|
||||
<TableHead>Active since</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{
|
||||
sessions ?
|
||||
sessions.map((session) => {
|
||||
|
||||
const device = session.devices![0];
|
||||
const parser = new UAParser(device.user_agent);
|
||||
const result = parser.getResult();
|
||||
|
||||
return (
|
||||
<TableRow key={session.id}>
|
||||
<TableCell className="space-x-1">
|
||||
<span>{result.os.name}</span>
|
||||
<span
|
||||
className="text-xs text-neutral-500">{result.os.version}</span>
|
||||
</TableCell>
|
||||
<TableCell className="space-x-1">
|
||||
<span>{result.browser.name}</span>
|
||||
<span
|
||||
className="text-xs text-neutral-500">{result.browser.version}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{new Date(session.authenticated_at!).toLocaleString()}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
:
|
||||
<ErrorDisplay title="No sessions" message=""/>
|
||||
}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
66
dashboard/src/app/user/action.ts
Normal file
66
dashboard/src/app/user/action.ts
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
'use server';
|
||||
|
||||
import { getIdentityApi } from '@/ory/sdk/server';
|
||||
import { revalidatePath } from 'next/cache';
|
||||
|
||||
interface IdentityIdProps {
|
||||
id: string;
|
||||
}
|
||||
|
||||
export async function deleteIdentitySessions({ id }: IdentityIdProps) {
|
||||
|
||||
const identityApi = await getIdentityApi();
|
||||
const { data } = await identityApi.deleteIdentitySessions({ id });
|
||||
|
||||
console.log('Deleted identity\'s sessions', data);
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function blockIdentity({ id }: IdentityIdProps) {
|
||||
|
||||
const identityApi = await getIdentityApi();
|
||||
const { data } = await identityApi.patchIdentity({
|
||||
id,
|
||||
jsonPatch: [
|
||||
{
|
||||
op: 'replace',
|
||||
path: '/state',
|
||||
value: 'inactive',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
console.log('Blocked identity', data);
|
||||
|
||||
revalidatePath('/user');
|
||||
}
|
||||
|
||||
export async function unblockIdentity({ id }: IdentityIdProps) {
|
||||
|
||||
const identityApi = await getIdentityApi();
|
||||
const { data } = await identityApi.patchIdentity({
|
||||
id,
|
||||
jsonPatch: [
|
||||
{
|
||||
op: 'replace',
|
||||
path: '/state',
|
||||
value: 'active',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
console.log('Unblocked identity', data);
|
||||
|
||||
revalidatePath('/user');
|
||||
}
|
||||
|
||||
export async function deleteIdentity({ id }: IdentityIdProps) {
|
||||
|
||||
const identityApi = await getIdentityApi();
|
||||
const { data } = await identityApi.deleteIdentity({ id });
|
||||
|
||||
console.log('Deleted identity', data);
|
||||
|
||||
revalidatePath('/user');
|
||||
}
|
||||
|
|
@ -3,11 +3,33 @@
|
|||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import { Identity } from '@ory/client';
|
||||
import { DataTable } from '@/components/ui/data-table';
|
||||
import { CircleCheck, CircleX } from 'lucide-react';
|
||||
import { CircleCheck, CircleX, Copy, MoreHorizontal, Trash, UserCheck, UserMinus, UserPen, UserX } from 'lucide-react';
|
||||
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { FetchIdentityPageProps } from '@/app/user/page';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import Link from 'next/link';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import { blockIdentity, deleteIdentity, deleteIdentitySessions, unblockIdentity } from '@/app/user/action';
|
||||
|
||||
interface IdentityDataTableProps {
|
||||
data: Identity[];
|
||||
|
|
@ -85,31 +107,98 @@ export function IdentityDataTable({ data, pageSize, pageToken, query, fetchIdent
|
|||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
cell: ({ row }) => {
|
||||
const identity = row.original;
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||
<span className="sr-only">Open menu</span>
|
||||
<MoreHorizontal className="h-4 w-4"/>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
||||
<DropdownMenuItem
|
||||
className="flex items-center space-x-2"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(identity.id);
|
||||
toast.success('Copied to clipboard');
|
||||
}}
|
||||
>
|
||||
<Copy className="h-4 w-4"/>
|
||||
<span>Copy identity ID</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator/>
|
||||
<Link href={`/user/${identity.id}`}>
|
||||
<DropdownMenuItem className="flex items-center space-x-2">
|
||||
<UserPen className="h-4 w-4"/>
|
||||
<span>View identity</span>
|
||||
</DropdownMenuItem>
|
||||
</Link>
|
||||
<DropdownMenuSeparator/>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setCurrentIdentity(identity);
|
||||
setIdentitySessionVisible(true);
|
||||
}}
|
||||
className="flex items-center space-x-2 text-red-500">
|
||||
<UserMinus className="h-4 w-4"/>
|
||||
<span>Delete sessions</span>
|
||||
</DropdownMenuItem>
|
||||
{
|
||||
identity.state === 'active' &&
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setCurrentIdentity(identity);
|
||||
setBlockIdentityVisible(true);
|
||||
}}
|
||||
className="flex items-center space-x-2 text-red-500">
|
||||
<UserX className="h-4 w-4"/>
|
||||
<span>Block identity</span>
|
||||
</DropdownMenuItem>
|
||||
}
|
||||
{
|
||||
identity.state === 'inactive' &&
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setCurrentIdentity(identity);
|
||||
setUnblockIdentityVisible(true);
|
||||
}}
|
||||
className="flex items-center space-x-2 text-red-500">
|
||||
<UserCheck className="h-4 w-4"/>
|
||||
<span>Unblock identity</span>
|
||||
</DropdownMenuItem>
|
||||
}
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setCurrentIdentity(identity);
|
||||
setDeleteIdentityVisible(true);
|
||||
}}
|
||||
className="flex items-center space-x-2 text-red-500">
|
||||
<Trash className="h-4 w-4"/>
|
||||
<span>Delete identity</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const [items, setItems] = useState<Identity[]>(data);
|
||||
const [nextToken, setNextToken] = useState<string | undefined>(pageToken);
|
||||
|
||||
// react on changes from ssr (query params)
|
||||
useEffect(() => {
|
||||
setItems(data);
|
||||
setNextToken(pageToken);
|
||||
}, [data, pageSize, pageToken, query]);
|
||||
|
||||
const fetchMore = async () => {
|
||||
if (!nextToken) return;
|
||||
|
||||
const response = await fetchIdentityPage({
|
||||
pageSize: pageSize,
|
||||
pageToken: nextToken,
|
||||
query: query,
|
||||
});
|
||||
|
||||
setItems([...items, ...response.data]);
|
||||
setNextToken(response.tokens.get('next') ?? undefined);
|
||||
};
|
||||
|
||||
// infinite scroll handling
|
||||
const infiniteScrollSensor = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
|
|
@ -131,9 +220,124 @@ export function IdentityDataTable({ data, pageSize, pageToken, query, fetchIdent
|
|||
};
|
||||
}, [items]);
|
||||
|
||||
const fetchMore = async () => {
|
||||
if (!nextToken) return;
|
||||
|
||||
const response = await fetchIdentityPage({
|
||||
pageSize: pageSize,
|
||||
pageToken: nextToken,
|
||||
query: query,
|
||||
});
|
||||
|
||||
setItems([...items, ...response.data]);
|
||||
setNextToken(response.tokens.get('next') ?? undefined);
|
||||
};
|
||||
|
||||
// quick actions
|
||||
const [currentIdentity, setCurrentIdentity] = useState<Identity | undefined>(undefined);
|
||||
const [identitySessionVisible, setIdentitySessionVisible] = useState(false);
|
||||
const [blockIdentityVisible, setBlockIdentityVisible] = useState(false);
|
||||
const [unblockIdentityVisible, setUnblockIdentityVisible] = useState(false);
|
||||
const [deleteIdentityVisible, setDeleteIdentityVisible] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataTable columns={columns} data={items}/>
|
||||
{
|
||||
currentIdentity && (
|
||||
<>
|
||||
{/* delete sessions dialog */}
|
||||
<AlertDialog
|
||||
open={identitySessionVisible}
|
||||
onOpenChange={(open) => setIdentitySessionVisible(open)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete sessions</AlertDialogTitle>
|
||||
<AlertDialogDescription className="grid grid-cols-1 gap-3">
|
||||
<span>Are you sure you want to delete this identity's sessions?</span>
|
||||
<span>{JSON.stringify(currentIdentity.traits, null, 4)}</span>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogAction onClick={() => deleteIdentitySessions({ id: currentIdentity.id })}>
|
||||
Invalidate sessions
|
||||
</AlertDialogAction>
|
||||
<AlertDialogCancel>
|
||||
Cancel
|
||||
</AlertDialogCancel>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* block identity dialog */}
|
||||
<AlertDialog open={blockIdentityVisible} onOpenChange={(open) => setBlockIdentityVisible(open)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Block identity</AlertDialogTitle>
|
||||
<AlertDialogDescription className="grid grid-cols-1 gap-3">
|
||||
<span>Are you sure you want to block this identity?</span>
|
||||
<span>{JSON.stringify(currentIdentity.traits, null, 4)}</span>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogAction
|
||||
onClick={() => blockIdentity({ id: currentIdentity.id })}>
|
||||
Block identity
|
||||
</AlertDialogAction>
|
||||
<AlertDialogCancel>
|
||||
Cancel
|
||||
</AlertDialogCancel>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* unblock identity dialog */}
|
||||
<AlertDialog open={unblockIdentityVisible} onOpenChange={(open) => setUnblockIdentityVisible(open)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Unblock identity</AlertDialogTitle>
|
||||
<AlertDialogDescription className="grid grid-cols-1 gap-3">
|
||||
<span>Are you sure you want to unblock this identity?</span>
|
||||
<span>{JSON.stringify(currentIdentity.traits, null, 4)}</span>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogAction
|
||||
onClick={() => unblockIdentity({ id: currentIdentity.id })}>
|
||||
Unblock identity
|
||||
</AlertDialogAction>
|
||||
<AlertDialogCancel>
|
||||
Cancel
|
||||
</AlertDialogCancel>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* delete identity dialog */}
|
||||
<AlertDialog open={deleteIdentityVisible} onOpenChange={(open) => setDeleteIdentityVisible(open)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete identity</AlertDialogTitle>
|
||||
<AlertDialogDescription className="grid grid-cols-1 gap-3">
|
||||
<span>Are you sure you want to delete this identity?</span>
|
||||
<strong className="text-yellow-500">This action can not be undone!</strong>
|
||||
<span>{JSON.stringify(currentIdentity.traits, null, 4)}</span>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogAction
|
||||
onClick={() => deleteIdentity({ id: currentIdentity.id })}>
|
||||
Delete identity
|
||||
</AlertDialogAction>
|
||||
<AlertDialogCancel>
|
||||
Cancel
|
||||
</AlertDialogCancel>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
nextToken && (
|
||||
<div className="flex w-full justify-center">
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ export default async function UserPage(
|
|||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<SearchInput queryParamKey="query" placeholder="Search"/>
|
||||
<SearchInput queryParamKey="query" placeholder="Search for identifiers (Email, Username...)"/>
|
||||
<IdentityDataTable
|
||||
data={initialFetch.data}
|
||||
pageSize={pageSize}
|
||||
|
|
|
|||
13
dashboard/src/components/error.tsx
Normal file
13
dashboard/src/components/error.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
interface ErrorDisplayProps {
|
||||
title: string;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export async function ErrorDisplay({ title, message }: ErrorDisplayProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<p className="text-3xl font-bold leading-tight tracking-tight">{title}</p>
|
||||
<p className="text-lg font-light">{message}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
82
dashboard/src/components/forms/IdentityTraitForm.tsx
Normal file
82
dashboard/src/components/forms/IdentityTraitForm.tsx
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
'use client';
|
||||
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel } from '@/components/ui/form';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { generateZodSchema, KratosSchema, KratosSchemaProperties } from '@/lib/forms/identity-form';
|
||||
import { useForm, UseFormReturn } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { toast } from 'sonner';
|
||||
import { Identity } from '@ory/client';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
|
||||
interface IdentityTraitFormProps {
|
||||
schema: KratosSchema;
|
||||
identity: Identity;
|
||||
}
|
||||
|
||||
function renderUiNodes(form: UseFormReturn, properties: KratosSchemaProperties, prefix?: string): any {
|
||||
|
||||
let keyPrefix = prefix ? prefix + '.' : '';
|
||||
|
||||
return Object.entries(properties).map(([key, value]) => {
|
||||
if (value.type === 'object') {
|
||||
return renderUiNodes(form, value.properties!, key);
|
||||
} else if (value.type === 'boolean') {
|
||||
return (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={keyPrefix + key}
|
||||
key={key}
|
||||
className="space-y-0"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center space-x-2 space-y-0">
|
||||
<Checkbox {...field} checked={field.value}/>
|
||||
<FormLabel>{value.title}</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={keyPrefix + key}
|
||||
key={key}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{value.title}</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder={value.title} readOnly {...field} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
export function IdentityTraitForm({ schema, identity }: IdentityTraitFormProps) {
|
||||
|
||||
const zodIdentitySchema = generateZodSchema(schema);
|
||||
const form = useForm<z.infer<typeof zodIdentitySchema>>({
|
||||
defaultValues: identity.traits,
|
||||
resolver: zodResolver(zodIdentitySchema),
|
||||
});
|
||||
|
||||
function onSubmit(values: z.infer<typeof zodIdentitySchema>) {
|
||||
toast.message(JSON.stringify(values, null, 4));
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={onSubmit} className="grid grid-cols-1 gap-4">
|
||||
{
|
||||
renderUiNodes(form, schema.properties.traits.properties)
|
||||
}
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import { cn } from '@/lib/utils';
|
|||
import { RefObject } from 'react';
|
||||
|
||||
export const Spinner = (
|
||||
{ className, ref }: { className?: string, ref: RefObject<any> },
|
||||
{ className, ref }: { className?: string, ref?: RefObject<any> },
|
||||
) => <svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
|
|
|
|||
84
dashboard/src/lib/forms/identity-form.ts
Normal file
84
dashboard/src/lib/forms/identity-form.ts
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import { z } from 'zod';
|
||||
|
||||
// interface for a list of properties
|
||||
export interface KratosSchemaProperties {
|
||||
[key: string]: {
|
||||
type: string;
|
||||
format?: string;
|
||||
title: string;
|
||||
minLength?: number;
|
||||
maxLength?: number;
|
||||
minimum?: number;
|
||||
maximum?: number;
|
||||
required?: boolean;
|
||||
description?: string;
|
||||
properties?: KratosSchemaProperties
|
||||
};
|
||||
}
|
||||
|
||||
// interface for the kratos identity schema
|
||||
export interface KratosSchema {
|
||||
$id: string;
|
||||
$schema: string;
|
||||
title: string;
|
||||
type: 'object';
|
||||
properties: {
|
||||
traits: {
|
||||
type: 'object';
|
||||
properties: KratosSchemaProperties;
|
||||
required: string[];
|
||||
additionalProperties: boolean;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export function generateZodSchema(properties: KratosSchemaProperties) {
|
||||
|
||||
const zodSchema = z.object({});
|
||||
|
||||
for (const [key, value] of Object.entries(properties)) {
|
||||
let zodType;
|
||||
switch (value.type) {
|
||||
case 'string':
|
||||
zodType = z.string();
|
||||
if (value.format === 'email') {
|
||||
zodType = z.string().email();
|
||||
}
|
||||
if (value.minLength) {
|
||||
zodType = zodType.min(value.minLength);
|
||||
}
|
||||
if (value.maxLength) {
|
||||
zodType = zodType.max(value.maxLength);
|
||||
}
|
||||
break;
|
||||
case 'integer':
|
||||
case 'number':
|
||||
zodType = z.number();
|
||||
if (value.minimum) {
|
||||
zodType = zodType.min(value.minimum);
|
||||
}
|
||||
if (value.maximum) {
|
||||
zodType = zodType.max(value.maximum);
|
||||
}
|
||||
break;
|
||||
case 'boolean':
|
||||
zodType = z.boolean();
|
||||
break;
|
||||
case 'object':
|
||||
const schemaCopy = structuredClone(schema);
|
||||
schemaCopy.properties.traits.properties = value.properties!;
|
||||
zodType = generateZodSchema(schemaCopy);
|
||||
break;
|
||||
default:
|
||||
zodType = z.any();
|
||||
}
|
||||
|
||||
if (!value.required) {
|
||||
zodType = zodType.nullable();
|
||||
}
|
||||
|
||||
zodSchema.extend({ [key]: zodType });
|
||||
}
|
||||
|
||||
return zodSchema;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue