From f835f35c8531eace5c858346113f4952231453ef Mon Sep 17 00:00:00 2001 From: sanjay-k1910 Date: Wed, 25 Oct 2023 19:00:32 +0530 Subject: [PATCH 1/4] fix: ecosystem option hide issue Signed-off-by: sanjay-k1910 --- src/components/Profile/EditUserProfile.tsx | 72 ++++++++++++---------- src/components/Profile/UserProfile.tsx | 16 +++-- 2 files changed, 52 insertions(+), 36 deletions(-) diff --git a/src/components/Profile/EditUserProfile.tsx b/src/components/Profile/EditUserProfile.tsx index 2c31e0660..7d025a57d 100644 --- a/src/components/Profile/EditUserProfile.tsx +++ b/src/components/Profile/EditUserProfile.tsx @@ -1,11 +1,11 @@ import { useEffect, useRef, useState } from "react"; import type { UserProfile } from "./interfaces"; -import { setToLocalStorage, updateUserProfile } from "../../api/Auth"; -import { IMG_MAX_HEIGHT, IMG_MAX_WIDTH, imageSizeAccepted, storageKeys} from "../../config/CommonConstant"; +import { getFromLocalStorage, setToLocalStorage, updateUserProfile } from "../../api/Auth"; +import { IMG_MAX_HEIGHT, IMG_MAX_WIDTH, imageSizeAccepted, storageKeys } from "../../config/CommonConstant"; import type { AxiosResponse } from "axios"; import CustomAvatar from '../Avatar' import { calculateSize, dataURItoBlob } from "../../utils/CompressImage"; -import { Alert,Button} from "flowbite-react"; +import { Alert, Button } from "flowbite-react"; import { Form, Formik, FormikHelpers } from "formik"; import * as yup from "yup" import React from "react"; @@ -28,7 +28,7 @@ interface EditUserProfileProps { updateProfile: (updatedProfile: UserProfile) => void; } -const EditUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile}: EditUserProfileProps) => { +const EditUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }: EditUserProfileProps) => { const [loading, setLoading] = useState(false) const [isImageEmpty, setIsImageEmpty] = useState(true) @@ -54,7 +54,7 @@ const EditUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile}: E if (firstNameInputRef.current) { firstNameInputRef.current.focus(); } - }, []); + }, []); useEffect(() => { @@ -166,11 +166,19 @@ const EditUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile}: E } const resUpdateUserDetails = await updateUserProfile(userData) + const existingUser = await getFromLocalStorage(storageKeys.USER_PROFILE) + const { data } = resUpdateUserDetails as AxiosResponse - setToLocalStorage(storageKeys.USER_PROFILE, userData) + + const updatedUser = JSON.parse(existingUser) + + const updatedUserData = { + ...updatedUser, + ...userData + } updateProfile(userData); - await setToLocalStorage(storageKeys.USER_PROFILE, userData); + await setToLocalStorage(storageKeys.USER_PROFILE, updatedUserData); window.location.reload(); setLoading(false) } @@ -219,7 +227,7 @@ const EditUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile}: E values: Values, { resetForm }: FormikHelpers ) => { - await updateUserDetails(values); + await updateUserDetails(values); toggleEditProfile(); }} @@ -321,28 +329,28 @@ const EditUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile}: E
-
- -
-
-
+
+ -
+ + Cancel + +
)} diff --git a/src/components/Profile/UserProfile.tsx b/src/components/Profile/UserProfile.tsx index d5c8e3cfc..cd6eaf840 100644 --- a/src/components/Profile/UserProfile.tsx +++ b/src/components/Profile/UserProfile.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import type { AxiosResponse } from 'axios'; import { apiStatusCodes, storageKeys } from '../../config/CommonConstant'; -import { getFromLocalStorage, getUserProfile } from '../../api/Auth'; +import { getFromLocalStorage, getUserProfile, setToLocalStorage } from '../../api/Auth'; import BreadCrumbs from '../BreadCrumbs'; import type { UserProfile } from './interfaces'; import DisplayUserProfile from './DisplayUserProfile'; @@ -9,9 +9,16 @@ import React from 'react'; import AddPasskey from './AddPasskey'; import EditUserProfile from './EditUserProfile'; +interface IUserProfile { + firstName: string + lastName: string + email: string + profileImg: string +} + const UserProfile = () => { const [isEditProfileOpen, setIsEditProfileOpen] = useState(false); - const [prePopulatedUserProfile, setPrePopulatedUserProfile] = useState(null); + const [prePopulatedUserProfile, setPrePopulatedUserProfile] = useState(null); const fetchUserProfile = async () => { try { @@ -21,6 +28,8 @@ const UserProfile = () => { if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { setPrePopulatedUserProfile(data?.data); + await setToLocalStorage(storageKeys.USER_PROFILE, data?.data) + await setToLocalStorage(storageKeys.USER_EMAIL, data?.data?.email) } } catch (error) { } @@ -37,7 +46,7 @@ const UserProfile = () => { }, []); - const updatePrePopulatedUserProfile = (updatedProfile: UserProfile) => { + const updatePrePopulatedUserProfile = (updatedProfile: IUserProfile) => { setPrePopulatedUserProfile(updatedProfile); }; @@ -107,7 +116,6 @@ const UserProfile = () => { - ); }; From 039392b32febe3ca1b28d3e1db0fc638dbb74c71 Mon Sep 17 00:00:00 2001 From: sanjay-k1910 Date: Wed, 25 Oct 2023 19:19:50 +0530 Subject: [PATCH 2/4] fix: dark mode issue on update profile form Signed-off-by: sanjay-k1910 --- src/components/Profile/EditUserProfile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Profile/EditUserProfile.tsx b/src/components/Profile/EditUserProfile.tsx index 7d025a57d..49c7016cd 100644 --- a/src/components/Profile/EditUserProfile.tsx +++ b/src/components/Profile/EditUserProfile.tsx @@ -346,7 +346,7 @@ const EditUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }: - ), - }, - ], - }; - }); + + + + + Verify +

