Redact personal details when ZK mode is enabled (proofcarryingdata#1033)

Closes proofcarryingdata#1002 https://github.com/proofcarryingdata/zupass/assets/20022/9df8ba06-cfef-43c1-a6d3-0e605fcabda2
angaz · Oct 20, 2023 · 17174e0 · 17174e0
1 parent e55b01c
commit 17174e0
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/apps/passport-client/components/core/RedactedText.tsx b/apps/passport-client/components/core/RedactedText.tsx
@@ -0,0 +1,26 @@
+import styled, { css } from "styled-components";
+
+export const RedactedText = styled.div<{ redacted: boolean }>`
+  ${({ redacted }) =>
+    redacted
+      ? css`
+          background-color: var(--bg-dark-primary);
+          color: var(--bg-dark-primary);
+          &:before {
+            content: "REDACTED";
+            color: white;
+            font-weight: bold;
+            left: 25%;
+            position: absolute;
+          }
+        `
+      : css``}
+  border-radius: 4px;
+  margin-bottom: 4px;
+  padding: 2px;
+  position: relative;
+  transition-property: color, background-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  /* Same duration as the toggle slide */
+  transition-duration: 300ms;
+`;
diff --git a/apps/passport-client/components/shared/cards/DevconnectTicket.tsx b/apps/passport-client/components/shared/cards/DevconnectTicket.tsx
@@ -5,6 +5,7 @@ import {
 } from "@pcd/eddsa-ticket-pcd";
 import {
   QRDisplayWithRegenerateAndStorage,
+  Spacer,
   encodeQRPayload
 } from "@pcd/passport-ui";
 import { ArgumentTypeName } from "@pcd/pcd-types";
@@ -13,6 +14,7 @@ import { ZKEdDSAEventTicketPCDPackage } from "@pcd/zk-eddsa-event-ticket-pcd";
 import { useCallback, useState } from "react";
 import styled from "styled-components";
 import { usePCDCollection } from "../../../src/appHooks";
+import { RedactedText } from "../../core/RedactedText";
 import { ToggleSwitch } from "../../core/Toggle";
 import { icons } from "../../icons";
 
@@ -115,7 +117,7 @@ function TicketQR({ pcd, zk }: { pcd: EdDSATicketPCD; zk: boolean }) {
         key={pcd.id}
         generateQRPayload={generate}
         maxAgeMs={1000 * 60}
-        uniqueId={`${pcd.id}`}
+        uniqueId={pcd.id}
         fgColor={getQRCodeColorOverride(pcd)}
       />
     );
@@ -132,8 +134,11 @@ export function DevconnectCardBody({ pcd }: { pcd: EdDSATicketPCD }) {
     <Container>
       <TicketInfo>
         <TicketQR zk={zk} pcd={pcd} />
-        <span>{ticketData?.attendeeName}</span>
-        <span>{ticketData?.attendeeEmail}</span>
+        <Spacer h={8} />
+        {ticketData?.attendeeName && (
+          <RedactedText redacted={zk}>{ticketData?.attendeeName}</RedactedText>
+        )}
+        <RedactedText redacted={zk}>{ticketData?.attendeeEmail}</RedactedText>
         <ZKMode>
           <ToggleSwitch label="ZK mode" checked={zk} onChange={onToggle} />
         </ZKMode>

diff --git a/apps/passport-client/components/shared/cards/ZKTicket.tsx b/apps/passport-client/components/shared/cards/ZKTicket.tsx
@@ -5,6 +5,7 @@ import {
 } from "@pcd/eddsa-ticket-pcd";
 import {
   QRDisplayWithRegenerateAndStorage,
+  Spacer,
   encodeQRPayload
 } from "@pcd/passport-ui";
 import { ArgumentTypeName } from "@pcd/pcd-types";
@@ -14,6 +15,7 @@ import { useCallback, useState } from "react";
 import styled from "styled-components";
 import { usePCDCollection } from "../../../src/appHooks";
 import { makeEncodedVerifyLink } from "../../../src/qr";
+import { RedactedText } from "../../core/RedactedText";
 import { ToggleSwitch } from "../../core/Toggle";
 import { icons } from "../../icons";
 
@@ -128,8 +130,9 @@ export function ZKTicketPCDCard({ pcd }: { pcd: EdDSATicketPCD }) {
     <Container>
       <TicketInfo>
         <TicketQR zk={zk} pcd={pcd} />
-        <span>{ticketData?.attendeeName}</span>
-        <span>{ticketData?.attendeeEmail}</span>
+        <Spacer h={8} />
+        <RedactedText redacted={zk}>{ticketData?.attendeeName}</RedactedText>
+        <RedactedText redacted={zk}>{ticketData?.attendeeEmail}</RedactedText>
         <ZKMode>
           <ToggleSwitch label="ZK mode" checked={zk} onChange={onToggle} />
         </ZKMode>