[INJIWEB-700]: secure time bound storage

Signed-off-by: Vijay <[email protected]>

inji-web/src/__tests__/components/DataShare/CustomTimes/CTContent.test.tsx

@@ -0,0 +1,76 @@
+import {fireEvent, render, screen} from "@testing-library/react";
+import {CTContent} from "../../../../components/DataShare/CustomTimes/CTContent";
+import {useTranslation} from "react-i18next";
+
+describe("Test the Layout of the Custom Expiry Content", () => {
+
+    beforeEach(() => {
+        jest.mock("react-i18next", () => ({
+            useTranslation: () => ({
+                t: (key: string) => key,
+            }),
+        }));
+    } )
+
+    test("Test the presence of the Outer Container", ()=>{
+        const expiryMockFn = jest.fn();
+        render(<CTContent expiryTime={1} setExpiryTime={expiryMockFn} />);
+        const ctDocument = screen.getByTestId("CTContent-Outer-Container");
+        expect(ctDocument).toBeInTheDocument();
+    })
+    test("Test the presence of the Time Range Container", ()=>{
+        const expiryMockFn = jest.fn();
+        render(<CTContent expiryTime={1} setExpiryTime={expiryMockFn} />);
+        const ctDocument = screen.getByTestId("CTContent-Times-Range-Container");
+        expect(ctDocument).toBeInTheDocument();
+    })
+    test("Test the presence of the Time Range Increase Container", ()=>{
+        const expiryMockFn = jest.fn();
+        render(<CTContent expiryTime={1} setExpiryTime={expiryMockFn} />);
+        const ctDocument = screen.getByTestId("CTContent-Times-Range-Increase");
+        expect(ctDocument).toBeInTheDocument();
+    })
+    test("Test the presence of the Time Range Decrease Container", ()=>{
+        const expiryMockFn = jest.fn();
+        render(<CTContent expiryTime={1} setExpiryTime={expiryMockFn} />);
+        const ctDocument = screen.getByTestId("CTContent-Times-Range-Decrease");
+        expect(ctDocument).toBeInTheDocument();
+    })
+    test("Test the presence of the Time Range Value", ()=>{
+        const expiryMockFn = jest.fn();
+        render(<CTContent expiryTime={1} setExpiryTime={expiryMockFn} />);
+        const ctDocument = screen.getByTestId("CTContent-Times-Value");
+        expect(ctDocument).toBeInTheDocument();
+    })
+    test("Test the presence of the Time Range Metrics", ()=>{
+        const expiryMockFn = jest.fn();
+        render(<CTContent expiryTime={1} setExpiryTime={expiryMockFn} />);
+        const ctDocument = screen.getByTestId("CTContent-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(<CTContent expiryTime={expiryTime} setExpiryTime={expiryMockFn} />);
+        const increaseValueButton = screen.getByTestId("CTContent-Times-Range-Increase");
+        const valueDiv = screen.getByTestId("CTContent-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(<CTContent expiryTime={expiryTime} setExpiryTime={expiryMockFn} />);
+        const increaseValueButton = screen.getByTestId("CTContent-Times-Range-Decrease");
+        const valueDiv = screen.getByTestId("CTContent-Times-Value");
+        expect(valueDiv).toHaveValue(expiryTime + "");
+        fireEvent.click(increaseValueButton);
+        expect(expiryMockFn).toHaveBeenCalledTimes(1);
+        expect(expiryMockFn).toHaveBeenCalledWith(expiryTime -1);
+    })
+})

inji-web/src/__tests__/components/DataShare/CustomTimes/CTHeader.test.tsx

@@ -0,0 +1,22 @@
+import {render, screen} from "@testing-library/react";
+import {CTHeader} from "../../../../components/DataShare/CustomTimes/CTHeader";
+
+describe("Test the Layout of the Custom Expiry Header", () => {
+
+    beforeEach( ()=> {
+        render(<CTHeader title={"CTHeader"} />);
+    } )
+
+    test("Test the presence of the Outer Container", ()=>{
+        const document = screen.getByTestId("CTHeader-Outer-Container");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test the presence of the Title Content", ()=>{
+        const document = screen.getByTestId("CTHeader-Title-Content");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test to Have the content", ()=>{
+        const document = screen.getByTestId("CTHeader-Title-Content");
+        expect(document).toHaveTextContent("CTHeader");
+    })
+})

inji-web/src/__tests__/components/DataShare/DSContent.test.tsx

@@ -0,0 +1,58 @@
+import {fireEvent, render, screen} from "@testing-library/react";
+import {DSContent} from "../../../components/DataShare/DSContent";
+import {reduxStore} from "../../../redux/reduxStore";
+import {Provider} from "react-redux";
+
+describe("Test the Layout of the Expiry Content", () => {
+
+    const customMockFn = jest.fn();
+    beforeEach(() => {
+        jest.mock("react-i18next", () => ({
+            useTranslation: () => ({
+                t: (key: string) => key,
+            }),
+        }));
+        render(<Provider store={reduxStore}>
+            <DSContent credentialName={"credentialName"} credentialLogo={"credentialLogo"} setCustom={customMockFn} />
+        </Provider>);
+    } )
+
+    test("Test the presence of the Outer Container", ()=>{
+        const document = screen.getByTestId("DSContent-Outer-Container");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test the presence of the Outer Title", ()=>{
+        const document = screen.getByTestId("DSContent-Outer-Title");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test the presence of the Issuer Logo", ()=>{
+        const document = screen.getByTestId("DSContent-Issuer-Logo");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test the presence of the Issuer Name", ()=>{
+        const document = screen.getByTestId("DSContent-Issuer-Name");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test the presence of the Consent Container", ()=>{
+        const document = screen.getByTestId("DSContent-Consent-Container");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test the Validity Times Dropdown should not show custom as selected option at first", ()=>{
+        const selectedDocument = screen.getByTestId("DSContent-Selected-Validity-Times");
+        expect(selectedDocument).not.toHaveTextContent("Custom");
+        expect(selectedDocument).toHaveTextContent("Once");
+        const document = screen.queryByTestId("DSContent-Validity-Times-DropDown");
+        expect(document).not.toBeInTheDocument();
+    })
+    test.skip("Test the Validity Times Dropdown should option when custom is selected", ()=>{
+        let selectedDocument = screen.getByTestId("DSContent-Selected-Validity-Times");
+        fireEvent.click(selectedDocument);
+        const customValidityDocument = screen.getByTestId("DSContent-Validity-Times-DropDown-Custom");
+        fireEvent.click(customValidityDocument);
+        selectedDocument = screen.getByTestId("DSContent-Selected-Validity-Times");
+        expect(selectedDocument).toHaveTextContent("Custom");
+        const document = screen.getByTestId("DSContent-Validity-Times-DropDown");
+        expect(document).toBeInTheDocument();
+        expect(document.children.length).toBe(4);
+    })
+})

inji-web/src/__tests__/components/DataShare/DSDisclaimer.test.tsx

@@ -0,0 +1,11 @@
+import {render, screen} from "@testing-library/react";
+import {DSDisclaimer} from "../../../components/DataShare/DSDisclaimer";
+
+describe("Testing Layout of the Disclaimer", () => {
+    test("Test the presence of the Outer Container", ()=>{
+        render(<DSDisclaimer content={"Disclaimer"} />);
+        const document = screen.getByTestId("DSDisclaimer-Outer-Container");
+        expect(document).toBeInTheDocument();
+        expect(document).toHaveTextContent("Disclaimer");
+    })
+})

inji-web/src/__tests__/components/DataShare/DSFooter.test.tsx

@@ -0,0 +1,43 @@
+import {fireEvent, render, screen} from "@testing-library/react";
+import {DSFooter} from "../../../components/DataShare/DSFooter";
+
+describe("Testing Layout of the Expiry Footer", () => {
+
+    const successMockFn = jest.fn();
+    const cancelMockFn = jest.fn();
+    beforeEach(() => {
+        jest.mock("react-i18next", () => ({
+            useTranslation: () => ({
+                t: (key: string) => key,
+            }),
+        }));
+        render(<DSFooter success={"success"} onSuccess={successMockFn} cancel={"cancel"} onCancel={cancelMockFn} />);
+    } )
+
+    test("Test the presence of the Outer Container", ()=>{
+        const document = screen.getByTestId("DSFooter-Outer-Container");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test the presence of the Cancel Button", ()=>{
+        const document = screen.getByTestId("DSFooter-Cancel-Button");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test the presence of the Success Button", ()=>{
+        const document = screen.getByTestId("DSFooter-Success-Button");
+        expect(document).toBeInTheDocument();
+    })
+
+    test("Test whether success button is invoked on clicking", ()=>{
+        const successButton = screen.getByTestId("DSFooter-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("DSFooter-Cancel-Button");
+        fireEvent.click(cancelButton);
+        expect(successMockFn).not.toBeCalled();
+        expect(cancelMockFn).toBeCalled();
+    })
+})

inji-web/src/__tests__/components/DataShare/DSHeader.test.tsx

@@ -0,0 +1,22 @@
+import {render, screen} from "@testing-library/react";
+import {DSHeader} from "../../../components/DataShare/DSHeader";
+
+describe("Testing Layout of the Expiry Header", () => {
+    beforeEach(()=>{
+        render(<DSHeader title={"title"} subTitle={"subTitle"}/>);
+    })
+    test("Test Presence of the Outer Container", ()=>{
+        const document = screen.getByTestId("DSHeader-Outer-Container");
+        expect(document).toBeInTheDocument();
+    })
+    test("Test Presence of the Header Title", ()=>{
+        const document = screen.getByTestId("DSHeader-Header-Title");
+        expect(document).toBeInTheDocument();
+        expect(document).toHaveTextContent("title");
+    })
+    test("Test Presence of the Header SubTitle", ()=>{
+        const document = screen.getByTestId("DSHeader-Header-SubTitle");
+        expect(document).toBeInTheDocument();
+        expect(document).toHaveTextContent("subTitle");
+    })
+})

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 vcExpiryTimes = useSelector((state: RootState) => state.common.vcExpiryTimes);
+
+    const onSuccess = () => {
+        const state = generateRandomString();
+        const code_challenge: CodeChallengeObject = generateCodeChallenge(state);
+        console.log("vcExpiryTimes => " + vcExpiryTimes);
+        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,
+            vcExpiryTimes: vcExpiryTimes ?? 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>
 }
 

inji-web/src/components/DataShare/CustomTimes/CTContent.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import {RiArrowDownSLine, RiArrowUpSLine} from "react-icons/ri";
+import {useTranslation} from "react-i18next";
+
+export const CTContent:React.FC<CTContentType>= (props) => {
+
+    const {t} = useTranslation("CustomExpiryModal");
+    return <div className="relative px-6 mx-4 flex flex-col justify-between" data-testid={"CTContent-Outer-Container"}>
+        <div className={"border-2 rounded-lg flex flex-row justify-between"}>
+            <div className={"flex flex-col px-2"}  data-testid={"CTContent-Times-Range-Container"}>
+                <button onClick={() => props.setExpiryTime(props.expiryTime + 1)} data-testid={"CTContent-Times-Range-Increase"}>
+                    <RiArrowUpSLine size={20} color={'var(--iw-color-arrowDown)'}/>
+                </button>
+                <button onClick={() => props.expiryTime > 1 && props.setExpiryTime(props.expiryTime - 1)} data-testid={"CTContent-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={"CTContent-Times-Value"}/></div>
+            <div className={"px-2 flex items-center justify-center bg-iw-borderLight text-iw-subText"} data-testid={"CTContent-Times-Metrics"}>{t("metrics")}</div>
+        </div>
+    </div>;
+}
+
+export type CTContentType = {
+    expiryTime: number;
+    setExpiryTime: (expiry:number) => void;
+}

inji-web/src/components/DataShare/CustomTimes/CTHeader.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export const CTHeader:React.FC<CTHeaderType> = (props) => {
+    return <div className="flex items-start justify-between p-5 rounded-t text-center" data-testid={"CTHeader-Outer-Container"}>
+        <div className="text-lg font-semibold"  data-testid={"CTHeader-Title-Content"}>{props.title} </div>
+    </div>;
+}
+
+export type CTHeaderType = {
+    title: string;
+}