From eeb7666f0b2dbf7d80170de76ff17a3b2308a6ab Mon Sep 17 00:00:00 2001
From: Nimish <85357445+nimish-ks@users.noreply.github.com>
Date: Wed, 22 Jan 2025 12:42:05 +0530
Subject: [PATCH] feat: improved recovery kit ux (#434)

* feat: track recovery kit unlocking, improved exception handling

* feat: add a spinner on the unlock button

* feat: changed button label to View recovery kit
---
 .../settings/account/ViewRecoveryDialog.tsx   | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/frontend/components/settings/account/ViewRecoveryDialog.tsx b/frontend/components/settings/account/ViewRecoveryDialog.tsx
index 110a8bcd1..9d901f3f9 100644
--- a/frontend/components/settings/account/ViewRecoveryDialog.tsx
+++ b/frontend/components/settings/account/ViewRecoveryDialog.tsx
@@ -19,14 +19,27 @@ export const ViewRecoveryDialog = () => {
   const [password, setPassword] = useState<string>('')
   const [showPw, setShowPw] = useState<boolean>(false)
   const [recovery, setRecovery] = useState<string>('')
+  const [isUnlocking, setIsUnlocking] = useState<boolean>(false)
 
   const handleDecryptRecovery = async (event: { preventDefault: () => void }) => {
     event.preventDefault()
-
-    const deviceKey = await deviceVaultKey(password, session?.user?.email!)
-
-    const decryptedRecovery = await decryptAccountRecovery(activeOrganisation?.recovery!, deviceKey)
-    setRecovery(decryptedRecovery)
+    setIsUnlocking(true)
+
+    try {
+      // Add small delay to ensure loading state is visible for UX reasons
+      await new Promise(resolve => setTimeout(resolve, 100))
+      
+      const deviceKey = await deviceVaultKey(password, session?.user?.email!)
+
+      const decryptedRecovery = await decryptAccountRecovery(activeOrganisation?.recovery!, deviceKey)
+      setRecovery(decryptedRecovery)
+    } catch (error) {
+      toast.error("Invalid sudo password. Please check your password and try again.", {
+        autoClose: 2000,
+      })
+    } finally {
+      setIsUnlocking(false)
+    }
   }
 
   const reset = () => {
@@ -82,7 +95,7 @@ export const ViewRecoveryDialog = () => {
         </Alert>
         <div>
           <Button variant="primary" onClick={openModal} title="View recovery">
-            <FaEye /> View recovery info
+            <FaEye /> View recovery kit
           </Button>
         </div>
       </div>
@@ -170,7 +183,7 @@ export const ViewRecoveryDialog = () => {
                             </div>
                           </div>
                           <div>
-                            <Button type="submit" variant="primary">
+                            <Button type="submit" variant="primary" isLoading={isUnlocking}>
                               Unlock
                             </Button>
                           </div>