fix: passkey related issues (#1075)

Signed-off-by: pranalidhanavade <pranali.dhanavade@ayanworks.com>

Author: pranalidhanavade

nextjs/src/features/passkey/DeviceDetails.tsx

@@ -104,9 +104,18 @@ export default function DeviceDetails({
             >
               <Pencil className="h-4 w-4" />
             </Button>
+            <div className="ml-auto">
+              <Button
+                onClick={() => setOpenDeleteModal(true)}
+                disabled={disableRevoke}
+                className={disableRevoke ? 'cursor-not-allowed opacity-50' : ''}
+              >
+                Revoke
+              </Button>
+            </div>
           </div>
 
-          <p className="text-muted-foreground mt-4 truncate text-sm">
+          <p className="text-muted-foreground truncate text-sm">
             <Tooltip>
               <TooltipTrigger asChild>
                 <span>{dateConversion(createDateTime)}</span>
@@ -118,18 +127,6 @@ export default function DeviceDetails({
           <p className="text-muted-foreground truncate text-sm">
             {credentialID}
           </p>
-
-          <div className="mt-2 flex justify-end">
-            <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>
 

nextjs/src/features/passkey/PassKeyAddDevice.tsx

@@ -76,7 +76,16 @@ export default function PasskeyAddDevice({
   }, [email])
 
   return (
-    <Dialog open={openModal} onOpenChange={setOpenModel}>
+    <Dialog
+      open={openModal}
+      onOpenChange={(isOpen) => {
+        setOpenModel(isOpen)
+        if (!isOpen) {
+          setFidoUserError(null)
+          setNextStep(false)
+        }
+      }}
+    >
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Create Passkey</DialogTitle>
@@ -138,7 +147,9 @@ export default function PasskeyAddDevice({
                 </div>
 
                 <div className="flex justify-end">
-                  <Button type="submit">Next</Button>
+                  <Button onClick={() => setFidoUserError(null)} type="submit">
+                    Next
+                  </Button>
                 </div>
               </Form>
             )}

nextjs/src/features/passkey/PasskeyAlert.tsx

@@ -5,11 +5,11 @@ import React from 'react'
 
 const PasskeyAlert = (): React.JSX.Element => (
   <div className="mt-4 flex">
-    <Alert variant="default" className="flex w-full items-start space-x-3 p-4">
+    <Alert className="flex w-auto items-start space-x-3 bg-yellow-100 p-2 text-yellow-700">
       <AlertTriangle className="mt-1 h-5 w-5 text-yellow-500" />
       <div>
         <AlertTitle className="text-yellow-700">Notice</AlertTitle>
-        <AlertDescription>
+        <AlertDescription className="text-warning">
           This browser or device partially supports passkey.
         </AlertDescription>
       </div>