[INJIWEB-700]: secure time bound storage (#144)

* [INJIWEB-700]: secure time bound storage Signed-off-by: Vijay <[email protected]> * [INJIWEB-700]: secure time bound storage- test cases Signed-off-by: Vijay <[email protected]> * [INJIWEB-700]: secure time bound storage- correct file names Signed-off-by: Vijay <[email protected]> * [INJIWEB-700]: secure time bound storage- correct file names Signed-off-by: Vijay <[email protected]> * [INJIWEB-700]: secure time bound storage- reviewed changes Signed-off-by: Vijay <[email protected]> * [INJIWEB-700]: secure time bound storage- types movement Signed-off-by: Vijay <[email protected]> --------- Signed-off-by: Vijay <[email protected]> Signed-off-by: Vijay Kumar S <[email protected]>
mosip · Oct 8, 2024 · 1c95956 · 1c95956
1 parent fe9246d
commit 1c95956
Show file tree

Hide file tree

Showing 33 changed files with 783 additions and 24 deletions.
diff --git a/inji-web/src/__tests__/components/DataShare/CustomTimes/CustomExpiryTimesContent.test.tsx b/inji-web/src/__tests__/components/DataShare/CustomTimes/CustomExpiryTimesContent.test.tsx
@@ -0,0 +1,73 @@
+import {fireEvent, render, screen} from "@testing-library/react";
+import {CustomExpiryTimesContent} from "../../../../components/DataShare/CustomExpiryTimes/CustomExpiryTimesContent";
+import {useTranslation} from "react-i18next";
+import {mockUseTranslation} from "../../../../utils/mockUtils";
+
+describe("Test the Layout of the Custom Expiry Content", () => {
+
+    beforeEach(() => {
+        mockUseTranslation();
+    } )
+
+    test("Test the presence of the Outer Container", ()=>{
+        const expiryMockFn = jest.fn();
+        render(<CustomExpiryTimesContent expiryTime={1} setExpiryTime={expiryMockFn} />);
+        const ctDocument = screen.getByTestId("CustomExpiryTimesContent-Outer-Container");
+        expect(ctDocument).toBeInTheDocument();
+    })
+    test("Test the presence of the Time Range Container", ()=>{
+        const expiryMockFn = jest.fn();
+        render(<CustomExpiryTimesContent expiryTime={1} setExpiryTime={expiryMockFn} />);
+        const ctDocument = screen.getByTestId("CustomExpiryTimesContent-Times-Range-Container");
+        expect(ctDocument).toBeInTheDocument();
+    })
+    test("Test the presence of the Time Range Increase Container", ()=>{
+        const expiryMockFn = jest.fn();
+        render(<CustomExpiryTimesContent expiryTime={1} setExpiryTime={expiryMockFn} />);
+        const ctDocument = screen.getByTestId("CustomExpiryTimesContent-Times-Range-Increase");
+        expect(ctDocument).toBeInTheDocument();
+    })
+    test("Test the presence of the Time Range Decrease Container", ()=>{
+        const expiryMockFn = jest.fn();
+        render(<CustomExpiryTimesContent expiryTime={1} setExpiryTime={expiryMockFn} />);
+        const ctDocument = screen.getByTestId("CustomExpiryTimesContent-Times-Range-Decrease");
+        expect(ctDocument).toBeInTheDocument();
+    })
+    test("Test the presence of the Time Range Value", ()=>{
+        const expiryMockFn = jest.fn();
+        render(<CustomExpiryTimesContent expiryTime={1} setExpiryTime={expiryMockFn} />);
+        const ctDocument = screen.getByTestId("CustomExpiryTimesContent-Times-Value");
+        expect(ctDocument).toBeInTheDocument();
+    })
+    test("Test the presence of the Time Range Metrics", ()=>{
+        const expiryMockFn = jest.fn();
+        render(<CustomExpiryTimesContent expiryTime={1} setExpiryTime={expiryMockFn} />);
+        const ctDocument = screen.getByTestId("CustomExpiryTimesContent-Times-Metrics");
+        expect(ctDocument).toBeInTheDocument();
+        expect(ctDocument).toHaveTextContent("metrics");
+    })
+
+    test("Test the Time Range Increase on Clicking the Increase Button", ()=>{
+        const expiryTime=1;
+        const expiryMockFn = jest.fn(()=> expiryTime+1);
+        render(<CustomExpiryTimesContent expiryTime={expiryTime} setExpiryTime={expiryMockFn} />);
+        const increaseValueButton = screen.getByTestId("CustomExpiryTimesContent-Times-Range-Increase");
+        const valueDiv = screen.getByTestId("CustomExpiryTimesContent-Times-Value");
+        expect(valueDiv).toHaveValue(expiryTime + "");
+        fireEvent.click(increaseValueButton);
+        expect(expiryMockFn).toHaveBeenCalledTimes(1);
+        expect(expiryMockFn).toHaveBeenCalledWith(expiryTime + 1);
+    })
+
+    test("Test the Time Range Decrease on Clicking the Decrease Button", ()=>{
+        const expiryTime=3;
+        const expiryMockFn = jest.fn(()=> expiryTime+1);
+        render(<CustomExpiryTimesContent expiryTime={expiryTime} setExpiryTime={expiryMockFn} />);
+        const increaseValueButton = screen.getByTestId("CustomExpiryTimesContent-Times-Range-Decrease");
+        const valueDiv = screen.getByTestId("CustomExpiryTimesContent-Times-Value");
+        expect(valueDiv).toHaveValue(expiryTime + "");
+        fireEvent.click(increaseValueButton);
+        expect(expiryMockFn).toHaveBeenCalledTimes(1);
+        expect(expiryMockFn).toHaveBeenCalledWith(expiryTime -1);
+    })
+})
diff --git a/inji-web/src/__tests__/components/DataShare/CustomTimes/CustomExpiryTimesHeader.test.tsx b/inji-web/src/__tests__/components/DataShare/CustomTimes/CustomExpiryTimesHeader.test.tsx
@@ -0,0 +1,22 @@
+import {render, screen} from "@testing-library/react";
+import {CustomExpiryTimesHeader} from "../../../../components/DataShare/CustomExpiryTimes/CustomExpiryTimesHeader";
+
+describe("Test the Layout of the Custom Expiry Header", () => {
+
+    beforeEach( ()=> {
+        render(<CustomExpiryTimesHeader title={"CTHeader"} />);
+    } )
+
+    test("Test the presence of the Outer Container", ()=>{
+        const document = screen.getByTestId("CustomExpiryTimesHeader-Outer-Container");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test the presence of the Title Content", ()=>{
+        const document = screen.getByTestId("CustomExpiryTimesHeader-Title-Content");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test to Have the content", ()=>{
+        const document = screen.getByTestId("CustomExpiryTimesHeader-Title-Content");
+        expect(document).toHaveTextContent("CTHeader");
+    })
+})
diff --git a/inji-web/src/__tests__/components/DataShare/DataShareContent.test.tsx b/inji-web/src/__tests__/components/DataShare/DataShareContent.test.tsx
@@ -0,0 +1,55 @@
+import {fireEvent, render, screen} from "@testing-library/react";
+import {DataShareContent} from "../../../components/DataShare/DataShareContent";
+import {reduxStore} from "../../../redux/reduxStore";
+import {Provider} from "react-redux";
+import {mockUseTranslation} from "../../../utils/mockUtils";
+
+describe("Test the Layout of the Expiry Content", () => {
+
+    const customMockFn = jest.fn();
+    beforeEach(() => {
+        mockUseTranslation();
+        render(<Provider store={reduxStore}>
+            <DataShareContent credentialName={"credentialName"} credentialLogo={"credentialLogo"} setIsCustomExpiryInTimesModalOpen={customMockFn} />
+        </Provider>);
+    } )
+
+    test("Test the presence of the Outer Container", ()=>{
+        const document = screen.getByTestId("DataShareContent-Outer-Container");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test the presence of the Outer Title", ()=>{
+        const document = screen.getByTestId("DataShareContent-Outer-Title");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test the presence of the Issuer Logo", ()=>{
+        const document = screen.getByTestId("DataShareContent-Issuer-Logo");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test the presence of the Issuer Name", ()=>{
+        const document = screen.getByTestId("DataShareContent-Issuer-Name");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test the presence of the Consent Container", ()=>{
+        const document = screen.getByTestId("DataShareContent-Consent-Container");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test the Validity Times Dropdown should not show custom as selected option at first", ()=>{
+        const selectedDocument = screen.getByTestId("DataShareContent-Selected-Validity-Times");
+        expect(selectedDocument).not.toHaveTextContent("Custom");
+        expect(selectedDocument).toHaveTextContent("Once");
+        const document = screen.queryByTestId("DataShareContent-Validity-Times-DropDown");
+        expect(document).not.toBeInTheDocument();
+    })
+    test.skip("Test the Validity Times Dropdown should option when custom is selected", ()=>{
+        let selectedDocument = screen.getByTestId("DataShareContent-Selected-Validity-Times");
+        fireEvent.click(selectedDocument);
+        const customValidityDocument = screen.getByTestId("DataShareContent-Validity-Times-DropDown-Custom");
+        fireEvent.click(customValidityDocument);
+        selectedDocument = screen.getByTestId("DataShareContent-Selected-Validity-Times");
+        expect(selectedDocument).toHaveTextContent("Custom");
+        const document = screen.getByTestId("DataShareContent-Validity-Times-DropDown");
+        expect(document).toBeInTheDocument();
+        expect(document.children.length).toBe(4);
+    })
+})
diff --git a/inji-web/src/__tests__/components/DataShare/DataShareDisclaimer.test.tsx b/inji-web/src/__tests__/components/DataShare/DataShareDisclaimer.test.tsx
@@ -0,0 +1,11 @@
+import {render, screen} from "@testing-library/react";
+import {DataShareDisclaimer} from "../../../components/DataShare/DataShareDisclaimer";
+
+describe("Testing Layout of the Disclaimer", () => {
+    test("Test the presence of the Outer Container", ()=>{
+        render(<DataShareDisclaimer content={"Disclaimer"} />);
+        const document = screen.getByTestId("DataShareDisclaimer-Outer-Container");
+        expect(document).toBeInTheDocument();
+        expect(document).toHaveTextContent("Disclaimer");
+    })
+})
diff --git a/inji-web/src/__tests__/components/DataShare/DataShareFooter.test.tsx b/inji-web/src/__tests__/components/DataShare/DataShareFooter.test.tsx
@@ -0,0 +1,40 @@
+import {fireEvent, render, screen} from "@testing-library/react";
+import {DataShareFooter} from "../../../components/DataShare/DataShareFooter";
+import {mockUseTranslation} from "../../../utils/mockUtils";
+
+describe("Testing Layout of the Expiry Footer", () => {
+
+    const successMockFn = jest.fn();
+    const cancelMockFn = jest.fn();
+    beforeEach(() => {
+        mockUseTranslation()
+        render(<DataShareFooter successText={"success"} onSuccess={successMockFn} cancelText={"cancel"} onCancel={cancelMockFn} />);
+    } )
+
+    test("Test the presence of the Outer Container", ()=>{
+        const document = screen.getByTestId("DataShareFooter-Outer-Container");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test the presence of the Cancel Button", ()=>{
+        const document = screen.getByTestId("DataShareFooter-Cancel-Button");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test the presence of the Success Button", ()=>{
+        const document = screen.getByTestId("DataShareFooter-Success-Button");
+        expect(document).toBeInTheDocument();
+    })
+
+    test("Test whether success button is invoked on clicking", ()=>{
+        const successButton = screen.getByTestId("DataShareFooter-Success-Button");
+        fireEvent.click(successButton);
+        expect(successMockFn).toBeCalled();
+        expect(cancelMockFn).not.toBeCalled();
+    })
+
+    test("Test whether cancel button is invoked on clicking", ()=>{
+        const cancelButton = screen.getByTestId("DataShareFooter-Cancel-Button");
+        fireEvent.click(cancelButton);
+        expect(successMockFn).not.toBeCalled();
+        expect(cancelMockFn).toBeCalled();
+    })
+})
diff --git a/inji-web/src/__tests__/components/DataShare/DataShareHeader.test.tsx b/inji-web/src/__tests__/components/DataShare/DataShareHeader.test.tsx
@@ -0,0 +1,22 @@
+import {render, screen} from "@testing-library/react";
+import {DataShareHeader} from "../../../components/DataShare/DataShareHeader";
+
+describe("Testing Layout of the Expiry Header", () => {
+    beforeEach(()=>{
+        render(<DataShareHeader title={"title"} subTitle={"subTitle"}/>);
+    })
+    test("Test Presence of the Outer Container", ()=>{
+        const document = screen.getByTestId("DataShareHeader-Outer-Container");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test Presence of the Header Title", ()=>{
+        const document = screen.getByTestId("DataShareHeader-Header-Title");
+        expect(document).toBeInTheDocument();
+        expect(document).toHaveTextContent("title");
+    })
+    test("Test Presence of the Header SubTitle", ()=>{
+        const document = screen.getByTestId("DataShareHeader-Header-SubTitle");
+        expect(document).toBeInTheDocument();
+        expect(document).toHaveTextContent("subTitle");
+    })
+})
diff --git a/inji-web/src/__tests__/modals/ModalWrapper.test.tsx b/inji-web/src/__tests__/modals/ModalWrapper.test.tsx
@@ -0,0 +1,38 @@
+import {render, screen} from "@testing-library/react";
+import {ModalWrapper} from "../../modals/ModalWrapper";
+import {DataShareHeader} from "../../components/DataShare/DataShareHeader";
+import {DataShareFooter} from "../../components/DataShare/DataShareFooter";
+import React from "react";
+import {DataShareContent} from "../../components/DataShare/DataShareContent";
+import {reduxStore} from "../../redux/reduxStore";
+import {Provider} from "react-redux";
+
+describe("Test the Layout of the Modal Wrapper", () => {
+
+    const customMockFn = jest.fn();
+    beforeEach(() => {
+        render(
+            <Provider store={reduxStore}>
+            <ModalWrapper header={<DataShareHeader title={"title"} subTitle={"subTitle"}/>}
+                             content={<DataShareContent credentialName={"credentialName"} credentialLogo={"credentialLogo"} setCustom={jest.fn()}/>}
+                             footer={<DataShareFooter cancel={"cancel"} success={"success"} onSuccess={jest.fn()} onCancel={jest.fn()}/>}
+                             size={"3xl"}
+                             zIndex={40} />
+            </Provider>)
+    })
+
+    test("Test the presence of the Outer Container", ()=>{
+        const document = screen.getByTestId("ModalWrapper-Outer-Container");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test the presence of the Inner Container", ()=>{
+        const document = screen.getByTestId("ModalWrapper-Inner-Container");
+        expect(document).toBeInTheDocument();
+        expect(document.children.length).toBe(3)
+    })
+    test("Test the presence of the Back Drop", ()=>{
+        const document = screen.getByTestId("ModalWrapper-BackDrop");
+        expect(document).toBeInTheDocument();
+    })
+
+})
diff --git a/inji-web/src/components/Common/ItemBox.tsx b/inji-web/src/components/Common/ItemBox.tsx
@@ -2,8 +2,6 @@ import React from "react";
 import {ItemBoxProps} from "../../types/components";
 
 export const ItemBox: React.FC<ItemBoxProps> = (props) => {
-    console.log(`Index -> ${props.index}`)
-    console.log(`Mod Index -> ${props.index%6}`)
     return <React.Fragment>
         <div key={props.index}
              data-testid={`ItemBox-Outer-Container-${props.index}`}

diff --git a/inji-web/src/components/Credentials/Crendential.tsx b/inji-web/src/components/Credentials/Crendential.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from "react";
 import {getObjectForCurrentLanguage} from "../../utils/i18n";
 import {ItemBox} from "../Common/ItemBox";
 import {generateCodeChallenge, generateRandomString} from "../../utils/misc";
@@ -8,26 +8,41 @@ import {api} from "../../utils/api";
 import {CredentialProps} from "../../types/components";
 import {CodeChallengeObject, CredentialConfigurationObject} from "../../types/data";
 import {RootState} from "../../types/redux";
+import {DataShareExpiryModal} from "../../modals/DataShareExpiryModal";
+import {storage} from "../../utils/storage";
 
 export const Credential: React.FC<CredentialProps> = (props) => {
     const selectedIssuer = useSelector((state: RootState) => state.issuers);
+    const [credentialExpiry, setCredentialExpiry] = useState<boolean>(false);
     const language = useSelector((state: RootState) => state.common.language);
     const filteredCredentialConfig: CredentialConfigurationObject = props.credentialWellknown.credential_configurations_supported[props.credentialId];
     const credentialObject = getObjectForCurrentLanguage(filteredCredentialConfig.display, language);
-    return <ItemBox index={props.index}
-                    url={credentialObject.logo.url}
-                    title={credentialObject.name}
-                    onClick={() => {
-                        const state = generateRandomString();
-                        const code_challenge: CodeChallengeObject = generateCodeChallenge(state);
-                        window.open(api.authorization(selectedIssuer.selected_issuer, props.credentialWellknown, filteredCredentialConfig, state, code_challenge), '_self', 'noopener');
-                        addNewSession({
-                            selectedIssuer: selectedIssuer.selected_issuer,
-                            certificateId: props.credentialId,
-                            codeVerifier: state,
-                            state: state,
-                        });
-                    }}
-    />
+    const vcStorageExpiryLimitInTimes = useSelector((state: RootState) => state.common.vcStorageExpiryLimitInTimes);
+
+    const onSuccess = () => {
+        const state = generateRandomString();
+        const code_challenge: CodeChallengeObject = generateCodeChallenge(state);
+        window.open(api.authorization(selectedIssuer.selected_issuer, props.credentialWellknown, filteredCredentialConfig, state, code_challenge), '_self', 'noopener');
+        addNewSession({
+            selectedIssuer: selectedIssuer.selected_issuer,
+            certificateId: props.credentialId,
+            codeVerifier: state,
+            vcStorageExpiryLimitInTimes: vcStorageExpiryLimitInTimes ?? 1,
+            state: state,
+        });
+    }
+
+    return <React.Fragment>
+        <ItemBox index={props.index}
+                 url={credentialObject.logo.url}
+                 title={credentialObject.name}
+                 onClick={() => setCredentialExpiry(true)}/>
+                        { credentialExpiry &&
+                            <DataShareExpiryModal onCancel={() => setCredentialExpiry(false)}
+                                                  onSuccess={onSuccess}
+                                                  credentialName={credentialObject.name}
+                                                  credentialLogo={credentialObject.logo.url}/>
+                        }
+    </React.Fragment>
 }
 
diff --git a/inji-web/src/components/DataShare/CustomExpiryTimes/CustomExpiryTimesContent.tsx b/inji-web/src/components/DataShare/CustomExpiryTimes/CustomExpiryTimesContent.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import {RiArrowDownSLine, RiArrowUpSLine} from "react-icons/ri";
+import {useTranslation} from "react-i18next";
+import {CTContentProps} from "../../../types/components";
+
+export const CustomExpiryTimesContent:React.FC<CTContentProps>= (props) => {
+
+    const {t} = useTranslation("CustomExpiryModal");
+    return <div className="relative px-6 mx-4 flex flex-col justify-between" data-testid={"CustomExpiryTimesContent-Outer-Container"}>
+        <div className={"border-2 rounded-lg flex flex-row justify-between"}>
+            <div className={"flex flex-col px-2"}  data-testid={"CustomExpiryTimesContent-Times-Range-Container"}>
+                <button onClick={() => props.setExpiryTime(props.expiryTime + 1)} data-testid={"CustomExpiryTimesContent-Times-Range-Increase"}>
+                    <RiArrowUpSLine size={20} color={'var(--iw-color-arrowDown)'}/>
+                </button>
+                <button onClick={() => props.expiryTime > 1 && props.setExpiryTime(props.expiryTime - 1)} data-testid={"CustomExpiryTimesContent-Times-Range-Decrease"}>
+                    <RiArrowDownSLine size={20} color={'var(--iw-color-arrowDown)'} />
+                </button>
+            </div>
+            <div className={"px-2 flex w-full"}><input type={"text"} min={0} value={props.expiryTime} onChange={event => {props.setExpiryTime(isNaN(parseInt(event.target.value)) ? 0 : parseInt(event.target.value)); }} className={"appearance-none w-full p-2 focus:outline-none no-spinner"} placeholder={"Enter Number here"} data-testid={"CustomExpiryTimesContent-Times-Value"}/></div>
+            <div className={"px-2 flex items-center justify-center bg-iw-borderLight text-iw-subText"} data-testid={"CustomExpiryTimesContent-Times-Metrics"}>{t("metrics")}</div>
+        </div>
+    </div>;
+}
+
diff --git a/inji-web/src/components/DataShare/CustomExpiryTimes/CustomExpiryTimesHeader.tsx b/inji-web/src/components/DataShare/CustomExpiryTimes/CustomExpiryTimesHeader.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import {CTHeaderProps} from "../../../types/components";
+
+export const CustomExpiryTimesHeader:React.FC<CTHeaderProps> = (props) => {
+    return <div className="flex items-start justify-between p-5 rounded-t text-center" data-testid={"CustomExpiryTimesHeader-Outer-Container"}>
+        <div className="text-lg font-semibold"  data-testid={"CustomExpiryTimesHeader-Title-Content"}>{props.title} </div>
+    </div>;
+}
+