fix: passkey flow related issues

nextjs/src/features/passkey/AddPasskey.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { Alert, AlertDescription } from '@/components/ui/alert'
 import { AxiosError, AxiosResponse } from 'axios'
 import {
   IDeviceData,
@@ -285,17 +284,32 @@ const AddPasskey = ({
                     <h1 className="text-xl font-medium text-gray-500 dark:text-white">
                       Add Passkey
                     </h1>
-                    <p className="mt-2 text-start text-sm font-normal text-gray-700 dark:text-white">
+                    <p className="mt-2 mb-2 text-start text-sm font-normal text-gray-700 dark:text-white">
                       With Passkey, no complex passwords to remember.
                     </p>
                   </div>
 
-                  {(editSuccess || editFailure) && (
-                    <Alert variant={editSuccess ? 'default' : 'destructive'}>
-                      <AlertDescription>
-                        {editSuccess || editFailure}
-                      </AlertDescription>
-                    </Alert>
+                  {editSuccess && (
+                    <div className="w-full" role="alert">
+                      <AlertComponent
+                        message={editSuccess}
+                        type="success"
+                        onAlertClose={() => {
+                          setEditSuccess(null)
+                        }}
+                      />
+                    </div>
+                  )}
+                  {editFailure && (
+                    <div className="w-full" role="alert">
+                      <AlertComponent
+                        message={editFailure}
+                        type="failure"
+                        onAlertClose={() => {
+                          setEditFailure(null)
+                        }}
+                      />
+                    </div>
                   )}
 
                   {deviceList &&
@@ -342,6 +356,7 @@ const AddPasskey = ({
                     setOpenModel={setOpenModel}
                     closeModal={closeModal}
                     registerWithPasskey={registerWithPasskey}
+                    email={userEmail}
                   />
                 </div>
               </div>

nextjs/src/features/passkey/DeleteModal.tsx

@@ -2,7 +2,6 @@
 
 import {
   Dialog,
-  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -11,7 +10,6 @@ import {
 } from '@/components/ui/dialog'
 
 import { Button } from '@/components/ui/button'
-import { X } from 'lucide-react'
 
 interface DeleteModalProps {
   openModal: boolean
@@ -42,16 +40,6 @@ const DeleteModal = ({
               ?
             </DialogDescription>
           </div>
-          <DialogClose asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="text-gray-500 hover:text-gray-900 dark:hover:text-white"
-            >
-              <X className="h-5 w-5" />
-              <span className="sr-only">Close</span>
-            </Button>
-          </DialogClose>
         </div>
       </DialogHeader>
 

nextjs/src/features/passkey/DeviceDetails.tsx

@@ -37,6 +37,7 @@ export default function DeviceDetails({
   credentialID,
   refreshList,
   responseMessages,
+  disableRevoke,
 }: DeviceDetailsProps): React.JSX.Element {
   const [openDeleteModal, setOpenDeleteModal] = useState(false)
   const [openEditModal, setOpenEditModal] = useState(false)
@@ -99,13 +100,13 @@ export default function DeviceDetails({
               variant="outline"
               size="icon"
               onClick={() => setOpenEditModal(true)}
-              className="h-7 w-7"
+              className="ml-4 h-7 w-7"
             >
               <Pencil className="h-4 w-4" />
             </Button>
           </div>
 
-          <p className="text-muted-foreground truncate text-sm">
+          <p className="text-muted-foreground mt-4 truncate text-sm">
             <Tooltip>
               <TooltipTrigger asChild>
                 <span>{dateConversion(createDateTime)}</span>
@@ -119,7 +120,15 @@ export default function DeviceDetails({
           </p>
 
           <div className="mt-2 flex justify-end">
-            <Button onClick={() => setOpenDeleteModal(true)}>Revoke</Button>
+            <div className="mt-2 flex justify-end">
+              <Button
+                onClick={() => setOpenDeleteModal(true)}
+                disabled={disableRevoke}
+                className={disableRevoke ? 'disabled:cursor-not-allowed' : ''}
+              >
+                Revoke
+              </Button>
+            </div>
           </div>
         </div>
       </div>