Merge release into embed

Author: andrew-polk

package.json

@@ -3,7 +3,8 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "dev": "yarn copyInBloomPlayer && vite",
+        "//": "default port is 5173 which is the same for BloomDesktop and can create conflicts",
+        "dev": "yarn copyInBloomPlayer && vite --port 5174",
         "serve": "vite preview",
         "build": "yarn copyInBloomPlayer && vite build",
         "build:ci": "set CI=true&& yarn build",

src/assets/Comic.svg

@@ -49,7 +49,6 @@ export const Simple: Story = {
                 "blind",
                 "blind:en",
                 "activity",
-                "comic",
             ],
             license: "",
             copyright: "",

src/components/BookCard.stories.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import ActivityIcon from "../assets/Activity.svg?react";
-import ComicIcon from "../assets/Comic.svg?react";
 import MotionIcon from "../assets/Motion.svg?react";
 import SignLanguageIcon from "../assets/Sign Language.svg?react";
 import TalkingBookIcon from "../assets/Talking Book.svg?react";
@@ -36,7 +35,7 @@ export const featureIconHeight = 12;
 // (appears next to the language in the languages list) or not (appears on the left of the
 // feature bar). In addition, the icon is given as a function that takes some props and
 // returns a react component.
-// It would be simpler to, e.g., import comicIcon from "../assets/Comic.svg?react"
+// It would be simpler to, e.g., import someIcon from "../assets/Some.svg?react"
 // (which yields a url), then let the icon: simply be that string, and let the code
 // that wants the icon make an <img> with src={feature.icon}. But then we can't use
 // fill: to control the color.
@@ -102,28 +101,6 @@ export const featureSpecs: IFeatureSpec[] = [
         languageDependent: true,
         englishLabel: "Features for the Visually Impaired",
     },
