259 lines
11 KiB
TypeScript
259 lines
11 KiB
TypeScript
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>
|
|
);
|
|
}
|