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

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>