-    {
-        featureKey: "comic",
-        //featureTitle: "Comic Books",
-        filter: { feature: "comic" },
-        // description: (
-        //     <div>
-        //         Comic Books contain comic speech bubbles, captions, and/or other
-        //         text which appears over images.
-        //     </div>
-        // ),
-        icon(props) {
-            return (
-                <ComicIcon
-                    title={getLocalizedLabel(this)}
-                    {...props}
-                ></ComicIcon>
-            );
-        },
-        languageDependent: false,
-        collectionHref: "comics",
-        englishLabel: "Comic Book",
-    },
     {
         featureKey: "motion",
         //featureTitle: "Motion Books",

src/components/FeatureHelper.tsx

@@ -113,8 +113,7 @@ function checkIfUserIsModerator() {
 
 export async function connectParseServer(
     jwtToken: string,
-    userId: string
-    //,returnParseUser: (user: any) => void
+    emailAddress: string
 ) {
     return new Promise<any>((resolve, reject) => {
         const connection = getConnection();
@@ -130,7 +129,7 @@ export async function connectParseServer(
                 `${connection.url}functions/bloomLink`,
                 {
                     token: jwtToken,
-                    id: userId,
+                    id: emailAddress,
                 },
 
                 {
@@ -144,32 +143,49 @@ export async function connectParseServer(
                         `${connection.url}users`,
                         {
                             authData: {
-                                bloom: { token: jwtToken, id: userId },
+                                bloom: { token: jwtToken, id: emailAddress },
                             },
-                            username: userId,
-                            email: userId, // needed in case we are creating a new user
+                            username: emailAddress,
+                            // Parse requires an `email` field when creating a new _User.
+                            email: emailAddress,
                         },
 
                         {
                             headers: connection.headers,
                         }
                     )
                     .then((usersResult) => {
-                        if (usersResult.data.sessionToken) {
+                        // We require BOTH a session token and an email.
+                        // We don't actually know why we would ever get here without either.
+                        // But we were sending posts to Bloom with a missing email value in the payload,
+                        // which caused Bloom's `/bloom/api/external/login` handler to throw a runtime exception. See BL-14503.
+                        // I don't see any reason to pretend a non-editor login was successful if email
+                        // is missing, either. And it simplifies the code to just check up front.
+                        if (
+                            usersResult.data.sessionToken &&
+                            usersResult.data.email
+                        ) {
                             LoggedInUser.current = new User(usersResult.data);
-                            //Object.assign(CurrentUser, usersResult.data);
                             connection.headers["X-Parse-Session-Token"] =
                                 usersResult.data.sessionToken;
 
                             if (isForEditor()) {
                                 informEditorOfSuccessfulLogin(usersResult.data);
                             }
 
-                            //console.log("Got ParseServer Session ID");
                             resolve(usersResult.data);
-                            //returnParseUser(result.data);
                             checkIfUserIsModerator();
-                        } else failedToLoginInToParseServer();
+                        } else {
+                            failedToLoginInToParseServer();
+                            // Reject the Promise returned by `connectParseServer()`.
+                            // This lets callers stop the login flow (for example, `firebase.ts` catches this and
+                            // signs the user out of Firebase) rather than silently continuing.
+                            reject(
+                                new Error(
+                                    "Missing sessionToken or email in usersResult.data"
+                                )
+                            );
+                        }
                     })
                     .catch((err) => {
                         failedToLoginInToParseServer();

src/connection/ParseServerConnection.ts

@@ -14,12 +14,35 @@ export function isForEditor() {
     return window.location.pathname.includes("login-for-editor");
 }
 
+// Tracks a sessionToken we've already notified Bloom (editor) about.
+//
+// Why this exists:
+// - In theory, `connectParseServer()` can be triggered more than once during a single browser session
+//   (e.g. auth state callbacks can fire more than once, the user can reload the tab, etc.).
+// - We have observed multiple posts to Bloom for a single "login-for-editor" attempt.
+//   In BL-14503, Bloom's `/bloom/api/external/login` endpoint logged multiple
+//   "External login successful" lines for the same attempt, and also threw when the payload
+//   was missing `email`. Suppressing duplicate notifications on the Blorg side helps reduce
+//   noise and was part of an attempt to bolster error handling.
+//
+// Behavior:
+// - Set before sending to suppress duplicates while the POST is in-flight.
+// - Cleared on failure. I don't think this much matter, but it seems cleaner.
+let notifiedSessionToken: string | undefined;
+
 export function informEditorOfSuccessfulLogin(userData: any) {
+    if (notifiedSessionToken === userData.sessionToken) {
+        return;
+    }
+
     const postData = {
         sessionToken: userData.sessionToken,
         email: userData.email,
         userId: userData.objectId,
     };
+
+    notifiedSessionToken = userData.sessionToken;
+
     axios
         .post(`${getEditorApiUrl()}login`, postData)
         .then(() => {
@@ -29,6 +52,7 @@ export function informEditorOfSuccessfulLogin(userData: any) {
         .catch((err) => {
             LoggedInUser.current!.informEditorResult =
                 IInformEditorResult.Failure;
+            notifiedSessionToken = undefined;
 
             console.error("Unable to inform editor of successful login.");
             console.error(err);

src/editor.ts

@@ -19,9 +19,9 @@ const cases = [
     ["bible comic", "super-bible"],
     ["bible comics", "super-bible"],
     ["grid", "grid"],
-    ["comic book", "comics"],
-    ["german", "language:de"],
     ["motion book", "motion"],
+    ["sign language", "sign-language"],
+    ["german", "language:de"],
     ["swahili", "language:swh"],
     ["spanish", "language:es"],
 ];

src/model/SpecialSearch.test.ts

@@ -62,9 +62,6 @@
     "feature.blind": {
         "message": "Features for the Visually Impaired"
     },
-    "feature.comic": {
-        "message": "Comic Book"
-    },
     "feature.motion": {
         "message": "Motion Book"
     },