fix: remove the backup key card from my account

app/data/pinning.ts

@@ -0,0 +1,55 @@
+interface PinningStatus {
+    id: string;
+    progress: number;
+    status: 'inprogress' | 'completed' | 'stale';
+}
+
+// biome-ignore lint/complexity/noStaticOnlyClass: <explanation>
+class PinningProcess {
+    private static instances: Map<string, PinningStatus> = new Map();
+
+    static async pin(id: string): Promise<{ success: boolean; message: string }> {
+        if (PinningProcess.instances.has(id)) {
+            return { success: false, message: "ID is already being processed" };
+        }
+
+        const pinningStatus: PinningStatus = { id, progress: 0, status: 'inprogress' };
+        PinningProcess.instances.set(id, pinningStatus);
+
+        // Simulate async progress
+        (async () => {
+            for (let progress = 1; progress <= 100; progress++) {
+                await new Promise(resolve => setTimeout(resolve, Math.floor(Math.random() * (500 - 100 + 1)) + 100)); // Simulate time passing with random duration between 100 and 500
+                pinningStatus.progress = progress;
+                if (progress === 100) {
+                    pinningStatus.status = 'completed';
+                }
+            }
+        })();
+
+        return { success: true, message: "Pinning process started" };
+    }
+
+    static *pollProgress(id: string): Generator<PinningStatus | null, void, unknown> {
+        let status = PinningProcess.instances.get(id);
+        while (status && status.status !== 'completed') {
+            yield status;
+            status = PinningProcess.instances.get(id);
+        }
+        yield status ?? null; // Yield the final status, could be null if ID doesn't exist
+    }
+}
+
+// Example usage:
+// (async () => {
+//     const { success, message } = await PinningProcess.pin("123");
+//     console.log(message);
+//     if (success) {
+//         const progressGenerator = PinningProcess.pollProgress("123");
+//         let result = progressGenerator.next();
+//         while (!result.done) {
+//             console.log(result.value); // Log the progress
+//             result = progressGenerator.next();
+//         }
+//     }
+// })();

app/routes/account.tsx

@@ -1,12 +1,23 @@
 import { getFormProps, useForm } from "@conform-to/react";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
-import { BaseKey, useGetIdentity, useUpdate, useUpdatePassword } from "@refinedev/core";
+import {
+  BaseKey,
+  useGetIdentity,
+  useUpdate,
+  useUpdatePassword,
+} from "@refinedev/core";
 import { useState } from "react";
 import { z } from "zod";
 import { Field } from "~/components/forms";
 import { GeneralLayout } from "~/components/general-layout";
 import { AddIcon, CloudIcon, CrownIcon } from "~/components/icons";
