EKIRJASTO-626 Let user reveal and copy book passphrase (#67)

* EKIRJASTO-714 Use E-kirjasto OPDS parser version 2.1.0

* EKIRJASTO-714 Parse passphrases from book entry feed

* EKIRJASTO-716 Expand Book type with LCP passphrase

* EKIRJASTO-626 Refactor bookDetails component for clarity

* EKIRJASTO-717 Create new BookPassphrase component

* EKIRJASTO-715 Show instructions how to use book passphrase

* EKIRJASTO-717 Display the password in easy-to-read text

* EKIRJASTO-719 Copy book passhrase to clipboard

* EKIRJASTO-718 Toggle book passphrase visibility

* EKIRJASTO-720 Improve book passphrase component accessibility

* EKIRJASTO-626 Update test snapshot

* EKIRJASTO-626 Refactor bookDetails component tests for clarity

* EKIRJASTO-626 Test book passphrase component

Author: natlibfi-ptalosel

package-lock.json

@@ -34,7 +34,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@natlibfi/ekirjasto-opds-feed-parser": "2.0.1",
+    "@natlibfi/ekirjasto-opds-feed-parser": "2.1.0",
     "@nypl/design-system-react-components": "^0.7.2",
     "@nypl/dgx-svg-icons": "^0.3.12",
     "@theme-ui/color": "^0.16.2",

package.json

@@ -0,0 +1,39 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+import { jsx } from "theme-ui";
+import BookPassphraseCopyButton from "components/BookPassphraseCopyButton";
+import BookPassphraseDisplayText from "components/BookPassphraseDisplayText";
+import React from "react";
+import Stack from "components/Stack";
+
+// define props for the BookPassphraseCard component
+interface BookPassphraseCardProps {
+  passphrase: string;
+}
+
+// Component that displays the actual book passphrase string
+// and also a button for the user to easily copy the passphrase.
+// User can also select and copy the passphrase manually.
+const BookPassphraseCard: React.FC<BookPassphraseCardProps> = ({
+  passphrase
+}) => {
+  // define style for the Stack component
+  const stackStyle: React.CSSProperties = {
+    alignItems: "center"
+  };
+
+  return (
+    <Stack direction="row" sx={stackStyle} data-testid="book-passphrase-card">
+      {/* first render the actual book passhprase as text */}
+      <BookPassphraseDisplayText passphrase={passphrase} />
+
+      {/* then render the button to copy the book passhprase to clibpboard */}
+      <BookPassphraseCopyButton stringToCopy={passphrase} />
+    </Stack>
+  );
+};
+
+export default BookPassphraseCard;

src/components/BookPassphraseCard.tsx

@@ -0,0 +1,104 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { jsx } from "theme-ui";
+import {
+  faCopy,
+  faCheck,
+  IconDefinition
+} from "@fortawesome/free-solid-svg-icons";
+import Button from "components/Button";
+import React, { useState, useEffect } from "react";
+
+// define the text and icon for normal button state
+// as well as text and icon that indicate successful copying
+export const COPY_PASSPHRASE_TEXT: string = "Copy";
+export const COPY_PASSPHRASE_ICON: IconDefinition = faCopy;
+export const COPIED_PASSPHRASE_TEXT: string = "Copied!";
+export const COPIED_PASSPHRASE_ICON: IconDefinition = faCheck;
+
+// define aria label for button
+export const COPY_PASSPHRASE_LABEL: string = "Copy book passphrase";
+
+// define the timeout duration in milliseconds.
+// This should be enough time for the user to
+// notice the Copied! text before it disappears
+export const COPIED_PASSPHRASE_TIMEOUT: number = 2500;
+
+// define props for the BookPassphraseCopyButton component
+interface BookPassphraseCopyButtonProps {
+  stringToCopy: string;
+}
+
+// Component that renders a button to copy a string to the user's clipboard
+// The string that will be copied to clipboard is given as parameter
+const BookPassphraseCopyButton: React.FC<BookPassphraseCopyButtonProps> = ({
+  stringToCopy
+}) => {
+  // define a button state "isCopied"
+  // so we can keep tabs if button was clicked
+  const [isCopied, setIsCopied] = useState<boolean>(false);
+
+  // function to copy text to clipboard
+  // if copying was successful, set new button state
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(stringToCopy);
+      setIsCopied(true);
+    } catch (error) {
+      console.error("Error copying to clipboard:", error);
+    }
+  };
+
+  // reset button after 2,5 seconds
+  // return the normal state for button
+  useEffect(() => {
+    if (isCopied) {
+      const timer = setTimeout(() => {
+        setIsCopied(false);
+      }, COPIED_PASSPHRASE_TIMEOUT);
+      return () => clearTimeout(timer);
+    }
+  }, [isCopied]);
+
+  // check if the clipboard API is available in the user's browser
+  const isClipboardAvailable = Boolean(navigator.clipboard);
+
+  // get the text and icon based on copied state
+  const { buttonText, buttonIcon } = isCopied
+    ? { buttonText: COPIED_PASSPHRASE_TEXT, buttonIcon: COPIED_PASSPHRASE_ICON }
+    : { buttonText: COPY_PASSPHRASE_TEXT, buttonIcon: COPY_PASSPHRASE_ICON };
+
+  // define the style for the button
+  // gap is the space between text and icon inside the button
+  const buttonStyle: React.CSSProperties = {
+    width: "110px",
+    height: "30px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px"
+  };
+
+  return (
+    <>
+      {/* copy button is only visible if clipboard is available */}
+      {isClipboardAvailable && (
+        <Button
+          onClick={copyToClipboard}
+          sx={buttonStyle}
+          aria-label={COPY_PASSPHRASE_LABEL}
+          data-testid="book-passphrase-copy-button"
+        >
+          {buttonText}
+          <FontAwesomeIcon icon={buttonIcon} />
+        </Button>
+      )}
+    </>
+  );
+};
+
+export default BookPassphraseCopyButton;

