@openeventkit/event-site 2.0.128 → 2.0.130

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.128",
+  "version": "2.0.130",
   "author": "Tipit LLC",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",

package/src/actions/event-actions.js

@@ -33,9 +33,18 @@ export const setEventLastUpdate = (lastUpdate) => (dispatch) => {
  */
 export const getEventById = (
     eventId
-) => async (dispatch) => {
+) => async (dispatch, getState) => {
 
     dispatch(startLoading());
+    // if we have it on the reducer , provide that first
+    let {allSchedulesState: {allEvents}} = getState();
+    const event = allEvents.find(ev => ev.id === parseInt(eventId));
+
+    if (event) {
+        dispatch(stopLoading());
+        dispatch(createAction(GET_EVENT_DATA)({event}));
+    }
+    // then refresh from api
 
     let accessToken;
     try {

package/src/cms/config/collections/configurationsCollection/navbar/index.js

@@ -2,40 +2,13 @@ import {
   booleanField,
   stringField,
   selectField,
-  selectOption,
   listField
 } from "../../../fields";
 
-import {
-  NAVBAR_FILE_PATH
-} from "@utils/filePath";
-
-const PAGE_RESTRICTIONS = {
-  any: "ANY",
-  activity: "ACTIVITY",
-  marketing: "MARKETING",
-  lobby: "LOBBY",
-  show: "SHOW",
-  customPage: "CUSTOM_PAGE"
-};
+import { NAVBAR_FILE_PATH } from "@utils/filePath";
+import { USER_REQUIREMENTS, PAGE_RESTRICTIONS } from "@utils/pageAccessConstants";
 
-const getPageRestrictionsOptions = () =>
-  Object.entries(PAGE_RESTRICTIONS).map(([key, value]) => selectOption({ label: value, value: value }));
-
-/*
-- file: "src/content/navbar.json"
-  label: "Navbar"
-  name: "navbar"
-  fields:
-    - {label: "Navbar", name: "items", widget: list, fields: [
-        {label: "Title", name: "title", widget: string},
-        {label: "Link", name: "link", widget: string},
-        {label: "Display?", name: "display", widget: boolean, required: false},
-        {label: "Requires Auth?", name: "requiresAuth", widget: boolean, required: false, default: false},
-        {label: "Show only at Show Time?", name: "showOnlyAtShowTime", widget: boolean, required: false, default: false},
-        {label: "Show only on page", name: "pageRestriction", widget: select, multiple: true, default: ["ANY"], options: ["ANY", "MARKETING", "LOBBY", "ACTIVITY", "SHOW", "CUSTOM_PAGE"]},
-      ]}
-*/
+import { mapObjectToSelectOptions } from "../../../utils";
 
 const navbar = {
   label: "Navbar",
@@ -59,32 +32,29 @@ const navbar = {
           name: "display",
           required: false
         }),
-        booleanField({
-          label: "Requires Auth?",
-          name: "requiresAuth",
-          required: false,
-          default: false
+        selectField({
+          label: "User Requirement",
+          name: "userRequirement",
+          multiple: false,
+          default: USER_REQUIREMENTS.none,
+          options: mapObjectToSelectOptions(USER_REQUIREMENTS)
+        }),
+        selectField({
+          label: "Show only on Page",
+          name: "pageRestriction",
+          multiple: true,
+          default: [PAGE_RESTRICTIONS.any],
+          options: mapObjectToSelectOptions(PAGE_RESTRICTIONS)
         }),
         booleanField({
           label: "Show only at Show Time?",
           name: "showOnlyAtShowTime",
           required: false,
           default: false
-        }),
-        selectField({
-          label: "Show only on page",
-          name: "pageRestriction",
-          multiple: true,
-          default: [PAGE_RESTRICTIONS.any],
-          options: getPageRestrictionsOptions()
         })
       ]
     })
   ]
 };
 
-export {
-  PAGE_RESTRICTIONS
-};
-
 export default navbar;

package/src/cms/config/collections/configurationsCollection/navbar/typeDefs.js

