@orangelogic/orange-dam-content-browser-sdk 2.1.53 → 2.1.54

package/src/page/Authenticate/Authenticate.tsx

@@ -0,0 +1,232 @@
+import { FormEventHandler, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { GlobalConfigContext } from '@/GlobalConfigContext';
+import { AppDispatch } from '@/store';
+import { authErrorSelector, oAuth, setUseSession, siteUrlSelector } from '@/store/auth/auth.slice';
+import { checkCorrectSiteUrl } from '@/utils/api';
+import { LOGIN_GRAPHICS_TOP_COLOR_BASE64 } from '@/utils/constants';
+import { useDebounceState } from '@/utils/hooks';
+import { CxChangeEvent, CxInput } from '@/web-component';
+
+const AuthenticatePage = () => {
+  const dispatch = useDispatch<AppDispatch>();
+  const siteUrl = useSelector(siteUrlSelector);
+  const authError = useSelector(authErrorSelector);
+  const { pluginInfo, useSession } = useContext(GlobalConfigContext);
+  const [isDefined, setIsDefined] = useState(false);
+  const [url, setUrl] = useState(siteUrl);
+  const [urlError, setUrlError] = useState<string | null>(null);
+  const [checkingSite, setCheckingSite] = useDebounceState(false, 1000); // debounce to avoid flashing when check site connect too fast
+  const [showUseSessionInput, setShowUseSessionInput] = useState(false);
+  const [session, setSession] = useState(useSession);
+  const oAuthForm = useRef<HTMLFormElement>(null);
+  const siteInputRef = useRef<CxInput>(null);
+  const sessionInputRef = useRef<CxInput>(null);
+  const hiddenBoxRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    Promise.all([customElements.whenDefined('cx-input')]).then(() => {
+      setIsDefined(true);
+    });
+  }, []);
+
+  useEffect(() => {
+    const input = siteInputRef.current;
+    if (!input || !isDefined) return;
+    const onInput = (e: CxChangeEvent) => {
+      setUrl((e.target as HTMLInputElement).value);
+      setUrlError(null);
+    };
+    input.addEventListener('cx-input', onInput);
+
+    return () => {
+      input.removeEventListener('cx-input', onInput);
+    };
+  }, [isDefined]);
+
+  useEffect(() => {
+    const input = sessionInputRef.current;
+    if (!input || !isDefined) return;
+    const onInput = (e: CxChangeEvent) => {
+      setSession((e.target as HTMLInputElement).value);
+    };
+    input.addEventListener('cx-input', onInput);
+
+    return () => {
+      input.removeEventListener('cx-input', onInput);
+    };
+  }, [dispatch, isDefined, showUseSessionInput]);
+
+  const onSubmit: FormEventHandler<HTMLFormElement> = useCallback((e) => {
+    e.preventDefault();
+    setCheckingSite(true, true);
+    const urlWithProtocol = url.indexOf('://') === -1 ? `https://${url}` : url;
+    checkCorrectSiteUrl(urlWithProtocol)
+      .then(() => {
+        dispatch(oAuth({ siteUrl: urlWithProtocol }));
+        if (session) {
+          dispatch(setUseSession(session));
+        }
+      })
+      .catch(() => {
+        const errorMessage = 'The site is currently not available. Please verify your Site URL and check your Internet connection.';
+        setUrlError(errorMessage);
+      },
+      )
+      .finally(() => setCheckingSite(false));
+  }, [dispatch, session, setCheckingSite, url]);
+
+  const cancelConnect = useCallback(() => {
+    setCheckingSite(false, true);
+    setUrlError(null);
+  }, [setCheckingSite]);
+
+  useEffect(() => {
+    // If the user clicks the hidden box 5 times in 2 second, show the session input
+    if (showUseSessionInput) return;
+    let clickCount = 0;
+    let clickTimeout: NodeJS.Timeout | null = null;
+
+    const handleClick = () => {
+      clickCount++;
+      if (clickCount === 5) {
+        setShowUseSessionInput(true);
+        if (clickTimeout) clearTimeout(clickTimeout);
+        return;
+      }
+      if (clickTimeout) clearTimeout(clickTimeout);
+      clickTimeout = setTimeout(() => {
+        clickCount = 0;
+      }, 2000);
+    };
+
+    const hiddenBox = hiddenBoxRef.current;
+    if (hiddenBox) {
+      hiddenBox.addEventListener('click', handleClick);
+    }
+
+    return () => {
+      if (hiddenBox) {
+        hiddenBox.removeEventListener('click', handleClick);
+      }
+      if (clickTimeout) clearTimeout(clickTimeout);
+    };
+  }, [showUseSessionInput]);
+
+  let buttonText = 'Connect';
+  if (checkingSite) {
+    buttonText = 'Connecting...';
+  } else if (urlError) {
+    buttonText = 'Retry';
+  }
+
+  return (
+    <div
+      style={{
+        background: `url(${LOGIN_GRAPHICS_TOP_COLOR_BASE64})`,
+        backgroundPositionX: 'center',
+        backgroundPositionY: 'top',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'contain',
+        display: 'flex',
+        inset: 0,
+        padding: 'var(--cx-spacing-x-small)',
+        position: 'absolute',
+      }}
+    >
+      <form
+        onSubmit={onSubmit}
+        ref={oAuthForm}
+        style={{
+          display: 'flex',
+          height: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+          width: '100%',
+        }}
+      >
+        <cx-space direction="vertical" spacing="medium" align-items="center">
+          {pluginInfo.pluginName && (
+            <cx-typography variant="h2">
+              Welcome to the {pluginInfo.pluginName}
+            </cx-typography>
+          )}
+          {pluginInfo.publicApplicationName && (
+            <cx-typography variant="h4">
+              for {pluginInfo.publicApplicationName}
+            </cx-typography>
+          )}
+          {authError && (
+            <cx-alert open variant="danger">
+              <cx-icon slot="icon" name="error"></cx-icon>
+              {authError}
+            </cx-alert>
+          )}
+          <cx-input
+            ref={siteInputRef}
+            label="Site URL"
+            placeholder="Enter your site URL"
+            value={url}
+            help-text={urlError ?? undefined}
+            style={{
+              width: '100%',
+            }}
+          ></cx-input>
+          {
+            showUseSessionInput && (
+              <cx-input
+                ref={sessionInputRef}
+                label="Session ID"
+                placeholder="Enter your session ID"
+                value={useSession}
+                style={{
+                  width: '100%',
+                }}
+              ></cx-input>
+            )
+          }
+          <cx-space
+            justify-content="flex-end"
+            style={{
+              width: '100%',
+            }}
+          >
+            <cx-space spacing="small" wrap="nowrap">
+              {checkingSite && (
+                <cx-button variant="default" onClick={cancelConnect}>
+                  Cancel
+                </cx-button>
+              )}
+              <cx-button
+                disabled={url === '' || checkingSite}
+                variant="primary"
+                type="submit"
+                style={{
+                  width: '100%',
+                }}
+              >
+                {buttonText}
+              </cx-button>
+            </cx-space>
+          </cx-space>
+        </cx-space>
+      </form>
+      <button
+        ref={hiddenBoxRef}
+        tabIndex={-1}
+        style={{
+          position: 'absolute',
+          left: 0,
+          bottom: 0,
+          opacity: 0,
+          width: '32px',
+          height: '32px',
+        }}
+      ></button>
+    </div>
+  );
+};
+
+export default AuthenticatePage;