src/components/BookPassphraseCopyButton.tsx

@@ -0,0 +1,44 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+import { jsx } from "theme-ui";
+import { Text } from "components/Text";
+import React from "react";
+
+// define aria label for button
+export const PASSPHRASE_LABEL: string = "Book passphrase";
+
+// define props for the BookPassphraseDisplayText component
+interface BookPassphraseDisplayTextProps {
+  passphrase: string;
+}
+
+// PassphraseDisplayText component is for displaying the actual passphrase
+const BookPassphraseDisplayText: React.FC<BookPassphraseDisplayTextProps> = ({
+  passphrase
+}) => {
+  // define style for the Stack component
+  // for example use monospace font
+  const textStyle: React.CSSProperties = {
+    fontFamily: "monospace",
+    fontSize: "-1",
+    wordBreak: "break-all",
+    backgroundColor: "ui.gray.lightWarm",
+    padding: "5px",
+    borderRadius: "1"
+  };
+
+  return (
+    <Text
+      sx={textStyle}
+      aria-label={PASSPHRASE_LABEL}
+      data-testid="book-passphrase-display-text"
+    >
+      {passphrase}
+    </Text>
+  );
+};
+
+export default BookPassphraseDisplayText;

src/components/BookPassphraseDisplayText.tsx

@@ -0,0 +1,33 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+import { jsx } from "theme-ui";
+import { Text } from "components/Text";
+import React from "react";
+
+// define the instructions text string
+export const INSTRUCTIONS_TEXT: string =
+  "If you download the book, please copy the password below for your EPUB reader.";
+
+// Component that instructs the user
+// so that user knows how to use the book passphrase
+const BookPassphraseInstructionsText: React.FC = () => {
+  // define style for the intruction text
+  const textStyle: React.CSSProperties = {
+    fontSize: "-1"
+  };
+
+  return (
+    <Text
+      sx={textStyle}
+      aria-live="polite"
+      data-testid="book-passphrase-instructions-text"
+    >
+      {INSTRUCTIONS_TEXT}
+    </Text>
+  );
+};
+
+export default BookPassphraseInstructionsText;

src/components/BookPassphraseInstructionsText.tsx

