Fix: Add copy credential JWT

Signed-off-by: George J Padayatti <george.padayatti@igrant.io>
L3-iGrant · May 2, 2024 · 1a74c9f · 1a74c9f
1 parent 4a794a9
commit 1a74c9f
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 13 deletions.
diff --git a/src/views/company-views/components/landing/index.tsx b/src/views/company-views/components/landing/index.tsx
@@ -193,6 +193,7 @@ export const LandingPage = () => {
     const [selectedSchemaTitle, setSelectedSchemaTitle] = useState<string>('');
     const [credentialRequestProgressMessage, setCredentialRequestProgressMessage] = useState<any>('');
     const [selectedViewCredentialAttributes, setSelectedViewCredentialAttributes] = useState<any>({});
+    const [credentialJwt, setCredentialJwt] = useState<any>('');
     const [selectedViewCredentialReferent, setSelectedViewCredentialReferent] = useState<any>('');
     const [walletData, setWalletData] = useState({});
     const [defaultWalletData, setDefaultWalletData] = useState({});
@@ -670,8 +671,8 @@ export const LandingPage = () => {
             <RequestAllCredentialsPage onClose={onRequestAllCredentialsDrawerClose} open={openRequestAllCredentialsDrawer} onRequestCredentialSubmit={onRequestAllCredentialSubmit} showWalletDetailsDrawer={showWalletDetailsDrawer} issuer={selectedIssuer} />
             <WalletDetailsPage onClose={onWalletDetailsDrawerClose} open={openWalletDetailsDrawer} showWalletConfigurationsDrawer={showWalletConfigurationsDrawer} walletData={walletData} defaultWalletData={defaultWalletData} />
             <WalletConfigurationsPage onClose={onWalletConfigurationsDrawerClose} open={openWalletConfigurationsDrawer} showWalletDetailsDrawer={showWalletDetailsDrawer} />
-            <ViewCredentialsPage onClose={onViewCredentialsDrawerClose} open={openViewCredentialsDrawer} showViewSelectedCredentialDrawer={showViewSelectedCredentialDrawer} setSelectedViewCredentialAttributes={setSelectedViewCredentialAttributes} setSelectedViewCredentialReferent={setSelectedViewCredentialReferent} openViewSelectedCredentialsDrawer={openViewSelectedCredentialsDrawer} />
-            <ViewSelectedCredentialPage onClose={onViewSelectedCredentialDrawerClose} open={openViewSelectedCredentialsDrawer} selectedViewCredentialAttributes={selectedViewCredentialAttributes} selectedViewCredentialReferent={selectedViewCredentialReferent} onViewCredentialsDrawerClose={onViewCredentialsDrawerClose} />
+            <ViewCredentialsPage onClose={onViewCredentialsDrawerClose} open={openViewCredentialsDrawer} showViewSelectedCredentialDrawer={showViewSelectedCredentialDrawer} setSelectedViewCredentialAttributes={setSelectedViewCredentialAttributes} setCredentialJwt={setCredentialJwt} setSelectedViewCredentialReferent={setSelectedViewCredentialReferent} openViewSelectedCredentialsDrawer={openViewSelectedCredentialsDrawer} />
+            <ViewSelectedCredentialPage onClose={onViewSelectedCredentialDrawerClose} open={openViewSelectedCredentialsDrawer} selectedViewCredentialAttributes={selectedViewCredentialAttributes} selectedViewCredentialReferent={selectedViewCredentialReferent} onViewCredentialsDrawerClose={onViewCredentialsDrawerClose} credentialJwt={credentialJwt}/>
         </StyledLayout>
     );
 };

diff --git a/src/views/company-views/components/viewcredentials/index.tsx b/src/views/company-views/components/viewcredentials/index.tsx
@@ -42,14 +42,14 @@ const StyledActionButton = styled.div`
     width: 100%;
 `;
 
