Add RP tabs

src/pages/verifier/tabs/admin.tsx

@@ -0,0 +1,102 @@
+import { useState, useEffect } from "react"
+import { getPresentations, modifyPresentations} from "../../../utils"
+import { DataGrid, GridColDef } from '@mui/x-data-grid';
+import { TextField, Button } from "@mui/material"
+
+
+const columns: GridColDef[] = [
+    { field: 'id', headerName: 'ID', width: 70 },
+    { field: 'status', headerName: 'Status', width: 100 },
+    { field: 'cred_hashes', headerName: 'Credential hashes', width: 140 },
+    { field: 'cred_schemas', headerName: 'Credential schemas', width: 1000 },
+    { field: 'lang', headerName: 'Language', width: 100 },
+    { field: 'script', headerName: 'Script', width: 1000 },
+    { field: 'result', headerName: 'Result', width: 70 },
+];
+
+
+export function AdminsTab() {
+    const [presentations, setPresentations] = useState<object[]>([]);
+    const [toApprove, setToApprove] = useState<string>("");
+    const [toDeny, setToDeny] = useState<string>("");
+
+    const fetchData = async () => {
+        const res = await getPresentations()
+        setPresentations(res.map((x, index) => {
+            x["id"] = index;
+            x["cred_schemas"] = x["cred_schemas"].map((y: string) => atob(y));
+            return x;
+         }));
+    }
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        switch(event.target.id) {
+            case "todeny":
+                setToDeny(event.target.value)
+                break
+            case "toapprove":
+                setToApprove(event.target.value)
+                break
+        }
+    }
+
+    const handleApprove = () => {
+        const idx = toApprove.split(",").filter(x => x != "").map(x => parseInt(x));
+        modifyPresentations(idx, []).then(() => { fetchData() });
+    }
+
+    const handleDeny = () => {
+        const idx = toDeny.split(",").filter(x => x != "").map(x => parseInt(x));
+        modifyPresentations([], idx).then(() => { fetchData() });
+    }
+
+    useEffect(() => { fetchData() }, [])
+
+    return (
+      <>
+        <div style={{ width: '100%' }}>
+          <DataGrid
+            rows={presentations}
+            columns={columns}
+            initialState={{
+              pagination: {
+                paginationModel: { page: 0, pageSize: 5 },
+              },
+            }}
+            pageSizeOptions={[5, 10]}
+            checkboxSelection
+          />
+        </div>
+        <br/>
+        <div><h2><b>Manage presentation status</b></h2></div>
+        <TextField
+            id="toapprove"
+            variant="outlined"
+            label="IDs to approve"
+            value={toApprove}
+            onChange={handleChange}
+        />
+        <Button
+            variant="contained"
+            onClick={handleApprove}
+        >
+            Approve
+        </Button>
+        <br/>
+        <br/>
+        <TextField
+            id="todeny"
+            variant="outlined"
+            label="IDs to deny"
+            value={toDeny}
+            onChange={handleChange}
+        />
+        <Button
+            variant="contained"
+            onClick={handleDeny}
+        >
+            Deny
+        </Button>
+      </>
+    );
+}

src/pages/verifier/tabs/holder.tsx

@@ -0,0 +1,70 @@
+import { useState } from "react"
+import { checkPresentation } from "../../../utils"
+import { TextField, Button } from "@mui/material"
+
+export function HoldersTab() {
+    const [receipt, setReceipt] = useState("");
+    const [issuers, setIssuers] = useState("");
+    const [msg, setMsg] = useState("");
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        switch(event.target.id) {
+            case "receipt-field":
+                setReceipt(event.target.value)
+                break
+            case "issuers-field":
+                setIssuers(event.target.value)
+                break
+        }
+    }
+
+    const handleSubmit = () => {
+        const issuersList = issuers.split(",").filter(x => x != "");
+        checkPresentation(issuersList, receipt).then((result) => setMsg(JSON.stringify(result)))
+    }
+
+    const msgToStatus = (): string => {
+        if (msg === "") {
+            return "";
+        }
+        const parsedMsg = JSON.parse(msg);
+        if (parsedMsg["verdict"] === true) {
+            return "Success ✅";
+        }
+        else {
+            return `Error: ${parsedMsg["error"]}`
+        }
+    }
+
+    return (
+        <>
+            <br/>
+            <TextField
+                id="receipt-field"
+                variant="outlined"
+                label="Proof"
+                value={receipt}
+                onChange={handleChange}
+            />
+            <br/>
+            <br/>
+            <TextField
+                id="issuers-field"
+                variant="outlined"
+                label="Credential issuers"
+                value={issuers}
+                onChange={handleChange}
+            />
+            <br/>
+            <br/>
+            <Button
+                variant="contained"
+                onClick={handleSubmit}
+            >
+                Submit
+            </Button>
+            <br/>
+            <div>{msgToStatus()}</div>
+        </>
+    );
+}

src/pages/verifier/tabs/index.ts

@@ -0,0 +1,2 @@
+export * from "./admin"
+export * from "./holder"

src/pages/verifier/verifier.tsx

@@ -1,6 +1,40 @@
+import { useState } from 'react'
+import { HoldersTab, AdminsTab } from './tabs'
+import { Tabs, Tab, Box } from '@mui/material'
+
+
 export function Verifier() {
-    document.title = 'Verifier'
+    const [activeTab, setActiveTab] = useState<string>("holders")
+
+    const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
+        setActiveTab(newValue);
+    };
+
+    const displayActiveTab = () => {
+        switch (activeTab) {
+            case "holders":
+                return <HoldersTab/>
+            case "admins":
+                return <AdminsTab/>
+            default:
+                return <></>
+        }
+    }
+
+    document.title = 'Verifer'
     return(
-        <>Verifier Page</>
+        <>
+            <b>Relying Party Page</b>
+            <Box sx={{ width: '100%' }}>
+                <Tabs
+                    value={activeTab}
+                    onChange={handleChange}
+                >
+                    <Tab value="holders" label="Holders"></Tab>
+                    <Tab value="admins" label="Admins" />
+                </Tabs>
+            </Box>
+            {displayActiveTab()}
+        </>
     )
 }

src/utils/api.ts

@@ -92,4 +92,30 @@ export async function generateProof(credentials: string[], lang: string, script:
 
 export async function getProofStatus(taskId: number): Promise<object> {
     return (await fetch(`${getBackendUrl()}/holder/proof/status/${taskId}`)).json()
+}
+
+export async function getPresentations(): Promise<object[]> {
+    return (await fetch(`${getBackendUrl()}/verifier/presentations`)).json()
+}
+
+export async function modifyPresentations(approve: number[], deny: number[]): Promise<boolean> {
+    return (await fetch(`${getBackendUrl()}/verifier/presentations`, {
+        method: "POST",
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ approve, deny })
+    })).json()
+}
+
+export async function checkPresentation(cred_issuers: string[], base64_receipt: string): Promise<object> {
+    return (await fetch(`${getBackendUrl()}/verifier/check`, {
+        method: "POST",
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ cred_issuers, base64_receipt, })
+    })).json()
 }