From e1ee4bda436cad47b9072ac1589d34da703b20f2 Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Fri, 3 Jan 2025 22:03:29 +0100
Subject: [PATCH] NORY-47: move identity credentials to client component

This also adds the possibility to delete identity credentials
---
 dashboard/src/app/(inside)/user/[id]/page.tsx | 22 +------
 .../identity/identity-credentials.tsx         | 61 +++++++++++++++++++
 2 files changed, 63 insertions(+), 20 deletions(-)
 create mode 100644 dashboard/src/components/identity/identity-credentials.tsx

diff --git a/dashboard/src/app/(inside)/user/[id]/page.tsx b/dashboard/src/app/(inside)/user/[id]/page.tsx
index 410d262..ad4eb12 100644
--- a/dashboard/src/app/(inside)/user/[id]/page.tsx
+++ b/dashboard/src/app/(inside)/user/[id]/page.tsx
@@ -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>
diff --git a/dashboard/src/components/identity/identity-credentials.tsx b/dashboard/src/components/identity/identity-credentials.tsx
new file mode 100644
index 0000000..3cb06da
--- /dev/null
+++ b/dashboard/src/components/identity/identity-credentials.tsx
@@ -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>
+    );
+}
\ No newline at end of file