EXAMPLE_VAR env var came through: {getConfig().EXAMPLE_VAR}
JS_FILE_VAR var came through: {getConfig().JS_FILE_VAR}
Visit authenticated page.
+Visit PII page.
Visit error page.
); diff --git a/example/PiiPage.jsx b/example/PiiPage.jsx new file mode 100644 index 000000000..f4035174e --- /dev/null +++ b/example/PiiPage.jsx @@ -0,0 +1,95 @@ +import React, { + forwardRef, useContext, useEffect, useRef, useState, +} from 'react'; +import PropTypes from 'prop-types'; + +import { AppContext, usePii, withPii } from '@edx/frontend-platform/react'; + +// Example via `usePii` (hook) +const UsernameWithPii = forwardRef(({ children, ...rest }, ref) => { + const piiProps = usePii('username', rest); + return {children}; +}); +UsernameWithPii.displayName = 'UsernameWithPii'; +UsernameWithPii.propTypes = { + children: PropTypes.node.isRequired, +}; + +// Example via `withPii` (HOC) +const Username = forwardRef(({ children, ...rest }, ref) => ( + {children} +)); +Username.displayName = 'Username'; +Username.propTypes = { + children: PropTypes.node.isRequired, +}; +const UsernameWithPii2 = withPii('username')(Username); + +export default function PiiPage() { + const { authenticatedUser, config } = useContext(AppContext); + const firstUsernameRef = useRef(null); + const secondUsernameRef = useRef(null); + const [firstUsernameNode, setFirstUsernameNode] = useState(null); + const [secondUsernameNode, setSecondUsernameNode] = useState(null); + + useEffect(() => { + if (firstUsernameRef.current) { + setFirstUsernameNode(firstUsernameRef.current.outerHTML); + } + if (secondUsernameRef.current) { + setSecondUsernameNode(secondUsernameRef.current.outerHTML); + } + }, []); + + const { piiOptions } = config; + return ( +
+ {JSON.stringify(piiOptions, null, 2)}
+
+ ) : (
+
+ No PII-related configuration found. Consider updating this application's env.config.js to
+ configure any vendor-specific PII-related attributes/values.
+
+ The following examples below demonstrate using usePii and withPii to
+ obfuscate PII (e.g., username) based on the application's configuration. Inspect the DOM
+ elements for the rendered usernames below to observe the configured PII attributes/values.
+
usePii (hook)
+ Obfuscated username:{' '}
+
+ {firstUsernameNode}
+
+
+ {/* Example 2 (withPii) */}
+ withPii (HOC)
+ Obfuscated username:{' '}
+
+ {secondUsernameNode}
+
+