From cd150f79ee364256a401929171f16f9ba51aa263 Mon Sep 17 00:00:00 2001 From: "@nishad.shirsat" Date: Wed, 2 Aug 2023 19:22:11 +0530 Subject: [PATCH] fixed: radio selection after agent spinup & included agent illustration description Signed-off-by: @nishad.shirsat --- package-lock.json | 21 +++ src/api/organization.ts | 33 ++++ src/components/InputCopy/index.tsx | 5 +- .../organization/DedicatedIllustrate.tsx | 31 +++- src/components/organization/OrgDropDown.tsx | 4 +- .../organization/OrganizationDetails.tsx | 172 +++++++++++------- .../organization/SharedIllustrate.tsx | 28 ++- src/components/organization/WalletSpinup.tsx | 15 +- src/config/apiRoutes.ts | 3 + 9 files changed, 225 insertions(+), 87 deletions(-) diff --git a/package-lock.json b/package-lock.json index 125748ec..c0beb5d3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,7 @@ "react-dom": "^18.2.0", "react-icons": "^4.10.1", "react-toastify": "^9.1.3", + "secure-random-password": "^0.2.3", "shiki": "^0.14.1", "socket.io-client": "^4.6.2", "tailwind-scrollbar": "^3.0.4", @@ -44,6 +45,7 @@ "devDependencies": { "@types/crypto-js": "^4.1.1", "@types/eslint": "^8.21.1", + "@types/secure-random-password": "^0.2.1", "@typescript-eslint/eslint-plugin": "^5.54.1", "@typescript-eslint/parser": "^5.54.1", "astro-eslint-parser": "^0.11.0", @@ -1626,6 +1628,12 @@ "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" }, + "node_modules/@types/secure-random-password": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@types/secure-random-password/-/secure-random-password-0.2.1.tgz", + "integrity": "sha512-tpG5oVF+NpIS9UJ9ttXAokafyhE/MCZBg65D345qu3gOM4YoJ/mFNVzUDUNBfb1hIi598bNOzvY04BbfS7VKwA==", + "dev": true + }, "node_modules/@types/semver": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.0.tgz", @@ -11048,6 +11056,19 @@ "node": ">=4" } }, + "node_modules/secure-random": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/secure-random/-/secure-random-1.1.2.tgz", + "integrity": "sha512-H2bdSKERKdBV1SwoqYm6C0y+9EA94v6SUBOWO8kDndc4NoUih7Dv6Tsgma7zO1lv27wIvjlD0ZpMQk7um5dheQ==" + }, + "node_modules/secure-random-password": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/secure-random-password/-/secure-random-password-0.2.3.tgz", + "integrity": "sha512-2zpmr6pK3CZGIS9fgApFw00/tKEBVbJTqe4AZLrLNgahCK6ueIR5uMzvbERNibr8hkWneMcOqDcm4wpHWUxrYw==", + "dependencies": { + "secure-random": "^1.1.2" + } + }, "node_modules/semver": { "version": "7.5.3", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz", diff --git a/src/api/organization.ts b/src/api/organization.ts index 4a2dc41c..216e0266 100644 --- a/src/api/organization.ts +++ b/src/api/organization.ts @@ -270,3 +270,36 @@ export const editOrganizationUserRole = async (userId: number, roles: number[]) } } +//Create Connection + + +export const createConnection = async (orgName: string) => { + + const url = apiRoutes.connection.create + + const orgId = await getFromLocalStorage(storageKeys.ORG_ID) + + const data = { + label: orgName, + multiUseInvitation: true, + autoAcceptConnection: true, + orgId: Number(orgId) + } + const payload = data + + const axiosPayload = { + url, + payload, + config: await getHeaderConfigs() + } + + try { + return await axiosPost(axiosPayload); + } + catch (error) { + const err = error as Error + return err?.message + } +} + + diff --git a/src/components/InputCopy/index.tsx b/src/components/InputCopy/index.tsx index 755159df..813f22d8 100644 --- a/src/components/InputCopy/index.tsx +++ b/src/components/InputCopy/index.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from 'react'; +import { ChangeEventHandler, MouseEvent, MouseEventHandler, useRef, useState } from 'react'; interface InputProps { field: { @@ -14,7 +14,8 @@ const InputCopy = ({ field, ...props }: InputProps) => { const inputRef = useRef(null); const [isCopied, setIsCopied] = useState(false); - function copyTextVal() { + function copyTextVal(event: React.MouseEvent) { + event.preventDefault() const copyText = inputRef?.current; const copiedText: string = copyText?.value as string diff --git a/src/components/organization/DedicatedIllustrate.tsx b/src/components/organization/DedicatedIllustrate.tsx index f0b75e24..f1507de2 100644 --- a/src/components/organization/DedicatedIllustrate.tsx +++ b/src/components/organization/DedicatedIllustrate.tsx @@ -1,12 +1,35 @@ import DedicatedIcon from '../../assets/dedicated.svg'; - - const DedicatedIllustrate = () => { return ( -
- dedicated +
+
+ dedicated +
+
+

+ Complete Control and Maximum Privacy +

+
    +
  • +

    + Our dedicated agent is exclusively managed by your organization, giving you full control. Customize and configure it to meet your specific needs with ease. +

    +
    • +
  • +

    + Rest assured, all data and operations stay within your organization's infrastructure, guaranteeing maximum privacy and autonomy. +

    +
    • +
  • +

    + Experience the power of complete control and privacy with our dedicated agent. +

    +
    • +
+ +
) diff --git a/src/components/organization/OrgDropDown.tsx b/src/components/organization/OrgDropDown.tsx index fef10f79..d04c5782 100644 --- a/src/components/organization/OrgDropDown.tsx +++ b/src/components/organization/OrgDropDown.tsx @@ -82,10 +82,10 @@ const OrgDropDown = () => { ) : ( )} - {activeOrg?.name} + {activeOrg?.name} : - + Select organization } diff --git a/src/components/organization/OrganizationDetails.tsx b/src/components/organization/OrganizationDetails.tsx index f87a8b70..a4a1cacd 100644 --- a/src/components/organization/OrganizationDetails.tsx +++ b/src/components/organization/OrganizationDetails.tsx @@ -1,88 +1,122 @@ import type { OrgAgent, Organisation } from './interfaces' +import { useEffect, useState } from 'react'; -interface Values { - seed: string; - name: string, - password: string -} - +import type { AxiosResponse } from 'axios'; +import { Spinner } from 'flowbite-react'; +import { apiStatusCodes } from '../../config/CommonConstant'; +import { createConnection } from '../../api/organization'; const OrganizationDetails = ({ orgData }: { orgData: Organisation | null }) => { const { org_agents } = orgData as Organisation const agentData: OrgAgent | null = org_agents.length > 0 ? org_agents[0] : null + const [loading, setLoading] = useState(true) + + const createQrConnection = async () => { + + setLoading(true) + const response = await createConnection(orgData?.name as string); + const { data } = response as AxiosResponse + + if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { + console.log(`COnnection::`, data); + + } else { + console.log(`Connection ERR`, response as string); + + } + + setLoading(false) + } + + useEffect(() => { + createQrConnection() + }, []) return (
-

- Wallet Details -

-
-
-
    - -
  • -
    - -
    -

    - Wallet Name: -

    -

    - {agentData?.walletName} -

    - +
    +

    + Wallet Details +

    +
    +
    +
      + +
    • +
      + +
      +

      + Wallet Name: +

      +

      + {agentData?.walletName} +

      + +
      -
    -
    • -
  • -
    - -
    -

    - Org DID: -

    -

    - {agentData?.orgDid} -

    - +
    • +
  • +
    + +
    +

    + Org DID: +

    +

    + {agentData?.orgDid} +

    + +
    -
- -
  • -
    - -
    -

    - Created On: -

    -

    - {agentData?.agents_type.createDateTime.split("T")[0]} -

    - +
    • +
  • +
    + +
    +

    + Created On: +

    +

    + {agentData?.agents_type.createDateTime.split("T")[0]} +

    + +
    -
    • - - + + +
    - + +
    + { + loading + ? ( + + ) + :
    + + }
    diff --git a/src/components/organization/SharedIllustrate.tsx b/src/components/organization/SharedIllustrate.tsx index d92a08b0..81d55c92 100644 --- a/src/components/organization/SharedIllustrate.tsx +++ b/src/components/organization/SharedIllustrate.tsx @@ -1,11 +1,35 @@ import SharedIcon from '../../assets/shared.svg'; - const SharedIllustrate = () => { return ( -
    +
    +
    dedicated +
    +
    +

    + Your Hassle-Free Multi-Tenant Solution +

    +
      +
    • +

      + Our Shared Agent is here to simplify your operations! Managed by CREDEBL on your organization's behalf, this multi-tenant solution allows multiple organizations to share the same agent. You'll benefit from shared resources and reduced operational burdens. +

      +
      • +
    • +

      + Leave the agent maintenance, updates, and technical aspects to CREDEBL, so your team can focus on core tasks without worrying about the backend. Enjoy improved productivity and efficiency while we handle the nitty-gritty. +

      +
      • +
    • +

      + Experience a seamless and hassle-free future with the Shared Agent. Let CREDEBL take care of everything, while you concentrate on achieving your goals. +

      +
      • +
    + +
    ) diff --git a/src/components/organization/WalletSpinup.tsx b/src/components/organization/WalletSpinup.tsx index 20872fa5..dd14bd75 100644 --- a/src/components/organization/WalletSpinup.tsx +++ b/src/components/organization/WalletSpinup.tsx @@ -12,11 +12,11 @@ import { spinupDedicatedAgent, spinupSharedAgent } from '../../api/organization' import { useEffect, useState } from 'react'; import type { AxiosResponse } from 'axios'; -import SOCKET from '../../config/SocketConfig'; -import { nanoid } from 'nanoid' -import InputCopy from '../InputCopy'; import DedicatedIllustrate from './DedicatedIllustrate'; +import InputCopy from '../InputCopy'; +import SOCKET from '../../config/SocketConfig'; import SharedIllustrate from './SharedIllustrate'; +import { nanoid } from 'nanoid' interface Values { seed: string; @@ -96,6 +96,7 @@ const WalletSpinup = ( const submitSharedWallet = async (values: ValuesShared) => { + setLoading(true) const orgId = await getFromLocalStorage(storageKeys.ORG_ID) const payload = { @@ -103,7 +104,6 @@ const WalletSpinup = ( seed: seeds, orgId: Number(orgId) } - setLoading(true) const spinupRes = await spinupSharedAgent(payload) const { data } = spinupRes as AxiosResponse @@ -253,7 +253,7 @@ const WalletSpinup = ( @@ -323,7 +323,7 @@ const WalletSpinup = ( @@ -366,8 +366,7 @@ const WalletSpinup = (
    { - !agentSpinupCall - &&
    + !agentSpinupCall && !loading &&
    • diff --git a/src/config/apiRoutes.ts b/src/config/apiRoutes.ts index f83850ba..0e8affca 100644 --- a/src/config/apiRoutes.ts +++ b/src/config/apiRoutes.ts @@ -23,6 +23,9 @@ export const apiRoutes = { orgRoles: '/organization/roles', editUserROle: '/organization/user-roles' }, + connection: { + create: '/connections', + }, schema: { create: '/schemas', getAll: '/schemas',