-import { ManagementCard, ManagementCardAvatar, ManagementCardContent, ManagementCardFooter, ManagementCardTitle } from "~/components/management-card";
+import {
+  ManagementCard,
+  ManagementCardAvatar,
+  ManagementCardContent,
+  ManagementCardFooter,
+  ManagementCardTitle,
+} from "~/components/management-card";
 import { Button } from "~/components/ui/button";
 import {
   Dialog,
@@ -54,7 +65,9 @@ export default function MyAccount() {
             {identity?.email}
           </ManagementCardContent>
           <ManagementCardFooter>
-            <Button className="h-12 gap-x-2" onClick={() => setModal({ ...openModal, changeEmail: true })}>
+            <Button
+              className="h-12 gap-x-2"
+              onClick={() => setModal({ ...openModal, changeEmail: true })}>
               <AddIcon />
               Change Email Address
             </Button>
@@ -82,7 +95,9 @@ export default function MyAccount() {
             <PasswordDots className="mt-6" />
           </ManagementCardContent>
           <ManagementCardFooter>
-            <Button className="h-12 gap-x-2" onClick={() => setModal({ ...openModal, changePassword: true })}>
+            <Button
+              className="h-12 gap-x-2"
+              onClick={() => setModal({ ...openModal, changePassword: true })}>
               <AddIcon />
               Change Password
             </Button>
@@ -94,30 +109,22 @@ export default function MyAccount() {
             Improve security by enabling 2FA.
           </ManagementCardContent>
           <ManagementCardFooter>
-            <Button className="h-12 gap-x-2" onClick={() => setModal({ ...openModal, setupTwoFactor: true })}>
+            <Button
+              className="h-12 gap-x-2"
+              onClick={() => setModal({ ...openModal, setupTwoFactor: true })}>
               <AddIcon />
               Enable Two-Factor Authorization
             </Button>
           </ManagementCardFooter>
         </ManagementCard>
-        <ManagementCard>
-          <ManagementCardTitle>Backup Key</ManagementCardTitle>
-          <ManagementCardContent>
-          Never share this code with anyone.
-          </ManagementCardContent>
-          <ManagementCardFooter>
-            <Button className="h-12 gap-x-2">
-              <AddIcon />
-              Export Backup Key
-            </Button>
-          </ManagementCardFooter>
-        </ManagementCard>
       </div>
       <h2 className="font-bold my-8">More</h2>
       <div className="grid grid-cols-3 gap-x-8">
         <ManagementCard variant="accent">
           <ManagementCardTitle>Invite a Friend</ManagementCardTitle>
-          <ManagementCardContent>Get 1 GB per friend invited for free (max 5 GB).</ManagementCardContent>
+          <ManagementCardContent>
+            Get 1 GB per friend invited for free (max 5 GB).
+          </ManagementCardContent>
           <ManagementCardFooter>
             <Button variant="accent" className="h-12 gap-x-2">
               <AddIcon />
@@ -127,7 +134,9 @@ export default function MyAccount() {
         </ManagementCard>
         <ManagementCard>
           <ManagementCardTitle>Read our Resources</ManagementCardTitle>
-          <ManagementCardContent>Navigate helpful articles or get assistance.</ManagementCardContent>
+          <ManagementCardContent>
+            Navigate helpful articles or get assistance.
+          </ManagementCardContent>
           <ManagementCardFooter>
             <Button className="h-12 gap-x-2">
               <AddIcon />
@@ -137,7 +146,9 @@ export default function MyAccount() {
         </ManagementCard>
         <ManagementCard>
           <ManagementCardTitle>Delete Account</ManagementCardTitle>
-          <ManagementCardContent>Once initiated, this action cannot be undone.</ManagementCardContent>
+          <ManagementCardContent>
+            Once initiated, this action cannot be undone.
+          </ManagementCardContent>
           <ManagementCardFooter>
             <Button className="h-12 gap-x-2" variant="destructive">
               <AddIcon />
@@ -170,7 +181,8 @@ export default function MyAccount() {
   );
 }
 
-const ChangeEmailSchema = z.object({
+const ChangeEmailSchema = z
+  .object({
     email: z.string().email(),
     password: z.string(),
     retypePassword: z.string(),
@@ -210,13 +222,13 @@ const ChangeEmailForm = ({
       const data = Object.fromEntries(new FormData(e.currentTarget).entries());
       console.log(identity);
       updateEmail({
-        resource: 'users',
+        resource: "users",
         id: identity?.id || "",
         values: {
-          email: data.email.toString()
+          email: data.email.toString(),
-        }
+        },
-      })
+      });
-    }
+    },
   });
 
   return (
@@ -255,7 +267,8 @@ const ChangeEmailForm = ({
   );
 };
 
-const ChangePasswordSchema = z.object({
+const ChangePasswordSchema = z
+  .object({
     currentPassword: z.string().email(),
     newPassword: z.string(),
     retypePassword: z.string(),
@@ -292,9 +305,8 @@ const ChangePasswordForm = ({
       const data = Object.fromEntries(new FormData(e.currentTarget).entries());
 
       updatePassword({
-        password: data.newPassword.toString()
+        password: data.newPassword.toString(),
       });
-
     },
   });
 
@@ -390,6 +402,7 @@ const SetupTwoFactorDialog = ({
 const PasswordDots = ({ className }: { className?: string }) => {
   return (
     <svg
+      aria-hidden="true"
       width="219"
       height="7"
       viewBox="0 0 219 7"