markus/next-ory
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases 1 Packages Wiki Activity Actions

NORY-47: move identity credentials to client component

Browse source 
This also adds the possibility to delete identity credentials
This commit is contained in:
Markus Thielker 2025-01-03 22:03:29 +01:00
parent e83041f8ac
commit e1ee4bda43
No known key found for this signature in database
2 changed files with 63 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
dashboard/src/app/(inside)/user/[id]/page.tsx
View file

@ -10,6 +10,7 @@ import { RecoveryIdentityAddress, VerifiableIdentityAddress } from '@ory/client'
import { Badge } from '@/components/ui/badge';
import { Check, X } from 'lucide-react';
import { IdentityActions } from '@/components/identity/identity-actions';
import { IdentityCredentials } from '@/components/identity/identity-credentials';
interface MergedAddress {
recovery_id?: string;
@ -190,26 +191,7 @@ export default async function UserDetailsPage({ params }: { params: Promise<{ id
<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>
<IdentityCredentials identity={identity}/>
</CardContent>
</Card>
<Card>

61
dashboard/src/components/identity/identity-credentials.tsx Normal file
View file

@ -0,0 +1,61 @@
'use client';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { ConfirmationDialogWrapper } from '@/components/confirmation-dialog-wrapper';
import { deleteIdentityCredential } from '@/app/(inside)/user/action';
import { Button } from '@/components/ui/button';
import { Trash } from 'lucide-react';
import { DeleteIdentityCredentialsTypeEnum, Identity } from '@ory/client';
import { toast } from 'sonner';
interface IdentityCredentialsProps {
identity: Identity;
}
export function IdentityCredentials({ identity }: IdentityCredentialsProps) {
return (
<Table>
<TableHeader>
<TableRow>
<TableHead>Type</TableHead>
<TableHead>Value</TableHead>
<TableHead></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{
Object.entries(identity.credentials!).map(([key, value]) => {
return (
<TableRow key={key}>
<TableCell>{key}</TableCell>
<TableCell>{value.identifiers![0]}</TableCell>
<TableCell>
{
Object.values(DeleteIdentityCredentialsTypeEnum).includes(key as DeleteIdentityCredentialsTypeEnum) &&
key !== 'password' && key !== 'code' &&
(
<ConfirmationDialogWrapper
onSubmit={async () => {
deleteIdentityCredential({ id: identity.id, type: key as never })
.then(() => toast.success(`Credential ${key} deleted`))
.catch(() => toast.error(`Deleting credential ${key} failed`));
}}
dialogTitle="Delete credential"
dialogDescription={`Are you sure you want to remove the credential of type ${key} from this identity?`}
dialogButtonSubmit={`Delete ${key}`}
dialogButtonSubmitProps={{ variant: 'destructive' }}>
<Button size="icon" variant="outline">
<Trash className="h-4"/>
</Button>
</ConfirmationDialogWrapper>
)
}
</TableCell>
</TableRow>
);
})
}
</TableBody>
</Table>
);
}