@@ -0,0 +1,50 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+import { jsx } from "theme-ui";
+import Button from "components/Button";
+import React from "react";
+
+// define the alternating texts for the toggle button
+export const HIDE_PASSPHRASE_TEXT: string = "Hide passphrase";
+export const SHOW_PASSPHRASE_TEXT: string = "Show passphrase";
+
+// define props for the BookPassphraseToggleButton component
+// isVisible indicates if the passphrase card is visible
+// onToggle is function that toggles the visibility of the passphrase card
+interface BookPassphraseToggleButtonProps {
+  isVisible: boolean;
+  onToggle: () => void;
+}
+
+// Component that renders a button that toggles the visibility of the passphrase card
+const BookPassphraseToggleButton: React.FC<BookPassphraseToggleButtonProps> = ({
+  isVisible,
+  onToggle
+}) => {
+  // change text based on if passhphrase is currently visible or not
+  const buttonText = isVisible ? HIDE_PASSPHRASE_TEXT : SHOW_PASSPHRASE_TEXT;
+
+  // define the style for the toggle button
+  const buttonStyle: React.CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  };
+
+  return (
+    <Button
+      onClick={onToggle}
+      sx={buttonStyle}
+      aria-pressed={isVisible}
+      aria-label={buttonText}
+      data-testid="book-passphrase-toggle-button"
+    >
+      {buttonText}
+    </Button>
+  );
+};
+
+export default BookPassphraseToggleButton;

src/components/BookPassphraseToggleButton.tsx

@@ -0,0 +1,82 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+import { AnyBook } from "interfaces";
+import { jsx } from "theme-ui";
+import * as React from "react";
+import BookPassphraseCard from "components/BookPassphraseCard";
+import BookPassphraseInstructionsText from "components/BookPassphraseInstructionsText";
+import BookPassphraseToggleButton from "components/BookPassphraseToggleButton";
+import Stack from "components/Stack";
+import useUser from "components/context/UserContext";
+
+// define props for the BookPassphrase component
+interface BookPassphraseProps {
+  book: AnyBook;
+}
+
+// Component to help user handle the book passhrase.
+// Book passhrase is a LCP password string.
+// Users need their personal passphrase
+// when they download a book file and
+// open it in a separate reader software
+const BookPassphrase: React.FC<BookPassphraseProps> = ({ book }) => {
+  // get the user's authentication status
+  const { isAuthenticated } = useUser();
+
+  // check if book is an eBook format (ePub or PDF)
+  const isEbook = book.format === "ePub" || book.format === "PDF";
+
+  // check if book has a passphrase
+  const hasPassphrase = book.passphrase !== undefined;
+
+  // determine if the passphrase should be shown
+  const shouldShowPassphrase = isAuthenticated && hasPassphrase && isEbook;
+
+  // define a button state "isVisible"
+  // so we can keep tabs if passphrase card is visible
+  const [isVisible, setVisible] = React.useState(false);
+
+  // function that toggles the visibility of the passphrase card
+  const toggleVisibility = () => {
+    setVisible(previousState => !previousState);
+  };
+
+  // define style for the Stack component
+  const stackStyle: React.CSSProperties = {
+    alignItems: "flex-start",
+    marginBottom: "16px"
+  };
+
+  // component is only rendered if the
+  // - user is logged-in
+  // - book passphrase exists
+  // - book is ePub or PDF
+  return (
+    <>
+      {shouldShowPassphrase && (
+        <Stack
+          direction="column"
+          sx={stackStyle}
+          data-testid="book-passphrase-component"
+        >
+          {/* first render instructions how to use book passhprase */}
+          <BookPassphraseInstructionsText />
+
+          {/* render the toggle button */}
+          <BookPassphraseToggleButton
+            isVisible={isVisible}
+            onToggle={toggleVisibility}
+          />
+
+          {/* then render the passphrase card based on visibility state */}
+          {isVisible && <BookPassphraseCard passphrase={book.passphrase} />}
+        </Stack>
+      )}
+    </>
+  );
+};
+
+export default BookPassphrase;