credebl · nishad-ayanworks · Sep 11, 2023 · Sep 7, 2023 · Sep 11, 2023 · Sep 11, 2023
diff --git a/src/api/Auth.ts b/src/api/Auth.ts
@@ -136,6 +136,7 @@ export const checkUserExist = async(payload: string) => {
 }
 
 export const addPasswordDetails = async(payload: AddPasswordDetails, email:string) => {
+    // Api call to add password
     const details ={
         url: `${apiRoutes.auth.addDetails}${email}`,
         payload,

diff --git a/src/commonComponents/DeviceDetailsCard.tsx b/src/commonComponents/DeviceDetailsCard.tsx
@@ -7,8 +7,9 @@ import type { AxiosResponse } from "axios";
 import { apiStatusCodes } from "../config/CommonConstant";
 import BreadCrumbs from "../components/BreadCrumbs";
 import editIcon from '/images/edit.svg';
+import React from "react";
 
-const DeviceDetails = (props: { deviceFriendlyName: string, createDateTime: string, credentialID: string, refreshList: () => void }) => {
+const DeviceDetails = (props: { deviceFriendlyName: string, createDateTime: string, credentialID: string, refreshList: () => void, disableRevoke: boolean }) => {
     const [openModal, setOpenModal] = useState<boolean>(false);
     const [openEditModel, setOpenEditModel] = useState<boolean>(false)
     const [editSuccess, setEditSuccess] = useState<string | null>(null)
@@ -48,18 +49,17 @@ const DeviceDetails = (props: { deviceFriendlyName: string, createDateTime: stri
         const { data } = editDeviceDetailsResponse as AxiosResponse
         if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
             await setEditSuccess(data?.message)
-            
-       
+
+
         } else {
             setEditFailur(editDeviceDetailsResponse as string)
         }
         setTimeout(() => {
-            setEditSuccess('')
-            setEditFailur('')
             props.refreshList()
-        }, 3000); 
+        }, 4000);
+
     }
-   
+
     return (
         <>
             <ul className="divide-gray-200 dark:divide-gray-700">
@@ -103,7 +103,9 @@ const DeviceDetails = (props: { deviceFriendlyName: string, createDateTime: stri
                             </p>
                         </div>
                         <div className="inline-flex items-center">
-                            <button className="px-3 py-2 mb-3 mr-3 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-primary-300 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+                            <button
+                                className={`px-3 py-2 mb-3 mr-3 text-sm font-medium text-center text-gray-900 bg-white border ${props.disableRevoke ? 'border-gray-400 text-gray-400 cursor-not-allowed' : 'border-gray-300 text-gray-900 hover:bg-gray-100 focus:ring-4 focus:ring-primary-300'} rounded-lg ${props.disableRevoke ? 'dark:bg-gray-800 dark:text-gray-400 dark:border-gray-400' : 'dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700'}`}
+                                disabled={props.disableRevoke}
                                  => handleDeleteModel(true)}
                             >
                                 Revoke

diff --git a/src/commonComponents/PasseyAddDevicePopup.tsx b/src/commonComponents/PasseyAddDevicePopup.tsx
@@ -11,6 +11,7 @@ import { addPasskeyUserDetails, getFromLocalStorage, passwordEncryption } from '
 import { apiStatusCodes, storageKeys } from '../config/CommonConstant';
 import { getSupabaseClient } from '../supabase';
 import passkeyAddDevice from '../assets/passkeyAddDevice.svg';
+import React from 'react';
 
 interface PasswordValue {
 	Password: string;
@@ -60,7 +61,7 @@ const PasskeyAddDevice = (props: {
 			props.setOpenModel(false)
 		}
 		}>
-			<Modal.Header>Add Passkey</Modal.Header>
+			<Modal.Header>Create Passkey</Modal.Header>
 			<Modal.Body>
 				<div className="">
 					{
@@ -155,7 +156,7 @@ const PasskeyAddDevice = (props: {
 									id='signinnext'
 									// isProcessing={loading}
 									type="submit"
-									className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 float-right'
+									className='text-base font-medium text-center text-white bg-primary-700 hover:!bg-primary-800 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 float-right'
 								>
 									Next
 								</Button>
@@ -181,7 +182,7 @@ const PasskeyAddDevice = (props: {
 									id="loginwithpasskey"
 									isProcessing={''}
 									 => props.registerWithPasskey(true)}
-									className="text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+									className="text-base hover:!bg-primary-800 font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
 								>
 									Create Passkey
 								</Button>

diff --git a/src/components/Authentication/SignInUserPasskey.tsx b/src/components/Authentication/SignInUserPasskey.tsx
@@ -97,7 +97,6 @@ const SignInUserPasskey = (signInUserProps: signInUserProps) => {
             };
             const verificationResp = await verifyAuthenticationMethod(verifyAuthenticationObj, { userName: email });
             const { data } = verificationResp as AxiosResponse
-
             if (data?.data.verified) {
                 const payload: UserSignInData = {
                     email: email,
@@ -234,7 +233,7 @@ const SignInUserPasskey = (signInUserProps: signInUserProps) => {
 
                                     <Button
                                         id='loginwithpasskey'
-                                        isProcessing={''}
+                                        isProcessing={fidoLoader}
                                          => {
 
                                             authenticateWithPasskey(signInUserProps?.email)

diff --git a/src/components/Profile/AddPasskey.tsx b/src/components/Profile/AddPasskey.tsx
@@ -12,16 +12,19 @@ import DisplayUserProfile from './DisplayUserProfile';
 import UpdateUserProfile from './EditUserProfile';
 import CustomSpinner from '../CustomSpinner';
 import PasskeyAddDevice from '../../commonComponents/PasseyAddDevicePopup';
+import { apiRoutes } from '../../config/apiRoutes';
+import React from 'react';
 
 const AddPasskey = () => {
   const [fidoError, setFidoError] = useState("")
-  const [fidoLoader, setFidoLoader] = useState(false)
+  const [fidoLoader, setFidoLoader] = useState(true)
   const [OrgUserEmail, setOrgUserEmail] = useState<string>('')
   const [deviceList, setDeviceList] = useState<IDeviceData[]>([])
   const [addSuccess, setAddSuccess] = useState<string | null>(null)
   const [addfailure, setAddFailur] = useState<string | null>(null)
   const [isEditProfileOpen, setIsEditProfileOpen] = useState(false);
   const [prePopulatedUserProfile, setPrePopulatedUserProfile] = useState<UserProfile | null>(null);
+  const [disableFlag, setDisableFlag] = useState<boolean>(false)
 
 
   const [openModel, setOpenModel] = useState<boolean>(false)
@@ -138,6 +141,7 @@ const AddPasskey = () => {
       if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
         setAddSuccess("Device added successfully")
         userDeviceDetails()
+        window.location.href = `${apiRoutes.auth.profile}`
       } else {
         setAddFailur(deviceDetailsResp as string)
       }
@@ -149,22 +153,25 @@ const AddPasskey = () => {
   //userDeviceDetails on page reload
   const userDeviceDetails = async (): Promise<void> => {
     try {
-      const config = { headers: {} }
       setFidoLoader(true)
 
       const userDeviceDetailsResp = await getUserDeviceDetails(OrgUserEmail)
+      const { data } = userDeviceDetailsResp as AxiosResponse
       setFidoLoader(false)
-
       if (userDeviceDetailsResp) {
-        const deviceDetails = Object.keys(userDeviceDetailsResp?.data?.data)?.length > 0 ?
+        const deviceDetails = Object.keys(data)?.length > 0 ?
           userDeviceDetailsResp?.data?.data.map((data) => {
             data.lastChangedDateTime = data.lastChangedDateTime ? data.lastChangedDateTime : "-"
             return data
           })
           : []
+          if (data?.data?.length === 1){
+            setDisableFlag(true)
+          }
         setDeviceList(deviceDetails)
       }
     } catch (error) {
+      setAddFailur("Error while fetching the device details")
       setFidoLoader(false)
     }
   }
@@ -227,7 +234,7 @@ const AddPasskey = () => {
               <div className='divide-y'>
                 {deviceList && deviceList.length > 0 &&
                   deviceList.map((element, key) => (
-                    <DeviceDetails deviceFriendlyName={element['deviceFriendlyName']} createDateTime={element['createDateTime']} credentialID={element['credentialId']} refreshList={userDeviceDetails} />
+                    <DeviceDetails deviceFriendlyName={element['deviceFriendlyName']} createDateTime={element['createDateTime']} credentialID={element['credentialId']} refreshList={userDeviceDetails} disableRevoke={disableFlag} />
                   ))}
               </div>
 

diff --git a/src/config/apiRoutes.ts b/src/config/apiRoutes.ts
@@ -8,7 +8,8 @@ export const apiRoutes = {
         userProfile: 'users/profile',
         checkUser:'/users/check-user/',
         addDetails:'/users/add/',
-        passkeyUserDetails:'/users/password/'
+        passkeyUserDetails:'/users/password/',
+        profile:'/profile'
     },
     users:{
         invitations: '/users/invitations',
@@ -60,7 +61,7 @@ export const apiRoutes = {
 			getAllRequestList: '/proofs',
 			verifyCredential:'/proofs/request-proof',
             presentationVerification:'/proofs/verify-presentation',
-						proofRequestAttributesVerification:'/proofs/form-data'
+		    proofRequestAttributesVerification:'/proofs/form-data'
 		},
         Agent:{
 			checkAgentHealth: '/agent-service/health',