-export const ViewCredentialsPage = (props: { onClose: any; open: boolean; showViewSelectedCredentialDrawer: any; setSelectedViewCredentialAttributes: any; openViewSelectedCredentialsDrawer: boolean; setSelectedViewCredentialReferent: any; }) => {
+export const ViewCredentialsPage = (props: { onClose: any; open: boolean; showViewSelectedCredentialDrawer: any; setSelectedViewCredentialAttributes: any; openViewSelectedCredentialsDrawer: boolean; setSelectedViewCredentialReferent: any; setCredentialJwt: any; }) => {
     const [credentialList, setCredentialList] = useState<any[]>([]);
     const { data, error, isLoading, refetch } = useListStoredCertificatesQuery(undefined)
     const { t, i18n } = useTranslation();
 
-    useEffect(()=>{
+    useEffect(() => {
         console.log(data);
-    }, [isLoading,data])
+    }, [isLoading, data])
 
     useEffect(() => {
         if (props.open) getCertificatesAndUpdateList();
@@ -65,7 +65,7 @@ export const ViewCredentialsPage = (props: { onClose: any; open: boolean; showVi
         const response = await companyService.getCertificates();
         console.log(response.results);
         refetch()
-        const certificatesDataList = response.results.map((item: any, index: number) => { return { title: item.schema_id.split(':')[2], index, attributes: item.attrs, referent: item.referent } });
+        const certificatesDataList = response.results.map((item: any, index: number) => { return { title: item.schema_id.split(':')[2], index, attributes: item.attrs, referent: item.referent, credentialJwt: item.credentialJwt } });
         updateCredentialsList(certificatesDataList);
     };
 
@@ -85,7 +85,7 @@ export const ViewCredentialsPage = (props: { onClose: any; open: boolean; showVi
         const credentialCardArray = credentialSchemaList.map((item: any) => {
             let issuer = '';
             let logo = '';
-            switch(item.title) {
+            switch (item.title) {
                 case 'Certificate Of Registration':
                     issuer = 'Bolagsverket, Sweden'
                     logo = credentialLogo;
@@ -107,10 +107,14 @@ export const ViewCredentialsPage = (props: { onClose: any; open: boolean; showVi
             return (
                 <Row >
                     <Col span={24}>
-                        <StyledCredentialCard bodyStyle={{padding: "17px"}} onClick={() => {
+                        <StyledCredentialCard bodyStyle={{ padding: "17px" }} onClick={() => {
                             props.showViewSelectedCredentialDrawer();
                             props.setSelectedViewCredentialAttributes(item.attributes);
                             props.setSelectedViewCredentialReferent(item.referent);
+                            if (item.credentialJwt !== undefined || item.credentialJwt !== null) {
+                                props.setCredentialJwt(item.credentialJwt);
+                            }
+
                         }}>
                             <Row>
                                 <Col span={20}>

diff --git a/src/views/company-views/components/viewselectedcredential/index.tsx b/src/views/company-views/components/viewselectedcredential/index.tsx
@@ -1,11 +1,12 @@
 import styled from "styled-components";
-import { Drawer, Alert, Row, Table, Col, Popconfirm, Button, Space, notification } from 'antd';
-import { LeftOutlined, DeleteOutlined } from '@ant-design/icons';
+import { Drawer, Alert, Row, Table, Col, Popconfirm, Button, Space, notification, Tooltip } from 'antd';
+import { LeftOutlined, DeleteOutlined, CopyOutlined } from '@ant-design/icons';
 import { useEffect, useState } from 'react';
 import { CloseCircleOutlined } from "@ant-design/icons";
 import companyService from "services/companyService";
 import { useListStoredCertificatesQuery } from "services/company.rtk";
 import { useTranslation } from 'react-i18next';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 const StyledTable = styled(Table)`
     border: 1px solid #ddd;
@@ -29,10 +30,16 @@ const StyledDeleteOutlined = styled(DeleteOutlined)`
     cursor: pointer;
 `;
 
+const StyledCopyOutlined = styled(CopyOutlined)`
+    font-size: 15px;
+    cursor: pointer;
+`;
 
-export const ViewSelectedCredentialPage = (props: { onClose: any; open: boolean; selectedViewCredentialAttributes: any; onViewCredentialsDrawerClose: any; selectedViewCredentialReferent: string; }) => {
+
+export const ViewSelectedCredentialPage = (props: { onClose: any; open: boolean; selectedViewCredentialAttributes: any; onViewCredentialsDrawerClose: any; selectedViewCredentialReferent: string; credentialJwt: string; }) => {
     const { data, error, isLoading, refetch } = useListStoredCertificatesQuery(undefined)
-    const { t , i18n } = useTranslation();
+    const { t, i18n } = useTranslation();
+    const [copied, setCopied] = useState(false);
 
     const footerActionButtons = () => {
         return (
@@ -60,7 +67,7 @@ export const ViewSelectedCredentialPage = (props: { onClose: any; open: boolean;
             key: 'value',
         }
     ];
-    
+
     const [open, setOpen] = useState(false);
 
     const camelToTitle = (camelCase: string) => camelCase
@@ -95,6 +102,7 @@ export const ViewSelectedCredentialPage = (props: { onClose: any; open: boolean;
             open={props.open}
             extra={
                 <Space>
+
                     <Popconfirm
                         title={t('Are you sure you want to delete this credential?')}
                         open={open}
@@ -127,6 +135,26 @@ export const ViewSelectedCredentialPage = (props: { onClose: any; open: boolean;
             <p>
                 <StyledTable columns={columns} dataSource={updateAttributesTable(props.selectedViewCredentialAttributes)} bordered pagination={false} />
             </p>
+            {
+
+                props.credentialJwt && (
+                    <p style={{ display: "flex", justifyContent: "flex-end" }}>
+                        <CopyToClipboard
+                            text={props.credentialJwt}
+                            onCopy={() => setCopied(true)}>
+                            <Tooltip placement="top" trigger={"click"} title={t("Copied")}>
+                                <span style={{ cursor: 'pointer' }}>
+                                    <Space>
+                                        <span>{"Copy credential"}</span>
+                                        <CopyOutlined style={{ fontSize: '18px' }} />
+                                    </Space>
+                                </span>
+                            </Tooltip>
+                        </CopyToClipboard>
+                    </p>  
+                )
+            }
+
         </Drawer>
     );
 }