Merge pull request #54 from aws-samples/feature/add-consent-modal

Add consent modal

Author: matteofigus

src/cfn/template.yaml

@@ -14,7 +14,7 @@ Globals:
         MIN_CONFIDENCE: !Ref MinConfidence
         OBJECTS_OF_INTEREST_LABELS: !Join [",", !Ref ObjectsOfInterestLabels]
         REGION: !Ref AWS::Region
-        VERSION: '2.1'
+        VERSION: '2.2'
   Api:
     EndpointConfiguration: REGIONAL
     Cors:

src/web-ui/src/App.js

@@ -10,6 +10,7 @@ import CameraHelp from "./components/CameraHelp";
 import EngagementSummary from "./components/EngagementsSummary";
 import Header from "./components/Header";
 import SettingsHelp from "./components/SettingsHelp";
+import ConsentModal from "./components/ConsentModal";
 
 const App = () => {
   const [authState, setAuthState] = useState(undefined);
@@ -69,6 +70,7 @@ const App = () => {
         signedIn={signedIn}
         toggleRekognition={toggleRekognition}
       />
+      <ConsentModal></ConsentModal>
       {signedIn ? (
         <>
           <SettingsHelp show={!window.rekognitionSettings} />

src/web-ui/src/components/ConsentModal.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { Button, Modal } from "react-bootstrap";
+import useLocalStorage from "../hooks/useLocalStorage";
+
+const ConsentModal = () => {
+  const [hasConsent, setHasConsent] = useLocalStorage(
+    "rekognitionVirtualProctorConsent",
+    false
+  );
+
+  const onClick = () => {
+    setHasConsent(true);
+  };
+
+  return (
+    <Modal show={!hasConsent} backdrop="static" centered>
+      <Modal.Header>
+        <Modal.Title>Notice</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        This feature uses Amazon Web Services. Biometric identifiers and
+        biometric information (“biometric data”) may be collected, stored, and
+        used by Amazon Web Services for the purpose of comparing the image of an
+        individual with a stored image for analysis, verification, fraud, and
+        security purposes. Biometric information that is generated as part of
+        this process will be retained in line with Amazon Web Services privacy
+        policy. You hereby provide your express, informed, written release and
+        consent for Amazon Web Services to collect, use, and store your
+        biometric data as described herein.
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="primary" onClick={onClick}>
+          Accept
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default ConsentModal;

src/web-ui/src/hooks/useLocalStorage.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+
+const useLocalStorage = (key, fallback) => {
+  const [value, setValue] = useState(
+    JSON.parse(window.localStorage.getItem(key)) ?? fallback
+  );
+
+  useEffect(() => {
+    window.localStorage.setItem(key, value);
+  }, [key, value]);
+
+  return [value, setValue];
+};
+export default useLocalStorage;