package/src/page/Authenticate/ConnectingBackground.tsx

@@ -0,0 +1,44 @@
+import React, { CSSProperties, FC } from 'react';
+
+type Props = {
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+  onCancel?: () => void;
+};
+
+const ConnectingBackground: FC<Props> = ({ children, footer, onCancel }) => {
+  return (
+    <cx-space
+      direction="vertical"
+      spacing="large"
+      align-items="center"
+      justify-content="center"
+      style={{
+        height: '100%',
+        overflowY: 'auto',
+        padding: 'var(--cx-spacing-2x-large)',
+        textAlign: 'center',
+      }}
+    >
+      {children}
+
+      <cx-space direction="vertical" align-items="center">
+        <cx-spinner
+          style={{
+            '--track-width': '0.2rem',
+            fontSize: 'var(--cx-font-size-3x-large)',
+          } as CSSProperties}
+        ></cx-spinner>
+        <cx-typography variant="body3">
+          Waiting to connect
+        </cx-typography>
+        <cx-button onClick={onCancel}>
+          Cancel
+        </cx-button>
+      </cx-space>
+      {footer}
+    </cx-space>
+  );
+};
+
+export default ConnectingBackground;

package/src/page/Authenticate/index.tsx

@@ -0,0 +1,94 @@
+import { FC, useCallback, useContext, useMemo } from 'react';
+
+import { GlobalConfigContext } from '@/GlobalConfigContext';
+import { useAppDispatch, useAppSelector } from '@/store';
+import {
+  appAuthUrlSelector, authStateSelector, cancelAuth, setUseSession, siteUrlSelector,
+  USE_SESSION,
+} from '@/store/auth/auth.slice';
+
+import AuthenticatePage from './Authenticate';
+import ConnectingBackground from './ConnectingBackground';
+
+type Props = {
+  onCancel: () => void;
+};
+
+const RestoreSession: FC<Props> = ({ onCancel }) => {
+  const dispatch = useAppDispatch();
+  const localStorageSession = localStorage.getItem(USE_SESSION);
+
+  if (localStorageSession) {
+    dispatch(setUseSession(localStorageSession));
+  }
+  
+  return (
+    <ConnectingBackground onCancel={onCancel}>
+      <cx-typography variant="h3">
+        Trying to restore your previous session
+      </cx-typography>
+    </ConnectingBackground>
+  );
+};
+
+const RequestLogin: FC<Props> = ({ onCancel }) => {
+  const siteUrl = useAppSelector(siteUrlSelector);
+  return (
+    <ConnectingBackground onCancel={onCancel}>
+      <cx-typography variant="h3">
+        Requesting login url from {siteUrl}
+      </cx-typography>
+    </ConnectingBackground>
+  );
+};
+
+const WaitForAuthorize: FC<Props> = ({ onCancel }) => {
+  const appAuthUrl = useAppSelector(appAuthUrlSelector);
+  const { pluginInfo } = useContext(GlobalConfigContext);
+
+  return (
+    <ConnectingBackground
+      footer={
+        <>
+          <cx-typography variant="body2">
+            I was not redirected automatically?
+          </cx-typography>
+
+          <a href={appAuthUrl} target="_blank" rel="noopener noreferrer">{appAuthUrl}</a>
+        </>
+      }
+      onCancel={onCancel}
+    >
+      <cx-typography variant="h3">
+        Please authorize the {pluginInfo.pluginName} plugin
+      </cx-typography>
+      <cx-typography variant="body2">
+        You will be automatically redirected to authorize {pluginInfo.pluginName} {pluginInfo.publicApplicationName ? `in ${pluginInfo.publicApplicationName}` : ''}
+      </cx-typography>
+    </ConnectingBackground>
+  );
+};
+
+const Authenticate = () => {
+  const dispatch = useAppDispatch();
+  const authState = useAppSelector(authStateSelector);
+
+  const onCancel = useCallback(() => {
+    dispatch(cancelAuth());
+  }, [dispatch]);
+
+  return useMemo(() => {
+    switch (authState) {
+      case 'unauthenticated':
+        return <AuthenticatePage />;
+      case 'restoreSession':
+        return <RestoreSession onCancel={onCancel} />;
+      case 'requestLogin':
+        return <RequestLogin onCancel={onCancel} />;
+      case 'waitForAuthorise':
+        return <WaitForAuthorize onCancel={onCancel} />;
+    }
+  }, [authState, onCancel]);
+};
+
+export default Authenticate;

package/src/page/Home/Home.styled.ts

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  background-color: var(--cx-color-neutral-0);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  transition: opacity ease-in 0.2s;
+
+  .icon--large {
+    font-size: var(--cx-input-font-size-large);
+  }
+
+  .search-input{
+    &::part(input) {
+      padding-right: var(--cx-spacing-x-small);
+      padding-left: var(--cx-spacing-x-small);
+    }
+  }
+
+  cx-line-clamp {
+    line-height: var(--cx-line-height-small);
+    &::part(content) {
+      line-height: var(--cx-line-height-small);
+    }
+  }
+
+  .format-loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: var(--cx-color-neutral-0);
+    padding: var(--cx-spacing-x-small);
+    border-radius: var(--cx-border-radius-small);
+
+    cx-spinner{
+      --track-width: 0.2rem;
+      font-size: var(--cx-font-size-3x-large);
+    }
+  }
+`;