From afab5645c2c227de2923abd9ad2a17cec9081e43 Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Fri, 3 Jan 2025 22:52:45 +0100
Subject: [PATCH] NORY-47: add dialog to show recovery information

---
 .../components/identity/identity-actions.tsx  | 96 +++++++++++++++++--
 1 file changed, 89 insertions(+), 7 deletions(-)

diff --git a/dashboard/src/components/identity/identity-actions.tsx b/dashboard/src/components/identity/identity-actions.tsx
index 6ecaa8b..0ddcf32 100644
--- a/dashboard/src/components/identity/identity-actions.tsx
+++ b/dashboard/src/components/identity/identity-actions.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { Identity } from '@ory/client';
-import { Button } from '@/components/ui/button';
-import { Key, Link, Trash, UserCheck, UserMinus, UserX } from 'lucide-react';
+import { Button, buttonVariants } from '@/components/ui/button';
+import { Copy, Key, Link, Trash, UserCheck, UserMinus, UserX } from 'lucide-react';
 import { ConfirmationDialogWrapper } from '@/components/confirmation-dialog-wrapper';
 import {
     blockIdentity,
@@ -14,6 +14,18 @@ import {
 } from '@/lib/action/identity';
 import { toast } from 'sonner';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 
 interface IdentityActionProps {
     identity: Identity;
@@ -24,14 +36,84 @@ export function IdentityActions({ identity }: IdentityActionProps,
 
     const router = useRouter();
 
+    const [dialogVisible, setDialogVisible] = useState(false);
+    const [dialogLink, setDialogLink] = useState<string>('');
+    const [dialogCode, setDialogCode] = useState<string | undefined>(undefined);
+
     return (
         <>
+            <AlertDialog open={dialogVisible} onOpenChange={(value) => setDialogVisible(value)}>
+                <AlertDialogContent className="space-y-1">
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>Recovery account</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            You created a recovery flow. Provide the user with the following information so they can
+                            access their account again.
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <div>
+                        <Label>Link</Label>
+                        <div className="flex relative">
+                            <Input value={dialogLink} readOnly/>
+                            <Button
+                                className="absolute right-0"
+                                variant="outline"
+                                onClick={() => {
+                                    toast.info('Link copied to clipboard');
+                                    navigator.clipboard.writeText(dialogLink);
+                                }}
+                            >
+                                <Copy/>
+                            </Button>
+                        </div>
+                        <p className="mt-1 text-xs text-neutral-500">
+                            {
+                                dialogCode ?
+                                    'The user will need this link to access the recovery flow.'
+                                    :
+                                    'This magic link will authenticate the user automatically'
+                            }
+                        </p>
+                    </div>
+                    {
+                        dialogCode ?
+                            <div>
+                                <Label>Code</Label>
+                                <div className="flex relative">
+                                    <Input value={dialogCode} readOnly/>
+                                    <Button
+                                        className="absolute right-0"
+                                        variant="outline"
+                                        onClick={() => {
+                                            toast.info('Code copied to clipboard');
+                                            navigator.clipboard.writeText(dialogCode);
+                                        }}
+                                    >
+                                        <Copy/>
+                                    </Button>
+                                </div>
+                                <p className="mt-1 text-xs text-neutral-500">
+                                    The user will need to enter this code on the recovery page.
+                                </p>
+                            </div>
+                            :
+                            <></>
+                    }
+                    <AlertDialogFooter>
+                        <AlertDialogAction className={buttonVariants({ variant: 'destructive' })}>
+                            Close
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+
             <ConfirmationDialogWrapper
                 onSubmit={async () => {
                     await createRecoveryCode(identity.id)
                         .then((response) => {
-                            console.log('recovery code created', response);
-                            toast.success(response.recovery_code);
+                            setDialogLink(response.recovery_link);
+                            setDialogCode(response.recovery_code);
+                            setDialogVisible(true);
                         })
                         .catch(() => toast.error('Creating recovery code failed'));
                 }}
@@ -49,8 +131,9 @@ export function IdentityActions({ identity }: IdentityActionProps,
                 onSubmit={async () => {
                     await createRecoveryLink(identity.id)
                         .then((response) => {
-                            console.log('recovery link created', response);
-                            toast.success(response.recovery_link);
+                            setDialogLink(response.recovery_link);
+                            setDialogCode(undefined);
+                            setDialogVisible(true);
                         })
                         .catch(() => toast.error('Creating recovery link failed. It is likely magic-links are disabled on your Ory Kratos instance.'));
                 }}
@@ -135,7 +218,6 @@ export function IdentityActions({ identity }: IdentityActionProps,
                     <Trash className="h-4"/>
                 </Button>
             </ConfirmationDialogWrapper>
-
         </>
     );
 }
\ No newline at end of file