@stokr/components-library 3.0.68 → 3.0.69

package/dist/components/Footer/FooterMenu.js

@@ -14,7 +14,10 @@ import YtLogo from "../../static/images/social/youtube_social_circle_red.png.js"
 import TelegramLogo from "../../static/images/social/Telegram-Logo.png.js";
 import IsoLogo from "../../static/images/iso27001-black.svg.js";
 import { SocialLinksContainer } from "../Header/Header.styles.js";
-const CollapseWrapper = ({ children, collapse = false, isOpened = false }) => collapse ? /* @__PURE__ */ jsx(Collapse, { isOpened, children }) : /* @__PURE__ */ jsx(Fragment$1, { children });
+const CollapseWrapper = ({ children, collapse = false, isOpened = false }) => collapse ? (
+  // inert while collapsed so the hidden links leave the tab order / a11y tree.
+  /* @__PURE__ */ jsx(Collapse, { isOpened, children: /* @__PURE__ */ jsx("div", { ...isOpened ? {} : { inert: true }, children }) })
+) : /* @__PURE__ */ jsx(Fragment$1, { children });
 CollapseWrapper.propTypes = {
   children: PropTypes.node.isRequired,
   collapse: PropTypes.bool,

package/dist/components/Header/Header.js

@@ -25,31 +25,7 @@ import { sizes } from "../../styles/rwd.js";
 import { track } from "../../analytics/index.js";
 import { navigateToHref } from "../../routing/navigate-app.js";
 import { Breakdown } from "../breakdown/Breakdown.js";
-const UserAvatarComponent = ({ avatar }) => {
-  const [photo, setphoto] = useState(avatarPlaceholder);
-  const prevAvatar = usePrevious(avatar);
-  const checkUserPhoto = (_avatar) => {
-    try {
-      const http = new XMLHttpRequest();
-      http.open("HEAD", _avatar, true);
-      http.send();
-      if (http.status !== 404) {
-        setphoto(_avatar);
-      }
-    } catch (error) {
-      console.log("error: ", error);
-    }
-  };
-  useEffect(() => {
-    checkUserPhoto(avatar);
-  }, [avatar]);
-  useEffect(() => {
-    if (avatar != prevAvatar) {
-      checkUserPhoto(avatar);
-    }
-  }, [avatar]);
-  return /* @__PURE__ */ jsx(UserAvatar, { src: photo });
-};
+const UserAvatarComponent = ({ avatar }) => /* @__PURE__ */ jsx(UserAvatar, { src: avatar || avatarPlaceholder });
 const RenderSubMenu = ({
   title,
   isActive,
@@ -189,7 +165,7 @@ function HeaderView({
     withSidebar && /* @__PURE__ */ jsx(SidebarToggle, { isSidebarExpanded, onClick: sidebarHandler, children: /* @__PURE__ */ jsx(HamburgerIcon, {}) }),
     /* @__PURE__ */ jsxs(HeaderInner, { withSidebar, children: [
       /* @__PURE__ */ jsxs(MainNavWrap, { hasProgress: progress, children: [
-        /* @__PURE__ */ jsx(Logo, { isHighlight: currentActiveMenu === "main", children: /* @__PURE__ */ jsx(stdin_default$1, { to: useRelativePathForMenu ? "/" : platformURL, "data-cy": "logo-nav-link", children: /* @__PURE__ */ jsx(stdin_default$2, {}) }) }),
+        /* @__PURE__ */ jsx(Logo, { isHighlight: currentActiveMenu === "main", children: /* @__PURE__ */ jsx(stdin_default$1, { to: useRelativePathForMenu ? "/" : platformURL, "data-cy": "logo-nav-link", "aria-label": "STOKR home", children: /* @__PURE__ */ jsx(stdin_default$2, {}) }) }),
         !progress && /* @__PURE__ */ jsx(HeaderMainNav, { children: /* @__PURE__ */ jsx(MenuNav, { children: /* @__PURE__ */ jsxs("ul", { children: [
           /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
             stdin_default$1,
@@ -248,6 +224,9 @@ function HeaderView({
             isActive: currentActiveMenu === "main",
             onClick: () => toggleMenu("main"),
             withSidebar,
+            type: "button",
+            "aria-label": "Toggle navigation menu",
+            "aria-expanded": currentActiveMenu === "main",
             children: [
               /* @__PURE__ */ jsx("span", {}),
               /* @__PURE__ */ jsx("span", {}),

package/dist/context/Auth.js

@@ -1,12 +1,10 @@
 import Cookies from "js-cookie";
-import axios from "axios";
 import axiosInstance from "../model/axios.js";
 import axiosInstance$1 from "../model/axiosPublic.js";
 import getCookieDomain from "../utils/get-cookie-domain.js";
 import { getLastFirebaseConfig } from "../config.js";
 import { initFirebase, getFirebaseAuth } from "../firebase-config.js";
 import { updatePassword, updateProfile, signInWithCustomToken, signInWithEmailAndPassword, createUserWithEmailAndPassword, applyActionCode, verifyPasswordResetCode, confirmPasswordReset, onAuthStateChanged } from "firebase/auth";
-import { getConfig } from "../runtime-config.js";
 function normalizeCustomToken(token) {
   if (token == null) return "";
   if (typeof token === "object" && token !== null) {
@@ -372,16 +370,30 @@ class Auth {
     });
   }
   /**
-   * Upload Photo
-   * @param data
+   * Get the authenticated user's avatar from service-media.
+   * Returns the image Blob, or null when the user has no picture (404).
    */
-  static uploadPhoto(data) {
+  static getAvatar() {
     return new Promise((resolve, reject) => {
-      axios.post(`${getConfig("photoApiUrl")}/media/picture/create`, data, {
-        headers: {
-          "Content-Type": "multipart/form-data"
+      axiosInstance.post(`media/user/avatar/get`, null, { responseType: "blob" }).then((response) => {
+        resolve(response.data);
+      }).catch((err) => {
+        if (err?.response?.status === 404) {
+          resolve(null);
+          return;
         }
-      }).then((response) => {
+        reject(err);
+      });
+    });
+  }
+  /**
+   * Upload the authenticated user's avatar to service-media.
+   * Responds 201 with the processed (resized) image, so we read it back as a Blob.
+   * @param data FormData with a `file` field (jpeg/png, ≤10mb)
+   */
+  static uploadPhoto(data) {
+    return new Promise((resolve, reject) => {
+      axiosInstance.post(`media/user/avatar/upload`, data, { responseType: "blob" }).then((response) => {
         resolve(response.data);
       }).catch((err) => {
         reject(err);
@@ -389,16 +401,11 @@ class Auth {
     });
   }
   /**
-   * Delete Photo
-   * @param data
+   * Delete the authenticated user's avatar from service-media.
    */
-  static deletePhoto(data) {
+  static deletePhoto() {
     return new Promise((resolve, reject) => {
-      axios.post(`${getConfig("photoApiUrl")}/media/picture/delete`, data, {
-        headers: {
-          "Content-Type": "multipart/form-data"
-        }
-      }).then((response) => {
+      axiosInstance.post(`media/user/avatar/delete`).then((response) => {
         resolve(response.data);
       }).catch((err) => {
         reject(err);

package/dist/context/AuthContext.js

@@ -102,6 +102,7 @@ class AuthProviderClass extends Component {
     INACTIVITY_EVENTS.forEach((event) => window.removeEventListener(event, this.resetInactivityTimer));
     this.clearInactivityTimer();
     this.clearCookieExpiryTimer();
+    if (this.avatarObjectUrl) URL.revokeObjectURL(this.avatarObjectUrl);
   }
   checkTokenIsValid = (redirect = false) => {
     const accessToken = Auth.getAccessToken();
@@ -398,6 +399,10 @@ class AuthProviderClass extends Component {
     delete axiosInstance.defaults.headers.common.Authorization;
     reset();
     this.userRef.current = null;
+    if (this.avatarObjectUrl) {
+      URL.revokeObjectURL(this.avatarObjectUrl);
+      this.avatarObjectUrl = void 0;
+    }
     this.setState({
       user: null,
       firebaseUser: null,
@@ -446,20 +451,27 @@ class AuthProviderClass extends Component {
     merged.active = merged.emailVerified;
     return merged;
   };
-  checkUserPhoto = (avatar) => {
+  // Fetch the authenticated user's avatar from service-media as a Blob and expose it as an
+  // object URL. Falls back to the placeholder on 404/error. The endpoint requires the Bearer
+  // token, so it can't be used directly as an <img src> — hence the blob round-trip.
+  loadAvatar = async () => {
     try {
-      const http = new XMLHttpRequest();
-      http.open("HEAD", avatar, true);
-      http.onload = () => {
-        if (http.status === 200) {
-          this.setState({ avatar });
-        }
-      };
-      http.send();
+      const blob = await Auth.getAvatar();
+      this.setAvatarObjectUrl(blob ? URL.createObjectURL(blob) : avatarPlaceholder);
     } catch (error) {
-      console.log("error: ", error);
+      console.log("error loading avatar: ", error);
+      this.setAvatarObjectUrl(avatarPlaceholder);
+    }
+  };
+  setAvatarObjectUrl = (nextAvatar) => {
+    if (this.avatarObjectUrl && this.avatarObjectUrl !== nextAvatar) {
+      URL.revokeObjectURL(this.avatarObjectUrl);
     }
+    this.avatarObjectUrl = nextAvatar?.startsWith("blob:") ? nextAvatar : void 0;
+    this.setState({ avatar: nextAvatar });
   };
+  // Kept for backward compatibility; refetches the current user's avatar.
+  checkUserPhoto = () => this.loadAvatar();
   getUser = async (accessToken = Auth.getAccessToken(), firebaseUserOverride) => {
     if (!accessToken) {
       this.setState({
@@ -533,11 +545,7 @@ class AuthProviderClass extends Component {
       const user = this.patchUserObject(result.user, firebaseUser);
       this.checkUserIsValid(user);
       customValidateGetUser?.(user);
-      const userIdForMedia = user._id ?? user.id;
-      if (userIdForMedia) {
-        const userAvatar = `${getConfig("photoApiUrl")}/media/picture/view/${userIdForMedia}`;
-        this.checkUserPhoto(userAvatar);
-      }
+      this.loadAvatar();
       this.setUser(user);
       this.setState({
         isFetchingUser: false
@@ -617,13 +625,10 @@ class AuthProviderClass extends Component {
         return;
       }
       const formData = new FormData();
-      formData.append("userId", user._id);
       formData.append("file", file);
-      const result = await Auth.uploadPhoto(formData);
-      this.setState({
-        avatar: `${getConfig("photoApiUrl")}/media/picture/view/${user._id}?ignore=${Date.now()}`
-      });
-      return result;
+      const blob = await Auth.uploadPhoto(formData);
+      this.setAvatarObjectUrl(blob ? URL.createObjectURL(blob) : avatarPlaceholder);
+      return blob;
     } catch (error) {
       console.log(`Error: ${error}`);
       throw error;
@@ -634,12 +639,8 @@ class AuthProviderClass extends Component {
     if (!user) {
       return;
     }
-    const formData = new FormData();
-    formData.append("userId", user._id);
-    await Auth.deletePhoto(formData);
-    this.setState({
-      avatar: void 0
-    });
+    await Auth.deletePhoto();
+    this.setAvatarObjectUrl(avatarPlaceholder);
   };
   replaceLocationPathName = () => {
     const pathname = this.props.location?.pathname ?? "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "3.0.68",
+  "version": "3.0.69",
   "description": "STOKR - Components Library",
   "author": "Bilal Hodzic <bilal@stokr.io>",
   "license": "MIT",