+ )} + + ), + }, + ], + }; + }); - setVerificationList(credentialList); - } else { - setErrMsg(response as string); + setVerificationList(credentialList); + } else { + setErrMsg(response as string); + } } + } catch (error) { + setErrMsg('An error occurred while fetching the proof request list'); } - } catch (error) { - setErrMsg('An error occurred while fetching the proof request list'); - } - setLoading(false); - }; + setLoading(false); + }; - const presentProofById = async (id: string) => { - try { - const response = await verifyPresentation(id); - const { data } = response as AxiosResponse; + const presentProofById = async (id: string) => { + try { + const response = await verifyPresentation(id); + const { data } = response as AxiosResponse; - if (data?.statusCode === apiStatusCodes?.API_STATUS_CREATED) { - setOpenModal(false) - setProofReqSuccess(data.message) - setVerifyloader(false) + if (data?.statusCode === apiStatusCodes?.API_STATUS_CREATED) { + setOpenModal(false) + setProofReqSuccess(data.message) + setVerifyloader(false) + setTimeout(() => { + getproofRequestList() + }, 2000) + } else { + setOpenModal(false) + setErrMsg(response as string); + setVerifyloader(false) + } setTimeout(() => { - getproofRequestList() - }, 2000) - } else { + setProofReqSuccess('') + setErrMsg('') + }, 4000) + } catch (error) { setOpenModal(false) - setErrMsg(response as string); setVerifyloader(false) + console.error("An error occurred:", error); + setErrMsg("An error occurred while processing the presentation."); } - setTimeout(() => { - setProofReqSuccess('') - setErrMsg('') - }, 4000) - } catch (error) { - setOpenModal(false) - setVerifyloader(false) - console.error("An error occurred:", error); - setErrMsg("An error occurred while processing the presentation."); - } - }; + }; - const openProofRequestModel = (flag: boolean, requestId: string, state: boolean) => { - setRequestId(requestId) - setOpenModal(flag) - setView(state === "done" ? true : false) + const openProofRequestModel = (flag: boolean, requestId: string, state: boolean) => { + setRequestId(requestId) + setOpenModal(flag) + setView(state === "done" ? true : false) - } + } - const requestProof = async (proofVericationId: string) => { - if (proofVericationId) { - setOpenModal(false) - presentProofById(proofVericationId) + const requestProof = async (proofVericationId: string) => { + if (proofVericationId) { + setOpenModal(false) + presentProofById(proofVericationId) + } } - } - useEffect(() => { - let getData: NodeJS.Timeout + useEffect(() => { + let getData: NodeJS.Timeout - if (searchText.length >= 1) { - getData = setTimeout(() => { }, 1000); - } else { - getproofRequestList() - } + if (searchText.length >= 1) { + getData = setTimeout(() => { }, 1000); + } else { + getproofRequestList() + } - return () => clearTimeout(getData) - }, [searchText]) + return () => clearTimeout(getData) + }, [searchText]) - const searchInputChange = (e: ChangeEvent) => { - setSearchText(e.target.value); - } + const searchInputChange = (e: ChangeEvent) => { + setSearchText(e.target.value); + } - const schemeSelection = () => { - window.location.href = pathRoutes.organizations.verification.schema - } + const schemeSelection = () => { + window.location.href = pathRoutes.organizations.verification.schema + } - const header = [ - { columnName: 'Request Id' }, - { columnName: 'Connection Id' }, - { columnName: 'Requested On' }, - { columnName: 'Status' }, - { columnName: 'Action' }, - ]; + const header = [ + { columnName: 'Request Id' }, + { columnName: 'Connection Id' }, + { columnName: 'Requested On' }, + { columnName: 'Status' }, + { columnName: 'Action' }, + ]; - return ( -
-
- -

- Verification List -

-
-
-
-
- - - + return ( +
+
+ +

+ Verification List +

+
+
+
+
+ { + walletCreated && + + + + } + onClickEvent={schemeSelection} + /> } - onClickEvent={schemeSelection} - /> -
- { - (proofReqSuccess || errMsg) && ( -
- setErrMsg(null)} - > - -

- {proofReqSuccess || errMsg} -

- - -
- )} - {loading ? ( -
-
- ) : verificationList && verificationList.length > 0 ? ( -
-
- {verificationList && verificationList.length > 0 && - - } -
-
- ) : ( -
- - There isn't any data available. - -
- )} + { + (proofReqSuccess || errMsg) && ( +
+ setErrMsg(null)} + > + +

+ {proofReqSuccess || errMsg} +

+ + +
+ )} - + +
+ : +
+ { + + loading ? ( +
+ +
+ ) : verificationList && verificationList.length > 0 ? ( +
+
+ {verificationList && verificationList.length > 0 && + + } +
+
+ ) : ( +
+ + There isn't any data available. + +
+ ) + + } +
} - requestId={requestId} - userData={userData} - view={view} - /> + + +
-
- ) -} + ) + } -export default VerificationCredentialList; + export default VerificationCredentialList; diff --git a/src/components/organization/OrgDropDown.tsx b/src/components/organization/OrgDropDown.tsx index 4169a7abb..48e423e77 100644 --- a/src/components/organization/OrgDropDown.tsx +++ b/src/components/organization/OrgDropDown.tsx @@ -29,6 +29,7 @@ const OrgDropDown = () => { const goToOrgDashboard = async (org: Organisation) => { await removeFromLocalStorage(storageKeys.ECOSYSTEM_ID) await removeFromLocalStorage(storageKeys.ECOSYSTEM_ROLE) + await removeFromLocalStorage(storageKeys.ORG_DETAILS) await setOrgRoleDetails(org) window.location.href = pathRoutes.organizations.dashboard; diff --git a/src/components/organization/WalletSpinup.tsx b/src/components/organization/WalletSpinup.tsx index 8028e0f2e..113699d9f 100644 --- a/src/components/organization/WalletSpinup.tsx +++ b/src/components/organization/WalletSpinup.tsx @@ -28,7 +28,6 @@ interface Values { } interface ValuesShared { - seed: string; label: string; } @@ -37,36 +36,234 @@ enum AgentType { DEDICATED = 'dedicated', } +interface ISharedAgentForm { + seeds: string + isCopied: boolean + copyTextVal: (e: any) => void + orgName: string + loading: boolean + submitSharedWallet: (values: ValuesShared) => void +} + +interface IDedicatedAgentForm { + seeds: string + loading: boolean + submitDedicatedWallet: (values: Values) => void +} + +const SharedAgentForm = ({ orgName, seeds, isCopied, loading, copyTextVal, submitSharedWallet }: ISharedAgentForm) => ( +
+
+
+
+
+ {seeds} + + + +
+
+ !value || !value.includes(' ')) + .matches( + /^[A-Za-z0-9-][^ !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]*$/, + 'Wallet label must be alphanumeric only', + ) + .min(2, 'Wallet label must be at least 2 characters') + .max(25, 'Wallet label must be at most 25 characters'), + })} + validateOnBlur + validateOnChange + enableReinitialize + onSubmit={(values: ValuesShared) => submitSharedWallet(values)} + > + {(formikHandlers): JSX.Element => ( +
+
+
+
+ + { + // formikHandlers.handleChange(e) + // setOrganization(e.target.value) + // }} + /> + {formikHandlers?.errors?.label && + formikHandlers?.touched?.label && ( + + {formikHandlers?.errors?.label} + + )} +
+ + +
+ )} + +
+); + +const DedicatedAgentForm = ({ seeds, loading, submitDedicatedWallet }: IDedicatedAgentForm) => ( + ?@[\]^_`{|}~]*$/, + 'Wallet name must be alphanumeric only', + ) + .label('Wallet name'), + password: yup + .string() + .matches( + passwordRegex, + 'Password must contain one Capital, Special character', + ) + .required('Wallet password is required') + .label('Wallet password'), + })} + validateOnBlur + validateOnChange + enableReinitialize + onSubmit={(values: Values) => submitDedicatedWallet(values)} + > + {(formikHandlers): JSX.Element => ( +
+
+
+
+ + {formikHandlers?.errors?.seed && formikHandlers?.touched?.seed && ( + + {formikHandlers?.errors?.seed} + + )} +
+
+
+
+ + {formikHandlers?.errors?.name && formikHandlers?.touched?.name && ( + + {formikHandlers?.errors?.name} + + )} +
+
+
+
+ + {formikHandlers?.errors?.password && + formikHandlers?.touched?.password && ( + + {formikHandlers?.errors?.password} + + )} +
+ +
+ )} + +); + const WalletSpinup = (props: { setWalletSpinupStatus: (flag: boolean) => void; orgName: string }) => { const [agentType, setAgentType] = useState(AgentType.SHARED); - const [loading, setLoading] = useState(false); - const [walletSpinStep, setWalletSpinStep] = useState(0); - const [success, setSuccess] = useState(null); - const [agentSpinupCall, setAgentSpinupCall] = useState(false); - const [failure, setFailure] = useState(null); - const [seeds, setSeeds] = useState(''); - const [isCopied, setIsCopied] = useState(false); + // const [organization, setOrganization] = useState(props.orgName) - - const generateWalletname = () => { - - } useEffect(() => { setSeeds(nanoid(32)); - generateWalletname() }, []); - function copyTextVal(event: React.MouseEvent) { + const copyTextVal = (event: React.MouseEvent) => { event.preventDefault() setIsCopied(true); @@ -183,202 +380,9 @@ const WalletSpinup = (props: { console.log(`error-in-wallet-creation-process`, JSON.stringify(data)); }); - const DedicatedAgentForm = () => ( - ?@[\]^_`{|}~]*$/, - 'Wallet name must be alphanumeric only', - ) - .label('Wallet name'), - password: yup - .string() - .matches( - passwordRegex, - 'Password must contain one Capital, Special character', - ) - .required('Wallet password is required') - .label('Wallet password'), - })} - validateOnBlur - validateOnChange - enableReinitialize - onSubmit={(values: Values) => submitDedicatedWallet(values)} - > - {(formikHandlers): JSX.Element => ( -
-
-
-
- - {formikHandlers?.errors?.seed && formikHandlers?.touched?.seed && ( - - {formikHandlers?.errors?.seed} - - )} -
-
-
-
- - - {formikHandlers?.errors?.name && formikHandlers?.touched?.name && ( - - {formikHandlers?.errors?.name} - - )} -
- -
-
-
- - - {formikHandlers?.errors?.password && - formikHandlers?.touched?.password && ( - - {formikHandlers?.errors?.password} - - )} -
- -
- )} - - ); - const orgName = props?.orgName ? props?.orgName?.split(" ").reduce((s, c) => (s.charAt(0).toUpperCase() + s.slice(1)) + (c.charAt(0).toUpperCase() + c.slice(1)) ) : "" - const SharedAgentForm = () => ( - !value || !value.includes(' ')) - .matches( - /^[A-Za-z0-9-][^ !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]*$/, - 'Wallet label must be alphanumeric only', - ) - .min(2, 'Wallet label must be at least 2 characters') - .max(25, 'Wallet label must be at most 25 characters'), - })} - validateOnBlur - validateOnChange - enableReinitialize - onSubmit={(values: ValuesShared) => submitSharedWallet(values)} - > - {(formikHandlers): JSX.Element => ( -
-
-
-
-
- {seeds} - - - -
- -
-
-
-
- - - {formikHandlers?.errors?.label && - formikHandlers?.touched?.label && ( - - {formikHandlers?.errors?.label} - - )} -
- - -
- )} - - ); return (
@@ -444,9 +448,9 @@ const WalletSpinup = (props: { {!agentSpinupCall ? ( agentType === AgentType.SHARED ? ( - + ) : ( - + ) ) : ( Date: Thu, 26 Oct 2023 13:50:20 +0530 Subject: [PATCH 4/4] refactor: commented code Signed-off-by: sanjay-k1910 --- src/components/organization/WalletSpinup.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/organization/WalletSpinup.tsx b/src/components/organization/WalletSpinup.tsx index 113699d9f..7b3e329a9 100644 --- a/src/components/organization/WalletSpinup.tsx +++ b/src/components/organization/WalletSpinup.tsx @@ -111,10 +111,6 @@ const SharedAgentForm = ({ orgName, seeds, isCopied, loading, copyTextVal, submi name="label" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" type="text" - // onChange={(e) => { - // formikHandlers.handleChange(e) - // setOrganization(e.target.value) - // }} /> {formikHandlers?.errors?.label && formikHandlers?.touched?.label && (