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 {
+import { BaseKey, useGetIdentity, useUpdate, useUpdatePassword } from "@refinedev/core";
-  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 {
+import { ManagementCard, ManagementCardAvatar, ManagementCardContent, ManagementCardFooter, ManagementCardTitle } from "~/components/management-card";
-  ManagementCard,
-  ManagementCardAvatar,
-  ManagementCardContent,
-  ManagementCardFooter,
-  ManagementCardTitle,
-} from "~/components/management-card";
 import { Button } from "~/components/ui/button";
 import {
   Dialog,
@@ -62,12 +51,10 @@ export default function MyAccount() {
         <ManagementCard>
           <ManagementCardTitle>Email Address</ManagementCardTitle>
           <ManagementCardContent className="text-ring font-semibold">
-            {identity?.email}
+          {identity?.email}
           </ManagementCardContent>
           <ManagementCardFooter>
-            <Button
+            <Button className="h-12 gap-x-2" onClick={() => setModal({ ...openModal, changeEmail: true })}>
-              className="h-12 gap-x-2"
-              onClick={() => setModal({ ...openModal, changeEmail: true })}>
               <AddIcon />
               Change Email Address
             </Button>
@@ -76,8 +63,8 @@ export default function MyAccount() {
         <ManagementCard>
           <ManagementCardTitle>Account Type</ManagementCardTitle>
           <ManagementCardContent className="text-ring font-semibold flex gap-x-2">
-            Lite Premium Account
+          Lite Premium Account
-            <CrownIcon />
+          <CrownIcon />
           </ManagementCardContent>
           <ManagementCardFooter>
             <Button className="h-12 gap-x-2">
@@ -95,9 +82,7 @@ export default function MyAccount() {
             <PasswordDots className="mt-6" />
           </ManagementCardContent>
           <ManagementCardFooter>
-            <Button
+            <Button className="h-12 gap-x-2" onClick={() => setModal({ ...openModal, changePassword: true })}>
-              className="h-12 gap-x-2"
-              onClick={() => setModal({ ...openModal, changePassword: true })}>
               <AddIcon />
               Change Password
             </Button>
@@ -106,27 +91,35 @@ export default function MyAccount() {
         <ManagementCard>
           <ManagementCardTitle>Two-Factor Authentication</ManagementCardTitle>
           <ManagementCardContent>
-            Improve security by enabling 2FA.
+          Improve security by enabling 2FA.
           </ManagementCardContent>
           <ManagementCardFooter>
-            <Button
+            <Button className="h-12 gap-x-2" onClick={() => setModal({ ...openModal, setupTwoFactor: true })}>
-              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>
+          <ManagementCardContent>Get 1 GB per friend invited for free (max 5 GB).</ManagementCardContent>
-            Get 1 GB per friend invited for free (max 5 GB).
-          </ManagementCardContent>
           <ManagementCardFooter>
-            <Button variant="accent" className="h-12 gap-x-2">
+          <Button variant="accent" className="h-12 gap-x-2">
               <AddIcon />
               Send Invitation
             </Button>
@@ -134,9 +127,7 @@ export default function MyAccount() {
         </ManagementCard>
         <ManagementCard>
           <ManagementCardTitle>Read our Resources</ManagementCardTitle>
-          <ManagementCardContent>
+          <ManagementCardContent>Navigate helpful articles or get assistance.</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>
+          <ManagementCardContent>Once initiated, this action cannot be undone.</ManagementCardContent>
-            Once initiated, this action cannot be undone.
-          </ManagementCardContent>
           <ManagementCardFooter>
             <Button className="h-12 gap-x-2" variant="destructive">
               <AddIcon />
@@ -181,22 +170,21 @@ export default function MyAccount() {
   );
 }
 
-const ChangeEmailSchema = z
+const ChangeEmailSchema = z.object({
-  .object({
+  email: z.string().email(),
-    email: z.string().email(),
+  password: z.string(),
-    password: z.string(),
+  retypePassword: z.string(),
-    retypePassword: z.string(),
+})
-  })
+.superRefine((data, ctx) => {
-  .superRefine((data, ctx) => {
+  if (data.password !== data.retypePassword) {
-    if (data.password !== data.retypePassword) {
+    return ctx.addIssue({
-      return ctx.addIssue({
+      code: z.ZodIssueCode.custom,
-        code: z.ZodIssueCode.custom,
+      path: ["retypePassword"],
-        path: ["retypePassword"],
+      message: "Passwords do not match",
-        message: "Passwords do not match",
+    });
-      });
+  }
-    }
+  return true;
-    return true;
+});
-  });
 
 const ChangeEmailForm = ({
   open,
@@ -207,7 +195,7 @@ const ChangeEmailForm = ({
   setOpen: (value: boolean) => void;
   currentValue: string;
 }) => {
-  const { data: identity } = useGetIdentity<{ id: BaseKey }>();
+  const{ data: identity } = useGetIdentity<{ id: BaseKey }>();
   const { mutate: updateEmail } = useUpdate();
   const [form, fields] = useForm({
     id: "login",
@@ -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,22 +255,21 @@ const ChangeEmailForm = ({
   );
 };
 
-const ChangePasswordSchema = z
+const ChangePasswordSchema = z.object({
-  .object({
+  currentPassword: z.string().email(),
-    currentPassword: z.string().email(),
+  newPassword: z.string(),
-    newPassword: z.string(),
+  retypePassword: z.string(),
-    retypePassword: z.string(),
+})
-  })
+.superRefine((data, ctx) => {
-  .superRefine((data, ctx) => {
+  if (data.newPassword !== data.retypePassword) {
-    if (data.newPassword !== data.retypePassword) {
+    return ctx.addIssue({
-      return ctx.addIssue({
+      code: z.ZodIssueCode.custom,
-        code: z.ZodIssueCode.custom,
+      path: ["retypePassword"],
-        path: ["retypePassword"],
+      message: "Passwords do not match",
-        message: "Passwords do not match",
+    });
-      });
+  }
-    }
+  return true;
-    return true;
+});
-  });
 
 const ChangePasswordForm = ({
   open,
@@ -303,10 +290,11 @@ const ChangePasswordForm = ({
       e.preventDefault();
 
       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"
@@ -427,4 +414,4 @@ const PasswordDots = ({ className }: { className?: string }) => {
       <circle cx="215.5" cy="3.5" r="3.5" fill="currentColor" />
     </svg>
   );
-};
+};