@openeventkit/event-site 1.0.33 → 1.0.34

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "1.0.33",
+  "version": "1.0.34",
   "author": "Tipit LLC",
   "dependencies": {
     "@mui/base": "^5.0.0-alpha.114",
@@ -116,7 +116,7 @@
     "stream-browserify": "^3.0.0",
     "stream-chat": "^2.7.2",
     "stream-chat-react": "3.1.7",
-    "summit-registration-lite": "^4.0.16",
+    "summit-registration-lite": "^4.0.17",
     "superagent": "8.0.9",
     "sweetalert2": "^9.17.0",
     "upcoming-events-widget": "2.0.8",

package/src/components/{LoginButton.js → AuthComponent.js}

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useState, useMemo } from "react"
 import { navigate } from "gatsby"
 import { connect } from "react-redux";
 import URI from "urijs"
@@ -13,8 +13,13 @@ import { formatThirdPartyProviders } from "../utils/loginUtils";
 import 'summit-registration-lite/dist/index.css';
 import styles from '../styles/login-button.module.scss'
 import PropTypes from 'prop-types'
+import Link from "./Link";
 
-const LoginButton = ({
+import { PHASES } from "@utils/phasesUtils";
+import { getDefaultLocation } from "@utils/loginUtils";
+import { userHasAccessLevel, VirtualAccessLevel } from "../utils/authorizedGroups";
+
+const AuthComponent = ({
     getThirdPartyProviders,
     thirdPartyProviders,
     setPasswordlessLogin,
@@ -22,9 +27,14 @@ const LoginButton = ({
     marketingPageSettings,
     allowsNativeAuth,
     allowsOtpAuth,
+    isLoggedUser,
+    summitPhase,
+    userProfile,
+    eventRedirect,
     location,
     style = {},
-    children,
+    renderLoginButton = null,
+    renderEnterButton = null
 }) => {
     const [isActive, setIsActive] = useState(false);
     const [initialEmailValue, setInitialEmailValue] = useState('');
@@ -33,6 +43,11 @@ const LoginButton = ({
     const [otpLength, setOtpLength] = useState(null);
     const [otpError, setOtpError] = useState(false);
 
+    const hasVirtualBadge = useMemo(() =>
+        userProfile ? userHasAccessLevel(userProfile.summit_tickets, VirtualAccessLevel) : false
+        , [userProfile]);
+    const defaultPath = getDefaultLocation(eventRedirect, hasVirtualBadge);
+
     useEffect(() => {
         const fragmentParser = new FragmentParser();
         setIsActive(fragmentParser.getParam('login'));
@@ -51,7 +66,7 @@ const LoginButton = ({
             : '/';
         const fragmentParser = new FragmentParser();
         const paramBackUrl = fragmentParser.getParam('backurl');
-        if(paramBackUrl)
+        if (paramBackUrl)
             backUrl = paramBackUrl;
         return encode ? URI.encode(backUrl) : backUrl;
     };
@@ -72,6 +87,10 @@ const LoginButton = ({
         setOtpError(false);
     }
 
+    const handleEnterEvent = () => {
+        navigate(defaultPath);
+    }
+
     const getPasswordlessCode = (email) => {
         const backUrl = getBackURL(true)
         const params = {
@@ -112,7 +131,7 @@ const LoginButton = ({
     const loginComponentProps = {
         loginOptions: formatThirdPartyProviders(thirdPartyProviders),
         login: (provider) => onClickLogin(provider),
-        getLoginCode: (email) => sendCode(email),        
+        getLoginCode: (email) => sendCode(email),
         allowsNativeAuth: allowsNativeAuth,
         allowsOtpAuth: allowsOtpAuth,
         initialEmailValue: initialEmailValue,
@@ -122,7 +141,7 @@ const LoginButton = ({
     const passwordlessLoginProps = {
         email: userEmail,
         codeLength: otpLength,
-        passwordlessLogin:  (code) =>  loginPasswordless(code, userEmail).then(() => navigate(getBackURL(false)) ).catch((e) => console.log(e)),
+        passwordlessLogin: (code) => loginPasswordless(code, userEmail).then(() => navigate(getBackURL(false))).catch((e) => console.log(e)),
         codeError: otpError,
         goToLogin: () => setOtpLogin(false),
         getLoginCode: (email) => sendCode(email),
@@ -130,15 +149,32 @@ const LoginButton = ({
 
     const { loginButton } = marketingPageSettings.hero.buttons;
 
+    const defaultLoginButton = () => (
+        <button className={`${styles.button} button is-large`} onClick={handleOpenPopup}>
+            <i className={`fa fa-2x fa-edit icon is-large`} />
+            <b>{loginButton.text}</b>
+        </button>
+    );
+
+    const defaultEnterButton = () => (
+        <Link className={styles.link} to={defaultPath}>
+            <button className={`${styles.button} button is-large`}>
+                <i className={`fa fa-2x fa-sign-in icon is-large`} />
+                <b>Enter</b>
+            </button>
+        </Link>
+    );
+
     return (
         <div style={style} className={styles.loginButtonWrapper}>
-            {children ? 
-                React.cloneElement(children, { onClick: handleOpenPopup })
+            {!isLoggedUser ?
+                renderLoginButton ? renderLoginButton(handleOpenPopup) : defaultLoginButton()
                 :
-                <button className={`${styles.button} button is-large`} onClick={handleOpenPopup}>
-                    <i className={`fa fa-2x fa-edit icon is-large`} />
-                    <b>{loginButton.text}</b>
-                </button>
+                (summitPhase >= PHASES.DURING && hasVirtualBadge ?
+                    renderEnterButton ? renderEnterButton(handleEnterEvent) : defaultEnterButton()
+                    :
+                    null
+                )
             }
             {isActive &&
                 <div id={`${styles.modal}`} className="modal is-active">
@@ -161,7 +197,7 @@ const LoginButton = ({
     )
 };
 
-const mapStateToProps = ({ userState, summitState, settingState }) => {
+const mapStateToProps = ({ userState, summitState, settingState, clockState, loggedUserState }) => {
     return ({
         loadingProfile: userState.loading,
         loadingIDP: userState.loadingIDP,
@@ -170,7 +206,12 @@ const mapStateToProps = ({ userState, summitState, settingState }) => {
         allowsOtpAuth: summitState.allows_otp_auth,
         summit: summitState.summit,
         colorSettings: settingState.colorSettings,
+        userProfile: userState.userProfile,
         marketingPageSettings: settingState.marketingPageSettings,
+        summitPhase: clockState.summit_phase,
+        isLoggedUser: loggedUserState.isLoggedUser,
+        // TODO: move to site settings i/o marketing page settings
+        eventRedirect: settingState.marketingPageSettings.eventRedirect
     })
 };
 
@@ -179,8 +220,8 @@ export default connect(mapStateToProps, {
     setPasswordlessLogin,
     setUserOrder,
     checkOrderData
-})(LoginButton)
+})(AuthComponent)
 
-LoginButton.propTypes = {
+AuthComponent.propTypes = {
     location: PropTypes.object.isRequired,
 }

package/src/components/MarketingHeroComponent.js

@@ -3,27 +3,16 @@ import React, {
   useState,
   useEffect
 } from "react";
-import { connect } from "react-redux";
 import { getSrc } from "gatsby-plugin-image";
 import Slider from "react-slick";
-import URI from "urijs";
-import Link from "../components/Link";
-import LoginButton from "./LoginButton";
+import AuthComponent from "./AuthComponent";
 import RegistrationLiteComponent from "./RegistrationLiteComponent";
 
-import { PHASES } from "@utils/phasesUtils";
-
 import styles from "../styles/marketing-hero.module.scss";
 
 const MarketingHeroComponent = ({
   location,
   marketingPageSettings,
-  summitPhase,
-  isLoggedUser,
-  summit,
-  doLogin,
-  hasVirtualBadge,
-  defaultPath
 }) => {
 
   const sliderRef = useRef(null);
@@ -41,41 +30,10 @@ const MarketingHeroComponent = ({
     };
   }, []);
 
-  const getBackURL = () => {
-    const backUrl = location.state?.backUrl
-      ? location.state.backUrl
-      : defaultPath;
-    return URI.encode(backUrl);
-  };
-
-  const onClickLogin = () => {
-    doLogin(getBackURL());
-  };
 
   const getButtons = () => {
     const { registerButton, loginButton } = marketingPageSettings.hero.buttons;
 
-    if (summitPhase >= PHASES.DURING && isLoggedUser) {
-      return (
-        <>
-          {registerButton.display &&
-            (
-              <span className={styles.link}>
-                <RegistrationLiteComponent location={location} />
-              </span>
-            )}
-          {hasVirtualBadge && /* only show button if we have virtual access */
-              <Link className={styles.link} to={defaultPath}>
-                <button className={`${styles.button} button is-large`}>
-                  <i className={`fa fa-2x fa-sign-in icon is-large`}/>
-                  <b>Enter</b>
-                </button>
-              </Link>
-          }
-        </>
-      );
-    }
-
     return (
       <>
         {registerButton.display &&
@@ -84,8 +42,8 @@ const MarketingHeroComponent = ({
               <RegistrationLiteComponent location={location} />
             </span>
           )}
-        {loginButton.display && !isLoggedUser && (
-          <LoginButton location={location} />
+        {loginButton.display && (
+          <AuthComponent location={location} />
         )}
       </>
     );
@@ -170,9 +128,4 @@ const MarketingHeroComponent = ({
   );
 }
 
-const mapStateToProps = ({ clockState, summitState }) => ({
-  summitPhase: clockState.summit_phase,
-  summit: summitState.summit
-});
-
-export default connect(mapStateToProps, null)(MarketingHeroComponent);
+export default MarketingHeroComponent;

package/src/content/lobby-page/index.json

@@ -0,0 +1 @@
+{}

package/src/pages/index.js

@@ -1,16 +1,10 @@
 import * as React from "react";
-import { useMemo } from "react";
 import { connect } from "react-redux";
 import { graphql } from "gatsby";
 import Seo from "../components/Seo";
 import MarketingPageTemplate from "../templates/marketing-page-template";
 import withRealTimeUpdates from "@utils/real_time_updates/withRealTimeUpdates";
 import withFeedsWorker from "@utils/withFeedsWorker";
-import { getDefaultLocation } from "@utils/loginUtils";
-
-import { doLogin } from "openstack-uicore-foundation/lib/security/methods";
-
-import { userHasAccessLevel, VirtualAccessLevel } from "../utils/authorizedGroups";
 
 export const marketingPageQuery = graphql`
   query {
@@ -110,45 +104,28 @@ const MarketingPage = ({
   lastDataSync,
   summit,
   summitPhase,
-  userProfile,
   isLoggedUser,
-  eventRedirect
-}) => {
-  // we store this calculation to use it later
-  const hasVirtualBadge = useMemo(() =>
-    userProfile ? userHasAccessLevel(userProfile.summit_tickets, VirtualAccessLevel) : false
-  , [userProfile]);
-  const defaultPath = getDefaultLocation(eventRedirect, hasVirtualBadge);
-  return (
-    <MarketingPageTemplate
-      location={location}
-      data={data}
-      lastDataSync={lastDataSync}
-      summit={summit}
-      summitPhase={summitPhase}
-      doLogin={doLogin}
-      userProfile={userProfile}
-      isLoggedUser={isLoggedUser}
-      hasVirtualBadge={hasVirtualBadge}
-      defaultPath={defaultPath}
-    />
-  )
-};
+}) => (
+  <MarketingPageTemplate
+    location={location}
+    data={data}
+    lastDataSync={lastDataSync}
+    summit={summit}
+    summitPhase={summitPhase}
+    isLoggedUser={isLoggedUser}
+  />
+);
 
 const mapStateToProps = ({
   settingState,
   summitState,
   clockState,
-  userState,
   loggedUserState
 }) => ({
   lastDataSync: settingState.lastDataSync,
   summit: summitState.summit,
   summitPhase: clockState.summit_phase,
-  userProfile: userState.userProfile,
   isLoggedUser: loggedUserState.isLoggedUser,
-  // TODO: move to site settings i/o marketing page settings
-  eventRedirect: settingState.marketingPageSettings.eventRedirect,
 });
 
 export default connect(mapStateToProps, {

package/src/templates/login-page.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import { navigate } from "gatsby"
 
 import Layout from '../components/Layout'
-import LoginButton from '../components/LoginButton'
+import AuthComponent from '../components/AuthComponent'
 
 import { getDefaultLocation } from '../utils/loginUtils'
 import {userHasAccessLevel, VirtualAccessLevel} from "../utils/authorizedGroups";
@@ -24,7 +24,7 @@ export const LoginPageTemplate = ({ loggedUserState, eventRedirect, location, us
 
   return (
     <React.Fragment>
-      <LoginButton location={location} eventRedirect={eventRedirect} hasVirtualBadge={hasVirtualBadge}/>
+      <AuthComponent location={location} />
     </React.Fragment>
   )
 }

package/src/templates/marketing-page-template.js

@@ -25,10 +25,7 @@ const MarketingPageTemplate = ({
   lastDataSync,
   summit,
   summitPhase,
-  doLogin,
   isLoggedUser,
-  hasVirtualBadge,
-  defaultPath
 }) => {
 
   const {
@@ -58,11 +55,6 @@ const MarketingPageTemplate = ({
       <MarketingHeroComponent
         location={location}
         marketingPageSettings={marketingPageJson}
-        summit={summit}
-        doLogin={doLogin}
-        isLoggedUser={isLoggedUser}
-        hasVirtualBadge={hasVirtualBadge}
-        defaultPath={defaultPath}
       />
       {summit && marketingPageJson.countdown?.display && <Countdown summit={summit} text={marketingPageJson?.countdown?.text} />}
       <div className="columns" id="marketing-columns">