app/data/pinning.ts

@@ -1,55 +0,0 @@
-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,23 +1,12 @@
 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,
@@ -65,9 +54,7 @@ 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>
@@ -95,9 +82,7 @@ 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>
@@ -109,22 +94,30 @@ 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 />
@@ -134,9 +127,7 @@ 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 />
@@ -146,9 +137,7 @@ 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 />
@@ -181,8 +170,7 @@ export default function MyAccount() {
   );
 }
 
-const ChangeEmailSchema = z
-  .object({
+const ChangeEmailSchema = z.object({
   email: z.string().email(),
   password: z.string(),
   retypePassword: z.string(),
@@ -222,13 +210,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 (
@@ -267,8 +255,7 @@ const ChangeEmailForm = ({
   );
 };
 
-const ChangePasswordSchema = z
-  .object({
+const ChangePasswordSchema = z.object({
   currentPassword: z.string().email(),
   newPassword: z.string(),
   retypePassword: z.string(),
@@ -305,8 +292,9 @@ const ChangePasswordForm = ({
       const data = Object.fromEntries(new FormData(e.currentTarget).entries());
       
       updatePassword({
-        password: data.newPassword.toString(),
+        password: data.newPassword.toString()
       });
+
     },
   });
 
@@ -402,7 +390,6 @@ const SetupTwoFactorDialog = ({
 const PasswordDots = ({ className }: { className?: string }) => {
   return (
     <svg
-      aria-hidden="true"
       width="219"
       height="7"
       viewBox="0 0 219 7"