Revocation Button (#100)

* Demo init script and fix issued state bug in certificate list * Clean leftover from Cert View all * Added Revoke button only for Reginald * Adde on revoke function --------- Co-authored-by: Matthew Dean <[email protected]>
digicatapult · Mar 21, 2024 · 0339d62 · 0339d62
1 parent 6bf0ef9
commit 0339d62
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@digicatapult/sqnc-hyproof-client",
-    "version": "0.4.2",
+    "version": "0.4.3",
     "description": "User interface for HyProof",
     "homepage": "https://github.com/digicatapult/sqnc-hyproof-client",
     "main": "src/index.js",

diff --git a/src/pages/CertificateViewer.js b/src/pages/CertificateViewer.js
@@ -1,6 +1,6 @@
 import React, { useRef, useState, useContext, useEffect } from 'react'
 import styled from 'styled-components'
-import { Timeline, Grid } from '@digicatapult/ui-component-library'
+import { Timeline, Grid, Button } from '@digicatapult/ui-component-library'
 
 import Nav from './components/Nav'
 import Header from './components/Header'
@@ -36,6 +36,9 @@ export default function CertificateViewer() {
   const [errorLast, setErrorLast] = useState('')
   const { callApiFn: fetchCert } = useAxios(false)
 
+  // Functions
+  const onRevoke = () => alert('Revoke')
+
   // When mounted fetch every few secs and post co2 before that if Emma and co2 not set
   useEffect(() => {
     // Fetch latest certificate
@@ -215,7 +218,17 @@ export default function CertificateViewer() {
             )}
           </Paper>
         </MainContainer>
-        <Sidebar area="sidebar"></Sidebar>
+        <Sidebar area="sidebar">
+          {persona.id === 'reginald' && (
+            <LargeButton
+              onClick={onRevoke}
+              disabled={data?.state === 'revoked'}
+              variant="roundedPronounced"
+            >
+              Revoke
+            </LargeButton>
+          )}
+        </Sidebar>
       </MainWrapper>
     </>
   )
@@ -239,9 +252,10 @@ const MainWrapper = styled.div`
 const Sidebar = styled(Grid.Panel)`
   align-items: center;
   justify-items: center;
-
   color: white;
   background: #0c3b38;
+  gap: 10px;
+  padding: 34px 21px;
 `
 
 const MainContainer = styled(Grid.Panel)`
@@ -285,3 +299,20 @@ const Paper = styled.div`
     width: 0;
   }
 `
+
+const LargeButton = styled(Button)`
+  min-height: 60px;
+  width: 100%;
+  font: normal 500 21px Roboto;
+  white-space: nowrap;
+  color: #33e58c;
+  border: 1px solid #2fe181;
+  background: #124338;
+  &:hover {
+    opacity: 0.6;
+  }
+  &:disabled {
+    color: #1c774a;
+    border: 1px solid #1c774a;
+  }
+`
diff --git a/src/pages/CertificatesViewAll.js b/src/pages/CertificatesViewAll.js
@@ -186,8 +186,4 @@ const LargeButton = styled(Button)`
     color: #1c774a;
     border: 1px solid #1c774a;
   }
-  & a {
-    color: #33e58c;
-    text-decoration: none;
-  }
 `