@@ -4,8 +4,9 @@ module.exports = `
     title: String
     link: String
     display: Boolean
-    requiresAuth: Boolean
+    userRequirement: String
     pageRestriction: [String]
+    showOnlyAtShowTime: Boolean
   }
 
   type NavbarJson implements Node {

package/src/cms/config/collections/configurationsCollection/siteSettings/index.js

@@ -21,6 +21,8 @@ import {
   IDP_BASE_URL
 } from "@utils/envVariables";
 
+import { mapObjectToSelectOptions } from "../../../utils";
+
 const FONT_FORMATS = {
   truetype: "ttf",
   opentype: "otf",
@@ -29,9 +31,6 @@ const FONT_FORMATS = {
   eot: "eot"
 };
 
-const getFontFormatOptions = () =>
-  Object.entries(FONT_FORMATS).map(([key, value]) => selectOption({ label: value, value: value }));
-
 const siteSettings = {
   label: "Site Settings",
   name: "site-settings",
@@ -151,7 +150,7 @@ const siteSettings = {
               name: "fontFormat",
               multiple: false,
               required: false,
-              options: getFontFormatOptions()
+              options: mapObjectToSelectOptions(FONT_FORMATS)
             })
           ],
         }),
@@ -170,7 +169,7 @@ const siteSettings = {
               name: "fontFormat",
               multiple: false,
               required: false,
-              options: getFontFormatOptions()
+              options: mapObjectToSelectOptions(FONT_FORMATS)
             })
           ]
         })

package/src/cms/config/collections/contentPagesCollection/index.js

@@ -1,27 +1,16 @@
-import {
-  collectionDefaults
-} from "../../patterns";
+import { collectionDefaults } from "../../patterns";
 
 import {
   hiddenField,
   stringField,
   selectField,
-  selectOption,
   markdownField
 } from "../../fields";
 
-import {
-  CONTENT_PAGES_DIR_PATH
-} from "@utils/filePath";
-
-const USER_REQUIREMENTS = {
-  none: "NONE",
-  loggedIn: "LOGGED_IN",
-  hasTicket: "HAS_TICKET"
-};
+import { CONTENT_PAGES_DIR_PATH } from "@utils/filePath";
+import { USER_REQUIREMENTS } from "@utils/pageAccessConstants";
 
-const getUserRequirementsOptions = () =>
-  Object.entries(USER_REQUIREMENTS).map(([key, value]) => selectOption({ label: value, value: value }));
+import { mapObjectToSelectOptions } from "../../utils";
 
 const contentPagesCollection = {
   ...collectionDefaults({
@@ -49,7 +38,7 @@ const contentPagesCollection = {
       name: "userRequirement",
       multiple: false,
       default: USER_REQUIREMENTS.none,
-      options: getUserRequirementsOptions()
+      options: mapObjectToSelectOptions(USER_REQUIREMENTS)
     }),
     markdownField({
       label: "Body",
@@ -58,8 +47,4 @@ const contentPagesCollection = {
   ]
 };
 
-export {
-  USER_REQUIREMENTS
-};
-
 export default contentPagesCollection;

package/src/cms/config/utils.js

@@ -0,0 +1,4 @@
+import { selectOption } from "./fields";
+
+export const mapObjectToSelectOptions = (object) => 
+  Object.entries(object).map(([key, value]) => selectOption({ label: value, value: value }));

package/src/components/AuthComponent.js

@@ -17,7 +17,7 @@ import IconButton from "./IconButton";
 import Link from "./Link";
 
 import { getDefaultLocation, validateIdentityProviderButtons } from "@utils/loginUtils";
-import { userHasAccessLevel, VirtualAccessLevel } from "@utils/authorizedGroups";
+import { userHasAccessLevel, VIRTUAL_ACCESS_LEVEL } from "@utils/authorizedGroups";
 import useSiteSettings from "@utils/useSiteSettings";
 import { PHASES } from "@utils/phasesUtils";
 
@@ -49,7 +49,7 @@ const AuthComponent = ({
     const [otpError, setOtpError] = useState(false);
 
     const hasVirtualBadge = useMemo(() =>
-        userProfile ? userHasAccessLevel(userProfile.summit_tickets, VirtualAccessLevel) : false
+        userProfile ? userHasAccessLevel(userProfile.summit_tickets, VIRTUAL_ACCESS_LEVEL) : false
         , [userProfile]);
     const defaultPath = getDefaultLocation(eventRedirect, hasVirtualBadge);
 

package/src/components/AvatarEditorModal/index.js

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import AvatarEditor from "react-avatar-editor";
+import { AjaxLoader } from "openstack-uicore-foundation/lib/components";
 import { Box, Typography, Slider, Modal } from "@mui/material";
 import { Button, IconButton } from "../ui";
 import { styled } from "@mui/system";
@@ -15,30 +16,50 @@ const CustomSlider = styled(Slider)(({ theme }) => ({
   color: "var(--color-primary)"
 }));
 
-const AvatarEditorModal = ({
-  userProfile,
-  open,
-  changePicture,
+const getUserProfilePic = async (imageUrl) => {
+  try {
+    const response = await fetch(imageUrl, {
+      method: "GET",
+      mode: "cors"
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch image: ${response.statusText}`);
+    }
+
+    const blob = await response.blob();
+    const imageObjectURL = URL.createObjectURL(blob);
+    return imageObjectURL;
+  } catch (error) {
+    console.error("Error fetching image:", error);
+    throw error;
+  }
+};
+
+const AvatarUploadButton = ({
+  onUpload,
+  ...rest
+}) => (
+  <IconButton
+    onClick={onUpload}
+    {...rest}
+  >
+    <CameraAltIcon fontSize="large" />
+  </IconButton>
+);
+
+const AvatarEditorContent = ({
+  editorRef,
+  image,
+  onUpload,
+  handleSave,
   handleClose
 }) => {
-  const editorRef = useRef(null);
-  const fileInputRef = useRef(null);
-
-  const [image, setImage] = useState(userProfile.picture || null);
   const [position, setPosition] = useState({ x: 0.5, y: 0.5 });
   const [scale, setScale] = useState(1);
   const [rotate, setRotate] = useState(0);
   const [newImage, setNewImage] = useState(false);
 
-  useEffect(() => {
-    setImage(userProfile.picture);
-  }, [userProfile.picture]);
-
-  const handleNewImage = (e) => {
-    setImage(e.target.files[0]);
-    setNewImage(true);
-  };
-
   const handleScale = (e, newValue) => {
     setScale(newValue);
     setNewImage(true);
@@ -59,13 +80,161 @@ const AvatarEditorModal = ({
     setNewImage(true);
   };
 
+  return (
+    <>
+      <Box
+        sx={{
+          padding: "20px",
+          textAlign: "center",
+          position: "relative"
+        }}
+      >
+        <AvatarEditor
+          ref={editorRef}
+          image={image}
+          width={200}
+          height={200}
+          border={50}
+          color={[0, 0, 0, 0.8]}
+          position={position}
+          onPositionChange={handlePositionChange}
+          scale={scale}
+          rotate={rotate}
+        />
+        <AvatarUploadButton
+          onUpload={onUpload}
+          sx={{
+            position: "absolute",
+            top: "79.5%",
+            right: "45%",
+            color: "#fff"
+          }}
+        />
+      </Box>
+      <Box
+        sx={{
+          px: "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "20px"
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            gap: "20px",
+            justifyContent: "center"
+          }}
+        >
+          <Typography
+            sx={{
+              fontSize: "1.5rem",
+              fontFamily: "var(--font_family)"
+            }}
+          >
+            Zoom
+          </Typography>
+          <CustomSlider
+            value={scale}
+            min={0}
+            max={2}
+            step={0.01}
+            onChange={handleScale}
+            sx={{ flex: 1, mx: 2 }}
+          />
+        </Box>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center"
+          }}
+        >
+          <Typography
+            sx={{
+              fontSize: "1.5rem",
+              fontFamily: "var(--font_family)"
+            }}
+          >
+            Rotate
+          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              flex: 1,
+              justifyContent: "center",
+              gap: "20px"
+            }}
+          >
+            <IconButton onClick={rotateLeft}>
+              <RotateLeftIcon fontSize="inherit" />
+            </IconButton>
+            <IconButton onClick={rotateRight}>
+              <RotateRightIcon fontSize="inherit" />
+            </IconButton>
+          </Box>
+        </Box>
+      </Box>
+      <Box
+        sx={{
+          backgroundColor: "var(--color_background_light)",
+          display: "flex",
+          justifyContent: "space-between",
+          padding: "20px",
+          gap: "20px"
+        }}
+      >
+        <Button onClick={handleClose}>Discard</Button>
+        <Button onClick={handleSave} disabled={!newImage}>
+          Update
+        </Button>
+      </Box>
+    </>
+  );
+};
+
+const AvatarEditorModal = ({
+  userProfile,
+  open,
+  changePicture,
+  handleClose,
+}) => {
+  const editorRef = useRef(null);
+  const fileInputRef = useRef(null);
+
+  const [image, setImage] = useState(null);
+  const [loadingPicture, setLoadingPicture] = useState(false);
+  const [fetchError, setFetchError] = useState(false);
+
+  useEffect(() => {
+    setLoadingPicture(true);
+    getUserProfilePic(userProfile.picture)
+      .then((imageObjectURL) => {
+        setImage(imageObjectURL);
+        setFetchError(false);
+      })
+      .catch(() => {
+        setFetchError(true);
+      })
+      .finally(() => {
+        setLoadingPicture(false);
+      });
+  }, [userProfile.picture]);
+
+  const handleNewImage = (e) => {
+    setImage(e.target.files[0]);
+    setFetchError(false);
+  };
+
   const handleSave = () => {
-    if (editorRef.current && newImage) {
+    if (editorRef.current) {
       const canvas = editorRef.current.getImage().toDataURL();
       fetch(canvas)
         .then((res) => res.blob())
         .then((blob) => {
-          const file = new File([blob], `${create_UUID()}.png`, { type: blob.type });
+          const file = new File([blob], `${create_UUID()}.png`, {
+            type: blob.type
+          });
           changePicture(file);
         });
     }
@@ -124,36 +293,13 @@ const AvatarEditorModal = ({
             <i className="fa fa-times" />
           </IconButton>
         </Box>
-        <Box
-          sx={{
-            padding: "20px",
-            textAlign: "center",
-            position: "relative"
-          }}
-        >
-          <AvatarEditor
-            ref={editorRef}
-            image={image}
-            width={200}
-            height={200}
-            border={50}
-            color={[0, 0, 0, 0.8]}
-            position={position}
-            onPositionChange={handlePositionChange}
-            scale={scale}
-            rotate={rotate}
+        <Box>
+          <AjaxLoader
+            relative={true}
+            color={"var(--color_background_light)"}
+            show={loadingPicture}
+            size={120}
           />
-          <IconButton
-            onClick={() => fileInputRef.current.click()}
-            sx={{
-              position: "absolute",
-              top: "79.5%",
-              right: "44%",
-              color: "#fff"
-            }}
-          >
-            <CameraAltIcon fontSize="inherit" />
-          </IconButton>
           <input
             ref={fileInputRef}
             type="file"
@@ -161,86 +307,44 @@ const AvatarEditorModal = ({
             style={{ display: "none" }}
             onChange={handleNewImage}
           />
-        </Box>
-        <Box
-          sx={{
-            px: "20px",
-            display: "flex",
-            flexDirection: "column",
-            gap: "20px"
-          }}
-        >
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              gap: "20px",
-              justifyContent: "center"
-            }}
-          >
-            <Typography
-              sx={{
-                fontSize: "1.5rem",
-                fontFamily: "var(--font_family)"
-              }
-            }>
-              Zoom
-            </Typography>
-            <CustomSlider
-              value={scale}
-              min={0}
-              max={2}
-              step={0.01}
-              onChange={handleScale}
-              sx={{ flex: 1, mx: 2 }}
-            />
-          </Box>
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center"
-            }}
-          >
-            <Typography
-              sx={{
-                fontSize: "1.5rem",
-                fontFamily: "var(--font_family)"
-              }}
-            >
-              Rotate
-            </Typography>
+          {fetchError ? (
             <Box
-              sx={{
-                display: "flex",
-                flex: 1,
-                justifyContent: "center",
-                gap: "20px"
-              }}
-            >
-              <IconButton onClick={rotateLeft}>
-                <RotateLeftIcon fontSize="inherit" />
-              </IconButton>
-              <IconButton onClick={rotateRight}>
-                <RotateRightIcon fontSize="inherit" />
-              </IconButton>
+                sx={{
+                  padding: "20px",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: "20px"
+                }}
+              >
+              <Typography
+                sx={{
+                  fontSize: "1.5rem",
+                  fontFamily: "var(--font_family)",
+                  color: "var(--color_text_dark)"
+                }}
+              >
+                There was an error retrieving your profile picture.
+                Please upload a new one.
+              </Typography>
+              <AvatarUploadButton
+                onUpload={() => fileInputRef.current.click()}
+                sx={{
+                  color: "var(--color-primary)",
+                  border: "1px solid var(--color-primary)",
+                  padding: "10px"
+                }}
+              />
             </Box>
-          </Box>
-        </Box>
-        <Box
-          sx={{
-            backgroundColor: "var(--color_background_light)",
-            display: "flex",
-            justifyContent: "space-between",
-            padding: "20px",
-            gap: "20px"
-          }}
-        >
-          <Button onClick={handleClose}>
-            Discard
-          </Button>
-          <Button onClick={handleSave} disabled={!newImage}>
-            Update
-          </Button>
+          ) : (
+            <AvatarEditorContent
+              editorRef={editorRef}
+              image={image}
+              onUpload={() => fileInputRef.current.click()}
+              handleSave={handleSave}
+              handleClose={handleClose}
+            />
+          )}
         </Box>
       </Box>
     </Modal>

package/src/components/Navbar/index.js

@@ -4,11 +4,11 @@ import { connect } from "react-redux";
 import { navigate } from "gatsby";
 import NavbarTemplate from "./template";
 
-import { userHasAccessLevel, VirtualAccessLevel } from "@utils/authorizedGroups";
+import { userHasAccessLevel, VIRTUAL_ACCESS_LEVEL } from "@utils/authorizedGroups";
 import { getDefaultLocation } from "@utils/loginUtils";
 
 import { PHASES } from "@utils/phasesUtils";
-import { PAGE_RESTRICTIONS } from "../../cms/config/collections/configurationsCollection/navbar";
+import { USER_REQUIREMENTS, PAGE_RESTRICTIONS } from "@utils/pageAccessConstants";
 
 import navbarContent from "content/navbar/index.json";
 
@@ -17,6 +17,8 @@ const Navbar = ({
   summitPhase,
   summit,
   isLoggedUser,
+  isAuthorized,
+  hasTicket,
   idpProfile,
   userProfile,
   eventRedirect
@@ -24,64 +26,57 @@ const Navbar = ({
 
   // we store this calculation to use it later
   const hasVirtualBadge = useMemo(() =>
-    userProfile ? userHasAccessLevel(userProfile.summit_tickets, VirtualAccessLevel) : false
+    userProfile ? userHasAccessLevel(userProfile.summit_tickets, VIRTUAL_ACCESS_LEVEL) : false
   , [userProfile]);
 
   const defaultPath = getDefaultLocation(eventRedirect, hasVirtualBadge);
 
+  const meetsUserRequirement = (userRequirement) => {
+    switch (userRequirement) {
+      case USER_REQUIREMENTS.none:
+        return true;
+      case USER_REQUIREMENTS.loggedIn:
+        return isLoggedUser || isAuthorized;
+      case USER_REQUIREMENTS.hasTicket:
+        return hasTicket || isAuthorized;
+      default:
+        return false;
+    }
+  };
+
   const isCustomPage = (path) => {
     return !isMarketingPage(path) &&
            !isShowPage(path) &&
            !isProfilePage(path) &&
            !isMySchedulePage(path) &&
            !isExtraQuestionsPage(path);
-  }
+  };
 
-  const isMySchedulePage = (path) => {
-    return path.startsWith("/a/my-schedule");
-  }
+  const isMySchedulePage = (path) => path.startsWith("/a/my-schedule");
 
-  const isProfilePage = (path) => {
-    return path.startsWith("/a/profile");
-  }
+  const isProfilePage = (path) => path.startsWith("/a/profile");
 
-  const isExtraQuestionsPage = (path) => {
-    return path.startsWith("/a/extra-questions");
-  }
+  const isExtraQuestionsPage = (path) => path.startsWith("/a/extra-questions");
 
-  const isMarketingPage = (path) => {
-      return path === '/';
-  }
+  const isMarketingPage = (path) => path === "/";
 
-  const isLobbyPage = (path) => {
-    return path === '/a' || path === '/a/';
-  }
+  const isLobbyPage = (path) => path === "/a" || path === "/a/";
 
-  const isActivityPage = (path) => {
-    return path.startsWith("/a/event");
-  }
+  const isActivityPage = (path) => path.startsWith("/a/event");
 
-  const isSponsorPage = (path) => {
-    return path.startsWith("/a/sponsor");
-  }
+  const isSponsorPage = (path) => path.startsWith("/a/sponsor");
 
-  const isSchedulePage = (path) => {
-    return path.startsWith("/a/schedule");
-  }
+  const isSchedulePage = (path) => path.startsWith("/a/schedule");
 
-  const isShowPage = (path) => {
-    return isLobbyPage(path) || // lobby
-        isActivityPage(path) || // activity
-        isSponsorPage(path) || // expo hall or sponsor page
-        isSchedulePage(path);// schedule
-  }
+  const isShowPage = (path) => isLobbyPage(path) || isActivityPage(path) || isSponsorPage(path) || isSchedulePage(path);
 
   // we assume that all pages under /a/* requires auth except /a/schedule
-  // item.requiresAuth allows to mark specific pages that are not under /a/* pattern.
+  // item.userRequirement allows to mark specific pages that are not under /a/* pattern.
   const showItem = (item) => {
     // check if we have location defined, if so use the path name , else if window is defined use the window.location
     // as a fallback
-    const currentPath = location ? location.pathname: (typeof window !== "undefined" ? window.location.pathname: "");
+    const currentPath = location ? location.pathname : (typeof window !== "undefined" ? window.location.pathname : "");
+
     const passPageRestriction = !item.pageRestriction ||
         item.link === currentPath || // if we are on the same page then show it
         item.pageRestriction.includes(PAGE_RESTRICTIONS.any) ||
@@ -89,11 +84,10 @@ const Navbar = ({
         (item.pageRestriction.includes(PAGE_RESTRICTIONS.marketing) && isMarketingPage(currentPath)) ||
         (item.pageRestriction.includes(PAGE_RESTRICTIONS.lobby) && isLobbyPage(currentPath)) ||
         (item.pageRestriction.includes(PAGE_RESTRICTIONS.show) && isShowPage(currentPath)) ||
-        (item.pageRestriction.includes(PAGE_RESTRICTIONS.customPage) && isCustomPage(currentPath))
-    ;
+        (item.pageRestriction.includes(PAGE_RESTRICTIONS.customPage) && isCustomPage(currentPath));
 
     return item.display &&
-           (!item.requiresAuth || isLoggedUser) &&
+           meetsUserRequirement(item.userRequirement) &&
            (!item.showOnlyAtShowTime || summitPhase >= PHASES.DURING) &&
            passPageRestriction;
   };
@@ -115,7 +109,6 @@ const Navbar = ({
   );
 };
 
-
 const mapStateToProps = ({
   clockState,
   settingState,
@@ -126,6 +119,8 @@ const mapStateToProps = ({
   summit: summitState.summit,
   summitPhase: clockState.summit_phase,
   isLoggedUser: loggedUserState.isLoggedUser,
+  isAuthorized: userState.isAuthorized,
+  hasTicket: userState.hasTicket,
   idpProfile: userState.idpProfile,
   userProfile: userState.userProfile,
   // TODO: move to site settings i/o marketing page settings

package/src/components/RegistrationLiteComponent.js

@@ -24,7 +24,7 @@ import "summit-registration-lite/dist/index.css";
 import useSiteSettings from "@utils/useSiteSettings";
 import useMarketingSettings, { MARKETING_SETTINGS_KEYS }  from "@utils/useMarketingSettings";
 import { getEnvVariable, SUMMIT_API_BASE_URL, OAUTH2_CLIENT_ID, REGISTRATION_BASE_URL, SUPPORT_EMAIL } from "@utils/envVariables";
-import { userHasAccessLevel, VirtualAccessLevel } from "@utils/authorizedGroups";
+import { userHasAccessLevel, VIRTUAL_ACCESS_LEVEL } from "@utils/authorizedGroups";
 import { validateIdentityProviderButtons } from "@utils/loginUtils";
 import { triggerTagManagerTrackEvent } from "@utils/eventTriggers";
 
@@ -136,7 +136,7 @@ const RegistrationLiteComponent = ({
         loading: loadingProfile || loadingIDP,
         // only show info if its not a recent purchase
         ticketOwned: userProfile?.summit_tickets?.length > 0,
-        hasVirtualAccessLevel: userHasAccessLevel(userProfile?.summit_tickets, VirtualAccessLevel),
+        hasVIRTUAL_ACCESS_LEVEL: userHasAccessLevel(userProfile?.summit_tickets, VIRTUAL_ACCESS_LEVEL),
         ownedTickets: attendee?.ticket_types || [],
         authUser: (provider) => onClickLogin(provider),
         getPasswordlessCode: getPasswordlessCode,

package/src/components/UserNavbar.js

@@ -1,15 +1,16 @@
-import React from 'react'
-import { Link } from 'gatsby'
-import { connect } from 'react-redux'
+import React from "react";
+import { Link } from "gatsby";
+import { connect } from "react-redux";
 
-import styles from '../styles/navbar.module.scss';
-import LogoutButton from './LogoutButton';
-import ProfilePopupComponent from './ProfilePopupComponent';
+import LogoutButton from "./LogoutButton";
+import ProfilePopupComponent from "./ProfilePopupComponent";
 
-import { updateProfilePicture, updateProfile } from '../actions/user-actions'
+import { updateProfilePicture, updateProfile } from "../actions/user-actions"
 
-import { getDefaultLocation } from '../utils/loginUtils';
-import {userHasAccessLevel, VirtualAccessLevel} from "../utils/authorizedGroups";
+import { getDefaultLocation } from ".@utils/loginUtils";
+import { userHasAccessLevel, VIRTUAL_ACCESS_LEVEL } from "../utils/authorizedGroups";
+
+import styles from "../styles/navbar.module.scss";
 
 const UserNavbar = class extends React.Component {
 
@@ -18,7 +19,7 @@ const UserNavbar = class extends React.Component {
     this.state = {
       active: false,
       showProfile: false,
-      navBarActiveClass: '',
+      navBarActiveClass: "",
     }
   }
 
@@ -32,9 +33,9 @@ const UserNavbar = class extends React.Component {
 
   handleTogglePopup = (profile) => {
     if (profile) {
-      document.body.classList.add('is-clipped');
+      document.body.classList.add("is-clipped");
     } else {
-      document.body.classList.remove('is-clipped');
+      document.body.classList.remove("is-clipped");
     }
     this.setState({showProfile: profile})
   }
@@ -53,7 +54,7 @@ const UserNavbar = class extends React.Component {
             navBarActiveClass: `${styles.isActive}`,
           })
           : this.setState({
-            navBarActiveClass: '',
+            navBarActiveClass: "",
           })
       }
     )
@@ -66,7 +67,7 @@ const UserNavbar = class extends React.Component {
 
     // we store this calculation to use it later
     const hasVirtualBadge =
-        userProfile ? userHasAccessLevel(userProfile.summit_tickets, VirtualAccessLevel) : false;
+        userProfile ? userHasAccessLevel(userProfile.summit_tickets, VIRTUAL_ACCESS_LEVEL) : false;
 
     let defaultPath = getDefaultLocation(eventRedirect, hasVirtualBadge);
 
@@ -143,4 +144,4 @@ const mapStateToProps = ({ settingState, userState }) => ({
   userProfile: userState.userProfile
 });
 
-export default connect(mapStateToProps, { updateProfilePicture, updateProfile })(UserNavbar)
+export default connect(mapStateToProps, { updateProfilePicture, updateProfile })(UserNavbar);

package/src/content/navbar/index.json

@@ -4,7 +4,7 @@
       "title": "Lobby",
       "link": "/a/",
       "display": true,
-      "requiresAuth": true,
+      "userRequirement": "LOGGED_IN",
       "pageRestriction": [
         "ANY"
       ]
@@ -13,7 +13,7 @@
       "title": "My Tickets",
       "link": "/a/my-tickets",
       "display": true,
-      "requiresAuth": true,
+      "userRequirement": "LOGGED_IN",
       "pageRestriction": [
         "ANY"
       ]
@@ -22,7 +22,7 @@
       "title": "Schedule",
       "link": "/a/schedule",
       "display": true,
-      "requiresAuth": false,
+      "userRequirement": "NONE",
       "pageRestriction": [
         "ANY"
       ]
@@ -31,13 +31,13 @@
       "title": "My Schedule",
       "link": "/a/my-schedule",
       "display": true,
-      "requiresAuth": false
+      "userRequirement": "NONE"
     },
     {
       "title": "My Profile",
       "link": "/a/profile",
       "display": true,
-      "requiresAuth": true,
+      "userRequirement": "LOGGED_IN",
       "pageRestriction": [
         "ANY"
       ]

package/src/routes/WithAuthzRoute.js

@@ -1,10 +1,10 @@
-import React, {useEffect, useState, useMemo} from "react";
-import {connect} from "react-redux";
-import {navigate} from "gatsby";
+import React, { useEffect, useState, useMemo } from "react";
+import { connect } from "react-redux";
+import { navigate } from "gatsby";
 import { pick } from "@gatsbyjs/reach-router";
 import { getUserProfile, requireExtraQuestions } from "../actions/user-actions";
 import HeroComponent from "../components/HeroComponent";
-import { userHasAccessLevel, VirtualAccessLevel } from "../utils/authorizedGroups";
+import { userHasAccessLevel, VIRTUAL_ACCESS_LEVEL } from "@utils/authorizedGroups";
 
 const pathsRequiringVirtualBadge = [
     { path: "/a/" },
@@ -12,7 +12,7 @@ const pathsRequiringVirtualBadge = [
     { path: "/a/posters" },
     { path: "/a/sponsors" },
     { path: "/a/posters/:trackGroupId" },
-    { path: "/a/poster/:presentationId/" },
+    { path: "/a/poster/:presentationId/" }
 ];
 
 /**
@@ -44,7 +44,7 @@ const WithAuthzRoute = ({
 
     // we store this calculation to use it later
     const hasVirtualBadge = useMemo(() =>
-        userProfile ? userHasAccessLevel(userProfile.summit_tickets, VirtualAccessLevel) : false,
+        userProfile ? userHasAccessLevel(userProfile.summit_tickets, VIRTUAL_ACCESS_LEVEL) : false,
         [userProfile.summit_tickets]);
 
     const userIsReady = () => {
@@ -98,7 +98,7 @@ const WithAuthzRoute = ({
     return children;
 };
 
-const mapStateToProps = ({userState}) => ({
+const mapStateToProps = ({ userState }) => ({
     userProfile: userState.userProfile,
     isAuthorized: userState.isAuthorized,
     hasTicket: userState.hasTicket,

package/src/routes/authorization-callback-route.js

@@ -11,19 +11,20 @@
  * limitations under the License.
  **/
 
-import React from 'react'
-import URI from "urijs"
-import { navigate } from "gatsby"
+import React from "react";
+import URI from "urijs";
+import { navigate } from "gatsby";
 import { Redirect } from "@gatsbyjs/reach-router";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
 import AbstractAuthorizationCallbackRoute from "openstack-uicore-foundation/lib/security/abstract-auth-callback-route";
-import { getUserProfile, addToSchedule, removeFromSchedule } from '../actions/user-actions'
+import { getUserProfile, addToSchedule, removeFromSchedule } from "../actions/user-actions";
 import HeroComponent from "../components/HeroComponent";
-import { getEnvVariable, IDP_BASE_URL, OAUTH2_CLIENT_ID } from '../utils/envVariables'
-import { getPendingAction } from '../utils/schedule';
+import { getEnvVariable, IDP_BASE_URL, OAUTH2_CLIENT_ID } from "@utils/envVariables";
+import { getPendingAction } from "@utils/schedule";
 
-import '../styles/bulma.scss';
-import {userHasAccessLevel, VirtualAccessLevel} from "../utils/authorizedGroups";
+import { userHasAccessLevel, VIRTUAL_ACCESS_LEVEL } from "@utils/authorizedGroups";
+
+import "../styles/bulma.scss";
 
 class AuthorizationCallbackRoute extends AbstractAuthorizationCallbackRoute {
 
@@ -36,16 +37,16 @@ class AuthorizationCallbackRoute extends AbstractAuthorizationCallbackRoute {
             const pendingAction = getPendingAction();
             if (pendingAction) {
                 const { action, event } = pendingAction;
-                action === 'ADD_EVENT' ? this.props.addToSchedule(event) : this.props.removeFromSchedule(event);
+                action === "ADD_EVENT" ? this.props.addToSchedule(event) : this.props.removeFromSchedule(event);
             }
             backUrl = URI.decode(backUrl);
             // fallback
-            if(!backUrl || backUrl == '')
-                backUrl = '/';
+            if(!backUrl || backUrl == "")
+                backUrl = "/";
             let { userProfile } = this.props;
             // if redirect to lobby first time if we have virtual access
-            if(backUrl == '/' && userProfile && userHasAccessLevel(userProfile.summit_tickets, VirtualAccessLevel)){
-                backUrl = '/a/';
+            if(backUrl == "/" && userProfile && userHasAccessLevel(userProfile.summit_tickets, VIRTUAL_ACCESS_LEVEL)){
+                backUrl = "/a/";
             }
             navigate(backUrl);
         });
@@ -54,9 +55,9 @@ class AuthorizationCallbackRoute extends AbstractAuthorizationCallbackRoute {
     _redirect2Error(error) {
         console.log(`AuthorizationCallbackRoute error ${error}`);
         if (
-            error.includes('access_denied') ||
-            error.includes('consent_required')
-        ) return <Redirect to={'/'} noThrow />;
+            error.includes("access_denied") ||
+            error.includes("consent_required")
+        ) return <Redirect to={"/"} noThrow />;
         return <Redirect to={`/error?error=${error}`} noThrow/>;
     }
 
@@ -87,4 +88,4 @@ export default connect(mapStateToProps, {
     getUserProfile,
     addToSchedule,
     removeFromSchedule,
-})(AuthorizationCallbackRoute)
+})(AuthorizationCallbackRoute);

package/src/styles/style.scss

@@ -202,7 +202,7 @@ h2 {
 }
 
 .talk {
-  color: var(--color_text_med);
+  color: var(--color_text_dark);
 
   &__break {
     background-color: var(--color_secondary);

package/src/templates/content-page/index.js

@@ -7,9 +7,9 @@ import { MDXProvider } from "@mdx-js/react";
 import ContentPageTemplate from "./template";
 import Layout from "../../components/Layout";
 import Seo from "../../components/Seo";
-import { titleFromPathname } from "../../utils/urlFormating";
+import { titleFromPathname } from "@utils/urlFormating";
 
-import { USER_REQUIREMENTS } from "../../cms/config/collections/contentPagesCollection";
+import { USER_REQUIREMENTS } from "@utils/pageAccessConstants";
 
 const ContentPage = ({
   data,

package/src/templates/login-page.js

@@ -1,19 +1,19 @@
-import React, {useMemo} from 'react'
-import { connect } from 'react-redux'
-import { navigate } from "gatsby"
+import React, {useMemo} from "react";
+import { connect } from "react-redux";
+import { navigate } from "gatsby";
 
-import Layout from '../components/Layout'
-import AuthComponent from '../components/AuthComponent'
+import Layout from "../components/Layout";
+import AuthComponent from "../components/AuthComponent";
 
-import { getDefaultLocation } from '../utils/loginUtils'
-import {userHasAccessLevel, VirtualAccessLevel} from "../utils/authorizedGroups";
+import { getDefaultLocation } from "@utils/loginUtils";
+import {userHasAccessLevel, VIRTUAL_ACCESS_LEVEL} from "@utils/authorizedGroups";
 
 
 export const LoginPageTemplate = ({ loggedUserState, eventRedirect, location, userProfile }) => {
 
   // we store this calculation to use it later
   const hasVirtualBadge = useMemo(() =>
-          userProfile ? userHasAccessLevel(userProfile.summit_tickets, VirtualAccessLevel) : false,
+          userProfile ? userHasAccessLevel(userProfile.summit_tickets, VIRTUAL_ACCESS_LEVEL) : false,
       [userProfile]);
 
   if (loggedUserState.isLoggedUser) {

package/src/templates/token-expire-page.js

@@ -1,15 +1,15 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
 
 import URI from "urijs";
-import { handleResetReducers } from '../actions/event-actions'
-import { doLogin } from 'openstack-uicore-foundation/lib/security/methods'
+import { handleResetReducers } from "../actions/event-actions";
+import { doLogin } from "openstack-uicore-foundation/lib/security/methods";
 
-import { getDefaultLocation } from '../utils/loginUtils';
+import { getDefaultLocation } from "@utils/loginUtils";
 
-import HeroComponent from '../components/HeroComponent'
-import { userHasAccessLevel, VirtualAccessLevel } from "../utils/authorizedGroups";
+import HeroComponent from "../components/HeroComponent";
+import { userHasAccessLevel, VIRTUAL_ACCESS_LEVEL } from "../utils/authorizedGroups";
 
 export const TokenExpirePageTemplate = class extends React.Component {
 
@@ -22,10 +22,10 @@ export const TokenExpirePageTemplate = class extends React.Component {
 
       // we store this calculation to use it later
       const hasVirtualBadge =
-              userProfile ? userHasAccessLevel(userProfile.summit_tickets, VirtualAccessLevel) : false;
+              userProfile ? userHasAccessLevel(userProfile.summit_tickets, VIRTUAL_ACCESS_LEVEL) : false;
 
       let defaultPath = getDefaultLocation(eventRedirect, hasVirtualBadge);
-      let previousLocation = location.state?.backUrl && location.state.backUrl !== '/auth/expired' ? location.state.backUrl : defaultPath;
+      let previousLocation = location.state?.backUrl && location.state.backUrl !== "/auth/expired" ? location.state.backUrl : defaultPath;
       let backUrl = URI.encode(previousLocation);
 
       setTimeout(() => {

package/src/utils/authorizedGroups.js

@@ -3,7 +3,7 @@ import {
   AUTHZ_USER_GROUPS,
 } from "./envVariables";
 
-export const VirtualAccessLevel = 'VIRTUAL';
+export const VIRTUAL_ACCESS_LEVEL = "VIRTUAL";
 
 export const isAuthorizedUser = (groups) => {
   let authorizedGroups = getEnvVariable(AUTHZ_USER_GROUPS);

package/src/utils/pageAccessConstants.js

@@ -0,0 +1,16 @@
+const USER_REQUIREMENTS = {
+  none: "NONE",
+  loggedIn: "LOGGED_IN",
+  hasTicket: "HAS_TICKET"
+};
+
+const PAGE_RESTRICTIONS = {
+  any: "ANY",
+  activity: "ACTIVITY",
+  marketing: "MARKETING",
+  lobby: "LOBBY",
+  show: "SHOW",
+  customPage: "CUSTOM_PAGE"
+};
+
+export { USER_REQUIREMENTS, PAGE_RESTRICTIONS };